snowbase-templates-installer 1.0.1

package/landing-pages/open-engineer-template/src/components/sections/hero.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import Image from 'next/image';
+import { ArrowUpRight, DollarSign, Star } from 'lucide-react';
+
+const HeroSection = () => {
+  return (
+    <section id="home" className="relative flex flex-col overflow-hidden bg-background">
+      <div className="border-b border-border px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex max-w-[1280px] flex-col gap-6 border-x border-border px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-24">
+          <div className="flex flex-col items-center gap-6 text-center">
+            <div className="space-y-4">
+              {/* Animated Badge */}
+              <div className="inline-flex items-center justify-center">
+                <span className="relative inline-flex items-center gap-2.5 overflow-hidden rounded-full border border-border bg-muted px-1.5 py-1 text-xs font-medium transition-all focus-visible:ring-2 focus-visible:ring-primary">
+                  <span className="z-10 flex h-5.5 items-center rounded-full bg-primary px-2 py-0.5 text-primary-foreground">
+                    New
+                  </span>
+                  <span className="z-10 text-sm font-normal text-muted-foreground">
+                    Introducing AI Agent
+                  </span>
+                  <div className="pointer-events-none absolute inset-0 rounded-full border-[1px] border-transparent [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect]">
+                    <div className="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0deg,transparent_0_340deg,#18181B_360deg)]"></div>
+                  </div>
+                </span>
+              </div>
+
+              {/* Headline */}
+              <h1 className="text-2xl font-semibold sm:text-3xl lg:text-[48px] lg:leading-[1.2] text-foreground tracking-tight">
+                Work with AI agent<br />
+                that handles your daily operations
+              </h1>
+
+              {/* Subtext */}
+              <p className="mx-auto max-w-3xl text-lg sm:text-xl text-muted-foreground leading-[1.6]">
+                Automate routine tasks, connect your tools, and let your AI agent coordinate workflows so you can focus on strategy, not busywork.
+              </p>
+            </div>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8 mt-4">
+              <a
+                href="/register"
+                className="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-6 text-base font-medium text-primary-foreground shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.15),inset_2px_-4px_4px_0_rgba(0,0,0,0.25),inset_-2px_4px_4px_0_rgba(255,255,255,0.15)] transition-all duration-300 hover:shadow-[0_0_0_0_transparent,inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25),inset_-1px_1.5px_2px_0_rgba(255,255,255,0.15)]"
+              >
+                <ArrowUpRight className="size-5" />
+                Get Started
+              </a>
+              <a
+                href="#pricing"
+                className="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card px-6 text-base font-medium text-foreground shadow-sm transition-all duration-300 hover:bg-muted"
+              >
+                <DollarSign className="size-5" />
+                View Pricing
+              </a>
+            </div>
+          </div>
+
+          {/* Social Proof */}
+          <div className="mt-8 sm:mt-12">
+            <div className="flex w-full items-center justify-center gap-4 max-sm:flex-col sm:gap-7">
+              {/* User Avatars */}
+              <div className="flex flex-1 items-center justify-end gap-3">
+                <div className="flex flex-row items-center justify-center">
+                  {[
+                    "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/07-1.webp",
+                    "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/08-2.webp",
+                    "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/03-3.webp",
+                    "https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/06-4.webp"
+                  ].map((url, i) => (
+                    <div key={i} className="relative -me-3.5 last:me-0 group">
+                      <div className="flex size-10 items-center justify-center overflow-hidden rounded-full border-2 border-background bg-muted shadow-md transition-all duration-300 hover:z-10 hover:scale-105">
+                        <Image
+                          src={url}
+                          alt={`User profile ${i + 1}`}
+                          width={40}
+                          height={40}
+                          className="aspect-square size-full object-cover"
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div>
+                  <span className="text-lg font-medium text-foreground">12K+</span>{" "}
+                  <span className="text-muted-foreground">Users</span>
+                </div>
+              </div>
+
+              {/* Vertical Separator */}
+              <div className="hidden h-4 w-px bg-border sm:block"></div>
+
+              {/* Ratings */}
+              <div className="flex flex-1 items-center gap-3">
+                <div className="flex gap-px" aria-label="4.5 stars rounded">
+                  {[1, 2, 3, 4].map((star) => (
+                    <Star key={star} className="size-5 fill-foreground text-foreground" strokeWidth={1} />
+                  ))}
+                  <div className="relative">
+                    <Star className="size-5 text-border fill-border" strokeWidth={1} />
+                    <div className="absolute inset-0 overflow-hidden w-1/2">
+                      <Star className="size-5 fill-foreground text-foreground" strokeWidth={1} />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <span className="text-lg font-medium text-foreground">4.5</span>{" "}
+                  <span className="text-muted-foreground">Ratings</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

package/landing-pages/open-engineer-template/src/components/sections/how-it-works.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Headphones, Share2, PenLine, ArrowUpRight, Paperclip } from 'lucide-react';
+
+const HowItWorks = () => {
+  return (
+    <section id="how-it-works" className="relative w-full border-b bg-background">
+      <div className="mx-auto max-w-7xl border-x">
+        {/* Section Header */}
+        <div className="flex flex-col items-center border-b px-4 py-12 text-center sm:px-6 lg:px-8">
+          <span className="mb-2 text-sm font-semibold tracking-wider text-muted-foreground uppercase">
+            HOW IT WORKS
+          </span>
+          <h2 className="text-2xl font-semibold sm:text-3xl lg:text-[2.25rem] lg:leading-[1.25]">
+            Here's a quick look at how the AI agent effectively operates.
+          </h2>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2">
+          {/* Steps List */}
+          <div className="flex flex-col border-r-0 lg:border-r">
+            {/* Step 1 */}
+            <div className="group relative border-b p-8 transition-colors hover:bg-muted/30">
+              {/* Active Indicator Line */}
+              <div className="absolute top-0 bottom-0 left-0 w-0.5 bg-foreground opacity-100 transition-opacity" />
+              <div className="flex items-start gap-4">
+                <div className="flex shrink-0 items-center justify-center rounded-lg bg-muted p-2 text-foreground">
+                  <Headphones className="size-5" />
+                </div>
+                <div>
+                  <h3 className="mb-2 text-lg font-semibold text-foreground">Describe your workflow</h3>
+                  <p className="text-muted-foreground leading-relaxed">
+                    Inform the agent about what you wish to automate, ranging from daily team summaries to lead follow-ups, ensuring clarity in your request.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div className="group relative border-b p-8 transition-colors hover:bg-muted/30">
+              <div className="absolute top-0 bottom-0 left-0 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="flex items-start gap-4">
+                <div className="flex shrink-0 items-center justify-center rounded-lg bg-muted p-2 text-foreground">
+                  <Share2 className="size-5" />
+                </div>
+                <div>
+                  <h3 className="mb-2 text-lg font-semibold text-foreground">Connect your tools</h3>
+                  <p className="text-muted-foreground leading-relaxed">
+                    Link Gmail, Slack, Notion, or any app your team already uses. The agent syncs data between them and builds context automatically.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div className="group relative p-8 transition-colors hover:bg-muted/30">
+              <div className="absolute top-0 bottom-0 left-0 w-0.5 bg-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="flex items-start gap-4">
+                <div className="flex shrink-0 items-center justify-center rounded-lg bg-muted p-2 text-foreground">
+                  <PenLine className="size-5" />
+                </div>
+                <div>
+                  <h3 className="mb-2 text-lg font-semibold text-foreground">Review and refine</h3>
+                  <p className="text-muted-foreground leading-relaxed">
+                    Every run is transparent. Approve, edit, or rerun workflows anytime — the agent learns from feedback to perform even better next time.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Visual Showcase (Static Preview of the UI described in steps) */}
+          <div className="relative flex items-center justify-center bg-muted/30 p-8 lg:p-12">
+            {/* Dot Grid Background Overlay */}
+            <div 
+              className="absolute inset-0 opacity-[0.03]"
+              style={{ 
+                backgroundImage: 'radial-gradient(#09090B 1px, transparent 1px)', 
+                backgroundSize: '24px 24px' 
+              }}
+            />
+            
+            {/* UI Component Simulation */}
+            <div className="relative z-10 w-full max-w-sm rounded-[1.25rem] border border-border bg-white p-6 shadow-2xl">
+              <div className="mb-4">
+                <p className="text-[17px] font-medium leading-relaxed text-foreground">
+                  Summarize daily team updates from Slack and
+                </p>
+              </div>
+              
+              <div className="flex items-center justify-between gap-2 border-t pt-4">
+                <div className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-1.5 transition-colors hover:bg-muted">
+                  <div className="flex size-5 items-center justify-center rounded-full bg-zinc-800 text-white">
+                    <svg viewBox="0 0 24 24" className="size-3 fill-current">
+                        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5153-4.9066 6.0462 6.0462 0 0 0-3.947-3.1298 6.0945 6.0945 0 0 0-5.1813.9856 6.1365 6.1365 0 0 0-2.8826 3.6312 6.1132 6.1132 0 0 0-2.4033-.3111 6.0469 6.0469 0 0 0-4.3827 2.3669 6.133 6.133 0 0 0-1.42 4.4161 6.0934 6.0934 0 0 0 1.2574 4.0601 5.985 5.985 0 0 0 .5141 4.9068 6.0463 6.0463 0 0 0 3.947 3.1297 6.0948 6.0948 0 0 0 5.1813-.9855 6.1351 6.1351 0 0 0 2.884-3.6325 6.1042 6.1042 0 0 0 2.403.3125 6.0461 6.0461 0 0 0 4.3815-2.3683 6.126 6.126 0 0 0 1.4192-4.4138 6.091 6.091 0 0 0-1.2581-4.061z"/>
+                    </svg>
+                  </div>
+                  <span className="text-xs font-semibold text-foreground uppercase tracking-tight">GPT-5-mini</span>
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground/60"><path d="m6 9 6 6 6-6"/></svg>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <div className="flex size-9 items-center justify-center rounded-lg bg-muted text-foreground transition-colors hover:bg-zinc-200">
+                    <Paperclip className="size-4" />
+                  </div>
+                  <div className="flex size-9 items-center justify-center rounded-lg bg-foreground text-white shadow-lg transition-all hover:scale-105 active:scale-95">
+                    <ArrowUpRight className="size-5" />
+                  </div>
+                </div>
+              </div>
+
+              {/* Decorative Subtle Labels inside UI mockup */}
+              <div className="absolute -right-6 top-1/2 -translate-y-1/2 rotate-90 transform text-[10px] font-medium tracking-widest text-border opacity-50 uppercase">
+                Dynamic Engine
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HowItWorks;

package/landing-pages/open-engineer-template/src/components/sections/pricing.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check } from "lucide-react";
+
+const PricingSection = () => {
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");
+
+  const plans = [
+    {
+      name: "Starter",
+      description: "For individuals or small teams getting started",
+      monthlyPrice: 8,
+      yearlyPrice: 6,
+      buttonText: "Purchase plan",
+      buttonVariant: "secondary",
+      features: [
+        "Up to 3 active AI agents",
+        "100 automated tasks per month",
+        "Workflow designer access",
+        "Integration with Slack + Notion",
+        "Community support",
+        "1 shared workspace",
+        "API access",
+      ],
+    },
+    {
+      name: "Pro",
+      description: "For growing teams ready to automate deeper",
+      monthlyPrice: 12,
+      yearlyPrice: 9,
+      buttonText: "Purchase plan",
+      buttonVariant: "primary",
+      highlighted: true,
+      features: [
+        "Up to 15 active AI agents",
+        "500 automated tasks per month",
+        "Workflow designer + AI templates",
+        "Integration with Slack, Notion, and GitHub",
+        "Priority chat support",
+        "5 team workspaces",
+        "API + Webhook access",
+      ],
+    },
+    {
+      name: "Enterprise",
+      description: "For large organizations needing scale & control",
+      monthlyPrice: 25,
+      yearlyPrice: 19,
+      buttonText: "Purchase plan",
+      buttonVariant: "secondary",
+      features: [
+        "Unlimited active AI agents",
+        "Unlimited automated tasks",
+        "Advanced workflow orchestration",
+        "Integration with custom enterprise tools",
+        "Dedicated success manager",
+        "Unlimited workspaces",
+        "Advanced security & compliance",
+      ],
+    },
+  ];
+
+  return (
+    <section id="pricing" className="relative flex flex-col overflow-hidden">
+        {/* Section Header with Background Borders */}
+        <div className="border-b border-border px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto flex max-w-7xl flex-col items-center border-x border-border px-4 py-12 text-center sm:px-6 lg:px-8 lg:py-16">
+            <span className="text-sm font-semibold tracking-widest text-muted-foreground uppercase mb-4">
+              PRICING
+            </span>
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+              Plans that Scale with Your Workflow
+            </h2>
+            <p className="mt-4 max-w-2xl text-base text-muted-foreground">
+              Find the perfect balance of features and scalability for your workflow,
+              designed to help you work smarter and grow effortlessly.
+            </p>
+
+            {/* Monthly/Yearly Toggle */}
+            <div className="mt-10 flex items-center justify-center gap-1">
+               <div className="inline-flex items-center rounded-lg border border-border bg-white p-1">
+                  <button
+                    onClick={() => setBillingCycle("monthly")}
+                    className={`rounded-md px-6 py-1.5 text-sm font-medium transition-all ${
+                      billingCycle === "monthly"
+                        ? "bg-muted text-foreground"
+                        : "text-muted-foreground hover:text-foreground"
+                    }`}
+                  >
+                    Monthly
+                  </button>
+                  <button
+                    onClick={() => setBillingCycle("yearly")}
+                    className={`flex items-center rounded-md px-6 py-1.5 text-sm font-medium transition-all ${
+                      billingCycle === "yearly"
+                        ? "bg-muted text-foreground"
+                        : "text-muted-foreground hover:text-foreground"
+                    }`}
+                  >
+                    Yearly
+                    <span className="ml-2 rounded-full bg-foreground px-2 py-0.5 text-[10px] text-white">
+                      Save 35%
+                    </span>
+                  </button>
+               </div>
+            </div>
+          </div>
+        </div>
+
+      {/* Pricing Grid */}
+      <div className="border-b border-border px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto grid max-w-7xl grid-cols-1 border-x border-border lg:grid-cols-3">
+          {plans.map((plan, index) => (
+              <div
+                key={plan.name}
+                className={`flex flex-col border-b border-border p-8 lg:p-12 last:border-b-0 lg:border-b-0 ${
+                  index !== plans.length - 1 ? "lg:border-r" : ""
+                } ${plan.highlighted ? "bg-muted/30" : "bg-transparent"}`}
+              >
+                <div className="mb-8">
+                  <h3 className="text-2xl font-semibold text-foreground">
+                    {plan.name}
+                  </h3>
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {plan.description}
+                  </p>
+                  <div className="mt-6 flex items-baseline">
+                    <span className="text-4xl font-semibold text-foreground">
+                      ${billingCycle === "monthly" ? plan.monthlyPrice : plan.yearlyPrice}
+                    </span>
+                    <span className="ml-1 text-sm text-muted-foreground">/month</span>
+                  </div>
+                </div>
+
+                <div className="mb-10">
+                  <button
+                    className={`w-full rounded-lg py-3 text-sm font-medium transition-all duration-300 ${
+                      plan.buttonVariant === "primary"
+                        ? "bg-foreground text-white shadow-[inset_0_2px_3px_0_rgba(255,255,255,0.15),inset_2px_-4px_4px_0_rgba(0,0,0,0.25)] hover:shadow-[inset_0_0_0_0_#18181B,inset_1px_-1.5px_2px_0_rgba(0,0,0,0.25)]"
+                        : "bg-muted text-foreground border border-border hover:bg-zinc-200"
+                    }`}
+                  >
+                    {plan.buttonText}
+                  </button>
+                </div>
+
+                <ul className="space-y-4">
+                  {plan.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-3">
+                      <div className="mt-1 flex-shrink-0">
+                        <div className="h-1.5 w-1.5 rounded-full bg-foreground" />
+                      </div>
+                      <span className="text-sm text-muted-foreground">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+        </div>
+      </div>
+      
+      {/* Decorative Dot Grid Background can be added here if needed to match other sections */}
+    </section>
+  );
+};
+
+export default PricingSection;

package/landing-pages/open-engineer-template/src/components/sections/testimonials-logos.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import Image from 'next/image';
+
+/**
+ * TestimonialLogos component
+ * 
+ * This component renders a grid of partner logos with a consistent design system.
+ * It's structured with a container that has visible the vertical border styling 
+ * defined in the high-level design.
+ */
+
+const logos = [
+  {
+    name: 'Bright Sync',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/11-24.webp',
+  },
+  {
+    name: 'Novas Solution',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/12-25.webp',
+  },
+  {
+    name: 'Looma Labs',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/13-26.webp',
+  },
+  {
+    name: 'Crestline',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/14-27.webp',
+  },
+  {
+    name: 'CogniTech Labs',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/10-28.webp',
+  },
+  {
+    name: 'Tech Wave',
+    src: 'https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/test-clones/73098f9c-15b9-43d6-98e6-96ab2eba390e-shadcn-nextjs-orion-landing-page-vercel-app/assets/images/24-29.webp',
+  },
+];
+
+const TestimonialLogos = () => {
+  return (
+    <section id="testimonials-logos" className="w-full bg-[#FDF8F3]">
+      <div className="mx-auto max-w-7xl border-x border-border">
+        {/* Descriptive Header for the Logos */}
+        <div className="flex flex-col items-center justify-center border-b border-border py-12 px-4 text-center">
+          <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-[#71717A] mb-2">
+            Testimonials
+          </h2>
+          <p className="text-sm text-[#71717A]">
+            Real experiences from users who automated work with AI.
+          </p>
+        </div>
+
+        {/* Logo Grid Section */}
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 border-b border-border">
+          {logos.map((logo, index) => (
+            <div
+              key={logo.name}
+              className={`flex flex-col items-center justify-center py-10 px-4 transition-all duration-300 hover:bg-[#FFF1E6]/50 group cursor-default
+                ${index < logos.length - 1 ? 'border-r border-border' : ''} 
+                ${index >= 3 && index < 6 ? 'max-sm:border-t' : ''} 
+                ${index >= 2 && index < 6 ? 'max-lg:border-t lg:border-t-0' : ''}
+                /* Handling responsive borders specifically to match grid */
+                ${index % 2 !== 0 ? 'max-sm:border-r-0' : 'max-sm:border-r'} 
+                ${(index + 1) % 3 === 0 ? 'max-lg:border-r-0' : 'max-lg:border-r'}
+                ${index === 5 ? 'lg:border-r-0' : ''}
+              `}
+            >
+              <div className="relative h-12 w-full max-w-[140px] grayscale opacity-50 transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 flex items-center justify-center">
+                <Image
+                  src={logo.src}
+                  alt={`${logo.name} logo`}
+                  fill
+                  style={{ objectFit: 'contain' }}
+                  sizes="(max-width: 768px) 100px, 140px"
+                />
+              </div>
+              <span className="mt-4 text-[13px] font-medium text-[#71717A] group-hover:text-foreground transition-colors">
+                {logo.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TestimonialLogos;

package/landing-pages/open-engineer-template/src/components/sections/use-cases.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { ArrowUpRight, TrendingUp, Users, Crown } from "lucide-react";
+
+interface UseCase {
+  id: string;
+  title: string;
+  description: string;
+  longDescription: string;
+  testimonial: string;
+  icon: React.ReactNode;
+}
+
+const useCases: UseCase[] = [
+  {
+    id: "sales",
+    title: "Sales leader",
+    description: "Sales Leaders use ai agent to automate and optimise sales workflows",
+    longDescription: "This helps sales teams reduce tasks like lead qualification and follow-ups. With automated workflows, sales teams can focus on closing deals faster, prioritizing high-value prospects, and increasing conversion rates consistently.",
+    testimonial: '"Our sales cycle has been cut down by 30%, thanks to the efficiency and precision provided by AI..."',
+    icon: <TrendingUp className="size-4" />,
+  },
+  {
+    id: "marketing",
+    title: "Marketing leader",
+    description: "Marketing leaders leverage AI to streamline content and campaign management",
+    longDescription: "Automate social media scheduling, email campaign triggers, and data analysis across platforms. Open Engineer allows marketing teams to maintain brand consistency while scaling their output without adding extra overhead to the creative process.",
+    testimonial: '"Generating reports and managing multi-channel campaigns has never been this seamless. Truly a game changer."',
+    icon: <Users className="size-4" />,
+  },
+  {
+    id: "founders",
+    title: "Founders",
+    description: "Founders use ai to scale operations and make faster, smarter decisions",
+    longDescription: "AI helps founders automate routine work, gain clear insights from data, and run leaner operations efficiently. This allows them to focus on strategic growth, innovation, faster execution, and building long-term value.",
+    testimonial: '"Scaling our startup was only possible because we automated our back-office operations from day one with Open Engineer."',
+    icon: <Crown className="size-4" />,
+  },
+];
+
+export default function UseCasesSection() {
+  const [activeTab, setActiveTab] = useState<string>("sales");
+
+  const activeUseCase = useCases.find((u) => u.id === activeTab) || useCases[0];
+
+  return (
+    <section id="use-cases" className="relative flex flex-col bg-background">
+      {/* Structural Header Padding */}
+      <div className="border-b px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl border-x px-4 py-12 text-center sm:px-6 lg:px-8">
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-xs font-semibold tracking-widest text-muted-foreground uppercase">
+              Use Cases
+            </span>
+            <p className="text-sm text-muted-foreground">
+              Practical ways our AI agent automates your daily tasks.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="border-b px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-7xl border-x">
+          <div className="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]">
+            {/* Left Content Column */}
+            <div className="lg:col-span-7 flex flex-col justify-between p-8 sm:p-12 lg:p-16">
+              <div className="space-y-8">
+                <h2 className="text-3xl font-semibold leading-tight text-foreground sm:text-4xl lg:text-5xl max-w-xl">
+                  See how we drives <span className="text-muted-foreground">success</span> for{" "}
+                  <span className="text-foreground">every team.</span>
+                </h2>
+
+                <div className="space-y-4 transition-all duration-500 ease-in-out">
+                  <h3 className="text-xl font-semibold text-foreground sm:text-2xl capitalize">
+                    {activeUseCase.description}
+                  </h3>
+                  <p className="max-w-xl text-base leading-relaxed text-muted-foreground">
+                    {activeUseCase.longDescription}
+                  </p>
+                  <a
+                    href="#"
+                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline group"
+                  >
+                    Learn more
+                    <ArrowUpRight className="size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                  </a>
+                </div>
+              </div>
+
+              {/* Tabs Navigation (Positioned at bottom of left content) */}
+              <div className="mt-12 flex flex-wrap gap-px overflow-hidden rounded-lg border border-border bg-border shadow-sm">
+                {useCases.map((useCase) => (
+                  <button
+                    key={useCase.id}
+                    onClick={() => setActiveTab(useCase.id)}
+                    className={`flex flex-1 items-center justify-center gap-2 px-4 py-4 text-sm font-medium transition-all sm:px-6 ${
+                      activeTab === useCase.id
+                        ? "bg-muted text-primary"
+                        : "bg-card text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                    }`}
+                  >
+                    <span className={activeTab === useCase.id ? "text-primary" : "text-primary/60"}>
+                      {useCase.icon}
+                    </span>
+                    {useCase.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+              {/* Right Testimonial Column */}
+              <div className="relative lg:col-span-5 bg-muted/30 overflow-hidden flex items-center justify-center">
+                <div className="relative h-full w-full min-h-[400px] flex items-end p-8">
+                  {/* Floating Testimonial Card */}
+                  <div className="w-full">
+                    <div className="glass-card rounded-xl border border-white/20 p-6 shadow-2xl backdrop-blur-md">
+                      <p className="text-sm font-medium italic text-foreground leading-relaxed">
+                        {activeUseCase.testimonial}
+                      </p>
+                      <div className="mt-4 flex items-center gap-2">
+                        <div className="size-1 bg-primary rounded-full"></div>
+                        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                          Verified Result
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Decorative Corner Grid */}
+                <div className="dot-grid absolute inset-0 pointer-events-none opacity-20"></div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}