Merge branch 'main' of https://github.com/MkSaaSHQ/mksaas-template

src/app/(public)/(home)/page.tsx

@@ -14,6 +14,16 @@
 // import { HomeShowcase } from "@/components/home/home-showcase";
 // import { HomeTestimonials } from "@/components/home/home-testimonials";
 // import HomeVideo from "@/components/home/home-video";
+import CallToAction from "@/components/nsui/call-to-action";
+import ContentSection from "@/components/nsui/content-2";
+import FAQs from "@/components/nsui/faqs";
+import Features from "@/components/nsui/features-2";
+import FeaturesSection from "@/components/nsui/features-8";
+import HeroSection from "@/components/nsui/hero-section";
+import LogoCloud from "@/components/nsui/logo-cloud";
+import Pricing from "@/components/nsui/pricing";
+import StatsSection from "@/components/nsui/stats";
+import WallOfLoveSection from "@/components/nsui/testimonials";
 import { siteConfig } from "@/config/site";
 import { constructMetadata } from "@/lib/metadata";
 
@@ -28,6 +38,27 @@ export default async function HomePage() {
       {/* <PromotekitScript /> */}
 
       <div className="mt-12 flex flex-col gap-16">
+
+        <HeroSection />
+
+        <LogoCloud />
+
+        {/* <Features /> */}
+
+        <FeaturesSection />
+
+        <ContentSection />
+
+        <Pricing />
+
+        <FAQs />
+
+        <WallOfLoveSection />
+
+        <StatsSection />
+
+        <CallToAction />
+
         {/* <HomeHero /> */}
 
         {/* <HomeVideo /> */}

src/components/nsui/call-to-action.tsx

@@ -0,0 +1,30 @@
+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>
+    )
+}

src/components/nsui/content-2.tsx

@@ -0,0 +1,44 @@
+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="/images/charts.webp" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
+                            <Image src="/images/charts-light.webp" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}

src/components/nsui/faqs.tsx

@@ -0,0 +1,46 @@
+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>
+    )
+}

src/components/nsui/features-2.tsx

@@ -0,0 +1,67 @@
+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>
+)

src/components/nsui/hero-section.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React from 'react'
+import Link from 'next/link'
+import { Logo } from '@/components/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 (
+        <>
+            <main className="overflow-hidden">
+                <section>
+                    <div className="relative">
+                        <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="/images/music.webp" alt="app screen" width={2796} height={2008} />
+                                <Image className="z-2 border-border/25 relative rounded-2xl border dark:hidden" src="/images/music-light.webp" 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>
+        </>
+    )
+}

src/components/nsui/logo-cloud.tsx

@@ -0,0 +1,22 @@
+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>
+    )
+}

src/components/nsui/pricing.tsx

@@ -0,0 +1,101 @@
+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>
+    )
+}

src/components/nsui/stats.tsx

@@ -0,0 +1,27 @@
+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>
+    )
+}

src/components/nsui/testimonials.tsx

@@ -0,0 +1,135 @@
+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>
+    )
+}