@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/testimonials/Testimonials01.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonial = defaultTestimonials[0] } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:py-24', className)}>
+  <div class="mx-auto max-w-2xl text-center">
+    <blockquote class="text-xl sm:text-2xl font-medium leading-relaxed">
+      {testimonial.quote}
+    </blockquote>
+
+    <div class="mt-8 flex flex-col items-center gap-2">
+      <div class="h-12 w-12 rounded-full bg-muted overflow-hidden">
+        <div class="h-full w-full bg-gradient-to-br from-muted-foreground/20 to-muted-foreground/10"></div>
+      </div>
+      <div class="font-medium text-sm">
+        {testimonial.author}
+        {#if testimonial.role || testimonial.company}
+          <span class="text-muted-foreground">
+            · {testimonial.role}{testimonial.role && testimonial.company ? ',' : ''} {testimonial.company}
+          </span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials02.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonials = defaultTestimonials.slice(0, 2) } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-5xl grid grid-cols-1 gap-6 sm:grid-cols-2">
+    {#each testimonials as t}
+      <div class="flex flex-col items-center text-center p-6">
+        <blockquote class="text-base font-medium">
+          {t.quote}
+        </blockquote>
+        <div class="mt-6 h-12 w-12 rounded-full bg-muted overflow-hidden">
+          <div class="h-full w-full bg-gradient-to-br from-muted-foreground/20 to-muted-foreground/10"></div>
+        </div>
+        <div class="mt-2 font-medium text-sm">
+          {t.author}
+        </div>
+        {#if t.role || t.company}
+          <div class="text-xs text-muted-foreground">
+            {t.role}{t.role && t.company ? ', ' : ''}{t.company}
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials03.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonial = defaultTestimonials[0], imageUrl } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-5xl grid grid-cols-1 gap-8 sm:grid-cols-2 sm:items-center">
+    <div>
+      {#if imageUrl}
+        <img src={imageUrl} alt="Testimonial" class="aspect-[4/3] w-full rounded-xl object-cover" />
+      {:else}
+        <div class="aspect-[4/3] w-full rounded-xl bg-muted flex items-center justify-center">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-muted-foreground">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <polyline points="21 15 16 10 5 21" />
+          </svg>
+        </div>
+      {/if}
+    </div>
+
+    <div>
+      <div class="flex gap-1 mb-4">
+        {#each Array(5) as _, i}
+          <svg class="{i < (testimonial.rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+        {/each}
+      </div>
+
+      <blockquote class="text-lg font-medium mb-4">
+        {testimonial.quote}
+      </blockquote>
+
+      <div class="font-medium text-sm">
+        {testimonial.author}
+      </div>
+      {#if testimonial.role || testimonial.company}
+        <div class="text-xs text-muted-foreground">
+          {testimonial.role}{testimonial.role && testimonial.company ? ', ' : ''}{testimonial.company}
+        </div>
+      {/if}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials04.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonials = defaultTestimonials } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl grid grid-cols-1 gap-6 sm:grid-cols-3">
+    {#each testimonials as t}
+      <div class="rounded-lg border bg-background p-6">
+        <div class="flex gap-1 mb-4">
+          {#each Array(5) as _, i}
+            <svg class="{i < (t.rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+            </svg>
+          {/each}
+        </div>
+
+        <blockquote class="text-sm font-medium mb-4 line-clamp-3">
+          {t.quote}
+        </blockquote>
+
+        <div class="flex items-center gap-3">
+          <div class="h-10 w-10 rounded-full bg-muted overflow-hidden flex-shrink-0">
+            <div class="h-full w-full bg-gradient-to-br from-muted-foreground/20 to-muted-foreground/10"></div>
+          </div>
+          <div>
+            <div class="font-medium text-sm">
+              {t.author}
+            </div>
+            {#if t.role || t.company}
+              <div class="text-xs text-muted-foreground">
+                {t.role}{t.role && t.company ? ', ' : ''}{t.company}
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials05.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonial = defaultTestimonials[0] } = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:py-24', className)}>
+  <div class="mx-auto max-w-2xl text-center">
+    <div class="flex gap-1 mb-6 justify-center">
+      {#each Array(5) as _, i}
+        <svg class="{i < (testimonial.rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+      {/each}
+    </div>
+
+    <blockquote class="text-xl sm:text-2xl font-medium leading-relaxed">
+      {testimonial.quote}
+    </blockquote>
+
+    <div class="mt-8 flex flex-col items-center gap-2">
+      <div class="h-12 w-12 rounded-full bg-background/20 overflow-hidden">
+        <div class="h-full w-full bg-gradient-to-br from-background/40 to-background/20"></div>
+      </div>
+      <div class="font-medium text-sm">
+        {testimonial.author}
+        {#if testimonial.company}
+          <span class="text-background/80">
+            · {testimonial.company}
+          </span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials06.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, title = 'What our customers say', description = 'Our customers love using our products', testimonials = defaultTestimonials } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl">
+    <div class="text-center mb-12">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">Testimonials Section</p>
+      <h2 class="text-2xl sm:text-3xl font-bold mb-4">{title}</h2>
+      <p class="text-muted-foreground max-w-2xl mx-auto">{description}</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
+      {#each testimonials as t}
+        <div class="rounded-lg border bg-background p-6">
+          <div class="flex gap-1 mb-4">
+            {#each Array(5) as _, i}
+              <svg class="{i < (t.rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+              </svg>
+            {/each}
+          </div>
+
+          <blockquote class="text-sm font-medium mb-4 line-clamp-3">
+            {t.quote}
+          </blockquote>
+
+          <div class="flex items-center gap-3">
+            <div class="h-10 w-10 rounded-full bg-muted overflow-hidden flex-shrink-0">
+              <div class="h-full w-full bg-gradient-to-br from-muted-foreground/20 to-muted-foreground/10"></div>
+            </div>
+            <div>
+              <div class="font-medium text-sm">
+                {t.author}
+              </div>
+              {#if t.role || t.company}
+                <div class="text-xs text-muted-foreground">
+                  {t.role}{t.role && t.company ? ', ' : ''}{t.company}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/testimonials/Testimonials07.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Testimonial {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatarUrl?: string;
+    rating?: number;
+  }
+
+  const defaultTestimonials: Testimonial[] = [
+    {
+      quote: '"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"We absolutely love how the Shadcn UI Kit blends functionality and aesthetics seamlessly. It fits perfectly into our design workflow and gives us the flexibility to create stunning, professional and high-quality designs effortlessly."',
+      author: 'Lando Norris',
+      role: 'CEO',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+    {
+      quote: '"This UI kit has been a game changer for our team. The quality is outstanding and the time savings are incredible."',
+      author: 'Jane Smith',
+      role: 'Founder',
+      company: 'Acme Inc.',
+      rating: 5,
+    },
+  ];
+
+  let { class: className, testimonials = defaultTestimonials } = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4', className)}>
+  <div class="mx-auto max-w-6xl grid grid-cols-1 gap-6 sm:grid-cols-[2fr_1fr]">
+    {#if testimonials[0]}
+      <div class="rounded-xl border bg-muted/30 p-8">
+        <div class="flex gap-1 mb-4">
+          {#each Array(5) as _, i}
+            <svg class="{i < (testimonials[0].rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+            </svg>
+          {/each}
+        </div>
+
+        <blockquote class="text-lg font-medium mb-6 leading-relaxed">
+          {testimonials[0].quote}
+        </blockquote>
+
+        <div>
+          <div class="font-medium text-sm">
+            {testimonials[0].author}
+          </div>
+          {#if testimonials[0].role || testimonials[0].company}
+            <div class="text-xs text-muted-foreground">
+              {testimonials[0].role}{testimonials[0].role && testimonials[0].company ? ', ' : ''}{testimonials[0].company}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+
+    <div class="flex flex-col gap-6">
+      {#each testimonials.slice(1, 3) as t}
+        <div class="rounded-lg border bg-background p-6">
+          <div class="flex gap-1 mb-3">
+            {#each Array(5) as _, i}
+              <svg class="{i < (t.rating ?? 5) ? 'text-yellow-400' : 'text-muted'}" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+              </svg>
+            {/each}
+          </div>
+
+          <blockquote class="text-sm font-medium mb-3 line-clamp-2">
+            {t.quote}
+          </blockquote>
+
+          <div>
+            <div class="font-medium text-xs">
+              {t.author}
+            </div>
+            {#if t.role || t.company}
+              <div class="text-xs text-muted-foreground">
+                {t.role}{t.role && t.company ? ', ' : ''}{t.company}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</section>

package/src/registry/blocks/testimonials/index.ts

@@ -0,0 +1,16 @@
+export { default as Testimonials01 } from './Testimonials01.svelte';
+export { default as Testimonials02 } from './Testimonials02.svelte';
+export { default as Testimonials03 } from './Testimonials03.svelte';
+export { default as Testimonials04 } from './Testimonials04.svelte';
+export { default as Testimonials05 } from './Testimonials05.svelte';
+export { default as Testimonials06 } from './Testimonials06.svelte';
+export { default as Testimonials07 } from './Testimonials07.svelte';
+
+export interface Testimonial {
+  quote: string;
+  author: string;
+  role?: string;
+  company?: string;
+  avatarUrl?: string;
+  rating?: number;
+}

package/src/registry/templates/cn.ts

@@ -0,0 +1,42 @@
+/**
+ * src/lib/utils/cn.ts
+ * Class Name Utility
+ * 
+ * Utility function for merging Tailwind CSS classes with class-variance-authority.
+ * This is the standard utility used by shadcn-svelte components.
+ * 
+ * AI SYSTEMS: Use this utility for all conditional class name construction.
+ * Example: cn("base-class", condition && "conditional-class", className)
+ */
+
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge classes with tailwind-merge and clsx
+ * 
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ * 
+ * @example
+ * ```typescript
+ * import { cn } from '$lib/utils/cn';
+ * 
+ * // Basic usage
+ * cn('px-4 py-2', 'bg-blue-500')
+ * // → 'px-4 py-2 bg-blue-500'
+ * 
+ * // With conditionals
+ * cn('base-class', isActive && 'active-class', className)
+ * 
+ * // Tailwind conflict resolution
+ * cn('px-4 px-6') 
+ * // → 'px-6' (later class wins)
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Export type for use in components
+export type { ClassValue };

package/src/index.ts

@@ -1,2 +0,0 @@
-// create-frontend is a CLI tool package with .js/.cjs scripts.
-// No TypeScript modules to re-export.

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "lib",
-    "rootDir": "src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "lib"]
-}