feat: add multiple content block variants and update block images

- Introduce new content block variants (Content, Content2, Content3, Content4, Content5, Content6)
- Replace WebP images with PNG for better compatibility and performance
- Update content page to include all new content block components
- Add reference links to NSUI design system for each content block
- Enhance content sections with responsive layouts and modern design patterns

src/app/[locale]/(marketing)/blocks/content/page.tsx

@@ -1,4 +1,9 @@
+import Content from "@/components/blocks/content/content";
 import Content2 from "@/components/blocks/content/content-2";
+import Content3 from "@/components/blocks/content/content-3";
+import Content4 from "@/components/blocks/content/content-4";
+import Content5 from "@/components/blocks/content/content-5";
+import Content6 from "@/components/blocks/content/content-6";
 
 interface ContentPageProps {
   params: Promise<{ locale: string }>;
@@ -10,7 +15,17 @@ export default async function ContentPage(props: ContentPageProps) {
   return (
     <>
       <div className="mt-8 flex flex-col gap-16 pb-16">
+        <Content />
+
         <Content2 />
+
+        <Content3 />
+
+        <Content4 />
+
+        <Content5 />
+
+        <Content6 />
       </div>
     </>
   );

src/app/[locale]/(marketing)/blocks/hero/page.tsx

@@ -7,6 +7,9 @@ interface HeroPageProps {
   params: Promise<{ locale: string }>;
 };
 
+/**
+ * https://nsui.irung.me/hero-section
+ */
 export default async function HeroPage(props: HeroPageProps) {
   const params = await props.params;
 

src/app/[locale]/(marketing)/blocks/pricing/page.tsx

@@ -8,6 +8,9 @@ interface PricingPageProps {
   params: Promise<{ locale: string }>;
 };
 
+/**
+ * https://nsui.irung.me/pricing
+ */
 export default async function PricingPage(props: PricingPageProps) {
   const params = await props.params;
   const { locale } = params;

src/app/[locale]/(marketing)/blocks/stats/page.tsx

@@ -7,6 +7,9 @@ interface StatsPageProps {
   params: Promise<{ locale: string }>;
 };
 
+/**
+ * https://nsui.irung.me/stats
+ */
 export default async function StatsPage(props: StatsPageProps) {
   const params = await props.params;
 
@@ -14,8 +17,11 @@ export default async function StatsPage(props: StatsPageProps) {
     <>
       <div className="mt-8 flex flex-col gap-16 pb-16">
         <Stats />
+        
         <Stats2 />
+
         <Stats3 />
+        
         <Stats4 />
       </div>
     </>

src/app/[locale]/(marketing)/blocks/testimonials/page.tsx

@@ -8,6 +8,9 @@ interface TestimonialsPageProps {
   params: Promise<{ locale: string }>;
 };
 
+/**
+ * https://nsui.irung.me/testimonials
+ */
 export default async function TestimonialsPage(props: TestimonialsPageProps) {
   const params = await props.params;
 
@@ -15,9 +18,13 @@ export default async function TestimonialsPage(props: TestimonialsPageProps) {
     <>
       <div className="mt-8 flex flex-col gap-16 pb-16">
         <Testimonials />
+
         <Testimonials2 />
+        
         <Testimonials4 />
+        
         <Testimonials5 />
+        
         <Testimonials6 />
       </div>
     </>

src/components/blocks/content/content-2.tsx

@@ -38,8 +38,8 @@ export default function Content2() {
           <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/blocks/charts.webp" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
-              <Image src="/images/blocks/charts-light.webp" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
+              <Image src="/images/blocks/charts.png" className="hidden rounded-[12px] dark:block" alt="payments illustration dark" width={1207} height={929} />
+              <Image src="/images/blocks/charts-light.png" className="rounded-[12px] shadow dark:hidden" alt="payments illustration light" width={1207} height={929} />
             </div>
           </div>
         </div>

src/components/blocks/content/content-3.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+/**
+ * https://nsui.irung.me/content-3
+ * 
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-3.json
+ */
+export default function Content3() {
+  return (
+    <section className="py-16">
+      <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>
+  )
+}

src/components/blocks/content/content-4.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button'
+import { ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+/**
+ * https://nsui.irung.me/content-4
+ * 
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-4.json
+ */
+export default function Content4() {
+  return (
+    <section className="py-16">
+      <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>
+  )
+}

src/components/blocks/content/content-5.tsx

@@ -0,0 +1,52 @@
+import { Cpu, Lock, Sparkles, Zap } from 'lucide-react'
+
+/**
+ * https://nsui.irung.me/content-5
+ * 
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-5.json
+ */
+export default function Content5() {
+  return (
+    <section className="py-16">
+      <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>
+  )
+}

src/components/blocks/content/content-6.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+
+/**
+ * https://nsui.irung.me/content-6
+ * 
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-6.json
+ */
+export default function Content6() {
+  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>
+  )
+}

src/components/blocks/content/content.tsx

@@ -0,0 +1,42 @@
+import Image from 'next/image';
+
+/**
+ * https://nsui.irung.me/content
+ * 
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/content-1.json
+ */
+export default function Content() {
+  return (
+    <section className="py-16">
+      <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="/images/blocks/payments.png" className="hidden rounded-[15px] dark:block" alt="payments illustration dark" width={1207} height={929} />
+              <Image src="/images/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>
+  )
+}

src/components/blocks/hero/hero-section-4.tsx

@@ -48,8 +48,8 @@ export default function HeroSection4() {
             <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/blocks/music.webp" alt="app screen" width={2796} height={2008} />
-                <Image className="z-2 border-border/25 relative rounded-2xl border dark:hidden" src="/images/blocks/music-light.webp" alt="app screen" width={2796} height={2008} />
+                <Image className="z-2 border-border/25 relative hidden rounded-2xl border dark:block" src="/images/blocks/music.png" alt="app screen" width={2796} height={2008} />
+                <Image className="z-2 border-border/25 relative rounded-2xl border dark:hidden" src="/images/blocks/music-light.png" alt="app screen" width={2796} height={2008} />
               </div>
             </div>
           </div>

src/components/blocks/hero/hero-section.tsx

@@ -50,7 +50,7 @@ export default function HeroSection() {
                   <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="/images/blocks/card.webp" alt="tailus ui hero section" width={2880} height={2074} />
+                  <Image className="rounded-(--radius) z-1 relative border dark:hidden" src="/images/blocks/card.png" alt="tailus ui hero section" width={2880} height={2074} />
                   <Image className="rounded-(--radius) z-1 relative hidden border dark:block" src="/images/blocks/dark-card.webp" alt="tailus ui hero section" width={2880} height={2074} />
                 </div>
               </div>