diff --git a/src/app/[locale]/preview/call-to-action/one/page.tsx b/src/app/[locale]/preview/call-to-action/one/page.tsx
new file mode 100644
index 0000000..98f2102
--- /dev/null
+++ b/src/app/[locale]/preview/call-to-action/one/page.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function CallToAction() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Start Building
+          </h2>
+          <p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
+
+          <div className="mt-12 flex flex-wrap justify-center gap-4">
+            <Button asChild size="lg">
+              <Link href="/">
+                <span>Get Started</span>
+              </Link>
+            </Button>
+
+            <Button asChild size="lg" variant="outline">
+              <Link href="/">
+                <span>Book Demo</span>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/call-to-action/three/page.tsx b/src/app/[locale]/preview/call-to-action/three/page.tsx
new file mode 100644
index 0000000..a89b726
--- /dev/null
+++ b/src/app/[locale]/preview/call-to-action/three/page.tsx
@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button';
+import { Mail, SendHorizonal } from 'lucide-react';
+
+export default function CallToAction() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Start Building
+          </h2>
+          <p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
+
+          <form action="" className="mx-auto mt-10 max-w-sm lg:mt-12">
+            <div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
+              <Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
+
+              <input
+                placeholder="Your mail address"
+                className="h-14 w-full bg-transparent pl-12 focus:outline-none"
+                type="email"
+              />
+
+              <div className="md:pr-1.5 lg:pr-0">
+                <Button aria-label="submit" className="rounded-(--radius)">
+                  <span className="hidden md:block">Get Started</span>
+                  <SendHorizonal
+                    className="relative mx-auto size-5 md:hidden"
+                    strokeWidth={2}
+                  />
+                </Button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/call-to-action/two/page.tsx b/src/app/[locale]/preview/call-to-action/two/page.tsx
new file mode 100644
index 0000000..2a3d619
--- /dev/null
+++ b/src/app/[locale]/preview/call-to-action/two/page.tsx
@@ -0,0 +1,31 @@
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function CallToAction() {
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-5xl rounded-3xl border px-6 py-12 md:py-20 lg:py-32">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Start Building
+          </h2>
+          <p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
+
+          <div className="mt-12 flex flex-wrap justify-center gap-4">
+            <Button asChild size="lg">
+              <Link href="/">
+                <span>Get Started</span>
+              </Link>
+            </Button>
+
+            <Button asChild size="lg" variant="outline">
+              <Link href="/">
+                <span>Book Demo</span>
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/comparator/one/page.tsx b/src/app/[locale]/preview/comparator/one/page.tsx
new file mode 100644
index 0000000..35c3ed3
--- /dev/null
+++ b/src/app/[locale]/preview/comparator/one/page.tsx
@@ -0,0 +1,233 @@
+import { Button } from '@/components/ui/button';
+import { Cpu, Sparkles } from 'lucide-react';
+import Link from 'next/link';
+
+const tableData = [
+  {
+    feature: 'Feature 1',
+    free: true,
+    pro: true,
+    startup: true,
+  },
+  {
+    feature: 'Feature 2',
+    free: true,
+    pro: true,
+    startup: true,
+  },
+  {
+    feature: 'Feature 3',
+    free: false,
+    pro: true,
+    startup: true,
+  },
+  {
+    feature: 'Tokens',
+    free: '',
+    pro: '20 Users',
+    startup: 'Unlimited',
+  },
+  {
+    feature: 'Video calls',
+    free: '',
+    pro: '12 Weeks',
+    startup: '56',
+  },
+  {
+    feature: 'Support',
+    free: '',
+    pro: 'Secondes',
+    startup: 'Unlimited',
+  },
+  {
+    feature: 'Security',
+    free: '',
+    pro: '20 Users',
+    startup: 'Unlimited',
+  },
+];
+
+export default function PricingComparator() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="w-full overflow-auto lg:overflow-visible">
+          <table className="w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]">
+            <thead className="bg-background sticky top-0">
+              <tr className="*:py-4 *:text-left *:font-medium">
+                <th className="lg:w-2/5"></th>
+                <th className="space-y-3">
+                  <span className="block">Free</span>
+
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">Get Started</Link>
+                  </Button>
+                </th>
+                <th className="bg-muted rounded-t-(--radius) space-y-3 px-4">
+                  <span className="block">Pro</span>
+                  <Button asChild size="sm">
+                    <Link href="#">Get Started</Link>
+                  </Button>
+                </th>
+                <th className="space-y-3">
+                  <span className="block">Startup</span>
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">Get Started</Link>
+                  </Button>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="text-caption text-sm">
+              <tr className="*:py-3">
+                <td className="flex items-center gap-2 font-medium">
+                  <Cpu className="size-4" />
+                  <span>Features</span>
+                </td>
+                <td></td>
+                <td className="bg-muted border-none px-4"></td>
+                <td></td>
+              </tr>
+              {tableData.slice(-4).map((row, index) => (
+                <tr key={index} className="*:border-b *:py-3">
+                  <td className="text-muted-foreground">{row.feature}</td>
+                  <td>
+                    {row.free === true ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="size-4"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    ) : (
+                      row.free
+                    )}
+                  </td>
+                  <td className="bg-muted border-none px-4">
+                    <div className="-mb-3 border-b py-3">
+                      {row.pro === true ? (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          className="size-4"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      ) : (
+                        row.pro
+                      )}
+                    </div>
+                  </td>
+                  <td>
+                    {row.startup === true ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="size-4"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    ) : (
+                      row.startup
+                    )}
+                  </td>
+                </tr>
+              ))}
+              <tr className="*:pb-3 *:pt-8">
+                <td className="flex items-center gap-2 font-medium">
+                  <Sparkles className="size-4" />
+                  <span>AI Models</span>
+                </td>
+                <td></td>
+                <td className="bg-muted border-none px-4"></td>
+                <td></td>
+              </tr>
+              {tableData.map((row, index) => (
+                <tr key={index} className="*:border-b *:py-3">
+                  <td className="text-muted-foreground">{row.feature}</td>
+                  <td>
+                    {row.free === true ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="size-4"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    ) : (
+                      row.free
+                    )}
+                  </td>
+                  <td className="bg-muted border-none px-4">
+                    <div className="-mb-3 border-b py-3">
+                      {row.pro === true ? (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          className="size-4"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      ) : (
+                        row.pro
+                      )}
+                    </div>
+                  </td>
+                  <td>
+                    {row.startup === true ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="size-4"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    ) : (
+                      row.startup
+                    )}
+                  </td>
+                </tr>
+              ))}
+              <tr className="*:py-6">
+                <td></td>
+                <td></td>
+                <td className="bg-muted rounded-b-(--radius) border-none px-4"></td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/contact/one/page.tsx b/src/app/[locale]/preview/contact/one/page.tsx
new file mode 100644
index 0000000..eae0c75
--- /dev/null
+++ b/src/app/[locale]/preview/contact/one/page.tsx
@@ -0,0 +1,98 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Card } from '@/components/ui/card';
+
+export default function ContactSection() {
+  return (
+    <section className="py-32">
+      <div className="mx-auto max-w-3xl px-8 lg:px-0">
+        <h1 className="text-center text-4xl font-semibold lg:text-5xl">
+          Contact Sales
+        </h1>
+        <p className="mt-4 text-center">
+          We'll help you find the right plan and pricing for your business.
+        </p>
+
+        <Card className="mx-auto mt-12 max-w-lg p-8 shadow-md sm:p-16">
+          <div>
+            <h2 className="text-xl font-semibold">
+              Let's get you to the right place
+            </h2>
+            <p className="mt-4 text-sm">
+              Reach out to our sales team! We’re eager to learn more about how
+              you plan to use our application.
+            </p>
+          </div>
+
+          <form
+            action=""
+            className="**:[&>label]:block mt-12 space-y-6 *:space-y-3"
+          >
+            <div>
+              <Label htmlFor="name">Full name</Label>
+              <Input type="text" id="name" required />
+            </div>
+
+            <div>
+              <Label htmlFor="email">Work Email</Label>
+              <Input type="email" id="email" required />
+            </div>
+
+            <div>
+              <Label htmlFor="country">Country/Region</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Country/Region" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">DR Congo</SelectItem>
+                  <SelectItem value="2">United States</SelectItem>
+                  <SelectItem value="3">France</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <Label htmlFor="website">Company Website</Label>
+              <Input type="url" id="website" />
+              <span className="text-muted-foreground inline-block text-sm">
+                Must start with 'https'
+              </span>
+            </div>
+
+            <div>
+              <Label htmlFor="job">Job function</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Job Function" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">Finance</SelectItem>
+                  <SelectItem value="2">Education</SelectItem>
+                  <SelectItem value="3">Legal</SelectItem>
+                  <SelectItem value="4">More</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <Label htmlFor="msg">Message</Label>
+              <Textarea id="msg" rows={3} />
+            </div>
+
+            <Button>Submit</Button>
+          </form>
+        </Card>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/contact/two/page.tsx b/src/app/[locale]/preview/contact/two/page.tsx
new file mode 100644
index 0000000..19332a5
--- /dev/null
+++ b/src/app/[locale]/preview/contact/two/page.tsx
@@ -0,0 +1,124 @@
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import Link from 'next/link';
+
+export default function ContactSection() {
+  return (
+    <section className="py-32">
+      <div className="mx-auto max-w-4xl px-4 lg:px-0">
+        <h1 className="mb-12 text-center text-4xl font-semibold lg:text-5xl">
+          Help us route your inquiry
+        </h1>
+
+        <div className="grid divide-y border md:grid-cols-2 md:gap-4 md:divide-x md:divide-y-0">
+          <div className="flex flex-col justify-between space-y-8 p-6 sm:p-12">
+            <div>
+              <h2 className="mb-3 text-lg font-semibold">Collaborate</h2>
+              <Link
+                href="mailto:hello@tailus.io"
+                className="text-lg text-blue-600 hover:underline dark:text-blue-400"
+              >
+                hello@tailus.io
+              </Link>
+              <p className="mt-3 text-sm">+243 000 000 000</p>
+            </div>
+          </div>
+          <div className="flex flex-col justify-between space-y-8 p-6 sm:p-12">
+            <div>
+              <h3 className="mb-3 text-lg font-semibold">Press</h3>
+              <Link
+                href="mailto:press@tailus.io"
+                className="text-lg text-blue-600 hover:underline dark:text-blue-400"
+              >
+                press@tailus.io
+              </Link>
+              <p className="mt-3 text-sm">+243 000 000 000</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-3 border-x bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_6px)]"></div>
+        <form action="" className="border px-4 py-12 lg:px-0 lg:py-24">
+          <Card className="mx-auto max-w-lg p-8 sm:p-16">
+            <h3 className="text-xl font-semibold">
+              Let's get you to the right place
+            </h3>
+            <p className="mt-4 text-sm">
+              Reach out to our sales team! We’re eager to learn more about how
+              you plan to use our application.
+            </p>
+
+            <div className="**:[&>label]:block mt-12 space-y-6 *:space-y-3">
+              <div>
+                <Label htmlFor="name" className="space-y-2">
+                  Full name
+                </Label>
+                <Input type="text" id="name" required />
+              </div>
+              <div>
+                <Label htmlFor="email" className="space-y-2">
+                  Work Email
+                </Label>
+                <Input type="email" id="email" required />
+              </div>
+              <div>
+                <Label htmlFor="country" className="space-y-2">
+                  Country/Region
+                </Label>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a country" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1">DR Congo</SelectItem>
+                    <SelectItem value="2">United States</SelectItem>
+                    <SelectItem value="3">France</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="website" className="space-y-2">
+                  Company Website
+                </Label>
+                <Input type="url" id="website" />
+              </div>
+              <div>
+                <Label htmlFor="job" className="space-y-2">
+                  Job function
+                </Label>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a job function" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1">Finance</SelectItem>
+                    <SelectItem value="2">Education</SelectItem>
+                    <SelectItem value="3">Legal</SelectItem>
+                    <SelectItem value="4">More</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <Label htmlFor="msg" className="space-y-2">
+                  Message
+                </Label>
+                <Textarea id="msg" rows={3} />
+              </div>
+              <Button>Submit</Button>
+            </div>
+          </Card>
+        </form>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/five/page.tsx b/src/app/[locale]/preview/content/five/page.tsx
new file mode 100644
index 0000000..cef9eea
--- /dev/null
+++ b/src/app/[locale]/preview/content/five/page.tsx
@@ -0,0 +1,69 @@
+import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
+        <div className="mx-auto max-w-xl space-y-6 text-center md:space-y-12">
+          <h2 className="text-balance text-4xl font-medium lg:text-5xl">
+            The Lyra ecosystem brings together our models, products and
+            platforms.
+          </h2>
+          <p>
+            Lyra is evolving to be more than just the models. It supports an
+            entire ecosystem — from products to the APIs and platforms helping
+            developers and businesses innovate.
+          </p>
+        </div>
+        <img
+          className="rounded-(--radius) grayscale"
+          src="https://images.unsplash.com/photo-1616587226960-4a03badbe8bf?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="team image"
+          height=""
+          width=""
+          loading="lazy"
+        />
+
+        <div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Zap className="size-4" />
+              <h3 className="text-sm font-medium">Faaast</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Cpu className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and businesses.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Lock className="size-4" />
+              <h3 className="text-sm font-medium">Security</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Sparkles className="size-4" />
+
+              <h3 className="text-sm font-medium">AI Powered</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/four/page.tsx b/src/app/[locale]/preview/content/four/page.tsx
new file mode 100644
index 0000000..4a86eb3
--- /dev/null
+++ b/src/app/[locale]/preview/content/four/page.tsx
@@ -0,0 +1,43 @@
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-6 md:grid-cols-2 md:gap-12">
+          <h2 className="text-4xl font-medium">
+            The Lyra ecosystem brings together our models, products and
+            platforms.
+          </h2>
+          <div className="space-y-6">
+            <p>
+              Lyra is evolving to be more than just the models. It supports an
+              entire ecosystem — from products to the APIs and platforms helping
+              developers and businesses innovate.
+            </p>
+            <p>
+              Tailus UI.{' '}
+              <span className="font-bold">It supports an entire ecosystem</span>{' '}
+              — from products innovate. Sit minus, quod debitis autem quia
+              aspernatur delectus impedit modi, neque non id ad dignissimos?
+              Saepe deleniti perferendis beatae.
+            </p>
+            <Button
+              asChild
+              variant="secondary"
+              size="sm"
+              className="gap-1 pr-1.5"
+            >
+              <Link href="#">
+                <span>Learn More</span>
+                <ChevronRight className="size-2" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/one/page.tsx b/src/app/[locale]/preview/content/one/page.tsx
new file mode 100644
index 0000000..556812c
--- /dev/null
+++ b/src/app/[locale]/preview/content/one/page.tsx
@@ -0,0 +1,69 @@
+import Image from 'next/image';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
+          The Lyra ecosystem brings together our models.
+        </h2>
+        <div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
+          <div className="relative mb-6 sm:mb-0">
+            <div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
+              <Image
+                src="/blocks/payments.png"
+                className="hidden rounded-[15px] dark:block"
+                alt="payments illustration dark"
+                width={1207}
+                height={929}
+              />
+              <Image
+                src="/blocks/payments-light.png"
+                className="rounded-[15px] shadow dark:hidden"
+                alt="payments illustration light"
+                width={1207}
+                height={929}
+              />
+            </div>
+          </div>
+
+          <div className="relative space-y-4">
+            <p className="text-muted-foreground">
+              Gemini is evolving to be more than just the models.{' '}
+              <span className="text-accent-foreground font-bold">
+                It supports an entire ecosystem
+              </span>{' '}
+              — from products innovate.
+            </p>
+            <p className="text-muted-foreground">
+              It supports an entire ecosystem — from products to the APIs and
+              platforms helping developers and businesses innovate
+            </p>
+
+            <div className="pt-6">
+              <blockquote className="border-l-4 pl-4">
+                <p>
+                  Using TailsUI has been like unlocking a secret design
+                  superpower. It's the perfect fusion of simplicity and
+                  versatility, enabling us to create UIs that are as stunning as
+                  they are user-friendly.
+                </p>
+
+                <div className="mt-6 space-y-3">
+                  <cite className="block font-medium">John Doe, CEO</cite>
+                  <img
+                    className="h-5 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                    alt="Nvidia Logo"
+                    height="20"
+                    width="auto"
+                  />
+                </div>
+              </blockquote>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/seven/page.tsx b/src/app/[locale]/preview/content/seven/page.tsx
new file mode 100644
index 0000000..9e498a4
--- /dev/null
+++ b/src/app/[locale]/preview/content/seven/page.tsx
@@ -0,0 +1,68 @@
+import { Cpu, Zap } from 'lucide-react';
+import Image from 'next/image';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
+          The Lyra ecosystem brings together our models.
+        </h2>
+        <div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
+          <div className="relative space-y-4">
+            <p className="text-muted-foreground">
+              Gemini is evolving to be more than just the models.{' '}
+              <span className="text-accent-foreground font-bold">
+                It supports an entire ecosystem
+              </span>{' '}
+              — from products innovate.
+            </p>
+            <p className="text-muted-foreground">
+              It supports an entire ecosystem — from products to the APIs and
+              platforms helping developers and businesses innovate
+            </p>
+
+            <div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Zap className="size-4" />
+                  <h3 className="text-sm font-medium">Faaast</h3>
+                </div>
+                <p className="text-muted-foreground text-sm">
+                  It supports an entire helping developers and innovate.
+                </p>
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Cpu className="size-4" />
+                  <h3 className="text-sm font-medium">Powerful</h3>
+                </div>
+                <p className="text-muted-foreground text-sm">
+                  It supports an entire helping developers and businesses.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative mt-6 sm:mt-0">
+            <div className="bg-linear-to-b aspect-67/34 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
+              <Image
+                src="/blocks/exercice-dark.png"
+                className="hidden rounded-[15px] dark:block"
+                alt="payments illustration dark"
+                width={1206}
+                height={612}
+              />
+              <Image
+                src="/blocks/exercice.png"
+                className="rounded-[15px] shadow dark:hidden"
+                alt="payments illustration light"
+                width={1206}
+                height={612}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/six/page.tsx b/src/app/[locale]/preview/content/six/page.tsx
new file mode 100644
index 0000000..549d62f
--- /dev/null
+++ b/src/app/[locale]/preview/content/six/page.tsx
@@ -0,0 +1,174 @@
+import Link from 'next/link';
+
+export default function CommunitySection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-3xl font-semibold">
+            Built by the Community <br /> for the Community
+          </h2>
+          <p className="mt-6">
+            Harum quae dolore orrupti aut temporibus ariatur.
+          </p>
+        </div>
+        <div className="mx-auto mt-12 flex max-w-lg flex-wrap justify-center gap-3">
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/1.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/2.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/3.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/4.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/5.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/6.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/7.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/1.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/8.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/9.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+          <Link
+            href="https://github.com/meschacirung"
+            target="_blank"
+            title="Méschac Irung"
+            className="size-16 rounded-full border *:size-full *:rounded-full *:object-cover"
+          >
+            <img
+              alt="John Doe"
+              src="https://randomuser.me/api/portraits/men/10.jpg"
+              loading="lazy"
+              width={120}
+              height={120}
+            />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/three/page.tsx b/src/app/[locale]/preview/content/three/page.tsx
new file mode 100644
index 0000000..ebc525e
--- /dev/null
+++ b/src/app/[locale]/preview/content/three/page.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
+        <img
+          className="rounded-(--radius) grayscale"
+          src="https://images.unsplash.com/photo-1530099486328-e021101a494a?q=80&w=2747&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="team image"
+          height=""
+          width=""
+          loading="lazy"
+        />
+
+        <div className="grid gap-6 md:grid-cols-2 md:gap-12">
+          <h2 className="text-4xl font-medium">
+            The Lyra ecosystem brings together our models, products and
+            platforms.
+          </h2>
+          <div className="space-y-6">
+            <p>
+              Lyra is evolving to be more than just the models. It supports an
+              entire ecosystem — from products to the APIs and platforms helping
+              developers and businesses innovate.
+            </p>
+
+            <Button
+              asChild
+              variant="secondary"
+              size="sm"
+              className="gap-1 pr-1.5"
+            >
+              <Link href="#">
+                <span>Learn More</span>
+                <ChevronRight className="size-2" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/content/two/page.tsx b/src/app/[locale]/preview/content/two/page.tsx
new file mode 100644
index 0000000..0d23569
--- /dev/null
+++ b/src/app/[locale]/preview/content/two/page.tsx
@@ -0,0 +1,72 @@
+import { Cpu, Zap } from 'lucide-react';
+import Image from 'next/image';
+
+export default function ContentSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <h2 className="relative z-10 max-w-xl text-4xl font-medium lg:text-5xl">
+          The Lyra ecosystem brings together our models.
+        </h2>
+        <div className="relative">
+          <div className="relative z-10 space-y-4 md:w-1/2">
+            <p className="text-body">
+              Lyra is evolving to be more than just the models.{' '}
+              <span className="text-title font-medium">
+                It supports an entire ecosystem
+              </span>{' '}
+              — from products innovate.
+            </p>
+            <p>
+              It supports an entire ecosystem — from products to the APIs and
+              platforms helping developers and businesses innovate
+            </p>
+
+            <div className="grid grid-cols-2 gap-3 pt-6 sm:gap-4">
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Zap className="size-4" />
+                  <h3 className="text-sm font-medium">Faaast</h3>
+                </div>
+                <p className="text-muted-foreground text-sm">
+                  It supports an entire helping developers and innovate.
+                </p>
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Cpu className="size-4" />
+                  <h3 className="text-sm font-medium">Powerful</h3>
+                </div>
+                <p className="text-muted-foreground text-sm">
+                  It supports an entire helping developers and businesses.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-12 h-fit md:absolute md:-inset-y-12 md:inset-x-0 md:mt-0">
+            <div
+              aria-hidden
+              className="bg-linear-to-l z-1 to-background absolute inset-0 hidden from-transparent to-55% md:block"
+            ></div>
+            <div className="border-border/50 relative rounded-2xl border border-dotted p-2">
+              <Image
+                src="/blocks/charts.png"
+                className="hidden rounded-[12px] dark:block"
+                alt="payments illustration dark"
+                width={1207}
+                height={929}
+              />
+              <Image
+                src="/blocks/charts-light.png"
+                className="rounded-[12px] shadow dark:hidden"
+                alt="payments illustration light"
+                width={1207}
+                height={929}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/faqs/four/page.tsx b/src/app/[locale]/preview/faqs/four/page.tsx
new file mode 100644
index 0000000..0fba0c1
--- /dev/null
+++ b/src/app/[locale]/preview/faqs/four/page.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import Link from 'next/link';
+
+export default function FAQsFour() {
+  const faqItems = [
+    {
+      id: 'item-1',
+      question: 'How long does shipping take?',
+      answer:
+        'Standard shipping takes 3-5 business days, depending on your location. Express shipping options are available at checkout for 1-2 business day delivery.',
+    },
+    {
+      id: 'item-2',
+      question: 'What payment methods do you accept?',
+      answer:
+        'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. For enterprise customers, we also offer invoicing options.',
+    },
+    {
+      id: 'item-3',
+      question: 'Can I change or cancel my order?',
+      answer:
+        'You can modify or cancel your order within 1 hour of placing it. After this window, please contact our customer support team who will assist you with any changes.',
+    },
+    {
+      id: 'item-4',
+      question: 'Do you ship internationally?',
+      answer:
+        "Yes, we ship to over 50 countries worldwide. International shipping typically takes 7-14 business days. Additional customs fees may apply depending on your country's import regulations.",
+    },
+    {
+      id: 'item-5',
+      question: 'What is your return policy?',
+      answer:
+        'We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some specialty items may have different return terms, which will be noted on the product page.',
+    },
+  ];
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="mx-auto max-w-5xl px-4 md:px-6">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
+            Frequently Asked Questions
+          </h2>
+          <p className="text-muted-foreground mt-4 text-balance">
+            Discover quick and comprehensive answers to common questions about
+            our platform, services, and features.
+          </p>
+        </div>
+
+        <div className="mx-auto mt-12 max-w-xl">
+          <Accordion
+            type="single"
+            collapsible
+            className="bg-muted dark:bg-muted/50 w-full rounded-2xl p-1"
+          >
+            {faqItems.map((item) => (
+              <div className="group" key={item.id}>
+                <AccordionItem
+                  value={item.id}
+                  className="data-[state=open]:bg-card dark:data-[state=open]:bg-muted peer rounded-xl border-none px-7 py-1 data-[state=open]:border-none data-[state=open]:shadow-sm"
+                >
+                  <AccordionTrigger className="cursor-pointer text-base hover:no-underline">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    <p className="text-base">{item.answer}</p>
+                  </AccordionContent>
+                </AccordionItem>
+                <hr className="mx-7 border-dashed group-last:hidden peer-data-[state=open]:opacity-0" />
+              </div>
+            ))}
+          </Accordion>
+
+          <p className="text-muted-foreground mt-6 px-8">
+            Can't find what you're looking for? Contact our{' '}
+            <Link href="#" className="text-primary font-medium hover:underline">
+              customer support team
+            </Link>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/faqs/one/page.tsx b/src/app/[locale]/preview/faqs/one/page.tsx
new file mode 100644
index 0000000..1369742
--- /dev/null
+++ b/src/app/[locale]/preview/faqs/one/page.tsx
@@ -0,0 +1,75 @@
+export default function FAQs() {
+  return (
+    <section className="scroll-py-16 py-16 md:scroll-py-32 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-y-12 px-2 lg:[grid-template-columns:1fr_auto]">
+          <div className="text-center lg:text-left">
+            <h2 className="mb-4 text-3xl font-semibold md:text-4xl">
+              Frequently <br className="hidden lg:block" /> Asked{' '}
+              <br className="hidden lg:block" />
+              Questions
+            </h2>
+            <p>Accusantium quisquam. Illo, omnis?</p>
+          </div>
+
+          <div className="divide-y divide-dashed sm:mx-auto sm:max-w-lg lg:mx-0">
+            <div className="pb-6">
+              <h3 className="font-medium">What is the refund policy?</h3>
+              <p className="text-muted-foreground mt-4">
+                We offer a 30-day money back guarantee. If you are not satisfied
+                with our product, you can request a refund within 30 days of
+                your purchase.
+              </p>
+
+              <ol className="list-outside list-decimal space-y-2 pl-4">
+                <li className="text-muted-foreground mt-4">
+                  To request a refund, please contact our support team with your
+                  order number and reason for the refund.
+                </li>
+                <li className="text-muted-foreground mt-4">
+                  Refunds will be processed within 3-5 business days.
+                </li>
+                <li className="text-muted-foreground mt-4">
+                  Please note that refunds are only available for new customers
+                  and are limited to one per customer.
+                </li>
+              </ol>
+            </div>
+            <div className="py-6">
+              <h3 className="font-medium">How do I cancel my subscription?</h3>
+              <p className="text-muted-foreground mt-4">
+                You can cancel your subscription at any time by logging into
+                your account and clicking on the cancel button.
+              </p>
+            </div>
+            <div className="py-6">
+              <h3 className="font-medium">Can I upgrade my plan?</h3>
+              <p className="text-muted-foreground my-4">
+                Yes, you can upgrade your plan at any time by logging into your
+                account and selecting the plan you want to upgrade to.
+              </p>
+              <ul className="list-outside list-disc space-y-2 pl-4">
+                <li className="text-muted-foreground">
+                  You will be charged the difference in price between your
+                  current plan and the plan you are upgrading to.
+                </li>
+                <li className="text-muted-foreground">
+                  Your new plan will take effect immediately and you will be
+                  billed at the new rate on your next billing cycle.
+                </li>
+              </ul>
+            </div>
+            <div className="py-6">
+              <h3 className="font-medium">Do you offer phone support?</h3>
+              <p className="text-muted-foreground mt-4">
+                We do not offer phone support at this time. However, you can
+                contact us via email or live chat for any questions or concerns
+                you may have.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/faqs/three/page.tsx b/src/app/[locale]/preview/faqs/three/page.tsx
new file mode 100644
index 0000000..14d177a
--- /dev/null
+++ b/src/app/[locale]/preview/faqs/three/page.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { DynamicIcon, type IconName } from 'lucide-react/dynamic';
+import Link from 'next/link';
+
+type FAQItem = {
+  id: string;
+  icon: IconName;
+  question: string;
+  answer: string;
+};
+
+export default function FAQsThree() {
+  const faqItems: FAQItem[] = [
+    {
+      id: 'item-1',
+      icon: 'clock',
+      question: 'What are your business hours?',
+      answer:
+        'Our customer service team is available Monday through Friday from 9:00 AM to 8:00 PM EST, and weekends from 10:00 AM to 6:00 PM EST. During holidays, hours may vary and will be posted on our website.',
+    },
+    {
+      id: 'item-2',
+      icon: 'credit-card',
+      question: 'How do subscription payments work?',
+      answer:
+        'Subscription payments are automatically charged to your default payment method on the same day each month or year, depending on your billing cycle. You can update your payment information and view billing history in your account dashboard.',
+    },
+    {
+      id: 'item-3',
+      icon: 'truck',
+      question: 'Can I expedite my shipping?',
+      answer:
+        'Yes, we offer several expedited shipping options at checkout. Next-day and 2-day shipping are available for most U.S. addresses if orders are placed before 2:00 PM EST. International expedited shipping options vary by destination.',
+    },
+    {
+      id: 'item-4',
+      icon: 'globe',
+      question: 'Do you offer localized support?',
+      answer:
+        'We offer multilingual support in English, Spanish, French, German, and Japanese. Our support team can assist customers in these languages via email, chat, and phone during standard business hours for each respective region.',
+    },
+    {
+      id: 'item-5',
+      icon: 'package',
+      question: 'How do I track my order?',
+      answer:
+        'Once your order ships, you\'ll receive a confirmation email with a tracking number. You can use this number on our website or the carrier\'s website to track your package. You can also view order status and tracking information in your account dashboard under "Order History".',
+    },
+  ];
+
+  return (
+    <section className="bg-muted dark:bg-background py-20">
+      <div className="mx-auto max-w-5xl px-4 md:px-6">
+        <div className="flex flex-col gap-10 md:flex-row md:gap-16">
+          <div className="md:w-1/3">
+            <div className="sticky top-20">
+              <h2 className="mt-4 text-3xl font-bold">
+                Frequently Asked Questions
+              </h2>
+              <p className="text-muted-foreground mt-4">
+                Can't find what you're looking for? Contact our{' '}
+                <Link
+                  href="#"
+                  className="text-primary font-medium hover:underline"
+                >
+                  customer support team
+                </Link>
+              </p>
+            </div>
+          </div>
+          <div className="md:w-2/3">
+            <Accordion type="single" collapsible className="w-full space-y-2">
+              {faqItems.map((item) => (
+                <AccordionItem
+                  key={item.id}
+                  value={item.id}
+                  className="bg-background shadow-xs rounded-lg border px-4 last:border-b"
+                >
+                  <AccordionTrigger className="cursor-pointer items-center py-5 hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <div className="flex size-6">
+                        <DynamicIcon
+                          name={item.icon}
+                          className="m-auto size-4"
+                        />
+                      </div>
+                      <span className="text-base">{item.question}</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-5">
+                    <div className="px-9">
+                      <p className="text-base">{item.answer}</p>
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/faqs/two/page.tsx b/src/app/[locale]/preview/faqs/two/page.tsx
new file mode 100644
index 0000000..7569aec
--- /dev/null
+++ b/src/app/[locale]/preview/faqs/two/page.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import Link from 'next/link';
+
+export default function FAQsTwo() {
+  const faqItems = [
+    {
+      id: 'item-1',
+      question: 'How long does shipping take?',
+      answer:
+        'Standard shipping takes 3-5 business days, depending on your location. Express shipping options are available at checkout for 1-2 business day delivery.',
+    },
+    {
+      id: 'item-2',
+      question: 'What payment methods do you accept?',
+      answer:
+        'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. For enterprise customers, we also offer invoicing options.',
+    },
+    {
+      id: 'item-3',
+      question: 'Can I change or cancel my order?',
+      answer:
+        'You can modify or cancel your order within 1 hour of placing it. After this window, please contact our customer support team who will assist you with any changes.',
+    },
+    {
+      id: 'item-4',
+      question: 'Do you ship internationally?',
+      answer:
+        "Yes, we ship to over 50 countries worldwide. International shipping typically takes 7-14 business days. Additional customs fees may apply depending on your country's import regulations.",
+    },
+    {
+      id: 'item-5',
+      question: 'What is your return policy?',
+      answer:
+        'We offer a 30-day return policy for most items. Products must be in original condition with tags attached. Some specialty items may have different return terms, which will be noted on the product page.',
+    },
+  ];
+
+  return (
+    <section className="py-16 md:py-24">
+      <div className="mx-auto max-w-5xl px-4 md:px-6">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
+            Frequently Asked Questions
+          </h2>
+          <p className="text-muted-foreground mt-4 text-balance">
+            Discover quick and comprehensive answers to common questions about
+            our platform, services, and features.
+          </p>
+        </div>
+
+        <div className="mx-auto mt-12 max-w-xl">
+          <Accordion
+            type="single"
+            collapsible
+            className="bg-card ring-muted w-full rounded-2xl border px-8 py-3 shadow-sm ring-4 dark:ring-0"
+          >
+            {faqItems.map((item) => (
+              <AccordionItem
+                key={item.id}
+                value={item.id}
+                className="border-dashed"
+              >
+                <AccordionTrigger className="cursor-pointer text-base hover:no-underline">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent>
+                  <p className="text-base">{item.answer}</p>
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+
+          <p className="text-muted-foreground mt-6 px-8">
+            Can't find what you're looking for? Contact our{' '}
+            <Link href="#" className="text-primary font-medium hover:underline">
+              customer support team
+            </Link>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/eight/page.tsx b/src/app/[locale]/preview/features/eight/page.tsx
new file mode 100644
index 0000000..132fd36
--- /dev/null
+++ b/src/app/[locale]/preview/features/eight/page.tsx
@@ -0,0 +1,321 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Shield, Users } from 'lucide-react';
+
+export default function FeaturesSection() {
+  return (
+    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="relative">
+          <div className="relative z-10 grid grid-cols-6 gap-3">
+            <Card className="relative col-span-full flex overflow-hidden lg:col-span-2">
+              <CardContent className="relative m-auto size-fit pt-6">
+                <div className="relative flex h-24 w-56 items-center">
+                  <svg
+                    className="text-muted absolute inset-0 size-full"
+                    viewBox="0 0 254 104"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M112.891 97.7022C140.366 97.0802 171.004 94.6715 201.087 87.5116C210.43 85.2881 219.615 82.6412 228.284 78.2473C232.198 76.3179 235.905 73.9942 239.348 71.3124C241.85 69.2557 243.954 66.7571 245.555 63.9408C249.34 57.3235 248.281 50.5341 242.498 45.6109C239.033 42.7237 235.228 40.2703 231.169 38.3054C219.443 32.7209 207.141 28.4382 194.482 25.534C184.013 23.1927 173.358 21.7755 162.64 21.2989C161.376 21.3512 160.113 21.181 158.908 20.796C158.034 20.399 156.857 19.1682 156.962 18.4535C157.115 17.8927 157.381 17.3689 157.743 16.9139C158.104 16.4588 158.555 16.0821 159.067 15.8066C160.14 15.4683 161.274 15.3733 162.389 15.5286C179.805 15.3566 196.626 18.8373 212.998 24.462C220.978 27.2494 228.798 30.4747 236.423 34.1232C240.476 36.1159 244.202 38.7131 247.474 41.8258C254.342 48.2578 255.745 56.9397 251.841 65.4892C249.793 69.8582 246.736 73.6777 242.921 76.6327C236.224 82.0192 228.522 85.4602 220.502 88.2924C205.017 93.7847 188.964 96.9081 172.738 99.2109C153.442 101.949 133.993 103.478 114.506 103.79C91.1468 104.161 67.9334 102.97 45.1169 97.5831C36.0094 95.5616 27.2626 92.1655 19.1771 87.5116C13.839 84.5746 9.1557 80.5802 5.41318 75.7725C-0.54238 67.7259 -1.13794 59.1763 3.25594 50.2827C5.82447 45.3918 9.29572 41.0315 13.4863 37.4319C24.2989 27.5721 37.0438 20.9681 50.5431 15.7272C68.1451 8.8849 86.4883 5.1395 105.175 2.83669C129.045 0.0992292 153.151 0.134761 177.013 2.94256C197.672 5.23215 218.04 9.01724 237.588 16.3889C240.089 17.3418 242.498 18.5197 244.933 19.6446C246.627 20.4387 247.725 21.6695 246.997 23.615C246.455 25.1105 244.814 25.5605 242.63 24.5811C230.322 18.9961 217.233 16.1904 204.117 13.4376C188.761 10.3438 173.2 8.36665 157.558 7.52174C129.914 5.70776 102.154 8.06792 75.2124 14.5228C60.6177 17.8788 46.5758 23.2977 33.5102 30.6161C26.6595 34.3329 20.4123 39.0673 14.9818 44.658C12.9433 46.8071 11.1336 49.1622 9.58207 51.6855C4.87056 59.5336 5.61172 67.2494 11.9246 73.7608C15.2064 77.0494 18.8775 79.925 22.8564 82.3236C31.6176 87.7101 41.3848 90.5291 51.3902 92.5804C70.6068 96.5773 90.0219 97.7419 112.891 97.7022Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <span className="mx-auto block w-fit text-5xl font-semibold">
+                    100%
+                  </span>
+                </div>
+                <h2 className="mt-6 text-center text-3xl font-semibold">
+                  Customizable
+                </h2>
+              </CardContent>
+            </Card>
+            <Card className="relative col-span-full overflow-hidden sm:col-span-3 lg:col-span-2">
+              <CardContent className="pt-6">
+                <div className="relative mx-auto flex aspect-square size-32 rounded-full border before:absolute before:-inset-2 before:rounded-full before:border dark:border-white/10 dark:before:border-white/5">
+                  <svg
+                    className="m-auto h-fit w-24"
+                    viewBox="0 0 212 143"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      className="text-zinc-400 dark:text-zinc-600"
+                      d="M44.0209 55.3542C43.1945 54.7639 42.6916 54.0272 42.5121 53.1442C42.3327 52.2611 42.5995 51.345 43.3125 50.3958C50.632 40.3611 59.812 32.5694 70.8525 27.0208C81.8931 21.4722 93.668 18.6979 106.177 18.6979C118.691 18.6979 130.497 21.3849 141.594 26.7587C152.691 32.1326 161.958 39.8936 169.396 50.0417C170.222 51.1042 170.489 52.0486 170.196 52.875C169.904 53.7014 169.401 54.4097 168.688 55C167.979 55.5903 167.153 55.8571 166.208 55.8004C165.264 55.7437 164.438 55.2408 163.729 54.2917C157.236 45.0833 148.885 38.0307 138.675 33.1337C128.466 28.2368 117.633 25.786 106.177 25.7812C94.7257 25.7812 83.9827 28.2321 73.948 33.1337C63.9132 38.0354 55.5903 45.0881 48.9792 54.2917C48.2709 55.3542 47.4445 55.9444 46.5 56.0625C45.5556 56.1806 44.7292 55.9444 44.0209 55.3542ZM126.188 142.656C113.91 139.587 103.875 133.476 96.0834 124.325C88.2917 115.173 84.3959 103.988 84.3959 90.7708C84.3959 84.8681 86.5209 79.9097 90.7709 75.8958C95.0209 71.8819 100.156 69.875 106.177 69.875C112.198 69.875 117.333 71.8819 121.583 75.8958C125.833 79.9097 127.958 84.8681 127.958 90.7708C127.958 94.6667 129.434 97.9439 132.385 100.602C135.337 103.261 138.819 104.588 142.833 104.583C146.847 104.583 150.271 103.256 153.104 100.602C155.938 97.9486 157.354 94.6714 157.354 90.7708C157.354 77.0764 152.337 65.566 142.302 56.2396C132.267 46.9132 120.285 42.25 106.354 42.25C92.4237 42.25 80.441 46.9132 70.4063 56.2396C60.3716 65.566 55.3542 77.0174 55.3542 90.5937C55.3542 93.4271 55.621 96.9687 56.1546 101.219C56.6882 105.469 57.9562 110.427 59.9584 116.094C60.3125 117.156 60.2842 118.101 59.8734 118.927C59.4625 119.753 58.7825 120.344 57.8334 120.698C56.8889 121.052 55.9752 121.024 55.0921 120.613C54.2091 120.202 53.5881 119.522 53.2292 118.573C51.4584 113.969 50.1905 109.395 49.4255 104.853C48.6605 100.31 48.2756 95.6158 48.2709 90.7708C48.2709 75.0694 53.9682 61.9062 65.363 51.2812C76.7577 40.6562 90.3624 35.3437 106.177 35.3437C122.115 35.3437 135.809 40.6562 147.26 51.2812C158.712 61.9062 164.438 75.0694 164.438 90.7708C164.438 96.6736 162.343 101.601 158.155 105.554C153.966 109.506 148.859 111.485 142.833 111.49C136.813 111.49 131.649 109.513 127.342 105.561C123.035 101.608 120.88 96.6783 120.875 90.7708C120.875 86.875 119.43 83.5978 116.54 80.9392C113.65 78.2805 110.196 76.9536 106.177 76.9583C102.163 76.9583 98.7089 78.2876 95.8142 80.9462C92.9195 83.6049 91.4745 86.8797 91.4792 90.7708C91.4792 102.222 94.8745 111.785 101.665 119.458C108.456 127.132 117.22 132.503 127.958 135.573C129.021 135.927 129.729 136.517 130.083 137.344C130.438 138.17 130.497 139.056 130.26 140C130.024 140.826 129.552 141.535 128.844 142.125C128.135 142.715 127.25 142.892 126.188 142.656ZM67.0417 18.3437C66.0973 18.934 65.1528 19.0828 64.2084 18.79C63.2639 18.4972 62.5556 17.8762 62.0834 16.9271C61.6112 15.9826 61.4931 15.1279 61.7292 14.3629C61.9653 13.5979 62.5556 12.9179 63.5 12.3229C70.1112 8.78125 77.0174 6.06597 84.2188 4.17708C91.4202 2.28819 98.7396 1.34375 106.177 1.34375C113.733 1.34375 121.111 2.25986 128.313 4.09208C135.514 5.92431 142.479 8.54986 149.208 11.9687C150.271 12.559 150.892 13.2674 151.071 14.0937C151.251 14.9201 151.161 15.7465 150.802 16.5729C150.448 17.3993 149.858 18.0486 149.031 18.5208C148.205 18.9931 147.201 18.934 146.021 18.3437C139.764 15.1563 133.299 12.7078 126.627 10.9983C119.954 9.28889 113.138 8.43181 106.177 8.42708C99.3299 8.42708 92.6007 9.22514 85.9896 10.8212C79.3785 12.4174 73.0625 14.9249 67.0417 18.3437ZM87.9375 140.177C80.9723 132.858 75.6314 125.392 71.915 117.78C68.1987 110.167 66.3381 101.164 66.3334 90.7708C66.3334 80.0278 70.2292 70.9658 78.0209 63.585C85.8125 56.2042 95.198 52.5161 106.177 52.5208C117.156 52.5208 126.601 56.2112 134.51 63.5921C142.42 70.9729 146.375 80.0325 146.375 90.7708C146.375 91.8333 146.052 92.6904 145.405 93.3421C144.758 93.9937 143.901 94.3172 142.833 94.3125C141.889 94.3125 141.063 93.989 140.354 93.3421C139.646 92.6951 139.292 91.8381 139.292 90.7708C139.292 81.9167 136.014 74.5099 129.46 68.5504C122.906 62.591 115.145 59.6089 106.177 59.6042C97.2049 59.6042 89.503 62.5862 83.0713 68.5504C76.6396 74.5146 73.4214 81.9214 73.4167 90.7708C73.4167 100.333 75.0695 108.451 78.375 115.123C81.6806 121.796 86.5209 128.494 92.8959 135.219C93.6042 135.927 93.9584 136.753 93.9584 137.698C93.9584 138.642 93.6042 139.469 92.8959 140.177C92.1875 140.885 91.3612 141.24 90.4167 141.24C89.4723 141.24 88.6459 140.885 87.9375 140.177ZM141.417 128.135C130.91 128.135 121.789 124.594 114.054 117.51C106.319 110.427 102.454 101.514 102.458 90.7708C102.458 89.8264 102.784 89 103.436 88.2917C104.088 87.5833 104.942 87.2292 106 87.2292C107.063 87.2292 107.92 87.5833 108.571 88.2917C109.223 89 109.546 89.8264 109.542 90.7708C109.542 99.625 112.729 106.885 119.104 112.552C125.479 118.219 132.917 121.052 141.417 121.052C142.125 121.052 143.129 120.993 144.427 120.875C145.726 120.757 147.083 120.58 148.5 120.344C149.563 120.108 150.479 120.256 151.248 120.79C152.018 121.324 152.519 122.119 152.75 123.177C152.986 124.122 152.809 124.948 152.219 125.656C151.629 126.365 150.861 126.837 149.917 127.073C147.792 127.663 145.934 127.989 144.342 128.05C142.751 128.112 141.776 128.14 141.417 128.135Z"
+                      fill="currentColor"
+                    />
+                    <g clipPath="url(#clip0_0_1)">
+                      <path
+                        d="M44.0209 55.3542C43.1945 54.7639 42.6916 54.0272 42.5121 53.1442C42.3327 52.2611 42.5995 51.345 43.3125 50.3958C50.632 40.3611 59.812 32.5694 70.8525 27.0208C81.8931 21.4722 93.668 18.6979 106.177 18.6979C118.691 18.6979 130.497 21.3849 141.594 26.7587C152.691 32.1326 161.958 39.8936 169.396 50.0417C170.222 51.1042 170.489 52.0486 170.196 52.875C169.904 53.7014 169.401 54.4097 168.688 55C167.979 55.5903 167.153 55.8571 166.208 55.8004C165.264 55.7437 164.438 55.2408 163.729 54.2917C157.236 45.0833 148.885 38.0307 138.675 33.1337C128.466 28.2368 117.633 25.786 106.177 25.7812C94.7257 25.7812 83.9827 28.2321 73.948 33.1337C63.9132 38.0354 55.5903 45.0881 48.9792 54.2917C48.2709 55.3542 47.4445 55.9444 46.5 56.0625C45.5556 56.1806 44.7292 55.9444 44.0209 55.3542ZM126.188 142.656C113.91 139.587 103.875 133.476 96.0834 124.325C88.2917 115.173 84.3959 103.988 84.3959 90.7708C84.3959 84.8681 86.5209 79.9097 90.7709 75.8958C95.0209 71.8819 100.156 69.875 106.177 69.875C112.198 69.875 117.333 71.8819 121.583 75.8958C125.833 79.9097 127.958 84.8681 127.958 90.7708C127.958 94.6667 129.434 97.9439 132.385 100.602C135.337 103.261 138.819 104.588 142.833 104.583C146.847 104.583 150.271 103.256 153.104 100.602C155.938 97.9486 157.354 94.6714 157.354 90.7708C157.354 77.0764 152.337 65.566 142.302 56.2396C132.267 46.9132 120.285 42.25 106.354 42.25C92.4237 42.25 80.441 46.9132 70.4063 56.2396C60.3716 65.566 55.3542 77.0174 55.3542 90.5937C55.3542 93.4271 55.621 96.9687 56.1546 101.219C56.6882 105.469 57.9562 110.427 59.9584 116.094C60.3125 117.156 60.2842 118.101 59.8734 118.927C59.4625 119.753 58.7825 120.344 57.8334 120.698C56.8889 121.052 55.9752 121.024 55.0921 120.613C54.2091 120.202 53.5881 119.522 53.2292 118.573C51.4584 113.969 50.1905 109.395 49.4255 104.853C48.6605 100.31 48.2756 95.6158 48.2709 90.7708C48.2709 75.0694 53.9682 61.9062 65.363 51.2812C76.7577 40.6562 90.3624 35.3437 106.177 35.3437C122.115 35.3437 135.809 40.6562 147.26 51.2812C158.712 61.9062 164.438 75.0694 164.438 90.7708C164.438 96.6736 162.343 101.601 158.155 105.554C153.966 109.506 148.859 111.485 142.833 111.49C136.813 111.49 131.649 109.513 127.342 105.561C123.035 101.608 120.88 96.6783 120.875 90.7708C120.875 86.875 119.43 83.5978 116.54 80.9392C113.65 78.2805 110.196 76.9536 106.177 76.9583C102.163 76.9583 98.7089 78.2876 95.8142 80.9462C92.9195 83.6049 91.4745 86.8797 91.4792 90.7708C91.4792 102.222 94.8745 111.785 101.665 119.458C108.456 127.132 117.22 132.503 127.958 135.573C129.021 135.927 129.729 136.517 130.083 137.344C130.438 138.17 130.497 139.056 130.26 140C130.024 140.826 129.552 141.535 128.844 142.125C128.135 142.715 127.25 142.892 126.188 142.656ZM67.0417 18.3437C66.0973 18.934 65.1528 19.0828 64.2084 18.79C63.2639 18.4972 62.5556 17.8762 62.0834 16.9271C61.6112 15.9826 61.4931 15.1279 61.7292 14.3629C61.9653 13.5979 62.5556 12.9179 63.5 12.3229C70.1112 8.78125 77.0174 6.06597 84.2188 4.17708C91.4202 2.28819 98.7396 1.34375 106.177 1.34375C113.733 1.34375 121.111 2.25986 128.313 4.09208C135.514 5.92431 142.479 8.54986 149.208 11.9687C150.271 12.559 150.892 13.2674 151.071 14.0937C151.251 14.9201 151.161 15.7465 150.802 16.5729C150.448 17.3993 149.858 18.0486 149.031 18.5208C148.205 18.9931 147.201 18.934 146.021 18.3437C139.764 15.1563 133.299 12.7078 126.627 10.9983C119.954 9.28889 113.138 8.43181 106.177 8.42708C99.3299 8.42708 92.6007 9.22514 85.9896 10.8212C79.3785 12.4174 73.0625 14.9249 67.0417 18.3437ZM87.9375 140.177C80.9723 132.858 75.6314 125.392 71.915 117.78C68.1987 110.167 66.3381 101.164 66.3334 90.7708C66.3334 80.0278 70.2292 70.9658 78.0209 63.585C85.8125 56.2042 95.198 52.5161 106.177 52.5208C117.156 52.5208 126.601 56.2112 134.51 63.5921C142.42 70.9729 146.375 80.0325 146.375 90.7708C146.375 91.8333 146.052 92.6904 145.405 93.3421C144.758 93.9937 143.901 94.3172 142.833 94.3125C141.889 94.3125 141.063 93.989 140.354 93.3421C139.646 92.6951 139.292 91.8381 139.292 90.7708C139.292 81.9167 136.014 74.5099 129.46 68.5504C122.906 62.591 115.145 59.6089 106.177 59.6042C97.2049 59.6042 89.503 62.5862 83.0713 68.5504C76.6396 74.5146 73.4214 81.9214 73.4167 90.7708C73.4167 100.333 75.0695 108.451 78.375 115.123C81.6806 121.796 86.5209 128.494 92.8959 135.219C93.6042 135.927 93.9584 136.753 93.9584 137.698C93.9584 138.642 93.6042 139.469 92.8959 140.177C92.1875 140.885 91.3612 141.24 90.4167 141.24C89.4723 141.24 88.6459 140.885 87.9375 140.177ZM141.417 128.135C130.91 128.135 121.789 124.594 114.054 117.51C106.319 110.427 102.454 101.514 102.458 90.7708C102.458 89.8264 102.784 89 103.436 88.2917C104.088 87.5833 104.942 87.2292 106 87.2292C107.063 87.2292 107.92 87.5833 108.571 88.2917C109.223 89 109.546 89.8264 109.542 90.7708C109.542 99.625 112.729 106.885 119.104 112.552C125.479 118.219 132.917 121.052 141.417 121.052C142.125 121.052 143.129 120.993 144.427 120.875C145.726 120.757 147.083 120.58 148.5 120.344C149.563 120.108 150.479 120.256 151.248 120.79C152.018 121.324 152.519 122.119 152.75 123.177C152.986 124.122 152.809 124.948 152.219 125.656C151.629 126.365 150.861 126.837 149.917 127.073C147.792 127.663 145.934 127.989 144.342 128.05C142.751 128.112 141.776 128.14 141.417 128.135Z"
+                        fill="url(#paint0_linear_0_1)"
+                      />
+                    </g>
+                    <path
+                      className="text-primary-600 dark:text-primary-500"
+                      d="M3 72H209"
+                      stroke="currentColor"
+                      strokeWidth="6"
+                      strokeLinecap="round"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="paint0_linear_0_1"
+                        x1="106.385"
+                        y1="1.34375"
+                        x2="106"
+                        y2="72"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop stopColor="white" stopOpacity="0" />
+                        <stop
+                          className="text-primary-600 dark:text-primary-500"
+                          offset="1"
+                          stopColor="currentColor"
+                        />
+                      </linearGradient>
+                      <clipPath id="clip0_0_1">
+                        <rect
+                          width="129"
+                          height="72"
+                          fill="white"
+                          transform="translate(41)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+                <div className="relative z-10 mt-6 space-y-2 text-center">
+                  <h2 className="group-hover:text-secondary-950 text-lg font-medium transition dark:text-white">
+                    Secure by default
+                  </h2>
+                  <p className="text-foreground">
+                    Provident fugit and vero voluptate. magnam magni doloribus
+                    dolores voluptates a sapiente nisi.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="relative col-span-full overflow-hidden sm:col-span-3 lg:col-span-2">
+              <CardContent className="pt-6">
+                <div className="pt-6 lg:px-6">
+                  <svg
+                    className="dark:text-muted-foreground w-full"
+                    viewBox="0 0 386 123"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <rect width="386" height="123" rx="10" />
+                    <g clipPath="url(#clip0_0_106)">
+                      <circle
+                        className="text-muted-foreground dark:text-muted"
+                        cx="29"
+                        cy="29"
+                        r="15"
+                        fill="currentColor"
+                      />
+                      <path
+                        d="M29 23V35"
+                        stroke="white"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M35 29L29 35L23 29"
+                        stroke="white"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M55.2373 32H58.7988C61.7383 32 63.4404 30.1816 63.4404 27.0508V27.0371C63.4404 23.9404 61.7246 22.1357 58.7988 22.1357H55.2373V32ZM56.7686 30.6807V23.4551H58.6279C60.6719 23.4551 61.8818 24.7881 61.8818 27.0576V27.0713C61.8818 29.3613 60.6924 30.6807 58.6279 30.6807H56.7686ZM69.4922 32.1436C71.666 32.1436 72.999 30.6875 72.999 28.2949V28.2812C72.999 25.8887 71.6592 24.4326 69.4922 24.4326C67.3184 24.4326 65.9785 25.8955 65.9785 28.2812V28.2949C65.9785 30.6875 67.3115 32.1436 69.4922 32.1436ZM69.4922 30.9062C68.2139 30.9062 67.4961 29.9424 67.4961 28.2949V28.2812C67.4961 26.6338 68.2139 25.6699 69.4922 25.6699C70.7637 25.6699 71.4883 26.6338 71.4883 28.2812V28.2949C71.4883 29.9355 70.7637 30.9062 69.4922 30.9062ZM76.9111 32H78.4219L79.9531 26.4629H80.0693L81.6074 32H83.1318L85.1758 24.5762H83.7061L82.3799 30.3047H82.2637L80.7324 24.5762H79.3242L77.793 30.3047H77.6836L76.3506 24.5762H74.8604L76.9111 32ZM87.6934 32H89.1768V27.6455C89.1768 26.4492 89.8535 25.7041 90.9404 25.7041C92.0273 25.7041 92.54 26.3125 92.54 27.543V32H94.0166V27.1943C94.0166 25.4238 93.1006 24.4326 91.4395 24.4326C90.3594 24.4326 89.6484 24.9111 89.2861 25.7041H89.1768V24.5762H87.6934V32ZM97.1562 32H98.6396V21.6641H97.1562V32ZM104.992 32.1436C107.166 32.1436 108.499 30.6875 108.499 28.2949V28.2812C108.499 25.8887 107.159 24.4326 104.992 24.4326C102.818 24.4326 101.479 25.8955 101.479 28.2812V28.2949C101.479 30.6875 102.812 32.1436 104.992 32.1436ZM104.992 30.9062C103.714 30.9062 102.996 29.9424 102.996 28.2949V28.2812C102.996 26.6338 103.714 25.6699 104.992 25.6699C106.264 25.6699 106.988 26.6338 106.988 28.2812V28.2949C106.988 29.9355 106.264 30.9062 104.992 30.9062ZM113.307 32.123C114.291 32.123 115.07 31.6992 115.508 30.9473H115.624V32H117.094V26.9209C117.094 25.3623 116.041 24.4326 114.175 24.4326C112.486 24.4326 111.317 25.2461 111.14 26.4629L111.133 26.5107H112.562L112.568 26.4834C112.746 25.957 113.286 25.6562 114.106 25.6562C115.111 25.6562 115.624 26.1074 115.624 26.9209V27.5771L113.614 27.6934C111.844 27.8027 110.846 28.5752 110.846 29.9014V29.915C110.846 31.2617 111.892 32.123 113.307 32.123ZM112.322 29.8535V29.8398C112.322 29.1699 112.787 28.8008 113.812 28.7393L115.624 28.623V29.2588C115.624 30.2158 114.811 30.9404 113.703 30.9404C112.903 30.9404 112.322 30.5371 112.322 29.8535ZM122.893 32.123C123.932 32.123 124.745 31.6445 125.176 30.8311H125.292V32H126.769V21.6641H125.292V25.752H125.176C124.779 24.9521 123.911 24.4463 122.893 24.4463C121.006 24.4463 119.816 25.9297 119.816 28.2812V28.2949C119.816 30.626 121.026 32.123 122.893 32.123ZM123.316 30.8584C122.072 30.8584 121.327 29.8877 121.327 28.2949V28.2812C121.327 26.6885 122.072 25.7178 123.316 25.7178C124.547 25.7178 125.312 26.6953 125.312 28.2812V28.2949C125.312 29.8809 124.554 30.8584 123.316 30.8584Z"
+                        fill="currentColor"
+                      />
+                      <path
+                        d="M268.324 34H269.906V21.3174H268.333L264.958 23.7432V25.4131L268.184 23.0752H268.324V34ZM280.363 34H281.91V31.3721H283.712V29.957H281.91V21.3174H279.616C277.841 23.9629 275.898 27.0566 274.185 29.9307V31.3721H280.363V34ZM275.802 29.9658V29.8604C277.182 27.5312 278.843 24.9121 280.267 22.7852H280.372V29.9658H275.802ZM286.162 37.2256H287.296L288.676 32.2246H286.927L286.162 37.2256ZM296.672 34.2109C299.212 34.2109 301.075 32.6465 301.075 30.5283V30.5107C301.075 28.709 299.818 27.5576 297.973 27.3994V27.3643C299.555 27.0303 300.662 25.958 300.662 24.3936V24.376C300.662 22.4512 299.071 21.1064 296.654 21.1064C294.281 21.1064 292.646 22.4863 292.444 24.5518L292.436 24.6396H293.956L293.965 24.5518C294.097 23.2686 295.16 22.4775 296.654 22.4775C298.201 22.4775 299.071 23.2422 299.071 24.5693V24.5869C299.071 25.8525 298.017 26.7842 296.505 26.7842H294.984V28.1201H296.575C298.351 28.1201 299.467 28.9902 299.467 30.5459V30.5635C299.467 31.9082 298.333 32.8398 296.672 32.8398C294.984 32.8398 293.833 31.9785 293.71 30.7305L293.701 30.6426H292.181L292.189 30.748C292.356 32.752 294.053 34.2109 296.672 34.2109ZM310.434 34H311.98V31.3721H313.782V29.957H311.98V21.3174H309.687C307.911 23.9629 305.969 27.0566 304.255 29.9307V31.3721H310.434V34ZM305.872 29.9658V29.8604C307.252 27.5312 308.913 24.9121 310.337 22.7852H310.442V29.9658H305.872ZM323.297 34H324.826V28.1289C324.826 26.793 325.767 25.7119 327.006 25.7119C328.201 25.7119 328.975 26.4414 328.975 27.5664V34H330.504V27.9092C330.504 26.7051 331.374 25.7119 332.692 25.7119C334.028 25.7119 334.67 26.4062 334.67 27.8037V34H336.199V27.4521C336.199 25.4658 335.118 24.3584 333.185 24.3584C331.875 24.3584 330.794 25.0176 330.284 26.0195H330.144C329.704 25.0352 328.808 24.3584 327.524 24.3584C326.285 24.3584 325.389 24.9473 324.967 25.9668H324.826V24.5254H323.297V34ZM344.67 34.167C347.069 34.167 348.643 32.2246 348.643 29.2715V29.2539C348.643 26.2832 347.078 24.3584 344.67 24.3584C343.369 24.3584 342.235 25.0088 341.717 26.0195H341.576V20.7637H340.047V34H341.576V32.4883H341.717C342.297 33.543 343.352 34.167 344.67 34.167ZM344.318 32.8135C342.596 32.8135 341.541 31.46 341.541 29.2715V29.2539C341.541 27.0654 342.596 25.7119 344.318 25.7119C346.05 25.7119 347.078 27.0479 347.078 29.2539V29.2715C347.078 31.4775 346.05 32.8135 344.318 32.8135ZM352.016 37.1641H353.545V32.5059H353.686C354.204 33.5166 355.338 34.167 356.639 34.167C359.047 34.167 360.611 32.2422 360.611 29.2715V29.2539C360.611 26.3008 359.038 24.3584 356.639 24.3584C355.32 24.3584 354.266 24.9824 353.686 26.0371H353.545V24.5254H352.016V37.1641ZM356.287 32.8135C354.564 32.8135 353.51 31.46 353.51 29.2715V29.2539C353.51 27.0654 354.564 25.7119 356.287 25.7119C358.019 25.7119 359.047 27.0479 359.047 29.2539V29.2715C359.047 31.4775 358.019 32.8135 356.287 32.8135ZM367.254 34.167C369.407 34.167 371.051 32.998 371.051 31.3105V31.293C371.051 29.9395 370.189 29.166 368.405 28.7354L366.946 28.3838C365.83 28.1113 365.355 27.707 365.355 27.0654V27.0479C365.355 26.2129 366.182 25.6328 367.307 25.6328C368.449 25.6328 369.188 26.1514 369.39 26.8984H370.893C370.682 25.3516 369.302 24.3584 367.315 24.3584C365.303 24.3584 363.791 25.5449 363.791 27.1182V27.127C363.791 28.4893 364.591 29.2627 366.366 29.6846L367.834 30.0361C369.003 30.3174 369.486 30.7656 369.486 31.4072V31.4248C369.486 32.2861 368.581 32.8926 367.307 32.8926C366.094 32.8926 365.338 32.374 365.083 31.583H363.519C363.694 33.1475 365.145 34.167 367.254 34.167Z"
+                        fill="currentColor"
+                      />
+                    </g>
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M3 123C3 123 14.3298 94.153 35.1282 88.0957C55.9266 82.0384 65.9333 80.5508 65.9333 80.5508C65.9333 80.5508 80.699 80.5508 92.1777 80.5508C103.656 80.5508 100.887 63.5348 109.06 63.5348C117.233 63.5348 117.217 91.9728 124.78 91.9728C132.343 91.9728 142.264 78.03 153.831 80.5508C165.398 83.0716 186.825 91.9728 193.761 91.9728C200.697 91.9728 206.296 63.5348 214.07 63.5348C221.844 63.5348 238.653 93.7771 244.234 91.9728C249.814 90.1684 258.8 60 266.19 60C272.075 60 284.1 88.057 286.678 88.0957C294.762 88.2171 300.192 72.9284 305.423 72.9284C312.323 72.9284 323.377 65.2437 335.553 63.5348C347.729 61.8259 348.218 82.07 363.639 80.5508C367.875 80.1335 372.949 82.2017 376.437 87.1008C379.446 91.3274 381.054 97.4325 382.521 104.647C383.479 109.364 382.521 123 382.521 123"
+                      fill="url(#paint0_linear_0_106)"
+                    />
+                    <path
+                      className="text-primary-600 dark:text-primary-500"
+                      d="M3 121.077C3 121.077 15.3041 93.6691 36.0195 87.756C56.7349 81.8429 66.6632 80.9723 66.6632 80.9723C66.6632 80.9723 80.0327 80.9723 91.4656 80.9723C102.898 80.9723 100.415 64.2824 108.556 64.2824C116.696 64.2824 117.693 92.1332 125.226 92.1332C132.759 92.1332 142.07 78.5115 153.591 80.9723C165.113 83.433 186.092 92.1332 193 92.1332C199.908 92.1332 205.274 64.2824 213.017 64.2824C220.76 64.2824 237.832 93.8946 243.39 92.1332C248.948 90.3718 257.923 60.5 265.284 60.5C271.145 60.5 283.204 87.7182 285.772 87.756C293.823 87.8746 299.2 73.0802 304.411 73.0802C311.283 73.0802 321.425 65.9506 333.552 64.2824C345.68 62.6141 346.91 82.4553 362.27 80.9723C377.629 79.4892 383 106.605 383 106.605"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="paint0_linear_0_106"
+                        x1="3"
+                        y1="60"
+                        x2="3"
+                        y2="123"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop
+                          className="text-primary/15 dark:text-primary/35"
+                          stopColor="currentColor"
+                        />
+                        <stop
+                          className="text-transparent"
+                          offset="1"
+                          stopColor="currentColor"
+                          stopOpacity="0.103775"
+                        />
+                      </linearGradient>
+                      <clipPath id="clip0_0_106">
+                        <rect
+                          width="358"
+                          height="30"
+                          fill="white"
+                          transform="translate(14 14)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </div>
+                <div className="relative z-10 mt-14 space-y-2 text-center">
+                  <h2 className="text-lg font-medium transition">
+                    Faster than light
+                  </h2>
+                  <p className="text-foreground">
+                    Provident fugit vero voluptate. magnam magni doloribus
+                    dolores voluptates inventore nisi.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="card variant-outlined relative col-span-full overflow-hidden lg:col-span-3">
+              <CardContent className="grid pt-6 sm:grid-cols-2">
+                <div className="relative z-10 flex flex-col justify-between space-y-12 lg:space-y-6">
+                  <div className="relative flex aspect-square size-12 rounded-full border before:absolute before:-inset-2 before:rounded-full before:border dark:border-white/10 dark:before:border-white/5">
+                    <Shield className="m-auto size-5" strokeWidth={1} />
+                  </div>
+                  <div className="space-y-2">
+                    <h2 className="group-hover:text-secondary-950 text-lg font-medium text-zinc-800 transition dark:text-white">
+                      Faster than light
+                    </h2>
+                    <p className="text-foreground">
+                      Provident fugit vero voluptate. Voluptates a sapiente
+                      inventore nisi.
+                    </p>
+                  </div>
+                </div>
+                <div className="rounded-tl-(--radius) relative -mb-6 -mr-6 mt-6 h-fit border-l border-t p-6 py-6 sm:ml-6">
+                  <div className="absolute left-3 top-2 flex gap-1">
+                    <span className="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span>
+                    <span className="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span>
+                    <span className="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span>
+                  </div>
+                  <svg
+                    className="w-full sm:w-[150%]"
+                    viewBox="0 0 366 231"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M0.148438 231V179.394L1.92188 180.322L2.94482 177.73L4.05663 183.933L6.77197 178.991L7.42505 184.284L9.42944 187.985L11.1128 191.306V155.455L13.6438 153.03V145.122L14.2197 142.829V150.454V154.842L15.5923 160.829L17.0793 172.215H19.2031V158.182L20.7441 153.03L22.426 148.111V142.407L24.7471 146.86V128.414L26.7725 129.918V120.916L28.1492 118.521L28.4653 127.438L29.1801 123.822L31.0426 120.525V130.26L32.3559 134.71L34.406 145.122V137.548L35.8982 130.26L37.1871 126.049L38.6578 134.71L40.659 138.977V130.26V126.049L43.7557 130.26V123.822L45.972 112.407L47.3391 103.407V92.4726L49.2133 98.4651V106.053L52.5797 89.7556L54.4559 82.7747L56.1181 87.9656L58.9383 89.7556V98.4651L60.7617 103.407L62.0545 123.822L63.8789 118.066L65.631 122.082L68.5479 114.229L70.299 109.729L71.8899 118.066L73.5785 123.822V130.26L74.9446 134.861L76.9243 127.87L78.352 134.71V138.977L80.0787 142.407V152.613L83.0415 142.407V130.26L86.791 123.822L89.0121 116.645V122.082L90.6059 127.87L92.3541 131.77L93.7104 123.822L95.4635 118.066L96.7553 122.082V137.548L99.7094 140.988V131.77L101.711 120.525L103.036 116.645V133.348L104.893 136.218L106.951 140.988L108.933 134.71L110.797 130.26L112.856 140.988V148.111L115.711 152.613L117.941 145.122L119.999 140.988V148.111L123.4 152.613L125.401 158.182L130.547 150.454V156.566L131.578 155.455L134.143 158.182L135.594 168.136L138.329 158.182L140.612 160.829L144.681 169.5L147.011 155.455L148.478 151.787L151.02 152.613L154.886 145.122L158 143.412L159.406 140.637L159.496 133.348L162.295 127.87V122.082L163.855 116.645V109.729L164.83 104.407L166.894 109.729L176.249 98.4651L178.254 106.169L180.77 98.4651V81.045L182.906 69.1641L184.8 56.8669L186.477 62.8428L187.848 79.7483L188.849 106.169L191.351 79.7483L193.485 75.645V98.4651L196.622 94.4523L198.623 87.4228V79.7483L200.717 75.645L202.276 81.045V89.3966L203.638 113.023L205.334 99.8037L207.164 94.4523L208.982 98.4651V102.176L211.267 107.64L212.788 81.045L214.437 66.0083L216.19 62.8428L217.941 56.8669V73.676V79.7483L220.28 75.645L222.516 66.0083V73.676H226.174V84.8662L228.566 98.4651L230.316 75.645L233.61 94.4523V104.25L236.882 102.176L239.543 113.023L241.057 98.4651L243.604 94.4523L244.975 106.169L245.975 87.4228L247.272 89.3966L250.732 84.8662L251.733 96.7549L254.644 94.4523L257.452 99.8037L259.853 91.3111L261.193 84.8662L264.162 75.645L265.808 87.4228L267.247 58.4895L269.757 66.0083L276.625 13.5146L273.33 58.4895L276.25 67.6563L282.377 20.1968L281.37 58.4895V66.0083L283.579 75.645L286.033 56.8669L287.436 73.676L290.628 77.6636L292.414 84.8662L294.214 61.3904L296.215 18.9623L300.826 0.947876L297.531 56.8669L299.973 62.8428L305.548 22.0598L299.755 114.956L301.907 105.378L304.192 112.688V94.9932L308.009 80.0829L310.003 94.9932L311.004 102.127L312.386 105.378L315.007 112.688L316.853 98.004L318.895 105.378L321.257 94.9932L324.349 100.81L325.032 80.0829L327.604 61.5733L329.308 82.3223L333.525 52.7986L334.097 52.145L334.735 55.6812L337.369 59.8108V73.676L340.743 87.9656L343.843 96.3728L348.594 82.7747L349.607 81.045L351 89.7556L352.611 96.3728L355.149 94.9932L356.688 102.176L359.396 108.784L360.684 111.757L365 95.7607V231H148.478H0.148438Z"
+                      fill="url(#paint0_linear_0_705)"
+                    />
+                    <path
+                      className="text-primary-600 dark:text-primary-500"
+                      d="M1 179.796L4.05663 172.195V183.933L7.20122 174.398L8.45592 183.933L10.0546 186.948V155.455L12.6353 152.613V145.122L15.3021 134.71V149.804V155.455L16.6916 160.829L18.1222 172.195V158.182L19.8001 152.613L21.4105 148.111V137.548L23.6863 142.407V126.049L25.7658 127.87V120.525L27.2755 118.066L29.1801 112.407V123.822L31.0426 120.525V130.26L32.3559 134.71L34.406 145.122V137.548L35.8982 130.26L37.1871 126.049L38.6578 134.71L40.659 138.977V130.26V126.049L43.7557 130.26V123.822L45.972 112.407L47.3391 103.407V92.4726L49.2133 98.4651V106.053L52.5797 89.7556L54.4559 82.7747L56.1181 87.9656L58.9383 89.7556V98.4651L60.7617 103.407L62.0545 123.822L63.8789 118.066L65.631 122.082L68.5479 114.229L70.299 109.729L71.8899 118.066L73.5785 123.822V130.26L74.9446 134.861L76.9243 127.87L78.352 134.71V138.977L80.0787 142.407V152.613L83.0415 142.407V130.26L86.791 123.822L89.0121 116.645V122.082L90.6059 127.87L92.3541 131.77L93.7104 123.822L95.4635 118.066L96.7553 122.082V137.548L99.7094 140.988V131.77L101.711 120.525L103.036 116.645V133.348L104.893 136.218L106.951 140.988L108.933 134.71L110.797 130.26L112.856 140.988V148.111L115.711 152.613L117.941 145.122L119.999 140.988L121.501 148.111L123.4 152.613L125.401 158.182L127.992 152.613L131.578 146.76V155.455L134.143 158.182L135.818 164.629L138.329 158.182L140.612 160.829L144.117 166.757L146.118 155.455L147.823 149.804L151.02 152.613L154.886 145.122L158.496 140.988V133.348L161.295 127.87V122.082L162.855 116.645V109.729L164.83 103.407L166.894 109.729L176.249 98.4651L178.254 106.169L180.77 98.4651V81.045L182.906 69.1641L184.8 56.8669L186.477 62.8428L187.848 79.7483L188.849 106.169L191.351 79.7483L193.485 75.645V98.4651L196.622 94.4523L198.623 87.4228V79.7483L200.717 75.645L202.276 81.045V89.3966L203.638 113.023L205.334 99.8037L207.164 94.4523L208.982 98.4651V102.176L211.267 107.64L212.788 81.045L214.437 66.0083L216.19 62.8428L217.941 56.8669V73.676V79.7483L220.28 75.645L222.516 66.0083V73.676H226.174V84.8662L228.566 98.4651L230.316 75.645L233.61 94.4523V104.25L236.882 102.176L239.543 113.023L241.057 98.4651L243.604 94.4523L244.975 106.169L245.975 87.4228L247.272 89.3966L250.732 84.8662L251.733 96.7549L254.644 94.4523L257.452 99.8037L259.853 91.3111L261.193 84.8662L264.162 75.645L265.808 87.4228L267.247 58.4895L269.757 66.0083L276.625 13.5146L273.33 58.4895L276.25 67.6563L282.377 20.1968L281.37 58.4895V66.0083L283.579 75.645L286.033 56.8669L287.436 73.676L290.628 77.6636L292.414 84.8662L294.214 61.3904L296.215 18.9623L300.826 0.947876L297.531 56.8669L299.973 62.8428L305.548 22.0598L299.755 114.956L301.907 105.378L304.192 112.688V94.9932L308.009 80.0829L310.003 94.9932L311.004 102.127L312.386 105.378L315.007 112.688L316.853 98.004L318.895 105.378L321.257 94.9932L324.349 100.81L325.032 80.0829L327.604 61.5733L329.357 74.9864L332.611 52.6565L334.352 48.5552L335.785 55.2637L338.377 59.5888V73.426L341.699 87.5181L343.843 93.4347L347.714 82.1171L350.229 78.6821L351.974 89.7556L353.323 94.9932L355.821 93.4347L357.799 102.127L360.684 108.794L363.219 98.004L365 89.7556"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="paint0_linear_0_705"
+                        x1="0.85108"
+                        y1="0.947876"
+                        x2="0.85108"
+                        y2="230.114"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop
+                          className="text-primary/15 dark:text-primary/35"
+                          stopColor="currentColor"
+                        />
+                        <stop
+                          className="text-transparent"
+                          offset="1"
+                          stopColor="currentColor"
+                          stopOpacity="0.01"
+                        />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="card variant-outlined relative col-span-full overflow-hidden lg:col-span-3">
+              <CardContent className="grid h-full pt-6 sm:grid-cols-2">
+                <div className="relative z-10 flex flex-col justify-between space-y-12 lg:space-y-6">
+                  <div className="relative flex aspect-square size-12 rounded-full border before:absolute before:-inset-2 before:rounded-full before:border dark:border-white/10 dark:before:border-white/5">
+                    <Users className="m-auto size-6" strokeWidth={1} />
+                  </div>
+                  <div className="space-y-2">
+                    <h2 className="text-lg font-medium transition">
+                      Keep your loved ones safe
+                    </h2>
+                    <p className="text-foreground">
+                      Voluptate. magnam magni doloribus dolores voluptates a
+                      sapiente inventore nisi.
+                    </p>
+                  </div>
+                </div>
+                <div className="before:bg-(--color-border) relative mt-6 before:absolute before:inset-0 before:mx-auto before:w-px sm:-my-6 sm:-mr-6">
+                  <div className="relative flex h-full flex-col justify-center space-y-6 py-6">
+                    <div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
+                      <span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
+                        Likeur
+                      </span>
+                      <div className="ring-background size-7 ring-4">
+                        <img
+                          className="size-full rounded-full"
+                          src="https://avatars.githubusercontent.com/u/102558960?v=4"
+                          alt=""
+                        />
+                      </div>
+                    </div>
+                    <div className="relative ml-[calc(50%-1rem)] flex items-center gap-2">
+                      <div className="ring-background size-8 ring-4">
+                        <img
+                          className="size-full rounded-full"
+                          src="https://avatars.githubusercontent.com/u/47919550?v=4"
+                          alt=""
+                        />
+                      </div>
+                      <span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
+                        M. Irung
+                      </span>
+                    </div>
+                    <div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
+                      <span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
+                        B. Ng
+                      </span>
+                      <div className="ring-background size-7 ring-4">
+                        <img
+                          className="size-full rounded-full"
+                          src="https://avatars.githubusercontent.com/u/31113941?v=4"
+                          alt=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/eleven/page.tsx b/src/app/[locale]/preview/features/eleven/page.tsx
new file mode 100644
index 0000000..de0d103
--- /dev/null
+++ b/src/app/[locale]/preview/features/eleven/page.tsx
@@ -0,0 +1,131 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Globe } from 'lucide-react';
+import Image from 'next/image';
+
+export default function Features() {
+  return (
+    <section className="dark:bg-muted/25 bg-zinc-50 py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto grid gap-2 sm:grid-cols-5">
+          <Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-tl-xl">
+            <CardHeader>
+              <div className="md:p-6">
+                <p className="font-medium">Advanced tracking system</p>
+                <p className="text-muted-foreground mt-3 max-w-sm text-sm">
+                  Quick AI lives a single hotkey away - ready to quickly appear
+                  as a floating window above your other apps..
+                </p>
+              </div>
+            </CardHeader>
+
+            <div className="relative h-fit pl-6 md:pl-12">
+              <div className="absolute -inset-6 [background:radial-gradient(75%_95%_at_50%_0%,transparent,var(--color-background)_100%)]"></div>
+
+              <div className="bg-background overflow-hidden rounded-tl-lg border-l border-t pl-2 pt-2 dark:bg-zinc-950">
+                <Image
+                  src="/blocks/mail2.png"
+                  className="hidden dark:block"
+                  alt="payments illustration dark"
+                  width={1207}
+                  height={929}
+                />
+                <Image
+                  src="/blocks/mail2-light.png"
+                  className="shadow dark:hidden"
+                  alt="payments illustration light"
+                  width={1207}
+                  height={929}
+                />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-tr-xl">
+            <p className="mx-auto my-6 max-w-md text-balance px-6 text-center text-lg font-semibold sm:text-2xl md:p-6">
+              Advanced UX, Instantly locate all your assets.
+            </p>
+
+            <CardContent className="mt-auto h-fit">
+              <div className="relative mb-6 sm:mb-0">
+                <div className="absolute -inset-6 [background:radial-gradient(50%_75%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
+                <div className="aspect-76/59 overflow-hidden rounded-r-lg border">
+                  <Image
+                    src="/blocks/origin-cal-dark.png"
+                    className="hidden dark:block"
+                    alt="payments illustration dark"
+                    width={1207}
+                    height={929}
+                  />
+                  <Image
+                    src="/blocks/origin-cal.png"
+                    className="shadow dark:hidden"
+                    alt="payments illustration light"
+                    width={1207}
+                    height={929}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="group p-6 shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-bl-xl md:p-12">
+            <p className="mx-auto mb-12 max-w-md text-balance text-center text-lg font-semibold sm:text-2xl">
+              Advanced UX, Instantly locate all your assets.
+            </p>
+
+            <div className="flex justify-center gap-6">
+              <div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 relative flex aspect-square size-16 items-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
+                <span className="absolute right-2 top-1 block text-sm">fn</span>
+                <Globe className="mt-auto size-4" />
+              </div>
+              <div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 flex aspect-square size-16 items-center justify-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
+                <span>K</span>
+              </div>
+            </div>
+          </Card>
+          <Card className="group relative shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-br-xl">
+            <CardHeader className="p-6 md:p-12">
+              <p className="font-medium">Advanced tracking system</p>
+              <p className="text-muted-foreground mt-2 max-w-sm text-sm">
+                Quick AI lives a single hotkey away apps..
+              </p>
+            </CardHeader>
+            <CardContent className="relative h-fit px-6 pb-6 md:px-12 md:pb-12">
+              <div className="grid grid-cols-4 gap-2 md:grid-cols-6">
+                <div className="rounded-(--radius) aspect-square border border-dashed"></div>
+                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
+                  <img
+                    className="m-auto size-8 invert dark:invert-0"
+                    src="https://oxymor-ns.tailus.io/logos/linear.svg"
+                    alt="Linear logo"
+                    width="32"
+                    height="32"
+                  />
+                </div>
+                <div className="rounded-(--radius) aspect-square border border-dashed"></div>
+                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
+                  <img
+                    className="m-auto size-8 invert dark:invert-0"
+                    src="https://oxymor-ns.tailus.io/logos/netlify.svg"
+                    alt="Netlify logo"
+                    width="32"
+                    height="32"
+                  />
+                </div>
+                <div className="rounded-(--radius) aspect-square border border-dashed"></div>
+                <div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
+                  <img
+                    className="m-auto size-8 invert dark:invert-0"
+                    src="https://oxymor-ns.tailus.io/logos/github.svg"
+                    alt="github logo"
+                    width="32"
+                    height="32"
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/five/page.tsx b/src/app/[locale]/preview/features/five/page.tsx
new file mode 100644
index 0000000..80ded15
--- /dev/null
+++ b/src/app/[locale]/preview/features/five/page.tsx
@@ -0,0 +1,60 @@
+import { Activity, DraftingCompass, Mail, Zap } from 'lucide-react';
+import Image from 'next/image';
+
+export default function FeaturesSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="grid items-center gap-12 md:grid-cols-2 md:gap-12 lg:grid-cols-5 lg:gap-24">
+          <div className="lg:col-span-2">
+            <div className="md:pr-6 lg:pr-0">
+              <h2 className="text-4xl font-semibold lg:text-5xl">
+                Built for Scaling teams
+              </h2>
+              <p className="mt-6">
+                Orrupti aut temporibus assumenda atque ab, accusamus sit,
+                molestiae veniam laboriosam pariatur.
+              </p>
+            </div>
+            <ul className="mt-8 divide-y border-y *:flex *:items-center *:gap-3 *:py-3">
+              <li>
+                <Mail className="size-5" />
+                Email and web support
+              </li>
+              <li>
+                <Zap className="size-5" />
+                Fast response time
+              </li>
+              <li>
+                <Activity className="size-5" />
+                Menitoring and analytics
+              </li>
+              <li>
+                <DraftingCompass className="size-5" />
+                Architectural review
+              </li>
+            </ul>
+          </div>
+          <div className="border-border/50 relative rounded-3xl border p-3 lg:col-span-3">
+            <div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
+              <Image
+                src="/blocks/payments.png"
+                className="hidden rounded-[15px] dark:block"
+                alt="payments illustration dark"
+                width={1207}
+                height={929}
+              />
+              <Image
+                src="/blocks/payments-light.png"
+                className="rounded-[15px] shadow dark:hidden"
+                alt="payments illustration light"
+                width={1207}
+                height={929}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/four/page.tsx b/src/app/[locale]/preview/features/four/page.tsx
new file mode 100644
index 0000000..7a74df6
--- /dev/null
+++ b/src/app/[locale]/preview/features/four/page.tsx
@@ -0,0 +1,88 @@
+import {
+  Cpu,
+  Fingerprint,
+  Pencil,
+  Settings2,
+  Sparkles,
+  Zap,
+} from 'lucide-react';
+
+export default function Features() {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
+          <h2 className="text-balance text-4xl font-medium lg:text-5xl">
+            The foundation for creative teams management
+          </h2>
+          <p>
+            Lyra is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="relative mx-auto grid max-w-4xl divide-x divide-y border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Zap className="size-4" />
+              <h3 className="text-sm font-medium">Faaast</h3>
+            </div>
+            <p className="text-sm">
+              It supports an entire helping developers and innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Cpu className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-sm">
+              It supports an entire helping developers and businesses.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Fingerprint className="size-4" />
+
+              <h3 className="text-sm font-medium">Security</h3>
+            </div>
+            <p className="text-sm">
+              It supports an helping developers businesses.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Pencil className="size-4" />
+
+              <h3 className="text-sm font-medium">Customization</h3>
+            </div>
+            <p className="text-sm">
+              It supports helping developers and businesses innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Settings2 className="size-4" />
+
+              <h3 className="text-sm font-medium">Control</h3>
+            </div>
+            <p className="text-sm">
+              It supports helping developers and businesses innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Sparkles className="size-4" />
+
+              <h3 className="text-sm font-medium">Built for AI</h3>
+            </div>
+            <p className="text-sm">
+              It supports helping developers and businesses innovate.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/nine/page.tsx b/src/app/[locale]/preview/features/nine/page.tsx
new file mode 100644
index 0000000..cfe002d
--- /dev/null
+++ b/src/app/[locale]/preview/features/nine/page.tsx
@@ -0,0 +1,219 @@
+'use client';
+import { Logo } from '@/components/layout/logo';
+import { Activity, Map as MapIcon, MessageCircle } from 'lucide-react';
+import DottedMap from 'dotted-map';
+import { Area, AreaChart, CartesianGrid } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+
+export default function FeaturesSection() {
+  return (
+    <section className="px-4 py-16 md:py-32">
+      <div className="mx-auto grid max-w-5xl border md:grid-cols-2">
+        <div>
+          <div className="p-6 sm:p-12">
+            <span className="text-muted-foreground flex items-center gap-2">
+              <MapIcon className="size-4" />
+              Real time location tracking
+            </span>
+
+            <p className="mt-8 text-2xl font-semibold">
+              Advanced tracking system, Instantly locate all your assets.
+            </p>
+          </div>
+
+          <div aria-hidden className="relative">
+            <div className="absolute inset-0 z-10 m-auto size-fit">
+              <div className="rounded-(--radius) bg-background z-1 dark:bg-muted relative flex size-fit w-fit items-center gap-2 border px-3 py-1 text-xs font-medium shadow-md shadow-zinc-950/5">
+                <span className="text-lg">🇨🇩</span> Last connection from DR
+                Congo
+              </div>
+              <div className="rounded-(--radius) bg-background absolute inset-2 -bottom-2 mx-auto border px-3 py-4 text-xs font-medium shadow-md shadow-zinc-950/5 dark:bg-zinc-900"></div>
+            </div>
+
+            <div className="relative overflow-hidden">
+              <div className="bg-radial z-1 to-background absolute inset-0 from-transparent to-75%"></div>
+              <Map />
+            </div>
+          </div>
+        </div>
+        <div className="overflow-hidden border-t bg-zinc-50 p-6 sm:p-12 md:border-0 md:border-l dark:bg-transparent">
+          <div className="relative z-10">
+            <span className="text-muted-foreground flex items-center gap-2">
+              <MessageCircle className="size-4" />
+              Email and web support
+            </span>
+
+            <p className="my-8 text-2xl font-semibold">
+              Reach out via email or web for any assistance you need.
+            </p>
+          </div>
+          <div aria-hidden className="flex flex-col gap-8">
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="flex size-5 rounded-full border">
+                  <Logo className="m-auto size-3" />
+                </span>
+                <span className="text-muted-foreground text-xs">
+                  Sat 22 Feb
+                </span>
+              </div>
+              <div className="rounded-(--radius) bg-background mt-1.5 w-3/5 border p-3 text-xs">
+                Hey, I'm having trouble with my account.
+              </div>
+            </div>
+
+            <div>
+              <div className="rounded-(--radius) mb-1 ml-auto w-3/5 bg-blue-600 p-3 text-xs text-white">
+                Molestiae numquam debitis et ullam distinctio provident nobis
+                repudiandae deleniti necessitatibus.
+              </div>
+              <span className="text-muted-foreground block text-right text-xs">
+                Now
+              </span>
+            </div>
+          </div>
+        </div>
+        <div className="col-span-full border-y p-12">
+          <p className="text-center text-4xl font-semibold lg:text-7xl">
+            99.99% Uptime
+          </p>
+        </div>
+        <div className="relative col-span-full">
+          <div className="absolute z-10 max-w-lg px-6 pr-12 pt-6 md:px-12 md:pt-12">
+            <span className="text-muted-foreground flex items-center gap-2">
+              <Activity className="size-4" />
+              Activity feed
+            </span>
+
+            <p className="my-8 text-2xl font-semibold">
+              Monitor your application's activity in real-time.{' '}
+              <span className="text-muted-foreground">
+                {' '}
+                Instantly identify and resolve issues.
+              </span>
+            </p>
+          </div>
+          <MonitoringChart />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const map = new DottedMap({ height: 55, grid: 'diagonal' });
+
+const points = map.getPoints();
+
+const svgOptions = {
+  backgroundColor: 'var(--color-background)',
+  color: 'currentColor',
+  radius: 0.15,
+};
+
+const Map = () => {
+  const viewBox = `0 0 120 60`;
+  return (
+    <svg viewBox={viewBox} style={{ background: svgOptions.backgroundColor }}>
+      {points.map((point, index) => (
+        <circle
+          key={index}
+          cx={point.x}
+          cy={point.y}
+          r={svgOptions.radius}
+          fill={svgOptions.color}
+        />
+      ))}
+    </svg>
+  );
+};
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#2563eb',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',
+  },
+} satisfies ChartConfig;
+
+const chartData = [
+  { month: 'May', desktop: 56, mobile: 224 },
+  { month: 'June', desktop: 56, mobile: 224 },
+  { month: 'January', desktop: 126, mobile: 252 },
+  { month: 'February', desktop: 205, mobile: 410 },
+  { month: 'March', desktop: 200, mobile: 126 },
+  { month: 'April', desktop: 400, mobile: 800 },
+];
+
+const MonitoringChart = () => {
+  return (
+    <ChartContainer className="h-120 aspect-auto md:h-96" config={chartConfig}>
+      <AreaChart
+        accessibilityLayer
+        data={chartData}
+        margin={{
+          left: 0,
+          right: 0,
+        }}
+      >
+        <defs>
+          <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+            <stop
+              offset="0%"
+              stopColor="var(--color-desktop)"
+              stopOpacity={0.8}
+            />
+            <stop
+              offset="55%"
+              stopColor="var(--color-desktop)"
+              stopOpacity={0.1}
+            />
+          </linearGradient>
+          <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+            <stop
+              offset="0%"
+              stopColor="var(--color-mobile)"
+              stopOpacity={0.8}
+            />
+            <stop
+              offset="55%"
+              stopColor="var(--color-mobile)"
+              stopOpacity={0.1}
+            />
+          </linearGradient>
+        </defs>
+        <CartesianGrid vertical={false} />
+        <ChartTooltip
+          active
+          cursor={false}
+          content={<ChartTooltipContent className="dark:bg-muted" />}
+        />
+        <Area
+          strokeWidth={2}
+          dataKey="mobile"
+          type="stepBefore"
+          fill="url(#fillMobile)"
+          fillOpacity={0.1}
+          stroke="var(--color-mobile)"
+          stackId="a"
+        />
+        <Area
+          strokeWidth={2}
+          dataKey="desktop"
+          type="stepBefore"
+          fill="url(#fillDesktop)"
+          fillOpacity={0.1}
+          stroke="var(--color-desktop)"
+          stackId="a"
+        />
+      </AreaChart>
+    </ChartContainer>
+  );
+};
diff --git a/src/app/[locale]/preview/features/one/page.tsx b/src/app/[locale]/preview/features/one/page.tsx
new file mode 100644
index 0000000..6d4fad0
--- /dev/null
+++ b/src/app/[locale]/preview/features/one/page.tsx
@@ -0,0 +1,89 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Settings2, Sparkles, Zap } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export default function Features() {
+  return (
+    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="@container mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Built to cover your needs
+          </h2>
+          <p className="mt-4">
+            Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
+            repellendus.
+          </p>
+        </div>
+        <div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 *:text-center md:mt-16">
+          <Card className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Zap className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Customizable</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="text-sm">
+                Extensive customization options, allowing you to tailor every
+                aspect to meet your specific needs.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Settings2 className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">You have full control</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                From design elements to functionality, you have complete control
+                to create a unique and personalized experience.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Sparkles className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Powered By AI</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                Elements to functionality, you have complete control to create a
+                unique experience.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const CardDecorator = ({ children }: { children: ReactNode }) => (
+  <div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
+    <div
+      aria-hidden
+      className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
+    />
+    <div
+      aria-hidden
+      className="bg-radial to-background absolute inset-0 from-transparent to-75%"
+    />
+    <div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
+      {children}
+    </div>
+  </div>
+);
diff --git a/src/app/[locale]/preview/features/seven/page.tsx b/src/app/[locale]/preview/features/seven/page.tsx
new file mode 100644
index 0000000..d23d7ee
--- /dev/null
+++ b/src/app/[locale]/preview/features/seven/page.tsx
@@ -0,0 +1,89 @@
+import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
+import Image from 'next/image';
+
+export default function FeaturesSection() {
+  return (
+    <section className="overflow-hidden py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
+        <div className="relative z-10 max-w-2xl">
+          <h2 className="text-4xl font-semibold lg:text-5xl">
+            Built for Scaling teams
+          </h2>
+          <p className="mt-6 text-lg">
+            Empower your team with workflows that adapt to your needs, whether
+            you prefer git synchronization or a AI Agents interface.
+          </p>
+        </div>
+        <div className="relative -mx-4 rounded-3xl p-3 md:-mx-12 lg:col-span-3">
+          <div className="perspective-midrange">
+            <div className="rotate-x-6 -skew-2">
+              <div className="aspect-88/36 relative">
+                <div className="bg-radial-[at_75%_25%] to-background z-1 -inset-17 absolute from-transparent to-75%"></div>
+                <Image
+                  src="/blocks/mail-upper.png"
+                  className="absolute inset-0 z-10"
+                  alt="payments illustration dark"
+                  width={2797}
+                  height={1137}
+                />
+                <Image
+                  src="/blocks/mail-back.png"
+                  className="hidden dark:block"
+                  alt="payments illustration dark"
+                  width={2797}
+                  height={1137}
+                />
+                <Image
+                  src="/blocks/mail-back-light.png"
+                  className="dark:hidden"
+                  alt="payments illustration light"
+                  width={2797}
+                  height={1137}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Zap className="size-4" />
+              <h3 className="text-sm font-medium">Faaast</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Cpu className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and businesses.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Lock className="size-4" />
+              <h3 className="text-sm font-medium">Security</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Sparkles className="size-4" />
+
+              <h3 className="text-sm font-medium">AI Powered</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/six/page.tsx b/src/app/[locale]/preview/features/six/page.tsx
new file mode 100644
index 0000000..a5cb39e
--- /dev/null
+++ b/src/app/[locale]/preview/features/six/page.tsx
@@ -0,0 +1,85 @@
+import { Cpu, Lock, Sparkles, Zap } from 'lucide-react';
+import Image from 'next/image';
+
+export default function FeaturesSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-12 px-6">
+        <div className="relative z-10 grid items-center gap-4 md:grid-cols-2 md:gap-12">
+          <h2 className="text-4xl font-semibold">
+            The Lyra ecosystem brings together our models
+          </h2>
+          <p className="max-w-sm sm:ml-auto">
+            Empower your team with workflows that adapt to your needs, whether
+            you prefer git synchronization or a AI Agents interface.
+          </p>
+        </div>
+        <div className="relative rounded-3xl p-3 md:-mx-8 lg:col-span-3">
+          <div className="aspect-88/36 relative">
+            <div className="bg-linear-to-t z-1 from-background absolute inset-0 to-transparent"></div>
+            <Image
+              src="/blocks/mail-upper.png"
+              className="absolute inset-0 z-10"
+              alt="payments illustration dark"
+              width={2797}
+              height={1137}
+            />
+            <Image
+              src="/blocks/mail-back.png"
+              className="hidden dark:block"
+              alt="payments illustration dark"
+              width={2797}
+              height={1137}
+            />
+            <Image
+              src="/blocks/mail-back-light.png"
+              className="dark:hidden"
+              alt="payments illustration light"
+              width={2797}
+              height={1137}
+            />
+          </div>
+        </div>
+        <div className="relative mx-auto grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-8 lg:grid-cols-4">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Zap className="size-4" />
+              <h3 className="text-sm font-medium">Faaast</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Cpu className="size-4" />
+              <h3 className="text-sm font-medium">Powerful</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an entire helping developers and businesses.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Lock className="size-4" />
+              <h3 className="text-sm font-medium">Security</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Sparkles className="size-4" />
+
+              <h3 className="text-sm font-medium">AI Powered</h3>
+            </div>
+            <p className="text-muted-foreground text-sm">
+              It supports an helping developers businesses innovate.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/ten/page.tsx b/src/app/[locale]/preview/features/ten/page.tsx
new file mode 100644
index 0000000..dd4fb2e
--- /dev/null
+++ b/src/app/[locale]/preview/features/ten/page.tsx
@@ -0,0 +1,202 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { Calendar, LucideIcon, MapIcon } from 'lucide-react';
+import Image from 'next/image';
+import { ReactNode } from 'react';
+
+export default function Features() {
+  return (
+    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-5xl">
+        <div className="mx-auto grid gap-4 lg:grid-cols-2">
+          <FeatureCard>
+            <CardHeader className="pb-3">
+              <CardHeading
+                icon={MapIcon}
+                title="Real time location tracking"
+                description="Advanced tracking system, Instantly locate all your assets."
+              />
+            </CardHeader>
+
+            <div className="relative mb-6 border-t border-dashed sm:mb-0">
+              <div className="absolute inset-0 [background:radial-gradient(125%_125%_at_50%_0%,transparent_40%,var(--color-blue-600),var(--color-white)_100%)]"></div>
+              <div className="aspect-76/59 p-1 px-6">
+                <DualModeImage
+                  darkSrc="/blocks/payments.png"
+                  lightSrc="/blocks/payments-light.png"
+                  alt="payments illustration"
+                  width={1207}
+                  height={929}
+                />
+              </div>
+            </div>
+          </FeatureCard>
+
+          <FeatureCard>
+            <CardHeader className="pb-3">
+              <CardHeading
+                icon={Calendar}
+                title="Advanced Scheduling"
+                description="Scheduling system, Instantly locate all your assets."
+              />
+            </CardHeader>
+
+            <CardContent>
+              <div className="relative mb-6 sm:mb-0">
+                <div className="absolute -inset-6 [background:radial-gradient(50%_50%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
+                <div className="aspect-76/59 border">
+                  <DualModeImage
+                    darkSrc="/blocks/origin-cal-dark.png"
+                    lightSrc="/blocks/origin-cal.png"
+                    alt="calendar illustration"
+                    width={1207}
+                    height={929}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </FeatureCard>
+
+          <FeatureCard className="p-6 lg:col-span-2">
+            <p className="mx-auto my-6 max-w-md text-balance text-center text-2xl font-semibold">
+              Smart scheduling with automated reminders for maintenance.
+            </p>
+
+            <div className="flex justify-center gap-6 overflow-hidden">
+              <CircularUI
+                label="Inclusion"
+                circles={[{ pattern: 'border' }, { pattern: 'border' }]}
+              />
+
+              <CircularUI
+                label="Inclusion"
+                circles={[{ pattern: 'none' }, { pattern: 'primary' }]}
+              />
+
+              <CircularUI
+                label="Join"
+                circles={[{ pattern: 'blue' }, { pattern: 'none' }]}
+              />
+
+              <CircularUI
+                label="Exclusion"
+                circles={[{ pattern: 'primary' }, { pattern: 'none' }]}
+                className="hidden sm:block"
+              />
+            </div>
+          </FeatureCard>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface FeatureCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const FeatureCard = ({ children, className }: FeatureCardProps) => (
+  <Card
+    className={cn('group relative rounded-none shadow-zinc-950/5', className)}
+  >
+    <CardDecorator />
+    {children}
+  </Card>
+);
+
+const CardDecorator = () => (
+  <>
+    <span className="border-primary absolute -left-px -top-px block size-2 border-l-2 border-t-2"></span>
+    <span className="border-primary absolute -right-px -top-px block size-2 border-r-2 border-t-2"></span>
+    <span className="border-primary absolute -bottom-px -left-px block size-2 border-b-2 border-l-2"></span>
+    <span className="border-primary absolute -bottom-px -right-px block size-2 border-b-2 border-r-2"></span>
+  </>
+);
+
+interface CardHeadingProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+const CardHeading = ({ icon: Icon, title, description }: CardHeadingProps) => (
+  <div className="p-6">
+    <span className="text-muted-foreground flex items-center gap-2">
+      <Icon className="size-4" />
+      {title}
+    </span>
+    <p className="mt-8 text-2xl font-semibold">{description}</p>
+  </div>
+);
+
+interface DualModeImageProps {
+  darkSrc: string;
+  lightSrc: string;
+  alt: string;
+  width: number;
+  height: number;
+  className?: string;
+}
+
+const DualModeImage = ({
+  darkSrc,
+  lightSrc,
+  alt,
+  width,
+  height,
+  className,
+}: DualModeImageProps) => (
+  <>
+    <Image
+      src={darkSrc}
+      className={cn('hidden dark:block', className)}
+      alt={`${alt} dark`}
+      width={width}
+      height={height}
+    />
+    <Image
+      src={lightSrc}
+      className={cn('shadow dark:hidden', className)}
+      alt={`${alt} light`}
+      width={width}
+      height={height}
+    />
+  </>
+);
+
+interface CircleConfig {
+  pattern: 'none' | 'border' | 'primary' | 'blue';
+}
+
+interface CircularUIProps {
+  label: string;
+  circles: CircleConfig[];
+  className?: string;
+}
+
+const CircularUI = ({ label, circles, className }: CircularUIProps) => (
+  <div className={className}>
+    <div className="bg-linear-to-b from-border size-fit rounded-2xl to-transparent p-px">
+      <div className="bg-linear-to-b from-background to-muted/25 relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4">
+        {circles.map((circle, i) => (
+          <div
+            key={i}
+            className={cn('size-7 rounded-full border sm:size-8', {
+              'border-primary': circle.pattern === 'none',
+              'border-primary bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_4px)]':
+                circle.pattern === 'border',
+              'border-primary bg-background bg-[repeating-linear-gradient(-45deg,var(--color-primary),var(--color-primary)_1px,transparent_1px,transparent_4px)]':
+                circle.pattern === 'primary',
+              'bg-background z-1 border-blue-500 bg-[repeating-linear-gradient(-45deg,var(--color-blue-500),var(--color-blue-500)_1px,transparent_1px,transparent_4px)]':
+                circle.pattern === 'blue',
+            })}
+          ></div>
+        ))}
+      </div>
+    </div>
+    <span className="text-muted-foreground mt-1.5 block text-center text-sm">
+      {label}
+    </span>
+  </div>
+);
diff --git a/src/app/[locale]/preview/features/three/page.tsx b/src/app/[locale]/preview/features/three/page.tsx
new file mode 100644
index 0000000..92d6d6e
--- /dev/null
+++ b/src/app/[locale]/preview/features/three/page.tsx
@@ -0,0 +1,89 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Settings2, Sparkles, Zap } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export default function Features() {
+  return (
+    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="@container mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Built to cover your needs
+          </h2>
+          <p className="mt-4">
+            Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
+            repellendus.
+          </p>
+        </div>
+        <Card className="@min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0 mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16">
+          <div className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Zap className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Customizable</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="text-sm">
+                Extensive customization options, allowing you to tailor every
+                aspect to meet your specific needs.
+              </p>
+            </CardContent>
+          </div>
+
+          <div className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Settings2 className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">You have full control</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                From design elements to functionality, you have complete control
+                to create a unique and personalized experience.
+              </p>
+            </CardContent>
+          </div>
+
+          <div className="group shadow-zinc-950/5">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Sparkles className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Powered By AI</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                Elements to functionality, you have complete control to create a
+                unique experience.
+              </p>
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </section>
+  );
+}
+
+const CardDecorator = ({ children }: { children: ReactNode }) => (
+  <div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
+    <div
+      aria-hidden
+      className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
+    />
+    <div
+      aria-hidden
+      className="bg-radial to-background absolute inset-0 from-transparent to-75%"
+    />
+    <div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t">
+      {children}
+    </div>
+  </div>
+);
diff --git a/src/app/[locale]/preview/features/twelve/page.tsx b/src/app/[locale]/preview/features/twelve/page.tsx
new file mode 100644
index 0000000..28924c0
--- /dev/null
+++ b/src/app/[locale]/preview/features/twelve/page.tsx
@@ -0,0 +1,150 @@
+'use client';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import {
+  ChartBarIncreasingIcon,
+  Database,
+  Fingerprint,
+  IdCard,
+} from 'lucide-react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { BorderBeam } from '@/components/magicui/border-beam';
+
+export default function Features() {
+  type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4';
+  const [activeItem, setActiveItem] = useState<ImageKey>('item-1');
+
+  const images = {
+    'item-1': {
+      image: '/blocks/charts.png',
+      alt: 'Database visualization',
+    },
+    'item-2': {
+      image: '/blocks/music.png',
+      alt: 'Security authentication',
+    },
+    'item-3': {
+      image: '/blocks/mail2.png',
+      alt: 'Identity management',
+    },
+    'item-4': {
+      image: '/blocks/payments.png',
+      alt: 'Analytics dashboard',
+    },
+  };
+
+  return (
+    <section className="py-12 md:py-20 lg:py-32">
+      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
+        <div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-6xl">
+            The foundation for AI
+          </h2>
+          <p>
+            Lyra is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
+          <Accordion
+            type="single"
+            value={activeItem}
+            onValueChange={(value) => setActiveItem(value as ImageKey)}
+            className="w-full"
+          >
+            <AccordionItem value="item-1">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <Database className="size-4" />
+                  Database Visualization
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                Lyra is evolving to be more than just the models. It supports an
+                entire to the APIs and platforms helping developers and
+                businesses innovate.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <Fingerprint className="size-4" />
+                  Advanced Authentication
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                Lyra is evolving to be more than just the models. It supports an
+                entire to the APIs and platforms helping developers and
+                businesses innovate.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <IdCard className="size-4" />
+                  Identity Management
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                Lyra is evolving to be more than just the models. It supports an
+                entire to the APIs and platforms helping developers and
+                businesses innovate.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-4">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <ChartBarIncreasingIcon className="size-4" />
+                  Analytics Dashboard
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                Lyra is evolving to be more than just the models. It supports an
+                entire to the APIs and platforms helping developers and
+                businesses innovate.
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <div className="bg-background relative flex overflow-hidden rounded-3xl border p-2">
+            <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div>
+            <div className="aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${activeItem}-id`}
+                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
+                >
+                  <Image
+                    src={images[activeItem].image}
+                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
+                    alt={images[activeItem].alt}
+                    width={1207}
+                    height={929}
+                  />
+                </motion.div>
+              </AnimatePresence>
+            </div>
+            <BorderBeam
+              duration={6}
+              size={200}
+              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/features/two/page.tsx b/src/app/[locale]/preview/features/two/page.tsx
new file mode 100644
index 0000000..9cfbdbd
--- /dev/null
+++ b/src/app/[locale]/preview/features/two/page.tsx
@@ -0,0 +1,89 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Settings2, Sparkles, Zap } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export default function Features() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="@container mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            Built to cover your needs
+          </h2>
+          <p className="mt-4">
+            Libero sapiente aliquam quibusdam aspernatur, praesentium iusto
+            repellendus.
+          </p>
+        </div>
+        <div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]">
+          <Card className="group border-0 shadow-none">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Zap className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Customizable</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="text-sm">
+                Extensive customization options, allowing you to tailor every
+                aspect to meet your specific needs.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="group border-0 shadow-none">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Settings2 className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">You have full control</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                From design elements to functionality, you have complete control
+                to create a unique and personalized experience.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card className="group border-0 shadow-none">
+            <CardHeader className="pb-3">
+              <CardDecorator>
+                <Sparkles className="size-6" aria-hidden />
+              </CardDecorator>
+
+              <h3 className="mt-6 font-medium">Powered By AI</h3>
+            </CardHeader>
+
+            <CardContent>
+              <p className="mt-3 text-sm">
+                Elements to functionality, you have complete control to create a
+                unique experience.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const CardDecorator = ({ children }: { children: ReactNode }) => (
+  <div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
+    <div
+      aria-hidden
+      className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
+    />
+    <div
+      aria-hidden
+      className="bg-radial to-background absolute inset-0 from-transparent to-75%"
+    />
+    <div className="dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white">
+      {children}
+    </div>
+  </div>
+);
diff --git a/src/app/[locale]/preview/footer/five/page.tsx b/src/app/[locale]/preview/footer/five/page.tsx
new file mode 100644
index 0000000..1bcc9b9
--- /dev/null
+++ b/src/app/[locale]/preview/footer/five/page.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Logo } from '@/components/layout/logo';
+
+const enterpriseLinks = [
+  { href: '#', label: 'About' },
+  { href: '#', label: 'Customers' },
+  { href: '#', label: 'Enterprise' },
+  { href: '#', label: 'Partners' },
+  { href: '#', label: 'Jobs' },
+];
+
+const productLinks = [
+  { href: '#', label: 'Security' },
+  { href: '#', label: 'Customization' },
+  { href: '#', label: 'Enterprise' },
+  { href: '#', label: 'Partners' },
+];
+
+const docsLinks = [
+  { href: '#', label: 'Introduction' },
+  { href: '#', label: 'Installation' },
+  { href: '#', label: 'Utils' },
+  { href: '#', label: 'Principles' },
+  { href: '#', label: 'Jargon' },
+  { href: '#', label: 'Plugin' },
+  { href: '#', label: 'Customizer' },
+  { href: '#', label: 'Boilerplates' },
+];
+
+const communityLinks = [
+  { href: '#', label: 'GitHub' },
+  { href: '#', label: 'Discord' },
+  { href: '#', label: 'Slack' },
+  { href: '#', label: 'X / Twitter' },
+];
+
+const footerLinks = [
+  {
+    name: 'Enterprise',
+    links: enterpriseLinks,
+  },
+  {
+    name: 'Product',
+    links: productLinks,
+  },
+  {
+    name: 'Docs',
+    links: docsLinks,
+  },
+];
+
+export default function Footer() {
+  return (
+    <footer className="m-1 rounded-3xl border">
+      <div className="mx-auto max-w-5xl space-y-16 px-5 py-16">
+        <div className="flex flex-wrap items-center justify-between gap-4 border-b pb-8">
+          <Link href="/" aria-label="go home">
+            <Logo />
+          </Link>
+          <div className="flex gap-3">
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Threads"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                  d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
+                  color="currentColor"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Instagram"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="TikTok"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
+                ></path>
+              </svg>
+            </Link>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
+          {footerLinks.map((linksGroup, index) => (
+            <div key={index}>
+              <span className="font-medium">{linksGroup.name}</span>
+              <ul className="mt-4 list-inside space-y-4">
+                {linksGroup.links.map((link, index) => (
+                  <li key={index}>
+                    <Link
+                      href={link.href}
+                      className="hover:text-primary text-muted-foreground text-sm duration-150"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+          <div>
+            <span className="text-sm font-medium">Community</span>
+            <ul className="mt-4 list-inside space-y-4">
+              {communityLinks.map((link, index) => (
+                <li key={index}>
+                  <Link
+                    href={link.href}
+                    className="hover:text-primary text-muted-foreground text-sm duration-150"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+
+            <form className="mt-12 w-full max-w-xs">
+              <div className="space-y-2.5">
+                <Label className="block text-sm font-medium" htmlFor="email">
+                  Subscribe to our newsletter
+                </Label>
+                <Input
+                  className="input variant-mixed sz-md"
+                  placeholder="Your email"
+                  type="email"
+                  id="email"
+                  required
+                  name="email"
+                />
+              </div>
+              <Button type="submit" className="mt-3">
+                <span>Subscribe</span>
+              </Button>
+            </form>
+          </div>
+        </div>
+        <div className="bg-muted mt-16 flex items-center justify-between rounded-md p-4 px-6 py-3">
+          <span className="text-title">&copy; tailus 2021 - Present</span>
+          <Link
+            href="#"
+            className="text-muted-foreground hover:text-primary text-sm"
+          >
+            Licence
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/[locale]/preview/footer/four/page.tsx b/src/app/[locale]/preview/footer/four/page.tsx
new file mode 100644
index 0000000..b4774ca
--- /dev/null
+++ b/src/app/[locale]/preview/footer/four/page.tsx
@@ -0,0 +1,53 @@
+import Link from 'next/link';
+
+const links = [
+  {
+    title: 'Features',
+    href: '#',
+  },
+  {
+    title: 'Solution',
+    href: '#',
+  },
+  {
+    title: 'Customers',
+    href: '#',
+  },
+  {
+    title: 'Pricing',
+    href: '#',
+  },
+  {
+    title: 'Help',
+    href: '#',
+  },
+  {
+    title: 'About',
+    href: '#',
+  },
+];
+
+export default function FooterSection() {
+  return (
+    <footer className="border-b bg-white py-12 dark:bg-transparent">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="flex flex-wrap justify-between gap-6">
+          <span className="text-muted-foreground order-last block text-center text-sm md:order-first">
+            © {new Date().getFullYear()} Tailus UI, All rights reserved
+          </span>
+          <div className="order-first flex flex-wrap justify-center gap-6 text-sm md:order-last">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                className="text-muted-foreground hover:text-primary block duration-150"
+              >
+                <span>{link.title}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/[locale]/preview/footer/one/page.tsx b/src/app/[locale]/preview/footer/one/page.tsx
new file mode 100644
index 0000000..cddbce3
--- /dev/null
+++ b/src/app/[locale]/preview/footer/one/page.tsx
@@ -0,0 +1,184 @@
+import { Logo } from '@/components/layout/logo';
+import Link from 'next/link';
+
+const links = [
+  {
+    title: 'Features',
+    href: '#',
+  },
+  {
+    title: 'Solution',
+    href: '#',
+  },
+  {
+    title: 'Customers',
+    href: '#',
+  },
+  {
+    title: 'Pricing',
+    href: '#',
+  },
+  {
+    title: 'Help',
+    href: '#',
+  },
+  {
+    title: 'About',
+    href: '#',
+  },
+];
+
+export default function FooterSection() {
+  return (
+    <footer className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <Link href="/" aria-label="go home" className="mx-auto block size-fit">
+          <Logo />
+        </Link>
+
+        <div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
+          {links.map((link, index) => (
+            <Link
+              key={index}
+              href={link.href}
+              className="text-muted-foreground hover:text-primary block duration-150"
+            >
+              <span>{link.title}</span>
+            </Link>
+          ))}
+        </div>
+        <div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="X/Twitter"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
+              ></path>
+            </svg>
+          </Link>
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="LinkedIn"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
+              ></path>
+            </svg>
+          </Link>
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Facebook"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
+              ></path>
+            </svg>
+          </Link>
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Threads"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
+                color="currentColor"
+              ></path>
+            </svg>
+          </Link>
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Instagram"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+              ></path>
+            </svg>
+          </Link>
+          <Link
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="TikTok"
+            className="text-muted-foreground hover:text-primary block"
+          >
+            <svg
+              className="size-6"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
+              ></path>
+            </svg>
+          </Link>
+        </div>
+        <span className="text-muted-foreground block text-center text-sm">
+          {' '}
+          © {new Date().getFullYear()} Tailus UI, All rights reserved
+        </span>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/[locale]/preview/footer/three/page.tsx b/src/app/[locale]/preview/footer/three/page.tsx
new file mode 100644
index 0000000..10839f9
--- /dev/null
+++ b/src/app/[locale]/preview/footer/three/page.tsx
@@ -0,0 +1,330 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { ChevronsUpDown } from 'lucide-react';
+import Link from 'next/link';
+
+const links = [
+  {
+    group: 'Product',
+    items: [
+      {
+        title: 'Features',
+        href: '#',
+      },
+      {
+        title: 'Solution',
+        href: '#',
+      },
+      {
+        title: 'Customers',
+        href: '#',
+      },
+      {
+        title: 'Pricing',
+        href: '#',
+      },
+      {
+        title: 'Help',
+        href: '#',
+      },
+      {
+        title: 'About',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Solution',
+    items: [
+      {
+        title: 'Startup',
+        href: '#',
+      },
+      {
+        title: 'Freelancers',
+        href: '#',
+      },
+      {
+        title: 'Organizations',
+        href: '#',
+      },
+      {
+        title: 'Students',
+        href: '#',
+      },
+      {
+        title: 'Collaboration',
+        href: '#',
+      },
+      {
+        title: 'Design',
+        href: '#',
+      },
+      {
+        title: 'Management',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Company',
+    items: [
+      {
+        title: 'About',
+        href: '#',
+      },
+      {
+        title: 'Careers',
+        href: '#',
+      },
+      {
+        title: 'Blog',
+        href: '#',
+      },
+      {
+        title: 'Press',
+        href: '#',
+      },
+      {
+        title: 'Contact',
+        href: '#',
+      },
+      {
+        title: 'Help',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Legal',
+    items: [
+      {
+        title: 'Licence',
+        href: '#',
+      },
+      {
+        title: 'Privacy',
+        href: '#',
+      },
+      {
+        title: 'Cookies',
+        href: '#',
+      },
+      {
+        title: 'Security',
+        href: '#',
+      },
+    ],
+  },
+];
+
+export default function FooterSection() {
+  return (
+    <footer className="border-b bg-white pt-20 dark:bg-transparent">
+      <div className="mb-8 border-b md:mb-12">
+        <div className="mx-auto flex max-w-5xl flex-wrap items-end justify-between gap-6 px-6 pb-6">
+          <Link href="/" aria-label="go home" className="block size-fit">
+            <Logo />
+          </Link>
+          <div className="flex flex-wrap justify-center gap-6 text-sm">
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="X/Twitter"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="LinkedIn"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Facebook"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Threads"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                  d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
+                  color="currentColor"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Instagram"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="TikTok"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
+                ></path>
+              </svg>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-12 md:grid-cols-5 md:gap-0 lg:grid-cols-4">
+          <div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-5 md:row-start-1 lg:col-span-3">
+            {links.map((link, index) => (
+              <div key={index} className="space-y-4 text-sm">
+                <span className="block font-medium">{link.group}</span>
+                {link.items.map((item, index) => (
+                  <Link
+                    key={index}
+                    href={item.href}
+                    className="text-muted-foreground hover:text-primary block duration-150"
+                  >
+                    <span>{item.title}</span>
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+          <form className="row-start-1 border-b pb-8 text-sm md:col-span-2 md:border-none lg:col-span-1">
+            <div className="space-y-4">
+              <Label htmlFor="mail" className="block font-medium">
+                Newsletter
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  type="email"
+                  id="mail"
+                  name="mail"
+                  placeholder="Your email"
+                  className="h-8 text-sm"
+                />
+                <Button size="sm">Submit</Button>
+              </div>
+              <span className="text-muted-foreground block text-sm">
+                Don't miss any update!
+              </span>
+            </div>
+          </form>
+        </div>
+        <div className="mt-12 flex flex-wrap items-end justify-between gap-6 border-t py-6">
+          <small className="text-muted-foreground order-last block text-center text-sm md:order-first">
+            © {new Date().getFullYear()} Tailus UI, All rights reserved
+          </small>
+          <form action="">
+            <div className="relative">
+              <ChevronsUpDown
+                className="pointer-events-none absolute inset-y-0 right-2 my-auto opacity-75"
+                size="0.75rem"
+              />
+              <select
+                className={cn(
+                  'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground shadow-xs flex h-9 w-full min-w-32 appearance-none rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                  'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+                  'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+                )}
+                name="language"
+              >
+                <option value="1">English</option>
+                <option value="2">Espanol</option>
+                <option value="3">Français</option>
+                <option value="4">Swahili</option>
+                <option value="5">Lingala</option>
+              </select>
+            </div>
+          </form>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/[locale]/preview/footer/two/page.tsx b/src/app/[locale]/preview/footer/two/page.tsx
new file mode 100644
index 0000000..b91d0ab
--- /dev/null
+++ b/src/app/[locale]/preview/footer/two/page.tsx
@@ -0,0 +1,282 @@
+import { Logo } from '@/components/layout/logo';
+import Link from 'next/link';
+
+const links = [
+  {
+    group: 'Product',
+    items: [
+      {
+        title: 'Features',
+        href: '#',
+      },
+      {
+        title: 'Solution',
+        href: '#',
+      },
+      {
+        title: 'Customers',
+        href: '#',
+      },
+      {
+        title: 'Pricing',
+        href: '#',
+      },
+      {
+        title: 'Help',
+        href: '#',
+      },
+      {
+        title: 'About',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Solution',
+    items: [
+      {
+        title: 'Startup',
+        href: '#',
+      },
+      {
+        title: 'Freelancers',
+        href: '#',
+      },
+      {
+        title: 'Organizations',
+        href: '#',
+      },
+      {
+        title: 'Students',
+        href: '#',
+      },
+      {
+        title: 'Collaboration',
+        href: '#',
+      },
+      {
+        title: 'Design',
+        href: '#',
+      },
+      {
+        title: 'Management',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Company',
+    items: [
+      {
+        title: 'About',
+        href: '#',
+      },
+      {
+        title: 'Careers',
+        href: '#',
+      },
+      {
+        title: 'Blog',
+        href: '#',
+      },
+      {
+        title: 'Press',
+        href: '#',
+      },
+      {
+        title: 'Contact',
+        href: '#',
+      },
+      {
+        title: 'Help',
+        href: '#',
+      },
+    ],
+  },
+  {
+    group: 'Legal',
+    items: [
+      {
+        title: 'Licence',
+        href: '#',
+      },
+      {
+        title: 'Privacy',
+        href: '#',
+      },
+      {
+        title: 'Cookies',
+        href: '#',
+      },
+      {
+        title: 'Security',
+        href: '#',
+      },
+    ],
+  },
+];
+
+export default function FooterSection() {
+  return (
+    <footer className="border-b bg-white pt-20 dark:bg-transparent">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid gap-12 md:grid-cols-5">
+          <div className="md:col-span-2">
+            <Link href="/" aria-label="go home" className="block size-fit">
+              <Logo />
+            </Link>
+          </div>
+
+          <div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-3">
+            {links.map((link, index) => (
+              <div key={index} className="space-y-4 text-sm">
+                <span className="block font-medium">{link.group}</span>
+                {link.items.map((item, index) => (
+                  <Link
+                    key={index}
+                    href={item.href}
+                    className="text-muted-foreground hover:text-primary block duration-150"
+                  >
+                    <span>{item.title}</span>
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-12 flex flex-wrap items-end justify-between gap-6 border-t py-6">
+          <span className="text-muted-foreground order-last block text-center text-sm md:order-first">
+            © {new Date().getFullYear()} Tailus UI, All rights reserved
+          </span>
+          <div className="order-first flex flex-wrap justify-center gap-6 text-sm md:order-last">
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="X/Twitter"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="LinkedIn"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Facebook"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Threads"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                  d="M19.25 8.505c-1.577-5.867-7-5.5-7-5.5s-7.5-.5-7.5 8.995s7.5 8.996 7.5 8.996s4.458.296 6.5-3.918c.667-1.858.5-5.573-6-5.573c0 0-3 0-3 2.5c0 .976 1 2 2.5 2s3.171-1.027 3.5-3c1-6-4.5-6.5-6-4"
+                  color="currentColor"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Instagram"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+                ></path>
+              </svg>
+            </Link>
+            <Link
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="TikTok"
+              className="text-muted-foreground hover:text-primary block"
+            >
+              <svg
+                className="size-6"
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
+                ></path>
+              </svg>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/app/[locale]/preview/forgot-password/one/page.tsx b/src/app/[locale]/preview/forgot-password/one/page.tsx
new file mode 100644
index 0000000..8fc04e3
--- /dev/null
+++ b/src/app/[locale]/preview/forgot-password/one/page.tsx
@@ -0,0 +1,60 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function ForgotPasswordPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
+          <div>
+            <Link href="/" aria-label="go home">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Recover Password
+            </h1>
+            <p className="text-sm">Enter your email to receive a reset link</p>
+          </div>
+
+          <div className="mt-6 space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Email
+              </Label>
+              <Input
+                type="email"
+                required
+                name="email"
+                id="email"
+                placeholder="name@example.com"
+              />
+            </div>
+
+            <Button className="w-full">Send Reset Link</Button>
+          </div>
+
+          <div className="mt-6 text-center">
+            <p className="text-muted-foreground text-sm">
+              We'll send you a link to reset your password.
+            </p>
+          </div>
+        </div>
+
+        <div className="p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Remembered your password?
+            <Button asChild variant="link" className="px-2">
+              <Link href="/preview/login/two">Log in</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/forgot-password/two/page.tsx b/src/app/[locale]/preview/forgot-password/two/page.tsx
new file mode 100644
index 0000000..5c6c384
--- /dev/null
+++ b/src/app/[locale]/preview/forgot-password/two/page.tsx
@@ -0,0 +1,60 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function ForgotPasswordPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
+          <div className="text-center">
+            <Link href="/" aria-label="go home" className="mx-auto block w-fit">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Recover Password
+            </h1>
+            <p className="text-sm">Enter your email to receive a reset link</p>
+          </div>
+
+          <div className="mt-6 space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Email
+              </Label>
+              <Input
+                type="email"
+                required
+                name="email"
+                id="email"
+                placeholder="name@example.com"
+              />
+            </div>
+
+            <Button className="w-full">Send Reset Link</Button>
+          </div>
+
+          <div className="mt-6 text-center">
+            <p className="text-muted-foreground text-sm">
+              We'll send you a link to reset your password.
+            </p>
+          </div>
+        </div>
+
+        <div className="p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Remembered your password?
+            <Button asChild variant="link" className="px-2">
+              <Link href="/preview/login/two">Log in</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/eight/page.tsx b/src/app/[locale]/preview/hero-section/eight/page.tsx
new file mode 100644
index 0000000..31a1843
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/eight/page.tsx
@@ -0,0 +1,234 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import { Logo } from '@/components/layout/logo';
+import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+
+const menuItems = [
+  { name: 'Features', href: '#' },
+  { name: 'Solution', href: '#' },
+  { name: 'Pricing', href: '#' },
+  { name: 'About', href: '#' },
+];
+
+export default function HeroSection() {
+  const [menuState, setMenuState] = React.useState(false);
+
+  return (
+    <>
+      <header>
+        <nav
+          data-state={menuState && 'active'}
+          className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
+        >
+          <div className="m-auto max-w-5xl px-6">
+            <div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+              <div className="flex w-full justify-between lg:w-auto">
+                <Link
+                  href="/"
+                  aria-label="home"
+                  className="flex items-center space-x-2"
+                >
+                  <Logo />
+                </Link>
+
+                <button
+                  onClick={() => setMenuState(!menuState)}
+                  aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
+                  className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
+                >
+                  <Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
+                  <X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
+                </button>
+              </div>
+
+              <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+                <div className="lg:pr-4">
+                  <ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
+                    {menuItems.map((item, index) => (
+                      <li key={index}>
+                        <Link
+                          href={item.href}
+                          className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        >
+                          <span>{item.name}</span>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                  <Button asChild size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+      <main className="overflow-hidden">
+        <section>
+          <div className="relative pt-24">
+            <div className="mx-auto max-w-7xl px-6">
+              <div className="max-w-3xl text-center sm:mx-auto lg:mr-auto lg:mt-0 lg:w-4/5">
+                <Link
+                  href="/"
+                  className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
+                >
+                  <span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
+                    New
+                  </span>
+                  <span className="text-sm">Introduction Tailus UI Html</span>
+                  <span className="bg-(--color-border) block h-4 w-px"></span>
+
+                  <ArrowRight className="size-4" />
+                </Link>
+
+                <h1 className="mt-8 text-balance text-4xl font-semibold md:text-5xl xl:text-6xl xl:[line-height:1.125]">
+                  Modern Software testing reimagined
+                </h1>
+                <p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
+                  Tailwindcss highly customizable components for building modern
+                  websites and applications that look and feel the way you mean
+                  it.
+                </p>
+                <p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
+                  Highly customizable components for building modern websites
+                  and applications, with your personal spark.
+                </p>
+
+                <div className="mt-8">
+                  <Button size="lg" asChild>
+                    <Link href="#">
+                      <Rocket className="relative size-4" />
+                      <span className="text-nowrap">Start Building</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="relative mt-16">
+              <div
+                aria-hidden
+                className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
+              />
+              <div className="relative mx-auto max-w-6xl overflow-hidden px-4">
+                <Image
+                  className="z-2 border-border/25 relative hidden rounded-2xl border dark:block"
+                  src="/blocks/music.png"
+                  alt="app screen"
+                  width={2796}
+                  height={2008}
+                />
+                <Image
+                  className="z-2 border-border/25 relative rounded-2xl border dark:hidden"
+                  src="/blocks/music-light.png"
+                  alt="app screen"
+                  width={2796}
+                  height={2008}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className="bg-background relative z-10 pb-16">
+          <div className="m-auto max-w-5xl px-6">
+            <h2 className="text-center text-lg font-medium">
+              Your favorite companies are our partners.
+            </h2>
+            <div className="mx-auto mt-12 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                alt="Nvidia Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/column.svg"
+                alt="Column Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/github.svg"
+                alt="GitHub Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nike.svg"
+                alt="Nike Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/laravel.svg"
+                alt="Laravel Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-7 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/lilly.svg"
+                alt="Lilly Logo"
+                height="28"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                alt="Lemon Squeezy Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-6 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/openai.svg"
+                alt="OpenAI Logo"
+                height="24"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
+                alt="Tailwind CSS Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/vercel.svg"
+                alt="Vercel Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/zapier.svg"
+                alt="Zapier Logo"
+                height="20"
+                width="auto"
+              />
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/five/page.tsx b/src/app/[locale]/preview/hero-section/five/page.tsx
new file mode 100644
index 0000000..28bc5a9
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/five/page.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { HeroHeader } from '@/components/tailark/hero9-header';
+import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
+import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
+import { ChevronRight } from 'lucide-react';
+
+export default function HeroSection() {
+  return (
+    <>
+      <HeroHeader />
+      <main className="overflow-x-hidden">
+        <section>
+          <div className="py-24 md:pb-32 lg:pb-36 lg:pt-72">
+            <div className="relative mx-auto flex max-w-7xl flex-col px-6 lg:block lg:px-12">
+              <div className="mx-auto max-w-lg text-center lg:ml-0 lg:max-w-full lg:text-left">
+                <h1 className="mt-8 max-w-2xl text-balance text-5xl md:text-6xl lg:mt-16 xl:text-7xl">
+                  Build 10x Faster with NS
+                </h1>
+                <p className="mt-8 max-w-2xl text-balance text-lg">
+                  Highly customizable components for building modern websites
+                  and applications you mean it.
+                </p>
+
+                <div className="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start">
+                  <Button
+                    asChild
+                    size="lg"
+                    className="h-12 rounded-full pl-5 pr-3 text-base"
+                  >
+                    <Link href="#link">
+                      <span className="text-nowrap">Start Building</span>
+                      <ChevronRight className="ml-1" />
+                    </Link>
+                  </Button>
+                  <Button
+                    key={2}
+                    asChild
+                    size="lg"
+                    variant="ghost"
+                    className="h-12 rounded-full px-5 text-base hover:bg-zinc-950/5 dark:hover:bg-white/5"
+                  >
+                    <Link href="#link">
+                      <span className="text-nowrap">Request a demo</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="aspect-2/3 absolute inset-1 -z-10 overflow-hidden rounded-3xl border border-black/10 lg:aspect-video lg:rounded-[3rem] dark:border-white/5">
+              <video
+                autoPlay
+                loop
+                className="size-full -scale-x-100 object-cover opacity-50 invert dark:opacity-35 dark:invert-0 dark:lg:opacity-75"
+                src="https://res.cloudinary.com/dg4jhba5c/video/upload/v1741605033/dna_ttplyu.mp4"
+              ></video>
+            </div>
+          </div>
+        </section>
+        <section className="bg-background pb-2">
+          <div className="group relative m-auto max-w-7xl px-6">
+            <div className="flex flex-col items-center md:flex-row">
+              <div className="md:max-w-44 md:border-r md:pr-6">
+                <p className="text-end text-sm">Powering the best teams</p>
+              </div>
+              <div className="relative py-6 md:w-[calc(100%-11rem)]">
+                <InfiniteSlider speedOnHover={20} speed={40} gap={112}>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                      alt="Nvidia Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/column.svg"
+                      alt="Column Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/github.svg"
+                      alt="GitHub Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/nike.svg"
+                      alt="Nike Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                      alt="Lemon Squeezy Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/laravel.svg"
+                      alt="Laravel Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-7 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/lilly.svg"
+                      alt="Lilly Logo"
+                      height="28"
+                      width="auto"
+                    />
+                  </div>
+
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-6 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/openai.svg"
+                      alt="OpenAI Logo"
+                      height="24"
+                      width="auto"
+                    />
+                  </div>
+                </InfiniteSlider>
+
+                <div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
+                <div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
+                <ProgressiveBlur
+                  className="pointer-events-none absolute left-0 top-0 h-full w-20"
+                  direction="left"
+                  blurIntensity={1}
+                />
+                <ProgressiveBlur
+                  className="pointer-events-none absolute right-0 top-0 h-full w-20"
+                  direction="right"
+                  blurIntensity={1}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/four/page.tsx b/src/app/[locale]/preview/hero-section/four/page.tsx
new file mode 100644
index 0000000..e52fb07
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/four/page.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import { HeroHeader } from '@/components/tailark/hero8-header';
+import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
+import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
+
+export default function HeroSection() {
+  return (
+    <>
+      <HeroHeader />
+      <main className="overflow-x-hidden">
+        <section>
+          <div className="pb-24 pt-12 md:pb-32 lg:pb-56 lg:pt-44">
+            <div className="relative mx-auto flex max-w-6xl flex-col px-6 lg:block">
+              <div className="mx-auto max-w-lg text-center lg:ml-0 lg:w-1/2 lg:text-left">
+                <h1 className="mt-8 max-w-2xl text-balance text-5xl font-medium md:text-6xl lg:mt-16 xl:text-7xl">
+                  Ship 10x Faster with NS
+                </h1>
+                <p className="mt-8 max-w-2xl text-pretty text-lg">
+                  Highly customizable components for building modern websites
+                  and applications that look and feel the way you mean it.
+                </p>
+
+                <div className="mt-12 flex flex-col items-center justify-center gap-2 sm:flex-row lg:justify-start">
+                  <Button asChild size="lg" className="px-5 text-base">
+                    <Link href="#link">
+                      <span className="text-nowrap">Start Building</span>
+                    </Link>
+                  </Button>
+                  <Button
+                    key={2}
+                    asChild
+                    size="lg"
+                    variant="ghost"
+                    className="px-5 text-base"
+                  >
+                    <Link href="#link">
+                      <span className="text-nowrap">Request a demo</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+              <Image
+                className="-z-10 order-first ml-auto h-56 w-full object-cover invert sm:h-96 lg:absolute lg:inset-0 lg:-right-20 lg:-top-96 lg:order-last lg:h-max lg:w-2/3 lg:object-contain dark:mix-blend-lighten dark:invert-0"
+                src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605150/abstract-bg_wq4f8w.jpg"
+                alt="Abstract Object"
+                height="4000"
+                width="3000"
+              />
+            </div>
+          </div>
+        </section>
+        <section className="bg-background pb-16 md:pb-32">
+          <div className="group relative m-auto max-w-6xl px-6">
+            <div className="flex flex-col items-center md:flex-row">
+              <div className="md:max-w-44 md:border-r md:pr-6">
+                <p className="text-end text-sm">Powering the best teams</p>
+              </div>
+              <div className="relative py-6 md:w-[calc(100%-11rem)]">
+                <InfiniteSlider speedOnHover={20} speed={40} gap={112}>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                      alt="Nvidia Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/column.svg"
+                      alt="Column Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/github.svg"
+                      alt="GitHub Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/nike.svg"
+                      alt="Nike Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-5 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                      alt="Lemon Squeezy Logo"
+                      height="20"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-4 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/laravel.svg"
+                      alt="Laravel Logo"
+                      height="16"
+                      width="auto"
+                    />
+                  </div>
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-7 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/lilly.svg"
+                      alt="Lilly Logo"
+                      height="28"
+                      width="auto"
+                    />
+                  </div>
+
+                  <div className="flex">
+                    <img
+                      className="mx-auto h-6 w-fit dark:invert"
+                      src="https://html.tailus.io/blocks/customers/openai.svg"
+                      alt="OpenAI Logo"
+                      height="24"
+                      width="auto"
+                    />
+                  </div>
+                </InfiniteSlider>
+
+                <div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
+                <div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
+                <ProgressiveBlur
+                  className="pointer-events-none absolute left-0 top-0 h-full w-20"
+                  direction="left"
+                  blurIntensity={1}
+                />
+                <ProgressiveBlur
+                  className="pointer-events-none absolute right-0 top-0 h-full w-20"
+                  direction="right"
+                  blurIntensity={1}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/nine/page.tsx b/src/app/[locale]/preview/hero-section/nine/page.tsx
new file mode 100644
index 0000000..7bea339
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/nine/page.tsx
@@ -0,0 +1,247 @@
+'use client';
+import { Logo } from '@/components/layout/logo';
+import Link from 'next/link';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Menu, X } from 'lucide-react';
+import Image from 'next/image';
+
+const menuItems = [
+  { name: 'Features', href: '#' },
+  { name: 'Solution', href: '#' },
+  { name: 'Pricing', href: '#' },
+  { name: 'About', href: '#' },
+];
+
+export default function HeroSection() {
+  const [menuState, setMenuState] = useState(false);
+  return (
+    <>
+      <header>
+        <nav
+          data-state={menuState && 'active'}
+          className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
+        >
+          <div className="m-auto max-w-5xl px-6">
+            <div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+              <div className="flex w-full justify-between lg:w-auto">
+                <Link
+                  href="/"
+                  aria-label="home"
+                  className="flex items-center space-x-2"
+                >
+                  <Logo />
+                </Link>
+
+                <button
+                  onClick={() => setMenuState(!menuState)}
+                  aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
+                  className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
+                >
+                  <Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
+                  <X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
+                </button>
+              </div>
+
+              <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+                <div className="lg:pr-4">
+                  <ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
+                    {menuItems.map((item, index) => (
+                      <li key={index}>
+                        <Link
+                          href={item.href}
+                          className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        >
+                          <span>{item.name}</span>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                  <Button asChild size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      <main>
+        <div
+          aria-hidden
+          className="z-2 absolute inset-0 isolate hidden opacity-50 contain-strict lg:block"
+        >
+          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
+          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        </div>
+
+        <section className="overflow-hidden bg-white dark:bg-transparent">
+          <div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-24">
+            <div className="relative z-10 mx-auto max-w-2xl text-center">
+              <h1 className="text-balance text-4xl font-semibold md:text-5xl lg:text-6xl">
+                Modern Software testing reimagined
+              </h1>
+              <p className="mx-auto my-8 max-w-2xl text-xl">
+                Officiis laudantium excepturi ducimus rerum dignissimos, and
+                tempora nam vitae, excepturi ducimus iste provident dolores.
+              </p>
+
+              <Button asChild size="lg">
+                <Link href="#">
+                  <span className="btn-label">Start Building</span>
+                </Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="mx-auto -mt-16 max-w-7xl">
+            <div className="perspective-distant -mr-16 pl-16 lg:-mr-56 lg:pl-56">
+              <div className="[transform:rotateX(20deg);]">
+                <div className="lg:h-176 relative skew-x-[.36rad]">
+                  <div
+                    aria-hidden
+                    className="bg-linear-to-b from-background to-background z-1 absolute -inset-16 via-transparent sm:-inset-32"
+                  />
+                  <div
+                    aria-hidden
+                    className="bg-linear-to-r from-background to-background z-1 absolute -inset-16 bg-white/50 via-transparent sm:-inset-32 dark:bg-transparent"
+                  />
+
+                  <div
+                    aria-hidden
+                    className="absolute -inset-16 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] [--color-border:var(--color-zinc-400)] sm:-inset-32 dark:[--color-border:color-mix(in_oklab,var(--color-white)_20%,transparent)]"
+                  />
+                  <div
+                    aria-hidden
+                    className="from-background z-11 absolute inset-0 bg-gradient-to-l"
+                  />
+                  <div
+                    aria-hidden
+                    className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
+                  />
+                  <div
+                    aria-hidden
+                    className="z-2 absolute inset-0 size-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,transparent_40%,var(--color-background)_100%)]"
+                  />
+
+                  <Image
+                    className="rounded-(--radius) z-1 relative border dark:hidden"
+                    src="/blocks/card.png"
+                    alt="tailus ui hero section"
+                    width={2880}
+                    height={2074}
+                  />
+                  <Image
+                    className="rounded-(--radius) z-1 relative hidden border dark:block"
+                    src="/blocks/dark-card.webp"
+                    alt="tailus ui hero section"
+                    width={2880}
+                    height={2074}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className="bg-background relative z-10 py-16">
+          <div className="m-auto max-w-5xl px-6">
+            <h2 className="text-center text-lg font-medium">
+              Your favorite companies are our partners.
+            </h2>
+            <div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                alt="Nvidia Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/column.svg"
+                alt="Column Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/github.svg"
+                alt="GitHub Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nike.svg"
+                alt="Nike Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/laravel.svg"
+                alt="Laravel Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-7 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/lilly.svg"
+                alt="Lilly Logo"
+                height="28"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                alt="Lemon Squeezy Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-6 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/openai.svg"
+                alt="OpenAI Logo"
+                height="24"
+                width="auto"
+              />
+              <img
+                className="h-4 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
+                alt="Tailwind CSS Logo"
+                height="16"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/vercel.svg"
+                alt="Vercel Logo"
+                height="20"
+                width="auto"
+              />
+              <img
+                className="h-5 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/zapier.svg"
+                alt="Zapier Logo"
+                height="20"
+                width="auto"
+              />
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/one/page.tsx b/src/app/[locale]/preview/hero-section/one/page.tsx
new file mode 100644
index 0000000..a0c1c2b
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/one/page.tsx
@@ -0,0 +1,300 @@
+import React from 'react';
+import Link from 'next/link';
+import { ArrowRight, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import { TextEffect } from '@/components/tailark/motion/text-effect';
+import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
+import { HeroHeader } from '@/components/tailark/hero5-header';
+
+const transitionVariants = {
+  item: {
+    hidden: {
+      opacity: 0,
+      filter: 'blur(12px)',
+      y: 12,
+    },
+    visible: {
+      opacity: 1,
+      filter: 'blur(0px)',
+      y: 0,
+      transition: {
+        type: 'spring',
+        bounce: 0.3,
+        duration: 1.5,
+      },
+    },
+  },
+};
+
+export default function HeroSection() {
+  return (
+    <>
+      <HeroHeader />
+      <main className="overflow-hidden">
+        <div
+          aria-hidden
+          className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
+        >
+          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
+          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        </div>
+        <section>
+          <div className="relative pt-24 md:pt-36">
+            <AnimatedGroup
+              variants={{
+                container: {
+                  visible: {
+                    transition: {
+                      delayChildren: 1,
+                    },
+                  },
+                },
+                item: {
+                  hidden: {
+                    opacity: 0,
+                    y: 20,
+                  },
+                  visible: {
+                    opacity: 1,
+                    y: 0,
+                    transition: {
+                      type: 'spring',
+                      bounce: 0.3,
+                      duration: 2,
+                    },
+                  },
+                },
+              }}
+              className="absolute inset-0 -z-20"
+            >
+              <Image
+                src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605538/night-background_ni3vqb.jpg"
+                alt="background"
+                className="absolute inset-x-0 top-56 -z-20 hidden lg:top-32 dark:block"
+                width="3276"
+                height="4095"
+              />
+            </AnimatedGroup>
+            <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
+            <div className="mx-auto max-w-7xl px-6">
+              <div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
+                <AnimatedGroup variants={transitionVariants}>
+                  <Link
+                    href="#link"
+                    className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
+                  >
+                    <span className="text-foreground text-sm">
+                      Introducing Support for AI Models
+                    </span>
+                    <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span>
+
+                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
+                      <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                      </div>
+                    </div>
+                  </Link>
+                </AnimatedGroup>
+
+                <TextEffect
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  as="h1"
+                  className="mt-8 text-balance text-6xl md:text-7xl lg:mt-16 xl:text-[5.25rem]"
+                >
+                  Modern Solutions for Customer Engagement
+                </TextEffect>
+                <TextEffect
+                  per="line"
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  delay={0.5}
+                  as="p"
+                  className="mx-auto mt-8 max-w-2xl text-balance text-lg"
+                >
+                  Highly customizable components for building modern websites
+                  and applications that look and feel the way you mean it.
+                </TextEffect>
+
+                <AnimatedGroup
+                  variants={{
+                    container: {
+                      visible: {
+                        transition: {
+                          staggerChildren: 0.05,
+                          delayChildren: 0.75,
+                        },
+                      },
+                    },
+                    ...transitionVariants,
+                  }}
+                  className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
+                >
+                  <div
+                    key={1}
+                    className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
+                  >
+                    <Button
+                      asChild
+                      size="lg"
+                      className="rounded-xl px-5 text-base"
+                    >
+                      <Link href="#link">
+                        <span className="text-nowrap">Start Building</span>
+                      </Link>
+                    </Button>
+                  </div>
+                  <Button
+                    key={2}
+                    asChild
+                    size="lg"
+                    variant="ghost"
+                    className="h-10.5 rounded-xl px-5"
+                  >
+                    <Link href="#link">
+                      <span className="text-nowrap">Request a demo</span>
+                    </Link>
+                  </Button>
+                </AnimatedGroup>
+              </div>
+            </div>
+
+            <AnimatedGroup
+              variants={{
+                container: {
+                  visible: {
+                    transition: {
+                      staggerChildren: 0.05,
+                      delayChildren: 0.75,
+                    },
+                  },
+                },
+                ...transitionVariants,
+              }}
+            >
+              <div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
+                <div
+                  aria-hidden
+                  className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
+                />
+                <div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
+                  <Image
+                    className="bg-background aspect-15/8 relative hidden rounded-2xl dark:block"
+                    src="/blocks/mail2.png"
+                    alt="app screen"
+                    width="2700"
+                    height="1440"
+                  />
+                  <Image
+                    className="z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden"
+                    src="/blocks/mail2-light.png"
+                    alt="app screen"
+                    width="2700"
+                    height="1440"
+                  />
+                </div>
+              </div>
+            </AnimatedGroup>
+          </div>
+        </section>
+        <section className="bg-background pb-16 pt-16 md:pb-32">
+          <div className="group relative m-auto max-w-5xl px-6">
+            <div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
+              <Link
+                href="/"
+                className="block text-sm duration-150 hover:opacity-75"
+              >
+                <span> Meet Our Customers</span>
+
+                <ChevronRight className="ml-1 inline-block size-3" />
+              </Link>
+            </div>
+            <div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                  alt="Nvidia Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/column.svg"
+                  alt="Column Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/github.svg"
+                  alt="GitHub Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nike.svg"
+                  alt="Nike Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                  alt="Lemon Squeezy Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/laravel.svg"
+                  alt="Laravel Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-7 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lilly.svg"
+                  alt="Lilly Logo"
+                  height="28"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-6 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/openai.svg"
+                  alt="OpenAI Logo"
+                  height="24"
+                  width="auto"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/seven/page.tsx b/src/app/[locale]/preview/hero-section/seven/page.tsx
new file mode 100644
index 0000000..ccca327
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/seven/page.tsx
@@ -0,0 +1,401 @@
+'use client';
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, EffectCoverflow } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-coverflow';
+import Link from 'next/link';
+import { Logo } from '@/components/layout/logo';
+import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const menuItems = [
+  { name: 'Features', href: '#' },
+  { name: 'Solution', href: '#' },
+  { name: 'Pricing', href: '#' },
+  { name: 'About', href: '#' },
+];
+
+export default function HeroSection() {
+  const [menuState, setMenuState] = React.useState(false);
+
+  return (
+    <>
+      <header>
+        <nav
+          data-state={menuState && 'active'}
+          className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
+        >
+          <div className="m-auto max-w-5xl px-6">
+            <div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+              <div className="flex w-full justify-between lg:w-auto">
+                <Link
+                  href="/"
+                  aria-label="home"
+                  className="flex items-center space-x-2"
+                >
+                  <Logo />
+                </Link>
+
+                <button
+                  onClick={() => setMenuState(!menuState)}
+                  aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
+                  className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
+                >
+                  <Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
+                  <X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
+                </button>
+              </div>
+
+              <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+                <div className="lg:pr-4">
+                  <ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
+                    {menuItems.map((item, index) => (
+                      <li key={index}>
+                        <Link
+                          href={item.href}
+                          className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        >
+                          <span>{item.name}</span>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                  <Button asChild size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+      <main className="overflow-hidden">
+        <section className="relative">
+          <div className="relative py-24 lg:py-28">
+            <div className="mx-auto max-w-7xl px-6 md:px-12">
+              <div className="text-center sm:mx-auto sm:w-10/12 lg:mr-auto lg:mt-0 lg:w-4/5">
+                <Link
+                  href="/"
+                  className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3"
+                >
+                  <span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
+                    New
+                  </span>
+                  <span className="text-sm">Introduction Tailus UI Html</span>
+                  <span className="bg-(--color-border) block h-4 w-px"></span>
+
+                  <ArrowRight className="size-4" />
+                </Link>
+
+                <h1 className="mt-8 text-4xl font-semibold md:text-5xl xl:text-5xl xl:[line-height:1.125]">
+                  Tame the Wild West <br /> of Frontend Development
+                </h1>
+                <p className="mx-auto mt-8 hidden max-w-2xl text-wrap text-lg sm:block">
+                  Tailwindcss highly customizable components for building modern
+                  websites and applications that look and feel the way you mean
+                  it.
+                </p>
+                <p className="mx-auto mt-6 max-w-2xl text-wrap sm:hidden">
+                  Highly customizable components for building modern websites
+                  and applications, with your personal spark.
+                </p>
+
+                <div className="mt-8">
+                  <Button size="lg" asChild>
+                    <Link href="#">
+                      <Rocket className="relative size-4" />
+                      <span className="text-nowrap">Start Building</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+              <div className="x-auto relative mx-auto mt-8 max-w-lg sm:mt-12">
+                <div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
+                <div className="absolute inset-x-0 top-12 -z-[1] mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
+
+                <Swiper
+                  slidesPerView={1}
+                  pagination={{ clickable: true }}
+                  loop
+                  autoplay={{ delay: 5000 }}
+                  modules={[Autoplay, EffectCoverflow]}
+                >
+                  <SwiperSlide className="px-2">
+                    <div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
+                      <div className="mx-auto h-fit w-full">
+                        <NetlifyLogo />
+                      </div>
+                      <p className="mt-6 text-center text-lg font-medium">
+                        30% Increase in revenue
+                      </p>
+                    </div>
+                  </SwiperSlide>
+                  <SwiperSlide className="px-2">
+                    <div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
+                      <div className="mx-auto h-fit w-full">
+                        <AstroLogo />
+                      </div>
+                      <p className="mt-6 text-center text-lg font-medium">
+                        45% Increase in revenue
+                      </p>
+                    </div>
+                  </SwiperSlide>
+                  <SwiperSlide className="px-2">
+                    <div className="bg-background rounded-(--radius) h-44 max-w-lg border p-9">
+                      <div className="mx-auto h-fit w-full">
+                        <WorkOsLogo />
+                      </div>
+                      <p className="mt-6 text-center text-lg font-medium">
+                        60% Increase in revenue
+                      </p>
+                    </div>
+                  </SwiperSlide>
+                </Swiper>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+
+const WorkOsLogo = () => {
+  return (
+    <svg
+      className="m-auto h-8"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      id="Layer_1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 251.8 48"
+    >
+      <g>
+        <path
+          fill="currentColor"
+          className="text-[#29363D] dark:text-white"
+          d="M73,7.2h7l5,20.6c0.9,3.9,1.1,6.2,1.1,6.2h0.1c0,0,0.3-2.3,1.3-6.2l4.8-20.6h7.9l5.1,20.6   c1,4,1.2,6.2,1.2,6.2h0.1c0,0,0.1-2.2,1-6.2l4.8-20.6h7l-8.8,33.9h-7.7l-5.3-20.5c-1.1-4.5-1.2-6.4-1.2-6.4h-0.1c0,0-0.1,2-1.1,6.4   l-5,20.5h-8C82,41.1,73,7.2,73,7.2z M118.2,28.8c0-7.7,5-12.8,12.6-12.8c7.5,0,12.5,5,12.5,12.8c0,7.8-5,12.8-12.5,12.8   C123.2,41.6,118.2,36.6,118.2,28.8L118.2,28.8z M136.8,28.8c0-5-2.4-7.8-6-7.8c-3.9,0-6.1,3.2-6.1,7.8c0,5.1,2.4,7.9,6.1,7.9   C134.6,36.7,136.8,33.6,136.8,28.8L136.8,28.8z M146.4,16.4h6.2V21h0.1c1.1-2.4,3.6-4.7,8-4.7c0.7,0,1.2,0.1,1.5,0.2v6.2H162   c0,0-0.6-0.2-2.1-0.2c-4.8,0-7.4,2.8-7.4,8.1v10.6h-6.2V16.4z M165.1,7.2h6.2v10.9c0,6.4-0.1,7.6-0.1,7.6h0.1l9.2-9.2h7.7   l-10.8,10.7l12.5,14h-7.3l-9-10.2l-2.3,2.3v7.9H165L165.1,7.2L165.1,7.2z M189.9,24.3c0-10.4,6.5-17.4,16.2-17.4s16.2,7,16.2,17.4   s-6.5,17.4-16.2,17.4C196.4,41.7,189.9,34.7,189.9,24.3z M215.7,24.3c0-7.1-3.8-11.9-9.5-11.9c-5.7,0-9.5,4.8-9.5,11.9   s3.8,11.9,9.5,11.9C211.8,36.2,215.7,31.4,215.7,24.3z M224.7,29.8h7.1c0,4,2.7,6.2,6.9,6.2c3.5,0,5.9-1.8,5.9-4.3   c0-2.8-1.9-3.6-7.7-4.7c-5.4-1.1-11.1-2.9-11.1-9.9c0-5.9,5-10.3,12.7-10.3c8,0,12.9,4.2,12.9,10.5h-7.1c0-3.1-2.4-5-5.8-5   c-3.5,0-5.7,1.7-5.7,4.2c0,2.6,1.5,3.7,6.3,4.6c7,1.5,12.8,2.3,12.8,10.1c0,6.2-5.4,10.3-13.3,10.3   C230.4,41.5,224.7,36.9,224.7,29.8z"
+        ></path>
+        <path
+          fill="#6363F1"
+          d="M0,24c0,1.1,0.3,2.1,0.8,3l9.7,16.8c1,1.7,2.5,3.1,4.4,3.7c3.6,1.2,7.5-0.3,9.4-3.5l2.3-4.1   l-9.2-16l9.8-16.9L29.5,3c0.7-1.2,1.6-2.2,2.7-3H17.2c-2.6,0-5.1,1.4-6.4,3.7L0.8,21C0.3,21.9,0,22.9,0,24z"
+        ></path>
+        <path
+          fill="#6363F1"
+          d="M55.4,24c0-1.1-0.3-2.1-0.8-3l-9.8-17c-1.9-3.3-5.8-4.7-9.4-3.5c-1.9,0.6-3.4,2-4.4,3.7   L28.7,8L38,24l-9.8,16.9L25.9,45c-0.7,1.2-1.6,2.2-2.7,3h15.1c2.6,0,5.1-1.4,6.4-3.7l10-17.3C55.1,26.1,55.4,25.1,55.4,24z"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+const AstroLogo = () => {
+  return (
+    <svg
+      className="mx-auto h-12"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 460 160"
+      fill="none"
+    >
+      <path
+        d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
+        fill="currentColor"
+      />
+      <path
+        d="M65.7846 121.175C61.2669 117.045 59.9481 108.368 61.8303 102.082C65.0939 106.045 69.6158 107.301 74.2997 108.009C81.5305 109.103 88.6318 108.694 95.349 105.389C96.1174 105.011 96.8275 104.507 97.6672 103.998C98.2974 105.826 98.4615 107.672 98.2413 109.551C97.706 114.127 95.4288 117.662 91.8069 120.341C90.3586 121.413 88.8261 122.371 87.3303 123.382C82.7349 126.487 81.4917 130.129 83.2184 135.427C83.2594 135.556 83.2961 135.685 83.389 136C81.0427 134.95 79.3289 133.421 78.023 131.411C76.6438 129.289 75.9876 126.942 75.9531 124.403C75.9358 123.167 75.9358 121.92 75.7696 120.702C75.3638 117.732 73.9694 116.402 71.3426 116.325C68.6467 116.247 66.5141 117.913 65.9486 120.538C65.9054 120.739 65.8428 120.938 65.7803 121.172L65.7846 121.175Z"
+        fill="url(#paint0_linear_1_33)"
+      />
+      <path
+        d="M40 101.034C40 101.034 53.3775 94.5177 66.7924 94.5177L76.9068 63.2155C77.2855 61.7017 78.3911 60.6729 79.6393 60.6729C80.8875 60.6729 81.9932 61.7017 82.3719 63.2155L92.4862 94.5177C108.374 94.5177 119.279 101.034 119.279 101.034C119.279 101.034 96.5558 39.133 96.5114 39.0088C95.8592 37.1787 94.7583 36 93.274 36H66.007C64.5227 36 63.4662 37.1787 62.7696 39.0088C62.7205 39.1307 40 101.034 40 101.034Z"
+        fill="currentColor"
+      />
+      <path
+        d="M181.043 81.1227C181.043 86.6079 174.22 89.8838 164.773 89.8838C158.624 89.8838 156.45 88.3601 156.45 85.1604C156.45 81.8083 159.149 80.2085 165.297 80.2085C170.846 80.2085 175.569 80.2846 181.043 80.9703V81.1227ZM181.118 74.3423C177.744 73.5805 172.645 73.1234 166.572 73.1234C148.877 73.1234 140.555 77.3135 140.555 87.065C140.555 97.1975 146.253 101.083 159.449 101.083C170.621 101.083 178.193 98.2641 180.968 91.3313H181.417C181.342 93.0074 181.268 94.6834 181.268 95.9785C181.268 99.5592 181.867 99.8639 184.791 99.8639H198.587C197.837 97.7308 197.388 91.7122 197.388 86.5317C197.388 80.9703 197.612 76.7802 197.612 71.1426C197.612 59.6388 190.715 52.3251 169.121 52.3251C159.824 52.3251 149.477 53.925 141.605 56.2867C142.354 59.4102 143.404 65.7335 143.929 69.8474C150.752 66.6477 160.424 65.2764 167.922 65.2764C178.268 65.2764 181.118 67.6381 181.118 72.4377V74.3423Z"
+        fill="currentColor"
+      />
+      <path
+        d="M218.971 84.3224C217.097 84.5509 214.547 84.5509 211.923 84.5509C209.149 84.5509 206.6 84.4748 204.875 84.2462C204.875 84.8557 204.8 85.5413 204.8 86.1508C204.8 95.6738 211.024 101.235 232.917 101.235C253.535 101.235 260.208 95.75 260.208 86.0746C260.208 76.9325 255.785 72.4377 236.216 71.4473C220.995 70.7616 219.646 69.0856 219.646 67.181C219.646 64.9717 221.595 63.8289 231.792 63.8289C242.364 63.8289 245.213 65.2764 245.213 68.3238V69.0094C246.713 68.9332 249.412 68.8571 252.186 68.8571C254.81 68.8571 257.659 68.9332 259.309 69.0856C259.309 68.3999 259.384 67.7905 259.384 67.2572C259.384 56.0581 250.086 52.4013 232.092 52.4013C211.848 52.4013 205.025 57.3533 205.025 67.0286C205.025 75.7136 210.499 81.1227 229.918 81.9607C244.238 82.4178 245.813 84.0177 245.813 86.227C245.813 88.5887 243.489 89.6553 233.442 89.6553C221.895 89.6553 218.971 88.0554 218.971 84.7795V84.3224Z"
+        fill="currentColor"
+      />
+      <path
+        d="M284.955 44.1734C279.482 49.2778 269.66 54.3821 264.187 55.7534C264.262 58.5722 264.262 63.7527 264.262 66.5715L269.285 66.6477C269.21 72.0568 269.135 78.6086 269.135 82.9511C269.135 93.0835 274.458 100.702 291.028 100.702C298.001 100.702 302.65 99.9401 308.423 98.7212C307.823 94.9881 307.148 89.2743 306.923 84.9319C303.475 86.0746 299.126 86.6841 294.327 86.6841C287.654 86.6841 284.955 84.8557 284.955 79.599C284.955 75.028 284.955 70.7616 285.03 66.8001C293.578 66.8763 302.125 67.0286 307.148 67.181C307.073 63.2194 307.223 57.5056 307.448 53.6964C300.176 53.8488 292.003 53.925 285.255 53.925C285.33 50.5729 285.405 47.3732 285.48 44.1734H284.955Z"
+        fill="currentColor"
+      />
+      <path
+        d="M329.736 64.286C329.811 60.3244 329.886 56.9724 329.961 53.6964H314.89C315.115 60.2483 315.115 66.9525 315.115 76.7802C315.115 86.6079 315.04 93.3883 314.89 99.8639H332.135C331.835 95.2929 331.76 87.5983 331.76 81.0465C331.76 70.6855 335.959 67.7143 345.481 67.7143C349.905 67.7143 353.054 68.2476 355.828 69.238C355.903 65.3526 356.653 57.8104 357.102 54.4583C354.253 53.6203 351.104 53.087 347.28 53.087C339.108 53.0108 333.11 56.3629 330.336 64.3622L329.736 64.286Z"
+        fill="currentColor"
+      />
+      <path
+        d="M404.808 76.4754C404.808 84.7795 398.81 88.6649 389.363 88.6649C379.991 88.6649 373.993 85.008 373.993 76.4754C373.993 67.9428 380.066 64.7431 389.363 64.7431C398.735 64.7431 404.808 68.1714 404.808 76.4754ZM420.478 76.0945C420.478 59.5626 407.582 52.1728 389.363 52.1728C371.069 52.1728 358.623 59.5626 358.623 76.0945C358.623 92.5503 370.244 101.388 389.288 101.388C408.482 101.388 420.478 92.5503 420.478 76.0945Z"
+        fill="currentColor"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1_33"
+          x1="61.0003"
+          y1="136"
+          x2="104.622"
+          y2="115.39"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D83333" />
+          <stop offset="1" stopColor="#F041FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const NetlifyLogo = () => {
+  return (
+    <>
+      <svg
+        className="mx-auto h-12 dark:hidden"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 209"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_235_8)">
+          <path
+            d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
+            fill="#05BDBA"
+          />
+          <path
+            d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
+            fill="#014847"
+          />
+          <path
+            d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
+            fill="#014847"
+          />
+          <path
+            d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
+            fill="#014847"
+          />
+          <path
+            d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
+            fill="#014847"
+          />
+          <path
+            d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
+            fill="#014847"
+          />
+          <path
+            d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
+            fill="#014847"
+          />
+          <path
+            d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
+            fill="#014847"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_235_8">
+            <rect width="512" height="208.126" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+      <svg
+        className="mx-auto hidden h-12 dark:block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 209"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_235_26)">
+          <path
+            d="M117.436 207.036V154.604L118.529 153.51H129.452L130.545 154.604V207.036L129.452 208.13H118.529L117.436 207.036Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M117.436 53.5225V1.09339L118.529 0H129.452L130.545 1.09339V53.5225L129.452 54.6159H118.529L117.436 53.5225Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M69.9539 169.238H68.4094L60.6869 161.512V159.967L78.7201 141.938L86.8976 141.942L87.9948 143.031V151.209L69.9539 169.238Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M69.9462 38.8917H68.4017L60.6792 46.6181V48.1626L78.7124 66.192L86.8899 66.1882L87.9871 65.0986V56.9212L69.9462 38.8917Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M1.09339 97.5104H75.3711L76.4645 98.6038V109.526L75.3711 110.62H1.09339L0 109.526V98.6038L1.09339 97.5104Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M440.999 97.5104H510.91L512.004 98.6038V109.526L510.91 110.62H436.633L435.539 109.526L439.905 98.6038L440.999 97.5104Z"
+            fill="#32E6E2"
+          />
+          <path
+            d="M212.056 108.727L210.963 109.821H177.079L175.986 110.914C175.986 113.101 178.173 119.657 186.916 119.657C190.196 119.657 193.472 118.564 194.566 116.377L195.659 115.284H208.776L209.869 116.377C208.776 122.934 203.313 132.774 186.916 132.774C168.336 132.774 159.589 119.657 159.589 104.357C159.589 89.0576 168.332 75.9408 185.822 75.9408C203.313 75.9408 212.056 89.0576 212.056 104.357V108.731V108.727ZM195.659 97.7971C195.659 96.7037 194.566 89.0538 185.822 89.0538C177.079 89.0538 175.986 96.7037 175.986 97.7971L177.079 98.8905H194.566L195.659 97.7971Z"
+            fill="white"
+          />
+          <path
+            d="M242.66 115.284C242.66 117.47 243.753 118.564 245.94 118.564H255.776L256.87 119.657V130.587L255.776 131.681H245.94C236.103 131.681 227.36 127.307 227.36 115.284V91.2368L226.266 90.1434H218.617L217.523 89.05V78.1199L218.617 77.0265H226.266L227.36 75.9332V66.0965L228.453 65.0031H241.57L242.663 66.0965V75.9332L243.757 77.0265H255.78L256.874 78.1199V89.05L255.78 90.1434H243.757L242.663 91.2368V115.284H242.66Z"
+            fill="white"
+          />
+          <path
+            d="M283.1 131.681H269.983L268.889 130.587V56.2636L269.983 55.1702H283.1L284.193 56.2636V130.587L283.1 131.681Z"
+            fill="white"
+          />
+          <path
+            d="M312.61 68.2871H299.493L298.399 67.1937V56.2636L299.493 55.1702H312.61L313.703 56.2636V67.1937L312.61 68.2871ZM312.61 131.681H299.493L298.399 130.587V78.1237L299.493 77.0304H312.61L313.703 78.1237V130.587L312.61 131.681Z"
+            fill="white"
+          />
+          <path
+            d="M363.98 56.2636V67.1937L362.886 68.2871H353.05C350.863 68.2871 349.769 69.3805 349.769 71.5672V75.9408L350.863 77.0342H361.793L362.886 78.1276V89.0576L361.793 90.151H350.863L349.769 91.2444V130.591L348.676 131.684H335.559L334.466 130.591V91.2444L333.372 90.151H325.723L324.629 89.0576V78.1276L325.723 77.0342H333.372L334.466 75.9408V71.5672C334.466 59.5438 343.209 55.1702 353.046 55.1702H362.882L363.976 56.2636H363.98Z"
+            fill="white"
+          />
+          <path
+            d="M404.42 132.774C400.046 143.704 395.677 150.261 380.373 150.261H374.906L373.813 149.167V138.237L374.906 137.144H380.373C385.836 137.144 386.929 136.05 388.023 132.77V131.677L370.536 89.05V78.1199L371.63 77.0265H381.466L382.56 78.1199L395.677 115.284H396.77L409.887 78.1199L410.98 77.0265H420.817L421.91 78.1199V89.05L404.424 132.77L404.42 132.774Z"
+            fill="white"
+          />
+          <path
+            d="M135.454 131.681L134.361 130.587L134.368 98.9172C134.368 93.4541 132.22 89.2182 125.625 89.0806C122.234 88.9926 118.354 89.0729 114.209 89.2488L113.59 89.8834L113.598 130.587L112.504 131.681H99.3913L98.2979 130.587V77.5388L99.3913 76.4454L128.901 76.1778C143.685 76.1778 149.668 86.3356 149.668 97.8009V130.587L148.575 131.681H135.454Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_235_26">
+            <rect width="512" height="208.126" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </>
+  );
+};
diff --git a/src/app/[locale]/preview/hero-section/six/page.tsx b/src/app/[locale]/preview/hero-section/six/page.tsx
new file mode 100644
index 0000000..bfd9d40
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/six/page.tsx
@@ -0,0 +1,168 @@
+'use client';
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, Mail, Menu, SendHorizonal, X } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+
+const menuItems = [
+  { name: 'Features', href: '#' },
+  { name: 'Solution', href: '#' },
+  { name: 'Pricing', href: '#' },
+  { name: 'About', href: '#' },
+];
+
+export default function HeroSection() {
+  const [menuState, setMenuState] = useState(false);
+  return (
+    <>
+      <header>
+        <nav
+          data-state={menuState && 'active'}
+          className="fixed z-20 w-full border-b border-dashed bg-white backdrop-blur md:relative dark:bg-zinc-950/50 lg:dark:bg-transparent"
+        >
+          <div className="m-auto max-w-5xl px-6">
+            <div className="flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+              <div className="flex w-full justify-between lg:w-auto">
+                <Link
+                  href="/"
+                  aria-label="home"
+                  className="flex items-center space-x-2"
+                >
+                  <Logo />
+                </Link>
+
+                <button
+                  onClick={() => setMenuState(!menuState)}
+                  aria-label={menuState == true ? 'Close Menu' : 'Open Menu'}
+                  className="relative z-20 -m-2.5 -mr-4 block cursor-pointer p-2.5 lg:hidden"
+                >
+                  <Menu className="in-data-[state=active]:rotate-180 in-data-[state=active]:scale-0 in-data-[state=active]:opacity-0 m-auto size-6 duration-200" />
+                  <X className="in-data-[state=active]:rotate-0 in-data-[state=active]:scale-100 in-data-[state=active]:opacity-100 absolute inset-0 m-auto size-6 -rotate-180 scale-0 opacity-0 duration-200" />
+                </button>
+              </div>
+
+              <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
+                <div className="lg:pr-4">
+                  <ul className="space-y-6 text-base lg:flex lg:gap-8 lg:space-y-0 lg:text-sm">
+                    {menuItems.map((item, index) => (
+                      <li key={index}>
+                        <Link
+                          href={item.href}
+                          className="text-muted-foreground hover:text-accent-foreground block duration-150"
+                        >
+                          <span>{item.name}</span>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit lg:border-l lg:pl-6">
+                  <Button asChild variant="outline" size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+
+                  <Button asChild size="sm">
+                    <Link href="#">
+                      <span>Login</span>
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      <main>
+        <section className="overflow-hidden">
+          <div className="relative mx-auto max-w-5xl px-6 py-28 lg:py-20">
+            <div className="lg:flex lg:items-center lg:gap-12">
+              <div className="relative z-10 mx-auto max-w-xl text-center lg:ml-0 lg:w-1/2 lg:text-left">
+                <Link
+                  href="/"
+                  className="rounded-(--radius) mx-auto flex w-fit items-center gap-2 border p-1 pr-3 lg:ml-0"
+                >
+                  <span className="bg-muted rounded-[calc(var(--radius)-0.25rem)] px-2 py-1 text-xs">
+                    New
+                  </span>
+                  <span className="text-sm">Introduction Tailus UI Html</span>
+                  <span className="bg-(--color-border) block h-4 w-px"></span>
+
+                  <ArrowRight className="size-4" />
+                </Link>
+
+                <h1 className="mt-10 text-balance text-4xl font-bold md:text-5xl xl:text-5xl">
+                  Production Ready Digital Marketing blocks
+                </h1>
+                <p className="mt-8">
+                  Error totam sit illum. Voluptas doloribus asperiores quaerat
+                  aperiam. Quidem harum omnis beatae ipsum soluta!
+                </p>
+
+                <div>
+                  <form
+                    action=""
+                    className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto"
+                  >
+                    <div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
+                      <Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
+
+                      <input
+                        placeholder="Your mail address"
+                        className="h-14 w-full bg-transparent pl-12 focus:outline-none"
+                        type="email"
+                      />
+
+                      <div className="md:pr-1.5 lg:pr-0">
+                        <Button
+                          aria-label="submit"
+                          className="rounded-(--radius)"
+                        >
+                          <span className="hidden md:block">Get Started</span>
+                          <SendHorizonal
+                            className="relative mx-auto size-5 md:hidden"
+                            strokeWidth={2}
+                          />
+                        </Button>
+                      </div>
+                    </div>
+                  </form>
+
+                  <ul className="list-inside list-disc space-y-2">
+                    <li>Faster</li>
+                    <li>Modern</li>
+                    <li>100% Customizable</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="absolute inset-0 -mx-4 rounded-3xl p-3 lg:col-span-3">
+              <div className="relative">
+                <div className="bg-radial-[at_65%_25%] to-background z-1 -inset-17 absolute from-transparent to-40%"></div>
+                <Image
+                  className="hidden dark:block"
+                  src="/blocks/music.png"
+                  alt="app illustration"
+                  width={2796}
+                  height={2008}
+                />
+                <Image
+                  className="dark:hidden"
+                  src="/blocks/music-light.png"
+                  alt="app illustration"
+                  width={2796}
+                  height={2008}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/three/page.tsx b/src/app/[locale]/preview/hero-section/three/page.tsx
new file mode 100644
index 0000000..567680c
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/three/page.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { Mail, SendHorizonal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { TextEffect } from '@/components/tailark/motion/text-effect';
+import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
+import { HeroHeader } from '@/components/tailark/hero5-header';
+import { LogoCloud } from '@/components/tailark/logo-cloud';
+import Image from 'next/image';
+
+const transitionVariants = {
+  item: {
+    hidden: {
+      opacity: 0,
+      filter: 'blur(12px)',
+      y: 12,
+    },
+    visible: {
+      opacity: 1,
+      filter: 'blur(0px)',
+      y: 0,
+      transition: {
+        type: 'spring',
+        bounce: 0.3,
+        duration: 1.5,
+      },
+    },
+  },
+};
+
+export default function HeroSection() {
+  return (
+    <>
+      <HeroHeader />
+
+      <main className="overflow-hidden">
+        <div
+          aria-hidden
+          className="absolute inset-0 isolate z-10 hidden opacity-65 contain-strict lg:block"
+        >
+          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
+          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        </div>
+        <section>
+          <div className="relative mx-auto max-w-6xl px-6 pt-32 lg:pb-16 lg:pt-48">
+            <div className="relative z-10 mx-auto max-w-4xl text-center">
+              <TextEffect
+                preset="fade-in-blur"
+                speedSegment={0.3}
+                as="h1"
+                className="text-balance text-4xl font-medium sm:text-5xl md:text-6xl"
+              >
+                Your gateway to endless entertainment experiences
+              </TextEffect>
+              <TextEffect
+                per="line"
+                preset="fade-in-blur"
+                speedSegment={0.3}
+                delay={0.5}
+                as="p"
+                className="mx-auto mt-12 max-w-2xl text-pretty text-lg"
+              >
+                Tailwindcss highly customizable components for building modern
+                websites and applications that look and feel the way you mean
+                it.
+              </TextEffect>
+
+              <AnimatedGroup
+                variants={{
+                  container: {
+                    visible: {
+                      transition: {
+                        staggerChildren: 0.05,
+                        delayChildren: 0.75,
+                      },
+                    },
+                  },
+                  ...transitionVariants,
+                }}
+                className="mt-12"
+              >
+                <form action="" className="mx-auto max-w-sm">
+                  <div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.5rem)] border pr-2 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
+                    <Mail className="pointer-events-none absolute inset-y-0 left-4 my-auto size-4" />
+
+                    <input
+                      placeholder="Your mail address"
+                      className="h-12 w-full bg-transparent pl-12 focus:outline-none"
+                      type="email"
+                    />
+
+                    <div className="md:pr-1.5 lg:pr-0">
+                      <Button
+                        aria-label="submit"
+                        size="sm"
+                        className="rounded-(--radius)"
+                      >
+                        <span className="hidden md:block">Get Started</span>
+                        <SendHorizonal
+                          className="relative mx-auto size-5 md:hidden"
+                          strokeWidth={2}
+                        />
+                      </Button>
+                    </div>
+                  </div>
+                </form>
+              </AnimatedGroup>
+            </div>
+            <div className="mx-auto md:-mt-20 lg:-mt-40">
+              <AnimatedGroup
+                variants={{
+                  container: {
+                    visible: {
+                      transition: {
+                        staggerChildren: 0.05,
+                        delayChildren: 0.75,
+                      },
+                    },
+                  },
+                  ...transitionVariants,
+                }}
+              >
+                <div className="-rotate-30 aspect-3/2 relative mx-auto lg:w-2/3">
+                  <div className="bg-linear-to-b to-background from-background absolute inset-0 via-transparent"></div>
+                  <div className="bg-linear-to-l to-background from-background absolute inset-0 via-transparent"></div>
+                  <Image
+                    src="https://res.cloudinary.com/dg4jhba5c/image/upload/v1741605545/phone-backgroudn_xqgg5g.jpg"
+                    alt="Phone Background"
+                    width="6240"
+                    height="4160"
+                  />
+                </div>
+              </AnimatedGroup>
+            </div>
+          </div>
+        </section>
+        <LogoCloud />
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/hero-section/two/page.tsx b/src/app/[locale]/preview/hero-section/two/page.tsx
new file mode 100644
index 0000000..4dd3c0a
--- /dev/null
+++ b/src/app/[locale]/preview/hero-section/two/page.tsx
@@ -0,0 +1,242 @@
+import React from 'react';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
+import { TextEffect } from '@/components/tailark/motion/text-effect';
+import { AnimatedGroup } from '@/components/tailark/motion/animated-group';
+import { HeroHeader } from '@/components/tailark/hero6-header';
+
+const transitionVariants = {
+  item: {
+    hidden: {
+      opacity: 0,
+      filter: 'blur(12px)',
+      y: 12,
+    },
+    visible: {
+      opacity: 1,
+      filter: 'blur(0px)',
+      y: 0,
+      transition: {
+        type: 'spring',
+        bounce: 0.3,
+        duration: 1.5,
+      },
+    },
+  },
+};
+
+export default function HeroSection() {
+  return (
+    <>
+      <HeroHeader />
+      <main className="overflow-hidden">
+        <div
+          aria-hidden
+          className="absolute inset-0 isolate hidden contain-strict lg:block"
+        >
+          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
+          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        </div>
+        <section>
+          <div className="relative pt-24">
+            <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
+            <div className="mx-auto max-w-5xl px-6">
+              <div className="sm:mx-auto lg:mr-auto lg:mt-0">
+                <TextEffect
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  as="h1"
+                  className="mt-8 max-w-2xl text-balance text-5xl font-medium md:text-6xl lg:mt-16"
+                >
+                  Build and Ship 10x faster with NS
+                </TextEffect>
+                <TextEffect
+                  per="line"
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  delay={0.5}
+                  as="p"
+                  className="mt-8 max-w-2xl text-pretty text-lg"
+                >
+                  Tailwindcss highly customizable components for building modern
+                  websites and applications that look and feel the way you mean
+                  it.
+                </TextEffect>
+
+                <AnimatedGroup
+                  variants={{
+                    container: {
+                      visible: {
+                        transition: {
+                          staggerChildren: 0.05,
+                          delayChildren: 0.75,
+                        },
+                      },
+                    },
+                    ...transitionVariants,
+                  }}
+                  className="mt-12 flex items-center gap-2"
+                >
+                  <div
+                    key={1}
+                    className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
+                  >
+                    <Button
+                      asChild
+                      size="lg"
+                      className="rounded-xl px-5 text-base"
+                    >
+                      <Link href="#link">
+                        <span className="text-nowrap">Start Building</span>
+                      </Link>
+                    </Button>
+                  </div>
+                  <Button
+                    key={2}
+                    asChild
+                    size="lg"
+                    variant="ghost"
+                    className="h-10.5 rounded-xl px-5 text-base"
+                  >
+                    <Link href="#link">
+                      <span className="text-nowrap">Request a demo</span>
+                    </Link>
+                  </Button>
+                </AnimatedGroup>
+              </div>
+            </div>
+            <AnimatedGroup
+              variants={{
+                container: {
+                  visible: {
+                    transition: {
+                      staggerChildren: 0.05,
+                      delayChildren: 0.75,
+                    },
+                  },
+                },
+                ...transitionVariants,
+              }}
+            >
+              <div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
+                <div
+                  aria-hidden
+                  className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
+                />
+                <div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-5xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
+                  <Image
+                    className="bg-background aspect-15/8 relative hidden rounded-2xl dark:block"
+                    src="/blocks/mail2.png"
+                    alt="app screen"
+                    width="2700"
+                    height="1440"
+                  />
+                  <Image
+                    className="z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden"
+                    src="/blocks/mail2-light.png"
+                    alt="app screen"
+                    width="2700"
+                    height="1440"
+                  />
+                </div>
+              </div>
+            </AnimatedGroup>
+          </div>
+        </section>
+        <section className="bg-background pb-16 pt-16 md:pb-32">
+          <div className="group relative m-auto max-w-5xl px-6">
+            <div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
+              <Link
+                href="/"
+                className="block text-sm duration-150 hover:opacity-75"
+              >
+                <span> Meet Our Customers</span>
+
+                <ChevronRight className="ml-1 inline-block size-3" />
+              </Link>
+            </div>
+            <div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                  alt="Nvidia Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/column.svg"
+                  alt="Column Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/github.svg"
+                  alt="GitHub Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nike.svg"
+                  alt="Nike Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                  alt="Lemon Squeezy Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/laravel.svg"
+                  alt="Laravel Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-7 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lilly.svg"
+                  alt="Lilly Logo"
+                  height="28"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-6 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/openai.svg"
+                  alt="OpenAI Logo"
+                  height="24"
+                  width="auto"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/integrations/eight/page.tsx b/src/app/[locale]/preview/integrations/eight/page.tsx
new file mode 100644
index 0000000..324a02c
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/eight/page.tsx
@@ -0,0 +1,106 @@
+import {
+  Gemini,
+  Replit,
+  GooglePaLM,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+} from '@/components/tailark/logos';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto flex flex-col px-6 md:grid md:max-w-5xl md:grid-cols-2 md:gap-12">
+          <div className="order-last mt-6 flex flex-col gap-12 md:order-first">
+            <div className="space-y-6">
+              <h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">
+                Integrate with your favorite LLMs
+              </h2>
+              <p className="text-muted-foreground">
+                Connect seamlessly with popular platforms and services to
+                enhance your workflow.
+              </p>
+              <Button variant="outline" size="sm" asChild>
+                <Link href="#">Get Started</Link>
+              </Button>
+            </div>
+
+            <div className="mt-auto grid grid-cols-[auto_1fr] gap-3">
+              <div className="bg-background flex aspect-square items-center justify-center border">
+                <MediaWiki className="size-9" />
+              </div>
+              <blockquote>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Quisquam, quos.
+                </p>
+                <div className="mt-2 flex gap-2 text-sm">
+                  <cite>John Doe</cite>
+                  <p className="text-muted-foreground">Founder, MediaWiki</p>
+                </div>
+              </blockquote>
+            </div>
+          </div>
+
+          <div className="-mx-6 px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)] sm:mx-auto sm:max-w-md md:-mx-6 md:ml-auto md:mr-0">
+            <div className="bg-background dark:bg-muted/50 rounded-2xl border p-3 shadow-lg md:pb-12">
+              <div className="grid grid-cols-2 gap-2">
+                <Integration
+                  icon={<Gemini />}
+                  name="Gemini"
+                  description="The AI model that powers Google's search engine."
+                />
+                <Integration
+                  icon={<Replit />}
+                  name="Replit"
+                  description="The AI model that powers Google's search engine."
+                />
+                <Integration
+                  icon={<GooglePaLM />}
+                  name="GooglePaLM"
+                  description="The AI model that powers Google's search engine."
+                />
+                <Integration
+                  icon={<MagicUI />}
+                  name="MagicUI"
+                  description="The AI model that powers Google's search engine."
+                />
+                <Integration
+                  icon={<VSCodium />}
+                  name="VSCodium"
+                  description="The AI model that powers Google's search engine."
+                />
+                <Integration
+                  icon={<MediaWiki />}
+                  name="MediaWiki"
+                  description="The AI model that powers Google's search engine."
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const Integration = ({
+  icon,
+  name,
+  description,
+}: { icon: React.ReactNode; name: string; description: string }) => {
+  return (
+    <div className="hover:bg-muted dark:hover:bg-muted/50 space-y-4 rounded-lg border p-4 transition-colors">
+      <div className="flex size-fit items-center justify-center">{icon}</div>
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium">{name}</h3>
+        <p className="text-muted-foreground line-clamp-1 text-sm md:line-clamp-2">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/five/page.tsx b/src/app/[locale]/preview/integrations/five/page.tsx
new file mode 100644
index 0000000..79f65bd
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/five/page.tsx
@@ -0,0 +1,108 @@
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+import { Logo } from '@/components/layout/logo';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="aspect-16/10 group relative mx-auto flex max-w-[22rem] items-center justify-between sm:max-w-sm">
+            <div
+              role="presentation"
+              className="bg-linear-to-b border-foreground/5 absolute inset-0 z-10 aspect-square animate-spin items-center justify-center rounded-full border-t from-lime-500/15 to-transparent to-25% opacity-0 duration-[3.5s] group-hover:opacity-100 dark:from-white/5"
+            ></div>
+            <div
+              role="presentation"
+              className="bg-linear-to-b border-foreground/5 absolute inset-16 z-10 aspect-square scale-90 animate-spin items-center justify-center rounded-full border-t from-blue-500/15 to-transparent to-25% opacity-0 duration-[3.5s] group-hover:opacity-100"
+            ></div>
+            <div className="bg-linear-to-b from-muted-foreground/15 absolute inset-0 flex aspect-square items-center justify-center rounded-full border-t to-transparent to-25%">
+              <IntegrationCard className="-translate-x-1/6 absolute left-0 top-1/4 -translate-y-1/4">
+                <Gemini />
+              </IntegrationCard>
+              <IntegrationCard className="absolute top-0 -translate-y-1/2">
+                <Replit />
+              </IntegrationCard>
+              <IntegrationCard className="translate-x-1/6 absolute right-0 top-1/4 -translate-y-1/4">
+                <MagicUI />
+              </IntegrationCard>
+            </div>
+            <div className="bg-linear-to-b from-muted-foreground/15 absolute inset-16 flex aspect-square scale-90 items-center justify-center rounded-full border-t to-transparent to-25%">
+              <IntegrationCard className="absolute top-0 -translate-y-1/2">
+                <VSCodium />
+              </IntegrationCard>
+              <IntegrationCard className="absolute left-0 top-1/4 -translate-x-1/4 -translate-y-1/4">
+                <MediaWiki />
+              </IntegrationCard>
+              <IntegrationCard className="absolute right-0 top-1/4 -translate-y-1/4 translate-x-1/4">
+                <GooglePaLM />
+              </IntegrationCard>
+            </div>
+            <div className="absolute inset-x-0 bottom-0 mx-auto my-2 flex w-fit justify-center gap-2">
+              <div className="bg-muted relative z-20 rounded-full border p-1">
+                <IntegrationCard
+                  className="shadow-black-950/10 dark:bg-background size-16 border-black/20 shadow-xl dark:border-white/25 dark:shadow-white/15"
+                  isCenter={true}
+                >
+                  <Logo className="text-blue-500" />
+                </IntegrationCard>
+              </div>
+            </div>
+          </div>
+          <div className="bg-linear-to-t from-background relative z-20 mx-auto mt-12 max-w-lg space-y-6 from-55% text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              Integrate with your favorite tools
+            </h2>
+            <p className="text-muted-foreground">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+
+            <Button variant="outline" size="sm" asChild>
+              <Link href="#">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  isCenter = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  position?:
+    | 'left-top'
+    | 'left-middle'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
+  isCenter?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'relative z-30 flex size-12 rounded-full border bg-white shadow-sm shadow-black/5 dark:bg-white/5 dark:backdrop-blur-md',
+        className
+      )}
+    >
+      <div className={cn('m-auto size-fit *:size-5', isCenter && '*:size-8')}>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/four/page.tsx b/src/app/[locale]/preview/integrations/four/page.tsx
new file mode 100644
index 0000000..267c2fe
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/four/page.tsx
@@ -0,0 +1,130 @@
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+import { Logo } from '@/components/layout/logo';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="relative mx-auto flex max-w-sm items-center justify-between">
+            <div className="space-y-6">
+              <IntegrationCard position="left-top">
+                <Gemini />
+              </IntegrationCard>
+              <IntegrationCard position="left-middle">
+                <Replit />
+              </IntegrationCard>
+              <IntegrationCard position="left-bottom">
+                <MagicUI />
+              </IntegrationCard>
+            </div>
+            <div className="mx-auto my-2 flex w-fit justify-center gap-2">
+              <div className="bg-muted relative z-20 rounded-2xl border p-1">
+                <IntegrationCard
+                  className="shadow-black-950/10 dark:bg-background size-16 border-black/25 shadow-xl dark:border-white/25 dark:shadow-white/10"
+                  isCenter={true}
+                >
+                  <Logo />
+                </IntegrationCard>
+              </div>
+            </div>
+            <div
+              role="presentation"
+              className="absolute inset-1/3 bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] opacity-50 [--dots-color:black] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] dark:[--dots-color:white]"
+            ></div>
+
+            <div className="space-y-6">
+              <IntegrationCard position="right-top">
+                <VSCodium />
+              </IntegrationCard>
+              <IntegrationCard position="right-middle">
+                <MediaWiki />
+              </IntegrationCard>
+              <IntegrationCard position="right-bottom">
+                <GooglePaLM />
+              </IntegrationCard>
+            </div>
+          </div>
+          <div className="mx-auto mt-12 max-w-lg space-y-6 text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              Integrate with your favorite tools
+            </h2>
+            <p className="text-muted-foreground">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+
+            <Button variant="outline" size="sm" asChild>
+              <Link href="#">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  position,
+  isCenter = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  position?:
+    | 'left-top'
+    | 'left-middle'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
+  isCenter?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'bg-background relative flex size-12 rounded-xl border dark:bg-transparent',
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'relative z-20 m-auto size-fit *:size-6',
+          isCenter && '*:size-8'
+        )}
+      >
+        {children}
+      </div>
+      {position && !isCenter && (
+        <div
+          className={cn(
+            'bg-linear-to-r to-muted-foreground/25 absolute z-10 h-px',
+            position === 'left-top' &&
+              'left-full top-1/2 w-[130px] origin-left rotate-[25deg]',
+            position === 'left-middle' &&
+              'left-full top-1/2 w-[120px] origin-left',
+            position === 'left-bottom' &&
+              'left-full top-1/2 w-[130px] origin-left rotate-[-25deg]',
+            position === 'right-top' &&
+              'bg-linear-to-l right-full top-1/2 w-[130px] origin-right rotate-[-25deg]',
+            position === 'right-middle' &&
+              'bg-linear-to-l right-full top-1/2 w-[120px] origin-right',
+            position === 'right-bottom' &&
+              'bg-linear-to-l right-full top-1/2 w-[130px] origin-right rotate-[25deg]'
+          )}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/one/page.tsx b/src/app/[locale]/preview/integrations/one/page.tsx
new file mode 100644
index 0000000..dbbd97c
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/one/page.tsx
@@ -0,0 +1,118 @@
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import * as React from 'react';
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              Integrate with your favorite tools
+            </h2>
+            <p className="text-muted-foreground mt-6">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <IntegrationCard
+              title="Google Gemini"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <Gemini />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Replit"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <Replit />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Magic UI"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <MagicUI />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="VSCodium"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <VSCodium />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="MediaWiki"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <MediaWiki />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title="Google PaLM"
+              description="Amet praesentium deserunt ex commodi tempore fuga voluptatem. Sit, sapiente."
+            >
+              <GooglePaLM />
+            </IntegrationCard>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  title,
+  description,
+  children,
+  link = 'https://github.com/meschacirung/cnblocks',
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  link?: string;
+}) => {
+  return (
+    <Card className="p-6">
+      <div className="relative">
+        <div className="*:size-10">{children}</div>
+
+        <div className="space-y-2 py-6">
+          <h3 className="text-base font-medium">{title}</h3>
+          <p className="text-muted-foreground line-clamp-2 text-sm">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex gap-3 border-t border-dashed pt-6">
+          <Button
+            asChild
+            variant="secondary"
+            size="sm"
+            className="gap-1 pr-2 shadow-none"
+          >
+            <Link href={link}>
+              Learn More
+              <ChevronRight className="ml-0 !size-3.5 opacity-50" />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/seven/page.tsx b/src/app/[locale]/preview/integrations/seven/page.tsx
new file mode 100644
index 0000000..68178ae
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/seven/page.tsx
@@ -0,0 +1,148 @@
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+import { Logo } from '@/components/layout/logo';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="bg-muted/25 group relative mx-auto max-w-[22rem] items-center justify-between space-y-6 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] sm:max-w-md">
+            <div
+              role="presentation"
+              className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:32px_32px] opacity-50"
+            ></div>
+            <div>
+              <InfiniteSlider gap={24} speed={20} speedOnHover={10}>
+                <IntegrationCard>
+                  <VSCodium />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MediaWiki />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <GooglePaLM />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Gemini />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Replit />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MagicUI />
+                </IntegrationCard>
+              </InfiniteSlider>
+            </div>
+
+            <div>
+              <InfiniteSlider gap={24} speed={20} speedOnHover={10} reverse>
+                <IntegrationCard>
+                  <Gemini />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Replit />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MediaWiki />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MagicUI />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <VSCodium />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <GooglePaLM />
+                </IntegrationCard>
+              </InfiniteSlider>
+            </div>
+            <div>
+              <InfiniteSlider gap={24} speed={20} speedOnHover={10}>
+                <IntegrationCard>
+                  <Replit />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MagicUI />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Gemini />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <VSCodium />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <MediaWiki />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <GooglePaLM />
+                </IntegrationCard>
+              </InfiniteSlider>
+            </div>
+            <div className="absolute inset-0 m-auto flex size-fit justify-center gap-2">
+              <IntegrationCard
+                className="shadow-black-950/10 size-16 bg-white/25 shadow-xl backdrop-blur-md backdrop-grayscale dark:border-white/10 dark:shadow-white/15"
+                isCenter={true}
+              >
+                <Logo />
+              </IntegrationCard>
+            </div>
+          </div>
+          <div className="mx-auto mt-12 max-w-lg space-y-6 text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              Integrate with your favorite tools
+            </h2>
+            <p className="text-muted-foreground">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+
+            <Button variant="outline" size="sm" asChild>
+              <Link href="#">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  isCenter = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  position?:
+    | 'left-top'
+    | 'left-middle'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-middle'
+    | 'right-bottom';
+  isCenter?: boolean;
+}) => {
+  return (
+    <div
+      className={cn(
+        'bg-background relative z-20 flex size-12 rounded-full border',
+        className
+      )}
+    >
+      <div className={cn('m-auto size-fit *:size-5', isCenter && '*:size-8')}>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/six/page.tsx b/src/app/[locale]/preview/integrations/six/page.tsx
new file mode 100644
index 0000000..eed5b8e
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/six/page.tsx
@@ -0,0 +1,70 @@
+import { Gemini, Replit, GooglePaLM } from '@/components/tailark/logos';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { Plus } from 'lucide-react';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="mx-auto max-w-md px-6 [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)]">
+            <div className="bg-background dark:bg-muted/50 rounded-xl border px-6 pb-12 pt-3 shadow-xl">
+              <Integration
+                icon={<Gemini />}
+                name="Gemini"
+                description="The AI model that powers Google's search engine."
+              />
+              <Integration
+                icon={<Replit />}
+                name="Replit"
+                description="The AI model that powers Google's search engine."
+              />
+              <Integration
+                icon={<GooglePaLM />}
+                name="GooglePaLM"
+                description="The AI model that powers Google's search engine."
+              />
+            </div>
+          </div>
+          <div className="mx-auto mt-6 max-w-lg space-y-6 text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl">
+              Integrate with your favorite LLMs
+            </h2>
+            <p className="text-muted-foreground">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+
+            <Button variant="outline" size="sm" asChild>
+              <Link href="#">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const Integration = ({
+  icon,
+  name,
+  description,
+}: { icon: React.ReactNode; name: string; description: string }) => {
+  return (
+    <div className="grid grid-cols-[auto_1fr_auto] items-center gap-3 border-b border-dashed py-3 last:border-b-0">
+      <div className="bg-muted border-foreground/5 flex size-12 items-center justify-center rounded-lg border">
+        {icon}
+      </div>
+      <div className="space-y-0.5">
+        <h3 className="text-sm font-medium">{name}</h3>
+        <p className="text-muted-foreground line-clamp-1 text-sm">
+          {description}
+        </p>
+      </div>
+      <Button variant="outline" size="icon" aria-label="Add integration">
+        <Plus className="size-4" />
+      </Button>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/three/page.tsx b/src/app/[locale]/preview/integrations/three/page.tsx
new file mode 100644
index 0000000..d57089e
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/three/page.tsx
@@ -0,0 +1,101 @@
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+import { Logo } from '@/components/layout/logo';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="grid items-center sm:grid-cols-2">
+            <div className="dark:bg-muted/50 relative mx-auto w-fit">
+              <div className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"></div>
+              <div className="mx-auto mb-2 flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <Gemini />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Replit />
+                </IntegrationCard>
+              </div>
+              <div className="mx-auto my-2 flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <MagicUI />
+                </IntegrationCard>
+                <IntegrationCard
+                  borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
+                  className="dark:bg-white/10"
+                >
+                  <Logo />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <VSCodium />
+                </IntegrationCard>
+              </div>
+
+              <div className="mx-auto flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <MediaWiki />
+                </IntegrationCard>
+
+                <IntegrationCard>
+                  <GooglePaLM />
+                </IntegrationCard>
+              </div>
+            </div>
+            <div className="mx-auto mt-6 max-w-lg space-y-6 text-center sm:mt-0 sm:text-left">
+              <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+                Integrate with your favorite tools
+              </h2>
+              <p className="text-muted-foreground">
+                Connect seamlessly with popular platforms and services to
+                enhance your workflow.
+              </p>
+
+              <Button variant="outline" size="sm" asChild>
+                <Link href="#">Get Started</Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  borderClassName,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  borderClassName?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
+        className
+      )}
+    >
+      <div
+        role="presentation"
+        className={cn(
+          'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
+          borderClassName
+        )}
+      />
+      <div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/integrations/two/page.tsx b/src/app/[locale]/preview/integrations/two/page.tsx
new file mode 100644
index 0000000..f48f1a2
--- /dev/null
+++ b/src/app/[locale]/preview/integrations/two/page.tsx
@@ -0,0 +1,102 @@
+import {
+  Gemini,
+  Replit,
+  MagicUI,
+  VSCodium,
+  MediaWiki,
+  GooglePaLM,
+} from '@/components/tailark/logos';
+import { Logo } from '@/components/layout/logo';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export default function IntegrationsSection() {
+  return (
+    <section>
+      <div className="bg-muted dark:bg-background py-24 md:py-32">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="dark:bg-muted/50 relative mx-auto w-fit">
+            <div
+              role="presentation"
+              className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"
+            ></div>
+            <div className="mx-auto mb-2 flex w-fit justify-center gap-2">
+              <IntegrationCard>
+                <Gemini />
+              </IntegrationCard>
+              <IntegrationCard>
+                <Replit />
+              </IntegrationCard>
+            </div>
+            <div className="mx-auto my-2 flex w-fit justify-center gap-2">
+              <IntegrationCard>
+                <MagicUI />
+              </IntegrationCard>
+              <IntegrationCard
+                borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
+                className="dark:bg-white/10"
+              >
+                <Logo />
+              </IntegrationCard>
+              <IntegrationCard>
+                <VSCodium />
+              </IntegrationCard>
+            </div>
+
+            <div className="mx-auto flex w-fit justify-center gap-2">
+              <IntegrationCard>
+                <MediaWiki />
+              </IntegrationCard>
+
+              <IntegrationCard>
+                <GooglePaLM />
+              </IntegrationCard>
+            </div>
+          </div>
+          <div className="mx-auto mt-6 max-w-lg space-y-6 text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              Integrate with your favorite tools
+            </h2>
+            <p className="text-muted-foreground">
+              Connect seamlessly with popular platforms and services to enhance
+              your workflow.
+            </p>
+
+            <Button variant="outline" size="sm" asChild>
+              <Link href="#">Get Started</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  borderClassName,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  borderClassName?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
+        className
+      )}
+    >
+      <div
+        role="presentation"
+        className={cn(
+          'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
+          borderClassName
+        )}
+      />
+      <div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
+    </div>
+  );
+};
diff --git a/src/app/[locale]/preview/layout.tsx b/src/app/[locale]/preview/layout.tsx
new file mode 100644
index 0000000..a94a0e8
--- /dev/null
+++ b/src/app/[locale]/preview/layout.tsx
@@ -0,0 +1,17 @@
+import { DevToolbar } from '@/components/tailark/toolbar';
+
+export const dynamic = 'force-static';
+export const revalidate = 3600; // Cache for 1 hour
+
+export default function BlockLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      {process.env.NODE_ENV === 'development' && <DevToolbar />}
+      {children}
+    </>
+  );
+}
diff --git a/src/app/[locale]/preview/login/one/page.tsx b/src/app/[locale]/preview/login/one/page.tsx
new file mode 100644
index 0000000..a5cb455
--- /dev/null
+++ b/src/app/[locale]/preview/login/one/page.tsx
@@ -0,0 +1,122 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-card m-auto h-fit w-full max-w-sm rounded-[calc(var(--radius)+.125rem)] border p-0.5 shadow-md dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="p-8 pb-6">
+          <div>
+            <Link href="/" aria-label="go home">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Sign In to Tailus UI
+            </h1>
+            <p className="text-sm">Welcome back! Sign in to continue</p>
+          </div>
+
+          <div className="mt-6 grid grid-cols-2 gap-3">
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 256 256"
+              >
+                <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+                <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+                <path
+                  fill="#00adef"
+                  d="M121.663 256.002H0V134.336h121.663z"
+                ></path>
+                <path
+                  fill="#fbbc09"
+                  d="M256 256.002H134.335V134.336H256z"
+                ></path>
+              </svg>
+              <span>Microsoft</span>
+            </Button>
+          </div>
+
+          <hr className="my-4 border-dashed" />
+
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Username
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <div className="space-y-0.5">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="pwd" className="text-title text-sm">
+                  Password
+                </Label>
+                <Button asChild variant="link" size="sm">
+                  <Link
+                    href="#"
+                    className="link intent-info variant-ghost text-sm"
+                  >
+                    Forgot your Password ?
+                  </Link>
+                </Button>
+              </div>
+              <Input
+                type="password"
+                required
+                name="pwd"
+                id="pwd"
+                className="input sz-md variant-mixed"
+              />
+            </div>
+
+            <Button className="w-full">Sign In</Button>
+          </div>
+        </div>
+
+        <div className="bg-muted rounded-(--radius) border p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Don't have an account ?
+            <Button asChild variant="link" className="px-2">
+              <Link href="#">Create account</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/login/three/page.tsx b/src/app/[locale]/preview/login/three/page.tsx
new file mode 100644
index 0000000..382428c
--- /dev/null
+++ b/src/app/[locale]/preview/login/three/page.tsx
@@ -0,0 +1,80 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form action="" className="max-w-92 m-auto h-fit w-full">
+        <div className="p-6">
+          <div>
+            <Link href="/" aria-label="go home">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Sign In to Tailus UI
+            </h1>
+            <p>Welcome back! Sign in to continue</p>
+          </div>
+
+          <div className="mt-6">
+            <Button type="button" variant="outline" className="w-full">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+          </div>
+
+          <div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+            <hr className="border-dashed" />
+            <span className="text-muted-foreground text-xs">
+              Or continue With
+            </span>
+            <hr className="border-dashed" />
+          </div>
+
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Email
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <Button className="w-full">Continue</Button>
+          </div>
+        </div>
+
+        <p className="text-accent-foreground text-center text-sm">
+          Don't have an account ?
+          <Button asChild variant="link" className="px-2">
+            <Link href="#">Create account</Link>
+          </Button>
+        </p>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/login/two/page.tsx b/src/app/[locale]/preview/login/two/page.tsx
new file mode 100644
index 0000000..85e652b
--- /dev/null
+++ b/src/app/[locale]/preview/login/two/page.tsx
@@ -0,0 +1,128 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
+          <div className="text-center">
+            <Link href="/" aria-label="go home" className="mx-auto block w-fit">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Sign In to Tailus UI
+            </h1>
+            <p className="text-sm">Welcome back! Sign in to continue</p>
+          </div>
+
+          <div className="mt-6 space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Username
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <div className="space-y-0.5">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="pwd" className="text-title text-sm">
+                  Password
+                </Label>
+                <Button asChild variant="link" size="sm">
+                  <Link
+                    href="#"
+                    className="link intent-info variant-ghost text-sm"
+                  >
+                    Forgot your Password ?
+                  </Link>
+                </Button>
+              </div>
+              <Input
+                type="password"
+                required
+                name="pwd"
+                id="pwd"
+                className="input sz-md variant-mixed"
+              />
+            </div>
+
+            <Button className="w-full">Sign In</Button>
+          </div>
+
+          <div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+            <hr className="border-dashed" />
+            <span className="text-muted-foreground text-xs">
+              Or continue With
+            </span>
+            <hr className="border-dashed" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 256 256"
+              >
+                <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+                <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+                <path
+                  fill="#00adef"
+                  d="M121.663 256.002H0V134.336h121.663z"
+                ></path>
+                <path
+                  fill="#fbbc09"
+                  d="M256 256.002H134.335V134.336H256z"
+                ></path>
+              </svg>
+              <span>Microsoft</span>
+            </Button>
+          </div>
+        </div>
+
+        <div className="p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Don't have an account ?
+            <Button asChild variant="link" className="px-2">
+              <Link href="#">Create account</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/logo-cloud/one/page.tsx b/src/app/[locale]/preview/logo-cloud/one/page.tsx
new file mode 100644
index 0000000..b1f03bf
--- /dev/null
+++ b/src/app/[locale]/preview/logo-cloud/one/page.tsx
@@ -0,0 +1,90 @@
+export default function LogoCloud() {
+  return (
+    <section className="bg-background py-16">
+      <div className="mx-auto max-w-5xl px-6">
+        <h2 className="text-center text-lg font-medium">
+          Your favorite companies are our partners.
+        </h2>
+        <div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
+          <img
+            className="h-5 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/nvidia.svg"
+            alt="Nvidia Logo"
+            height="20"
+            width="auto"
+          />
+          <img
+            className="h-4 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/column.svg"
+            alt="Column Logo"
+            height="16"
+            width="auto"
+          />
+          <img
+            className="h-4 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/github.svg"
+            alt="GitHub Logo"
+            height="16"
+            width="auto"
+          />
+          <img
+            className="h-5 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/nike.svg"
+            alt="Nike Logo"
+            height="20"
+            width="auto"
+          />
+          <img
+            className="h-4 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/laravel.svg"
+            alt="Laravel Logo"
+            height="16"
+            width="auto"
+          />
+          <img
+            className="h-7 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/lilly.svg"
+            alt="Lilly Logo"
+            height="28"
+            width="auto"
+          />
+          <img
+            className="h-5 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+            alt="Lemon Squeezy Logo"
+            height="20"
+            width="auto"
+          />
+          <img
+            className="h-6 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/openai.svg"
+            alt="OpenAI Logo"
+            height="24"
+            width="auto"
+          />
+          <img
+            className="h-4 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/tailwindcss.svg"
+            alt="Tailwind CSS Logo"
+            height="16"
+            width="auto"
+          />
+          <img
+            className="h-5 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/vercel.svg"
+            alt="Vercel Logo"
+            height="20"
+            width="auto"
+          />
+          <img
+            className="h-5 w-fit dark:invert"
+            src="https://html.tailus.io/blocks/customers/zapier.svg"
+            alt="Zapier Logo"
+            height="20"
+            width="auto"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/logo-cloud/three/page.tsx b/src/app/[locale]/preview/logo-cloud/three/page.tsx
new file mode 100644
index 0000000..68586b1
--- /dev/null
+++ b/src/app/[locale]/preview/logo-cloud/three/page.tsx
@@ -0,0 +1,107 @@
+import { InfiniteSlider } from '@/components/tailark/motion/infinite-slider';
+import { ProgressiveBlur } from '@/components/tailark/motion/progressive-blur';
+
+export default function LogoCloud() {
+  return (
+    <section className="bg-background overflow-hidden py-16">
+      <div className="group relative m-auto max-w-7xl px-6">
+        <div className="flex flex-col items-center md:flex-row">
+          <div className="md:max-w-44 md:border-r md:pr-6">
+            <p className="text-end text-sm">Powering the best teams</p>
+          </div>
+          <div className="relative py-6 md:w-[calc(100%-11rem)]">
+            <InfiniteSlider speedOnHover={20} speed={40} gap={112}>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                  alt="Nvidia Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/column.svg"
+                  alt="Column Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/github.svg"
+                  alt="GitHub Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nike.svg"
+                  alt="Nike Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+                  alt="Lemon Squeezy Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-4 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/laravel.svg"
+                  alt="Laravel Logo"
+                  height="16"
+                  width="auto"
+                />
+              </div>
+              <div className="flex">
+                <img
+                  className="mx-auto h-7 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/lilly.svg"
+                  alt="Lilly Logo"
+                  height="28"
+                  width="auto"
+                />
+              </div>
+
+              <div className="flex">
+                <img
+                  className="mx-auto h-6 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/openai.svg"
+                  alt="OpenAI Logo"
+                  height="24"
+                  width="auto"
+                />
+              </div>
+            </InfiniteSlider>
+
+            <div className="bg-linear-to-r from-background absolute inset-y-0 left-0 w-20"></div>
+            <div className="bg-linear-to-l from-background absolute inset-y-0 right-0 w-20"></div>
+            <ProgressiveBlur
+              className="pointer-events-none absolute left-0 top-0 h-full w-20"
+              direction="left"
+              blurIntensity={1}
+            />
+            <ProgressiveBlur
+              className="pointer-events-none absolute right-0 top-0 h-full w-20"
+              direction="right"
+              blurIntensity={1}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/logo-cloud/two/page.tsx b/src/app/[locale]/preview/logo-cloud/two/page.tsx
new file mode 100644
index 0000000..063c5ed
--- /dev/null
+++ b/src/app/[locale]/preview/logo-cloud/two/page.tsx
@@ -0,0 +1,97 @@
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+export default function LogoCloudTwo() {
+  return (
+    <section className="bg-background py-16">
+      <div className="group relative m-auto max-w-5xl px-6">
+        <div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
+          <Link
+            href="/"
+            className="block text-sm duration-150 hover:opacity-75"
+          >
+            <span> Meet Our Customers</span>
+
+            <ChevronRight className="ml-1 inline-block size-3" />
+          </Link>
+        </div>
+        <div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
+          <div className="flex">
+            <img
+              className="mx-auto h-5 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/nvidia.svg"
+              alt="Nvidia Logo"
+              height="20"
+              width="auto"
+            />
+          </div>
+
+          <div className="flex">
+            <img
+              className="mx-auto h-4 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/column.svg"
+              alt="Column Logo"
+              height="16"
+              width="auto"
+            />
+          </div>
+          <div className="flex">
+            <img
+              className="mx-auto h-4 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/github.svg"
+              alt="GitHub Logo"
+              height="16"
+              width="auto"
+            />
+          </div>
+          <div className="flex">
+            <img
+              className="mx-auto h-5 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/nike.svg"
+              alt="Nike Logo"
+              height="20"
+              width="auto"
+            />
+          </div>
+          <div className="flex">
+            <img
+              className="mx-auto h-5 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
+              alt="Lemon Squeezy Logo"
+              height="20"
+              width="auto"
+            />
+          </div>
+          <div className="flex">
+            <img
+              className="mx-auto h-4 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/laravel.svg"
+              alt="Laravel Logo"
+              height="16"
+              width="auto"
+            />
+          </div>
+          <div className="flex">
+            <img
+              className="mx-auto h-7 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/lilly.svg"
+              alt="Lilly Logo"
+              height="28"
+              width="auto"
+            />
+          </div>
+
+          <div className="flex">
+            <img
+              className="mx-auto h-6 w-fit dark:invert"
+              src="https://html.tailus.io/blocks/customers/openai.svg"
+              alt="OpenAI Logo"
+              height="24"
+              width="auto"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/pricing/five/page.tsx b/src/app/[locale]/preview/pricing/five/page.tsx
new file mode 100644
index 0000000..d19ff54
--- /dev/null
+++ b/src/app/[locale]/preview/pricing/five/page.tsx
@@ -0,0 +1,90 @@
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Pricing() {
+  return (
+    <div className="relative py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-balance text-3xl font-bold md:text-4xl lg:text-5xl">
+            Start managing your company smarter today
+          </h2>
+        </div>
+        <div className="mt-8 md:mt-20">
+          <div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
+            <div className="grid items-center gap-12 divide-y p-12 md:grid-cols-2 md:divide-x md:divide-y-0">
+              <div className="pb-12 text-center md:pb-0 md:pr-12">
+                <h3 className="text-2xl font-semibold">Suite Enterprise</h3>
+                <p className="mt-2 text-lg">For your company of any size</p>
+                <span className="mb-6 mt-12 inline-block text-6xl font-bold">
+                  <span className="text-4xl">$</span>234
+                </span>
+
+                <div className="flex justify-center">
+                  <Button asChild size="lg">
+                    <Link href="#">Get started</Link>
+                  </Button>
+                </div>
+
+                <p className="text-muted-foreground mt-12 text-sm">
+                  Includes : Security, Unlimited Storage, Payment, Search
+                  engine, and all features
+                </p>
+              </div>
+              <div className="relative">
+                <ul role="list" className="space-y-4">
+                  {[
+                    'First premium advantage',
+                    'Second advantage weekly',
+                    'Third advantage donate to project',
+                    'Fourth, access to all components weekly',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <Check className="size-3" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+                <p className="text-muted-foreground mt-6 text-sm">
+                  Team can be any size, and you can add or switch members as
+                  needed. Companies using our platform include:
+                </p>
+                <div className="mt-12 flex flex-wrap items-center justify-between gap-6">
+                  <img
+                    className="h-5 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                    alt="Nvidia Logo"
+                    height="20"
+                    width="auto"
+                  />
+                  <img
+                    className="h-4 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/column.svg"
+                    alt="Column Logo"
+                    height="16"
+                    width="auto"
+                  />
+                  <img
+                    className="h-4 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/github.svg"
+                    alt="GitHub Logo"
+                    height="16"
+                    width="auto"
+                  />
+                  <img
+                    className="h-5 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/nike.svg"
+                    alt="Nike Logo"
+                    height="20"
+                    width="auto"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/preview/pricing/four/page.tsx b/src/app/[locale]/preview/pricing/four/page.tsx
new file mode 100644
index 0000000..f01bb90
--- /dev/null
+++ b/src/app/[locale]/preview/pricing/four/page.tsx
@@ -0,0 +1,99 @@
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Pricing() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto max-w-2xl space-y-6 text-center">
+          <h1 className="text-center text-4xl font-semibold lg:text-5xl">
+            Pricing that Scales with You
+          </h1>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-5 md:gap-0">
+          <div className="rounded-(--radius) flex flex-col justify-between space-y-8 border p-6 md:col-span-2 md:my-2 md:rounded-r-none md:border-r-0 lg:p-10">
+            <div className="space-y-4">
+              <div>
+                <h2 className="font-medium">Free</h2>
+                <span className="my-3 block text-2xl font-semibold">
+                  $0 / mo
+                </span>
+                <p className="text-muted-foreground text-sm">Per editor</p>
+              </div>
+
+              <Button asChild variant="outline" className="w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Basic Analytics Dashboard',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className="dark:bg-muted rounded-(--radius) border p-6 shadow-lg shadow-gray-950/5 md:col-span-3 lg:p-10 dark:[--color-muted:var(--color-zinc-900)]">
+            <div className="grid gap-6 sm:grid-cols-2">
+              <div className="space-y-4">
+                <div>
+                  <h2 className="font-medium">Pro</h2>
+                  <span className="my-3 block text-2xl font-semibold">
+                    $19 / mo
+                  </span>
+                  <p className="text-muted-foreground text-sm">Per editor</p>
+                </div>
+
+                <Button asChild className="w-full">
+                  <Link href="">Get Started</Link>
+                </Button>
+              </div>
+
+              <div>
+                <div className="text-sm font-medium">
+                  Everything in free plus :
+                </div>
+
+                <ul className="mt-4 list-outside space-y-3 text-sm">
+                  {[
+                    'Everything in Free Plan',
+                    '5GB Cloud Storage',
+                    'Email and Chat Support',
+                    'Access to Community Forum',
+                    'Single User Access',
+                    'Access to Basic Templates',
+                    'Mobile App Access',
+                    '1 Custom Report Per Month',
+                    'Monthly Product Updates',
+                    'Standard Security Features',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <Check className="size-3" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/pricing/one/page.tsx b/src/app/[locale]/preview/pricing/one/page.tsx
new file mode 100644
index 0000000..2941b21
--- /dev/null
+++ b/src/app/[locale]/preview/pricing/one/page.tsx
@@ -0,0 +1,143 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Check } from 'lucide-react';
+
+export default function Pricing() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="mx-auto max-w-2xl space-y-6 text-center">
+          <h1 className="text-center text-4xl font-semibold lg:text-5xl">
+            Pricing that Scales with You
+          </h1>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
+          <Card className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="font-medium">Free</CardTitle>
+              <span className="my-3 block text-2xl font-semibold">$0 / mo</span>
+              <CardDescription className="text-sm">Per editor</CardDescription>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Basic Analytics Dashboard',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+
+            <CardFooter className="mt-auto">
+              <Button asChild variant="outline" className="w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+
+          <Card className="relative">
+            <span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
+              Popular
+            </span>
+
+            <div className="flex flex-col">
+              <CardHeader>
+                <CardTitle className="font-medium">Pro</CardTitle>
+                <span className="my-3 block text-2xl font-semibold">
+                  $19 / mo
+                </span>
+                <CardDescription className="text-sm">
+                  Per editor
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="space-y-4">
+                <hr className="border-dashed" />
+                <ul className="list-outside space-y-3 text-sm">
+                  {[
+                    'Everything in Free Plan',
+                    '5GB Cloud Storage',
+                    'Email and Chat Support',
+                    'Access to Community Forum',
+                    'Single User Access',
+                    'Access to Basic Templates',
+                    'Mobile App Access',
+                    '1 Custom Report Per Month',
+                    'Monthly Product Updates',
+                    'Standard Security Features',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <Check className="size-3" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+
+              <CardFooter>
+                <Button asChild className="w-full">
+                  <Link href="">Get Started</Link>
+                </Button>
+              </CardFooter>
+            </div>
+          </Card>
+
+          <Card className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="font-medium">Startup</CardTitle>
+              <span className="my-3 block text-2xl font-semibold">
+                $29 / mo
+              </span>
+              <CardDescription className="text-sm">Per editor</CardDescription>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Everything in Pro Plan',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+
+            <CardFooter className="mt-auto">
+              <Button asChild variant="outline" className="w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/pricing/three/page.tsx b/src/app/[locale]/preview/pricing/three/page.tsx
new file mode 100644
index 0000000..fe44da3
--- /dev/null
+++ b/src/app/[locale]/preview/pricing/three/page.tsx
@@ -0,0 +1,138 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Check } from 'lucide-react';
+
+export default function Pricing() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="mx-auto max-w-2xl space-y-6 text-center">
+          <h1 className="text-center text-4xl font-semibold lg:text-5xl">
+            Pricing that Scales with You
+          </h1>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6 md:mt-20 md:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardTitle className="font-medium">Free</CardTitle>
+
+              <span className="my-3 block text-2xl font-semibold">$0 / mo</span>
+
+              <CardDescription className="text-sm">Per editor</CardDescription>
+              <Button asChild variant="outline" className="mt-4 w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Basic Analytics Dashboard',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card className="relative">
+            <span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
+              Popular
+            </span>
+
+            <CardHeader>
+              <CardTitle className="font-medium">Pro</CardTitle>
+
+              <span className="my-3 block text-2xl font-semibold">
+                $19 / mo
+              </span>
+
+              <CardDescription className="text-sm">Per editor</CardDescription>
+
+              <Button asChild className="mt-4 w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Everything in Free Plan',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                  'Access to Community Forum',
+                  'Single User Access',
+                  'Access to Basic Templates',
+                  'Mobile App Access',
+                  '1 Custom Report Per Month',
+                  'Monthly Product Updates',
+                  'Standard Security Features',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="font-medium">Startup</CardTitle>
+
+              <span className="my-3 block text-2xl font-semibold">
+                $29 / mo
+              </span>
+
+              <CardDescription className="text-sm">Per editor</CardDescription>
+
+              <Button asChild variant="outline" className="mt-4 w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Everything in Pro Plan',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/pricing/two/page.tsx b/src/app/[locale]/preview/pricing/two/page.tsx
new file mode 100644
index 0000000..c098f80
--- /dev/null
+++ b/src/app/[locale]/preview/pricing/two/page.tsx
@@ -0,0 +1,143 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Check } from 'lucide-react';
+
+export default function Pricing() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="mx-auto max-w-2xl space-y-6 text-center">
+          <h1 className="text-center text-4xl font-semibold lg:text-5xl">
+            Pricing that Scales with You
+          </h1>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-6 [--color-card:var(--color-muted)] *:border-none *:shadow-none md:mt-20 md:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
+          <Card className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="font-medium">Free</CardTitle>
+              <span className="my-3 block text-2xl font-semibold">$0 / mo</span>
+              <CardDescription className="text-sm">Per editor</CardDescription>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Basic Analytics Dashboard',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+
+            <CardFooter className="mt-auto">
+              <Button asChild variant="outline" className="w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+
+          <Card className="relative">
+            <span className="bg-linear-to-br/increasing absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full from-purple-400 to-amber-300 px-3 py-1 text-xs font-medium text-amber-950 ring-1 ring-inset ring-white/20 ring-offset-1 ring-offset-gray-950/5">
+              Popular
+            </span>
+
+            <div className="flex flex-col">
+              <CardHeader>
+                <CardTitle className="font-medium">Pro</CardTitle>
+                <span className="my-3 block text-2xl font-semibold">
+                  $19 / mo
+                </span>
+                <CardDescription className="text-sm">
+                  Per editor
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="space-y-4">
+                <hr className="border-dashed" />
+                <ul className="list-outside space-y-3 text-sm">
+                  {[
+                    'Everything in Free Plan',
+                    '5GB Cloud Storage',
+                    'Email and Chat Support',
+                    'Access to Community Forum',
+                    'Single User Access',
+                    'Access to Basic Templates',
+                    'Mobile App Access',
+                    '1 Custom Report Per Month',
+                    'Monthly Product Updates',
+                    'Standard Security Features',
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-2">
+                      <Check className="size-3" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+
+              <CardFooter>
+                <Button asChild className="w-full">
+                  <Link href="">Get Started</Link>
+                </Button>
+              </CardFooter>
+            </div>
+          </Card>
+
+          <Card className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="font-medium">Startup</CardTitle>
+              <span className="my-3 block text-2xl font-semibold">
+                $29 / mo
+              </span>
+              <CardDescription className="text-sm">Per editor</CardDescription>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <hr className="border-dashed" />
+
+              <ul className="list-outside space-y-3 text-sm">
+                {[
+                  'Everything in Pro Plan',
+                  '5GB Cloud Storage',
+                  'Email and Chat Support',
+                ].map((item, index) => (
+                  <li key={index} className="flex items-center gap-2">
+                    <Check className="size-3" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+
+            <CardFooter className="mt-auto">
+              <Button asChild variant="outline" className="w-full">
+                <Link href="">Get Started</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/sign-up/one/page.tsx b/src/app/[locale]/preview/sign-up/one/page.tsx
new file mode 100644
index 0000000..4f2e650
--- /dev/null
+++ b/src/app/[locale]/preview/sign-up/one/page.tsx
@@ -0,0 +1,127 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-card m-auto h-fit w-full max-w-sm rounded-[calc(var(--radius)+.125rem)] border p-0.5 shadow-md dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="p-8 pb-6">
+          <div>
+            <Link href="/" aria-label="go home">
+              <Logo />
+            </Link>
+            <h1 className="text-title mb-1 mt-4 text-xl font-semibold">
+              Create a Tailus UI Account
+            </h1>
+            <p className="text-sm">Welcome! Create an account to get started</p>
+          </div>
+
+          <div className="mt-6 grid grid-cols-2 gap-3">
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 256 256"
+              >
+                <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+                <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+                <path
+                  fill="#00adef"
+                  d="M121.663 256.002H0V134.336h121.663z"
+                ></path>
+                <path
+                  fill="#fbbc09"
+                  d="M256 256.002H134.335V134.336H256z"
+                ></path>
+              </svg>
+              <span>Microsoft</span>
+            </Button>
+          </div>
+
+          <hr className="my-4 border-dashed" />
+
+          <div className="space-y-5">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label htmlFor="firstname" className="block text-sm">
+                  Firstname
+                </Label>
+                <Input type="text" required name="firstname" id="firstname" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastname" className="block text-sm">
+                  Lastname
+                </Label>
+                <Input type="text" required name="lastname" id="lastname" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Username
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="pwd" className="text-title text-sm">
+                Password
+              </Label>
+              <Input
+                type="password"
+                required
+                name="pwd"
+                id="pwd"
+                className="input sz-md variant-mixed"
+              />
+            </div>
+
+            <Button className="w-full">Continue</Button>
+          </div>
+        </div>
+
+        <div className="bg-muted rounded-(--radius) border p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Have an account ?
+            <Button asChild variant="link" className="px-2">
+              <Link href="#">Sign In</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/sign-up/three/page.tsx b/src/app/[locale]/preview/sign-up/three/page.tsx
new file mode 100644
index 0000000..e2a1def
--- /dev/null
+++ b/src/app/[locale]/preview/sign-up/three/page.tsx
@@ -0,0 +1,80 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form action="" className="max-w-92 m-auto h-fit w-full">
+        <div className="p-6">
+          <div>
+            <Link href="/" aria-label="go home">
+              <Logo />
+            </Link>
+            <h1 className="mb-1 mt-4 text-xl font-semibold">
+              Create a Tailus UI Account
+            </h1>
+            <p>Welcome! Create an account to get started</p>
+          </div>
+
+          <div className="mt-6">
+            <Button type="button" variant="outline" className="w-full">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+          </div>
+
+          <div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+            <hr className="border-dashed" />
+            <span className="text-muted-foreground text-xs">
+              Or continue With
+            </span>
+            <hr className="border-dashed" />
+          </div>
+
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Email
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <Button className="w-full">Continue</Button>
+          </div>
+        </div>
+
+        <p className="text-accent-foreground text-center text-sm">
+          Have an account ?
+          <Button asChild variant="link" className="px-2">
+            <Link href="#">Sign In</Link>
+          </Button>
+        </p>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/sign-up/two/page.tsx b/src/app/[locale]/preview/sign-up/two/page.tsx
new file mode 100644
index 0000000..231efbd
--- /dev/null
+++ b/src/app/[locale]/preview/sign-up/two/page.tsx
@@ -0,0 +1,143 @@
+import { Logo } from '@/components/layout/logo';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen bg-zinc-50 px-4 py-16 md:py-32 dark:bg-transparent">
+      <form
+        action=""
+        className="bg-muted m-auto h-fit w-full max-w-sm overflow-hidden rounded-[calc(var(--radius)+.125rem)] border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]"
+      >
+        <div className="bg-card -m-px rounded-[calc(var(--radius)+.125rem)] border p-8 pb-6">
+          <div className="text-center">
+            <Link href="/" aria-label="go home" className="mx-auto block w-fit">
+              <Logo />
+            </Link>
+            <h1 className="text-title mb-1 mt-4 text-xl font-semibold">
+              Create a Tailus UI Account
+            </h1>
+            <p className="text-sm">Welcome! Create an account to get started</p>
+          </div>
+
+          <div className="mt-6 space-y-6">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label htmlFor="firstname" className="block text-sm">
+                  Firstname
+                </Label>
+                <Input type="text" required name="firstname" id="firstname" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastname" className="block text-sm">
+                  Lastname
+                </Label>
+                <Input type="text" required name="lastname" id="lastname" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email" className="block text-sm">
+                Username
+              </Label>
+              <Input type="email" required name="email" id="email" />
+            </div>
+
+            <div className="space-y-0.5">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="pwd" className="text-title text-sm">
+                  Password
+                </Label>
+                <Button asChild variant="link" size="sm">
+                  <Link
+                    href="#"
+                    className="link intent-info variant-ghost text-sm"
+                  >
+                    Forgot your Password ?
+                  </Link>
+                </Button>
+              </div>
+              <Input
+                type="password"
+                required
+                name="pwd"
+                id="pwd"
+                className="input sz-md variant-mixed"
+              />
+            </div>
+
+            <Button className="w-full">Sign In</Button>
+          </div>
+
+          <div className="my-6 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+            <hr className="border-dashed" />
+            <span className="text-muted-foreground text-xs">
+              Or continue With
+            </span>
+            <hr className="border-dashed" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="0.98em"
+                height="1em"
+                viewBox="0 0 256 262"
+              >
+                <path
+                  fill="#4285f4"
+                  d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+                ></path>
+                <path
+                  fill="#34a853"
+                  d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+                ></path>
+                <path
+                  fill="#fbbc05"
+                  d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+                ></path>
+                <path
+                  fill="#eb4335"
+                  d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+                ></path>
+              </svg>
+              <span>Google</span>
+            </Button>
+            <Button type="button" variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 256 256"
+              >
+                <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+                <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+                <path
+                  fill="#00adef"
+                  d="M121.663 256.002H0V134.336h121.663z"
+                ></path>
+                <path
+                  fill="#fbbc09"
+                  d="M256 256.002H134.335V134.336H256z"
+                ></path>
+              </svg>
+              <span>Microsoft</span>
+            </Button>
+          </div>
+        </div>
+
+        <div className="p-3">
+          <p className="text-accent-foreground text-center text-sm">
+            Have an account ?
+            <Button asChild variant="link" className="px-2">
+              <Link href="#">Sign In</Link>
+            </Button>
+          </p>
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/stats/four/page.tsx b/src/app/[locale]/preview/stats/four/page.tsx
new file mode 100644
index 0000000..3d50ee4
--- /dev/null
+++ b/src/app/[locale]/preview/stats/four/page.tsx
@@ -0,0 +1,61 @@
+export default function StatsSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-12">
+        <div className="relative z-10 max-w-xl space-y-6">
+          <h2 className="text-4xl font-medium lg:text-5xl">
+            The Gemini ecosystem brings together our models.
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models.{' '}
+            <span className="font-medium">It supports an entire ecosystem</span>{' '}
+            — from products innovate.
+          </p>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
+          <div>
+            <p>
+              It supports an entire ecosystem — from products to the APIs and
+              platforms helping developers and businesses innovate
+            </p>
+            <div className="mb-12 mt-12 grid grid-cols-2 gap-2 md:mb-0">
+              <div className="space-y-4">
+                <div className="bg-linear-to-r from-zinc-950 to-zinc-600 bg-clip-text text-5xl font-bold text-transparent dark:from-white dark:to-zinc-800">
+                  +1200
+                </div>
+                <p>Stars on GitHub</p>
+              </div>
+              <div className="space-y-4">
+                <div className="bg-linear-to-r from-zinc-950 to-zinc-600 bg-clip-text text-5xl font-bold text-transparent dark:from-white dark:to-zinc-800">
+                  +500
+                </div>
+                <p>Powered Apps</p>
+              </div>
+            </div>
+          </div>
+          <div className="relative">
+            <blockquote className="border-l-4 pl-4">
+              <p>
+                Using TailsUI has been like unlocking a secret design
+                superpower. It's the perfect fusion of simplicity and
+                versatility, enabling us to create UIs that are as stunning as
+                they are user-friendly.
+              </p>
+
+              <div className="mt-6 space-y-3">
+                <cite className="block font-medium">John Doe, CEO</cite>
+                <img
+                  className="h-5 w-fit dark:invert"
+                  src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                  alt="Nvidia Logo"
+                  height="20"
+                  width="auto"
+                />
+              </div>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/stats/one/page.tsx b/src/app/[locale]/preview/stats/one/page.tsx
new file mode 100644
index 0000000..77a9bb7
--- /dev/null
+++ b/src/app/[locale]/preview/stats/one/page.tsx
@@ -0,0 +1,33 @@
+export default function StatsSection() {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
+          <h2 className="text-4xl font-medium lg:text-5xl">
+            Tailus UI in numbers
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-12 divide-y *:text-center md:grid-cols-3 md:gap-2 md:divide-x md:divide-y-0">
+          <div className="space-y-4">
+            <div className="text-5xl font-bold">+1200</div>
+            <p>Stars on GitHub</p>
+          </div>
+          <div className="space-y-4">
+            <div className="text-5xl font-bold">22 Million</div>
+            <p>Active Users</p>
+          </div>
+          <div className="space-y-4">
+            <div className="text-5xl font-bold">+500</div>
+            <p>Powered Apps</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/stats/three/page.tsx b/src/app/[locale]/preview/stats/three/page.tsx
new file mode 100644
index 0000000..fbb4a3d
--- /dev/null
+++ b/src/app/[locale]/preview/stats/three/page.tsx
@@ -0,0 +1,33 @@
+export default function StatsSection() {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
+          <h2 className="text-4xl font-semibold lg:text-5xl">
+            Tailus UI in numbers
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-0.5 *:text-center md:grid-cols-3">
+          <div className="rounded-(--radius) space-y-4 border py-12">
+            <div className="text-5xl font-bold">+1200</div>
+            <p>Stars on GitHub</p>
+          </div>
+          <div className="rounded-(--radius) space-y-4 border py-12">
+            <div className="text-5xl font-bold">56%</div>
+            <p>Conversion rate</p>
+          </div>
+          <div className="rounded-(--radius) space-y-4 border py-12">
+            <div className="text-5xl font-bold">+500</div>
+            <p>Powered Apps</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/stats/two/page.tsx b/src/app/[locale]/preview/stats/two/page.tsx
new file mode 100644
index 0000000..19d9105
--- /dev/null
+++ b/src/app/[locale]/preview/stats/two/page.tsx
@@ -0,0 +1,33 @@
+export default function StatsSection() {
+  return (
+    <section className="py-12 md:py-20">
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
+          <h2 className="text-4xl font-semibold lg:text-5xl">
+            Tailus UI in numbers
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-0.5 *:text-center md:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
+          <div className="bg-muted rounded-(--radius) space-y-4 py-12">
+            <div className="text-5xl font-bold">+1200</div>
+            <p>Stars on GitHub</p>
+          </div>
+          <div className="bg-muted rounded-(--radius) space-y-4 py-12">
+            <div className="text-5xl font-bold">56%</div>
+            <p>Conversion rate</p>
+          </div>
+          <div className="bg-muted rounded-(--radius) space-y-4 py-12">
+            <div className="text-5xl font-bold">+500</div>
+            <p>Powered Apps</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/team/one/page.tsx b/src/app/[locale]/preview/team/one/page.tsx
new file mode 100644
index 0000000..f211ed2
--- /dev/null
+++ b/src/app/[locale]/preview/team/one/page.tsx
@@ -0,0 +1,112 @@
+const members = [
+  {
+    name: 'Méschac Irung',
+    role: 'Creator',
+    avatar: 'https://avatars.githubusercontent.com/u/47919550?v=4',
+  },
+  {
+    name: 'Théo Balick',
+    role: 'Frontend Dev',
+    avatar: 'https://avatars.githubusercontent.com/u/68236786?v=4',
+  },
+  {
+    name: 'Glodie Lukose',
+    role: 'Frontend Dev',
+    avatar: 'https://avatars.githubusercontent.com/u/99137927?v=4',
+  },
+  {
+    name: 'Bernard Ngandu',
+    role: 'Backend Dev',
+    avatar: 'https://avatars.githubusercontent.com/u/31113941?v=4',
+  },
+];
+
+export default function TeamSection() {
+  return (
+    <section className="py-12 md:py-32">
+      <div className="mx-auto max-w-3xl px-8 lg:px-0">
+        <h2 className="mb-8 text-4xl font-bold md:mb-16 lg:text-5xl">
+          Our team
+        </h2>
+
+        <div>
+          <h3 className="mb-6 text-lg font-medium">Leadership</h3>
+          <div className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4">
+            {members.map((member, index) => (
+              <div key={index}>
+                <div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
+                  <img
+                    className="aspect-square rounded-full object-cover"
+                    src={member.avatar}
+                    alt={member.name}
+                    height="460"
+                    width="460"
+                    loading="lazy"
+                  />
+                </div>
+                <span className="mt-2 block text-sm">{member.name}</span>
+                <span className="text-muted-foreground block text-xs">
+                  {member.role}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <h3 className="mb-6 text-lg font-medium">Engineering</h3>
+          <div
+            data-rounded="full"
+            className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4"
+          >
+            {members.map((member, index) => (
+              <div key={index}>
+                <div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
+                  <img
+                    className="aspect-square rounded-full object-cover"
+                    src={member.avatar}
+                    alt={member.name}
+                    height="460"
+                    width="460"
+                    loading="lazy"
+                  />
+                </div>
+                <span className="mt-2 block text-sm">{member.name}</span>
+                <span className="text-muted-foreground block text-xs">
+                  {member.role}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <h3 className="mb-6 text-lg font-medium">Marketing</h3>
+          <div
+            data-rounded="full"
+            className="grid grid-cols-2 gap-4 border-t py-6 md:grid-cols-4"
+          >
+            {members.map((member, index) => (
+              <div key={index}>
+                <div className="bg-background size-20 rounded-full border p-0.5 shadow shadow-zinc-950/5">
+                  <img
+                    className="aspect-square rounded-full object-cover"
+                    src={member.avatar}
+                    alt={member.name}
+                    height="460"
+                    width="460"
+                    loading="lazy"
+                  />
+                </div>
+                <span className="mt-2 block text-sm">{member.name}</span>
+                <span className="text-muted-foreground block text-xs">
+                  {member.role}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/team/two/page.tsx b/src/app/[locale]/preview/team/two/page.tsx
new file mode 100644
index 0000000..d6ef9ed
--- /dev/null
+++ b/src/app/[locale]/preview/team/two/page.tsx
@@ -0,0 +1,99 @@
+import Link from 'next/link';
+
+const members = [
+  {
+    name: 'Liam Brown',
+    role: 'Founder - CEO',
+    avatar: 'https://alt.tailus.io/images/team/member-one.webp',
+    link: '#',
+  },
+  {
+    name: 'Elijah Jones',
+    role: 'Co-Founder - CTO',
+    avatar: 'https://alt.tailus.io/images/team/member-two.webp',
+    link: '#',
+  },
+  {
+    name: 'Isabella Garcia',
+    role: 'Sales Manager',
+    avatar: 'https://alt.tailus.io/images/team/member-three.webp',
+    link: '#',
+  },
+  {
+    name: 'Henry Lee',
+    role: 'UX Engeneer',
+    avatar: 'https://alt.tailus.io/images/team/member-four.webp',
+    link: '#',
+  },
+  {
+    name: 'Ava Williams',
+    role: 'Interaction Designer',
+    avatar: 'https://alt.tailus.io/images/team/member-five.webp',
+    link: '#',
+  },
+  {
+    name: 'Olivia Miller',
+    role: 'Visual Designer',
+    avatar: 'https://alt.tailus.io/images/team/member-six.webp',
+    link: '#',
+  },
+];
+
+export default function TeamSection() {
+  return (
+    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
+      <div className="mx-auto max-w-5xl border-t px-6">
+        <span className="text-caption -ml-6 -mt-3.5 block w-max bg-gray-50 px-6 dark:bg-gray-950">
+          Team
+        </span>
+        <div className="mt-12 gap-4 sm:grid sm:grid-cols-2 md:mt-24">
+          <div className="sm:w-2/5">
+            <h2 className="text-3xl font-bold sm:text-4xl">Our dream team</h2>
+          </div>
+          <div className="mt-6 sm:mt-0">
+            <p>
+              During the working process, we perform regular fitting with the
+              client because he is the only person who can feel whether a new
+              suit fits or not.
+            </p>
+          </div>
+        </div>
+        <div className="mt-12 md:mt-24">
+          <div className="grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
+            {members.map((member, index) => (
+              <div key={index} className="group overflow-hidden">
+                <img
+                  className="h-96 w-full rounded-md object-cover object-top grayscale transition-all duration-500 hover:grayscale-0 group-hover:h-[22.5rem] group-hover:rounded-xl"
+                  src={member.avatar}
+                  alt="team member"
+                  width="826"
+                  height="1239"
+                />
+                <div className="px-2 pt-2 sm:pb-0 sm:pt-4">
+                  <div className="flex justify-between">
+                    <h3 className="text-title text-base font-medium transition-all duration-500 group-hover:tracking-wider">
+                      {member.name}
+                    </h3>
+                    <span className="text-xs">_0{index + 1}</span>
+                  </div>
+                  <div className="mt-1 flex items-center justify-between">
+                    <span className="text-muted-foreground inline-block translate-y-6 text-sm opacity-0 transition duration-300 group-hover:translate-y-0 group-hover:opacity-100">
+                      {member.role}
+                    </span>
+                    <Link
+                      href={member.link}
+                      className="group-hover:text-primary-600 dark:group-hover:text-primary-400 inline-block translate-y-8 text-sm tracking-wide opacity-0 transition-all duration-500 hover:underline group-hover:translate-y-0 group-hover:opacity-100"
+                    >
+                      {' '}
+                      Linktree
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/five/page.tsx b/src/app/[locale]/preview/testimonials/five/page.tsx
new file mode 100644
index 0000000..6d7b596
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/five/page.tsx
@@ -0,0 +1,167 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent } from '@/components/ui/card';
+
+type Testimonial = {
+  name: string;
+  role: string;
+  image: string;
+  quote: string;
+};
+
+const testimonials: Testimonial[] = [
+  {
+    name: 'Jonathan Yombo',
+    role: 'Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/1.jpg',
+    quote:
+      'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
+  },
+  {
+    name: 'Yves Kalume',
+    role: 'GDE - Android',
+    image: 'https://randomuser.me/api/portraits/men/6.jpg',
+    quote:
+      'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
+  },
+  {
+    name: 'Yucel Faruksahan',
+    role: 'Tailkits Creator',
+    image: 'https://randomuser.me/api/portraits/men/7.jpg',
+    quote:
+      'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
+  },
+  {
+    name: 'Anonymous author',
+    role: 'Doing something',
+    image: 'https://randomuser.me/api/portraits/men/8.jpg',
+    quote:
+      'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
+  },
+  {
+    name: 'Shekinah Tshiokufila',
+    role: 'Senior Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/4.jpg',
+    quote:
+      'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
+  },
+  {
+    name: 'Oketa Fred',
+    role: 'Fullstack Developer',
+    image: 'https://randomuser.me/api/portraits/men/2.jpg',
+    quote:
+      'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
+  },
+  {
+    name: 'Zeki',
+    role: 'Founder of ChatExtend',
+    image: 'https://randomuser.me/api/portraits/men/5.jpg',
+    quote:
+      "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
+  },
+  {
+    name: 'Joseph Kitheka',
+    role: 'Fullstack Developer',
+    image: 'https://randomuser.me/api/portraits/men/9.jpg',
+    quote:
+      'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
+  },
+  {
+    name: 'Khatab Wedaa',
+    role: 'MerakiUI Creator',
+    image: 'https://randomuser.me/api/portraits/men/10.jpg',
+    quote:
+      "Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
+  },
+  {
+    name: 'Rodrigo Aguilar',
+    role: 'TailwindAwesome Creator',
+    image: 'https://randomuser.me/api/portraits/men/11.jpg',
+    quote:
+      'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
+  },
+  {
+    name: 'Eric Ampire',
+    role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
+    image: 'https://randomuser.me/api/portraits/men/12.jpg',
+    quote:
+      'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
+  },
+  {
+    name: 'Roland Tubonge',
+    role: 'Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/13.jpg',
+    quote:
+      'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
+  },
+];
+
+const chunkArray = (
+  array: Testimonial[],
+  chunkSize: number
+): Testimonial[][] => {
+  const result: Testimonial[][] = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+};
+
+const testimonialChunks = chunkArray(
+  testimonials,
+  Math.ceil(testimonials.length / 3)
+);
+
+export default function WallOfLoveSection() {
+  return (
+    <section>
+      <div className="py-16 md:py-32">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="text-center">
+            <h2 className="text-title text-3xl font-semibold">
+              Loved by the Community
+            </h2>
+            <p className="text-body mt-6">
+              Harum quae dolore orrupti aut temporibus ariatur.
+            </p>
+          </div>
+          <div className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
+            {testimonialChunks.map((chunk, chunkIndex) => (
+              <div key={chunkIndex} className="space-y-3">
+                {chunk.map(({ name, role, quote, image }, index) => (
+                  <Card key={index}>
+                    <CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
+                      <Avatar className="size-9">
+                        <AvatarImage
+                          alt={name}
+                          src={image}
+                          loading="lazy"
+                          width="120"
+                          height="120"
+                        />
+                        <AvatarFallback>ST</AvatarFallback>
+                      </Avatar>
+
+                      <div>
+                        <h3 className="font-medium">{name}</h3>
+
+                        <span className="text-muted-foreground block text-sm tracking-wide">
+                          {role}
+                        </span>
+
+                        <blockquote className="mt-3">
+                          <p className="text-gray-700 dark:text-gray-300">
+                            {quote}
+                          </p>
+                        </blockquote>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/four/page.tsx b/src/app/[locale]/preview/testimonials/four/page.tsx
new file mode 100644
index 0000000..e02d236
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/four/page.tsx
@@ -0,0 +1,39 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export default function TestimonialsSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto max-w-2xl text-center">
+          <blockquote>
+            <p className="text-lg font-medium sm:text-xl md:text-3xl">
+              Using TailsUI has been like unlocking a secret design superpower.
+              It's the perfect fusion of simplicity and versatility, enabling us
+              to create UIs that are as stunning as they are user-friendly.
+            </p>
+
+            <div className="mt-12 flex items-center justify-center gap-6">
+              <Avatar className="size-12">
+                <AvatarImage
+                  src="https://tailus.io/images/reviews/shekinah.webp"
+                  alt="Shekinah Tshiokufila"
+                  height="400"
+                  width="400"
+                  loading="lazy"
+                />
+                <AvatarFallback>ST</AvatarFallback>
+              </Avatar>
+
+              <div className="space-y-1 border-l pl-6">
+                <cite className="font-medium">John Doe</cite>
+                <span className="text-muted-foreground block text-sm">
+                  CEO, Nvidia
+                </span>
+              </div>
+            </div>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/one/page.tsx b/src/app/[locale]/preview/testimonials/one/page.tsx
new file mode 100644
index 0000000..0d0aff7
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/one/page.tsx
@@ -0,0 +1,158 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export default function Testimonials() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
+          <h2 className="text-4xl font-medium lg:text-5xl">
+            Build by makers, loved by thousand developers
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2">
+          <Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
+            <CardHeader>
+              <img
+                className="h-6 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nike.svg"
+                alt="Nike Logo"
+                height="24"
+                width="auto"
+              />
+            </CardHeader>
+            <CardContent>
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p className="text-xl font-medium">
+                  Tailus has transformed the way I develop web applications.
+                  Their extensive collection of UI components, blocks, and
+                  templates has significantly accelerated my workflow. The
+                  flexibility to customize every aspect allows me to create
+                  unique user experiences. Tailus is a game-changer for modern
+                  web development
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] items-center gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/shekinah.webp"
+                      alt="Shekinah Tshiokufila"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>ST</AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <cite className="text-sm font-medium">
+                      Shekinah Tshiokufila
+                    </cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Software Ingineer
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card className="md:col-span-2">
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p className="text-xl font-medium">
+                  Tailus is really extraordinary and very practical, no need to
+                  break your head. A real gold mine.
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] items-center gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/jonathan.webp"
+                      alt="Jonathan Yombo"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>JY</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <cite className="text-sm font-medium">Jonathan Yombo</cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Software Ingineer
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p>
+                  Great work on tailfolio template. This is one of the best
+                  personal website that I have seen so far!
+                </p>
+
+                <div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/yucel.webp"
+                      alt="Yucel Faruksahan"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>YF</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <cite className="text-sm font-medium">
+                      Yucel Faruksahan
+                    </cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Creator, Tailkits
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card className="card variant-mixed">
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p>
+                  Great work on tailfolio template. This is one of the best
+                  personal website that I have seen so far!
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/rodrigo.webp"
+                      alt="Rodrigo Aguilar"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>YF</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm font-medium">Rodrigo Aguilar</p>
+                    <span className="text-muted-foreground block text-sm">
+                      Creator, TailwindAwesome
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/six/page.tsx b/src/app/[locale]/preview/testimonials/six/page.tsx
new file mode 100644
index 0000000..8374832
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/six/page.tsx
@@ -0,0 +1,170 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent } from '@/components/ui/card';
+
+type Testimonial = {
+  name: string;
+  role: string;
+  image: string;
+  quote: string;
+};
+
+const testimonials: Testimonial[] = [
+  {
+    name: 'Jonathan Yombo',
+    role: 'Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/1.jpg',
+    quote:
+      'Tailus is really extraordinary and very practical, no need to break your head. A real gold mine.',
+  },
+  {
+    name: 'Yves Kalume',
+    role: 'GDE - Android',
+    image: 'https://randomuser.me/api/portraits/men/6.jpg',
+    quote:
+      'With no experience in webdesign I just redesigned my entire website in a few minutes with tailwindcss thanks to Tailus.',
+  },
+  {
+    name: 'Yucel Faruksahan',
+    role: 'Tailkits Creator',
+    image: 'https://randomuser.me/api/portraits/men/7.jpg',
+    quote:
+      'Great work on tailfolio template. This is one of the best personal website that I have seen so far :)',
+  },
+  {
+    name: 'Anonymous author',
+    role: 'Doing something',
+    image: 'https://randomuser.me/api/portraits/men/8.jpg',
+    quote:
+      'I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of Tailus template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page.',
+  },
+  {
+    name: 'Shekinah Tshiokufila',
+    role: 'Senior Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/4.jpg',
+    quote:
+      'Tailus is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder.',
+  },
+  {
+    name: 'Oketa Fred',
+    role: 'Fullstack Developer',
+    image: 'https://randomuser.me/api/portraits/men/2.jpg',
+    quote:
+      'I absolutely love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.',
+  },
+  {
+    name: 'Zeki',
+    role: 'Founder of ChatExtend',
+    image: 'https://randomuser.me/api/portraits/men/5.jpg',
+    quote:
+      "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly.",
+  },
+  {
+    name: 'Joseph Kitheka',
+    role: 'Fullstack Developer',
+    image: 'https://randomuser.me/api/portraits/men/9.jpg',
+    quote:
+      'Tailus has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. Tailus is a game-changer for modern web development!',
+  },
+  {
+    name: 'Khatab Wedaa',
+    role: 'MerakiUI Creator',
+    image: 'https://randomuser.me/api/portraits/men/10.jpg',
+    quote:
+      "Tailus is an elegant, clean, and responsive tailwind css components it's very helpful to start fast with your project.",
+  },
+  {
+    name: 'Rodrigo Aguilar',
+    role: 'TailwindAwesome Creator',
+    image: 'https://randomuser.me/api/portraits/men/11.jpg',
+    quote:
+      'I love Tailus ❤️. The component blocks are well-structured, simple to use, and beautifully designed. It makes it really easy to have a good-looking website in no time.',
+  },
+  {
+    name: 'Eric Ampire',
+    role: 'Mobile Engineer at @BRPNews • @GoogleDevExpert for Android',
+    image: 'https://randomuser.me/api/portraits/men/12.jpg',
+    quote:
+      'Tailus templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend Tailus templates to anyone who is looking to create a website.',
+  },
+  {
+    name: 'Roland Tubonge',
+    role: 'Software Engineer',
+    image: 'https://randomuser.me/api/portraits/men/13.jpg',
+    quote:
+      'Tailus is so well designed that even with a very poor knowledge of web design you can do miracles. Let yourself be seduced!',
+  },
+];
+
+const chunkArray = (
+  array: Testimonial[],
+  chunkSize: number
+): Testimonial[][] => {
+  const result: Testimonial[][] = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+};
+
+const testimonialChunks = chunkArray(
+  testimonials,
+  Math.ceil(testimonials.length / 3)
+);
+
+export default function WallOfLoveSection() {
+  return (
+    <section>
+      <div className="py-16 md:py-32">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="text-center">
+            <h2 className="text-title text-3xl font-semibold">
+              Loved by the Community
+            </h2>
+            <p className="text-body mt-6">
+              Harum quae dolore orrupti aut temporibus ariatur.
+            </p>
+          </div>
+          <div className="mt-8 grid gap-3 [--color-card:var(--color-muted)] sm:grid-cols-2 md:mt-12 lg:grid-cols-3 dark:[--color-muted:var(--color-zinc-900)]">
+            {testimonialChunks.map((chunk, chunkIndex) => (
+              <div
+                key={chunkIndex}
+                className="space-y-3 *:border-none *:shadow-none"
+              >
+                {chunk.map(({ name, role, quote, image }, index) => (
+                  <Card key={index}>
+                    <CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-6">
+                      <Avatar className="size-9">
+                        <AvatarImage
+                          alt={name}
+                          src={image}
+                          loading="lazy"
+                          width="120"
+                          height="120"
+                        />
+                        <AvatarFallback>ST</AvatarFallback>
+                      </Avatar>
+
+                      <div>
+                        <h3 className="font-medium">{name}</h3>
+
+                        <span className="text-muted-foreground block text-sm tracking-wide">
+                          {role}
+                        </span>
+
+                        <blockquote className="mt-3">
+                          <p className="text-gray-700 dark:text-gray-300">
+                            {quote}
+                          </p>
+                        </blockquote>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/three/page.tsx b/src/app/[locale]/preview/testimonials/three/page.tsx
new file mode 100644
index 0000000..7d7c2b4
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/three/page.tsx
@@ -0,0 +1,33 @@
+export default function TestimonialsSection() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto max-w-2xl">
+          <blockquote>
+            <p className="text-lg font-semibold sm:text-xl md:text-3xl">
+              Using TailsUI has been like unlocking a secret design superpower.
+              It's the perfect fusion of simplicity and versatility, enabling us
+              to create UIs that are as stunning as they are user-friendly.
+            </p>
+
+            <div className="mt-12 flex items-center gap-6">
+              <img
+                className="h-7 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                alt="Nvidia Logo"
+                height="20"
+                width="auto"
+              />
+              <div className="space-y-1 border-l pl-6">
+                <cite className="font-medium">John Doe</cite>
+                <span className="text-muted-foreground block text-sm">
+                  CEO, Nvidia
+                </span>
+              </div>
+            </div>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/[locale]/preview/testimonials/two/page.tsx b/src/app/[locale]/preview/testimonials/two/page.tsx
new file mode 100644
index 0000000..47158cf
--- /dev/null
+++ b/src/app/[locale]/preview/testimonials/two/page.tsx
@@ -0,0 +1,158 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export default function Testimonials() {
+  return (
+    <section className="py-16 md:py-32">
+      <div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16">
+        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center md:space-y-12">
+          <h2 className="text-4xl font-medium lg:text-5xl">
+            Build by makers, loved by thousand developers
+          </h2>
+          <p>
+            Gemini is evolving to be more than just the models. It supports an
+            entire to the APIs and platforms helping developers and businesses
+            innovate.
+          </p>
+        </div>
+
+        <div className="grid gap-4 [--color-card:var(--color-muted)] *:border-none *:shadow-none sm:grid-cols-2 md:grid-cols-4 lg:grid-rows-2 dark:[--color-muted:var(--color-zinc-900)]">
+          <Card className="grid grid-rows-[auto_1fr] gap-8 sm:col-span-2 sm:p-6 lg:row-span-2">
+            <CardHeader>
+              <img
+                className="h-6 w-fit dark:invert"
+                src="https://html.tailus.io/blocks/customers/nike.svg"
+                alt="Nike Logo"
+                height="24"
+                width="auto"
+              />
+            </CardHeader>
+            <CardContent>
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p className="text-xl font-medium">
+                  Tailus has transformed the way I develop web applications.
+                  Their extensive collection of UI components, blocks, and
+                  templates has significantly accelerated my workflow. The
+                  flexibility to customize every aspect allows me to create
+                  unique user experiences. Tailus is a game-changer for modern
+                  web development
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] items-center gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/shekinah.webp"
+                      alt="Shekinah Tshiokufila"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>ST</AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <cite className="text-sm font-medium">
+                      Shekinah Tshiokufila
+                    </cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Software Ingineer
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card className="md:col-span-2">
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p className="text-xl font-medium">
+                  Tailus is really extraordinary and very practical, no need to
+                  break your head. A real gold mine.
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] items-center gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/jonathan.webp"
+                      alt="Jonathan Yombo"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>JY</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <cite className="text-sm font-medium">Jonathan Yombo</cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Software Ingineer
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p>
+                  Great work on tailfolio template. This is one of the best
+                  personal website that I have seen so far!
+                </p>
+
+                <div className="grid items-center gap-3 [grid-template-columns:auto_1fr]">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/yucel.webp"
+                      alt="Yucel Faruksahan"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>YF</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <cite className="text-sm font-medium">
+                      Yucel Faruksahan
+                    </cite>
+                    <span className="text-muted-foreground block text-sm">
+                      Creator, Tailkits
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+          <Card className="card variant-mixed">
+            <CardContent className="h-full pt-6">
+              <blockquote className="grid h-full grid-rows-[1fr_auto] gap-6">
+                <p>
+                  Great work on tailfolio template. This is one of the best
+                  personal website that I have seen so far!
+                </p>
+
+                <div className="grid grid-cols-[auto_1fr] gap-3">
+                  <Avatar className="size-12">
+                    <AvatarImage
+                      src="https://tailus.io/images/reviews/rodrigo.webp"
+                      alt="Rodrigo Aguilar"
+                      height="400"
+                      width="400"
+                      loading="lazy"
+                    />
+                    <AvatarFallback>YF</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm font-medium">Rodrigo Aguilar</p>
+                    <span className="text-muted-foreground block text-sm">
+                      Creator, TailwindAwesome
+                    </span>
+                  </div>
+                </div>
+              </blockquote>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+  );
+}