[V0_FILE]markdown:file="README.md" isMerged="true" # Vagrah AI Agency website *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/quantumfluxtech01-4244s-projects/v0-vagrah-ai-agency-website) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/tokEOzwEX1h) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/quantumfluxtech01-4244s-projects/v0-vagrah-ai-agency-website](https://vercel.com/quantumfluxtech01-4244s-projects/v0-vagrah-ai-agency-website)** ## Build your app Continue building your app on: **[https://v0.app/chat/tokEOzwEX1h](https://v0.app/chat/tokEOzwEX1h)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { MissionStatement } from "@/components/home/mission-statement" import { Users, Target, Lightbulb, Award } from "lucide-react" const values = [ { icon: Lightbulb, title: "Innovation First", description: "We push boundaries and embrace emerging technologies to deliver solutions that define the future.", }, { icon: Target, title: "Results Driven", description: "Every project is measured by its impact. We're obsessed with delivering tangible business outcomes.", }, { icon: Users, title: "Client Partnership", description: "We don't just build for you—we build with you. Collaboration is at the heart of everything we do.", }, { icon: Award, title: "Excellence Standard", description: "Mediocrity isn't in our vocabulary. We deliver premium quality in every line of code and pixel.", }, ] const team = [ { name: "Alexander Wright", role: "Founder & CEO", image: "/professional-male-ceo-portrait-dark-background.jpg", }, { name: "Sophia Chen", role: "Head of AI Research", image: "/professional-female-ai-researcher-portrait-dark-ba.jpg", }, { name: "Marcus Johnson", role: "Lead Engineer", image: "/professional-male-engineer-portrait-dark-backgroun.jpg", }, { name: "Elena Rodriguez", role: "Design Director", image: "/professional-female-designer-portrait-dark-backgro.jpg", }, ] export default function AboutPage() { const pageRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-fade-in-up") } }) }, { threshold: 0.1 }, ) const elements = pageRef.current?.querySelectorAll(".animate-on-scroll") elements?.forEach((el) => observer.observe(el)) return () => observer.disconnect() }, []) return (

{/* Hero */}

About Us

Pioneering the Future of AI-Powered Solutions

Founded in 2020, Vagrah AI Agency has been at the forefront of merging artificial intelligence with exceptional digital experiences.

{/* Story */}

Our Story

Built by Engineers, Driven by Vision

Vagrah AI began as a small team of engineers frustrated by the gap between AI potential and real-world implementation. We saw businesses struggling to harness the power of artificial intelligence, held back by complexity and lack of expertise.

Today, we've grown into a full-service agency that bridges that gap. Our mission is simple: make cutting-edge AI accessible and impactful for businesses of all sizes.

With over 50 successful projects delivered and partnerships spanning Fortune 500 companies to ambitious startups, we've proven that intelligent solutions don't have to be complicated.

{/* Values */}

Our Values

What Drives Us

{values.map((value, index) => (

{value.title}

{value.description}

))}

{/* Team */}

The Team

Meet the Minds Behind Vagrah

{team.map((member, index) => (

{member.name}

{member.role}

))}

{/* Stats */}

{[ { value: "50+", label: "Projects Delivered" }, { value: "98%", label: "Client Satisfaction" }, { value: "15+", label: "Team Members" }, { value: "4", label: "Years of Excellence" }, ].map((stat, index) => (

{stat.value}

{stat.label}

))}

{/* Mission Statement */}

) } [V0_FILE]typescriptreact:file="app/actions/send-email.tsx" isMerged="true" "use server" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) export async function sendContactEmail(formData: FormData) { const name = formData.get("name") as string const email = formData.get("email") as string const company = formData.get("company") as string const service = formData.get("service") as string const message = formData.get("message") as string // Validate required fields if (!name || !email || !message) { return { success: false, error: "Please fill in all required fields." } } try { // Once a domain is verified, you can change this to process.env.CONTACT_EMAIL const recipientEmail = process.env.CONTACT_EMAIL || "direxiv716@roastic.com" const { data, error } = await resend.emails.send({ from: "Vagrah AI Contact Form ", to: recipientEmail, // Using account owner's email for testing mode replyTo: email, subject: `New Contact Form Submission from ${name}`, html: `

Name

${name}

${email}

${ company ? `

Company

${company}

` : "" } ${ service ? `

Service Interested In

${service}

` : "" }

Message

${message}

`, }) if (error) { console.error("[v0] Resend API error:", error) if (error.message?.includes("verification") || error.message?.includes("domain")) { return { success: false, error: "Email configuration needed. Please contact support.", } } return { success: false, error: "Failed to send email. Please try again." } } return { success: true } } catch (error) { console.error("[v0] Error sending email:", error) return { success: false, error: "An unexpected error occurred. Please try again." } } } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Mail, MapPin, Phone, Send, CheckCircle, AlertCircle } from "lucide-react" import { sendContactEmail } from "@/app/actions/send-email" export default function ContactPage() { const [isSubmitted, setIsSubmitted] = useState(false) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const pageRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-fade-in-up") } }) }, { threshold: 0.1 }, ) const elements = pageRef.current?.querySelectorAll(".animate-on-scroll") elements?.forEach((el) => observer.observe(el)) return () => observer.disconnect() }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) const formData = new FormData(e.currentTarget) const result = await sendContactEmail(formData) setIsLoading(false) if (result.success) { setIsSubmitted(true) ;(e.target as HTMLFormElement).reset() } else { setError(result.error || "Failed to send message. Please try again.") } } return (

{/* Hero */}

Let's Build Something Extraordinary

Ready to transform your business with AI? We'd love to hear about your project.

{/* Contact Form & Info */}

{/* Contact Info */}

Get in Touch

Whether you have a project in mind or just want to explore possibilities, our team is here to help.

hello@vagrah.ai

Phone

+1 (234) 567-890

Location

San Francisco, CA
United States

{/* Contact Form */}

{isSubmitted ? (

Message Sent!

Thank you for reaching out. We'll get back to you within 24 hours.

) : (

{error && (

{error}

)}

Name *

Email *

Company

Service Interested In

Message *

</div>

<button
                      type="submit"
                      disabled={isLoading}
                      className="w-full neumorphic-button px-8 py-4 rounded-xl text-foreground hover:text-primary transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {isLoading ? (
                        <>
                          <span className="inline-block w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                          Sending...
                        </>
                      ) : (
                        <>
                          Send Message <Send className="w-4 h-4" />
                        </>
                      )}
                    </button>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Dark luxury AI agency theme with cyan accent */
:root {
  --background: oklch(0.1 0.01 260);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.15 0.01 260);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.12 0.01 260);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.75 0.15 195);
  --primary-foreground: oklch(0.1 0.01 260);
  --secondary: oklch(0.2 0.01 260);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.25 0.01 260);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.75 0.15 195);
  --accent-foreground: oklch(0.1 0.01 260);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.25 0.02 260);
  --input: oklch(0.2 0.01 260);
  --ring: oklch(0.75 0.15 195);
  --chart-1: oklch(0.75 0.15 195);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.75rem;
  --sidebar: oklch(0.12 0.01 260);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.75 0.15 195);
  --sidebar-primary-foreground: oklch(0.1 0.01 260);
  --sidebar-accent: oklch(0.2 0.01 260);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0.02 260);
  --sidebar-ring: oklch(0.75 0.15 195);
}

.dark {
  --background: oklch(0.1 0.01 260);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.15 0.01 260);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.12 0.01 260);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.75 0.15 195);
  --primary-foreground: oklch(0.1 0.01 260);
  --secondary: oklch(0.2 0.01 260);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.25 0.01 260);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.75 0.15 195);
  --accent-foreground: oklch(0.1 0.01 260);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.25 0.02 260);
  --input: oklch(0.2 0.01 260);
  --ring: oklch(0.75 0.15 195);
  --chart-1: oklch(0.75 0.15 195);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.12 0.01 260);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.75 0.15 195);
  --sidebar-primary-foreground: oklch(0.1 0.01 260);
  --sidebar-accent: oklch(0.2 0.01 260);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.25 0.02 260);
  --sidebar-ring: oklch(0.75 0.15 195);
}

@theme inline {
  /* Updated to Outfit font family with multiple weights for elegant, light typography */
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    /* Applied lighter font weight (300) by default for elegant, airy feel matching BT Wifting Extra Light */
    @apply bg-background text-foreground font-light;
  }
}

/* Custom animations and glassmorphism utilities */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.5);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-scale-in {
  animation: scale-in 0.6s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.8s ease-out forwards;
}

.animate-slide-in-left {
  animation: slide-in-left 0.8s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.neumorphic-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.neumorphic-button:hover {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4), 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.05);
}

/* Removed duplicate keyframe definitions */

/* Smooth horizontal scroll behavior */
.horizontal-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.3) rgba(255, 255, 255, 0.05);
}

.horizontal-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.5);
}

.scroll-card {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Enhanced stacked card effect with smooth transitions */
.stacked-card {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.stacked-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.2);
  z-index: 10;
}

/* Updated ScrollStack styles for proper card visibility and solid backgrounds */
.scroll-stack {
  position: relative;
  background: var(--background);
  /* Added padding to prevent card clipping */
  padding-bottom: 100vh;
}

.scroll-stack-item {
  will-change: transform, opacity, visibility;
}

.scroll-stack-item > div > div {
  /* Ensure solid background, no transparency */
  background: var(--card) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .scroll-stack-item {
    position: relative !important;
    top: 0 !important;
  }
}

/* Removed service gradient variations - using consistent color palette */
.service-gradient-1,
.service-gradient-2,
.service-gradient-3,
.service-gradient-4 {
  background: rgba(255, 255, 255, 0.02);
}

/* Mockup window */
.mockup-window {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.mockup-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-dot-red {
  background: #ff5f57;
}
.mockup-dot-yellow {
  background: #febc2e;
}
.mockup-dot-green {
  background: #28c840;
}

/* Added scrollbar-hide utility for clean horizontal scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Outfit } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ScrollToTop } from "@/components/scroll-to-top"
import "./globals.css"

const _outfit = Outfit({
  subsets: ["latin"],
  weight: ["200", "300", "400", "500", "600", "700"],
  variable: "--font-outfit",
})

export const metadata: Metadata = {
  title: "Zerovo Labs | Premium AI-Powered Digital Solutions",
  description:
    "Zerovo Labs specializes in AI-powered web development, AI automation, custom AI solutions, and SaaS development. Transform your business with cutting-edge technology.",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/favicon.svg",
        type: "image/svg+xml",
      },
    ],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`font-sans antialiased`}>
        <ScrollToTop />
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { HeroSection } from "@/components/home/hero-section"
import { ServicesOverview } from "@/components/home/services-overview"
import { HowWeWork } from "@/components/home/how-we-work"
import { Testimonials } from "@/components/home/testimonials"
import { CaseStudiesPreview } from "@/components/home/case-studies-preview"
import { CTASection } from "@/components/home/cta-section"
import { FAQSection } from "@/components/home/faq-section"

export default function HomePage() {
  return (
    <main className="min-h-screen">
      <Navigation />
      <HeroSection />
      <ServicesOverview />
      <HowWeWork />
      <Testimonials />
      <CaseStudiesPreview />
      <CTASection />
      <FAQSection />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/projects/page.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { ArrowUpRight, X, ExternalLink } from "lucide-react"
import { cn } from "@/lib/utils"

const projects = [
  {
    id: 1,
    title: "Vagrah Builders Premiere",
    category: "Web Development",
    client: "Vagrah Builders",
    year: "2024",
    image: "/luxury-modern-villa-with-pool-at-night-premium-rea.jpg",
    description:
      "A premium real estate website for Vagrah Builders specializing in luxury villas, apartments, and commercial complexes. The site features stunning visuals, smooth animations, and an elegant dark theme that perfectly showcases their high-end properties.",
    results: [
      "Premium brand positioning achieved",
      "40% increase in property inquiries",
      "Featured in Architectural Digest",
    ],
    link: "https://vagrah-builders-premiere.vercel.app/",
  },
  {
    id: 2,
    title: "Autonomous Workflow Automation",
    category: "AI Automation",
    client: "GlobalLogistics",
    year: "2024",
    image: "/workflow-automation-enterprise-dark-futuristic-das.jpg",
    description:
      "Enterprise-grade automation system that transformed manual processes into intelligent, self-optimizing workflows. The system handles document processing, data entry, and cross-department communications autonomously.",
    results: ["2,000+ hours saved monthly", "99.7% accuracy rate", "85% reduction in processing time"],
  },
  {
    id: 3,
    title: "Intelligent Financial Assistant",
    category: "Custom AI",
    client: "FinServe",
    year: "2023",
    image: "/ai-chatbot-interface-dark-futuristic-financial-tec.jpg",
    description:
      "An intelligent support chatbot that understands context, sentiment, and intent. Built with advanced NLP, it handles complex financial queries while seamlessly escalating to human agents when needed.",
    results: ["80% of tickets resolved by AI", "94% customer satisfaction", "24/7 instant response capability"],
  },
  {
    id: 4,
    title: "Enterprise Analytics Platform",
    category: "SaaS Development",
    client: "DataMetrics",
    year: "2023",
    image: "/saas-analytics-dashboard-dark-theme-data-visualiza.jpg",
    description:
      "A comprehensive B2B analytics platform that transforms raw data into actionable insights. Features real-time dashboards, predictive analytics, and customizable reporting for enterprise clients.",
    results: ["500+ enterprise clients onboarded", "99.9% uptime achieved", "$2M ARR in first year"],
  },
]

export default function ProjectsPage() {
  const [selectedProject, setSelectedProject] = useState<(typeof projects)[0] | null>(null)
  const pageRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-fade-in-up")
          }
        })
      },
      { threshold: 0.1 },
    )

const elements = pageRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

useEffect(() => {
    if (selectedProject) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [selectedProject])

return (
    <main ref={pageRef} className="min-h-screen">
      <Navigation />

{/* Hero */}
      <section className="pt-32 pb-20">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            Our Work
          </span>
          <h1
            className="animate-on-scroll opacity-0 text-4xl md:text-6xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            Case Studies & <span className="text-primary">Success Stories</span>
          </h1>
          <p
            className="animate-on-scroll opacity-0 mt-6 text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed"
            style={{ animationDelay: "0.2s" }}
          >
            Explore how we've helped businesses transform with AI-powered solutions.
          </p>
        </div>
      </section>

{/* Projects Grid */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {projects.map((project, index) => (
              <button
                key={project.id}
                onClick={() => setSelectedProject(project)}
                className="animate-on-scroll opacity-0 group relative overflow-hidden rounded-2xl text-left"
                style={{ animationDelay: `${0.1 * (index + 1)}s` }}
              >
                <img
                  src={project.image || "/placeholder.svg"}
                  alt={project.title}
                  className="w-full h-80 md:h-96 object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-8">
                  <div className="flex items-center gap-3 mb-3">
                    <span className="text-xs tracking-widest text-primary uppercase">{project.category}</span>
                    <span className="text-xs text-muted-foreground">• {project.year}</span>
                  </div>
                  <h3 className="text-2xl font-light tracking-tight group-hover:text-primary transition-colors">
                    {project.title}
                  </h3>
                  <p className="text-sm text-muted-foreground mt-2">{project.client}</p>
                </div>
                <div className="absolute top-6 right-6 w-10 h-10 rounded-full glass flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <ArrowUpRight className="w-5 h-5 text-primary" />
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

{/* Project Modal */}
      <div
        className={cn(
          "fixed inset-0 z-50 transition-opacity duration-300",
          selectedProject ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
        )}
      >
        <div className="absolute inset-0 bg-background/90 backdrop-blur-xl" onClick={() => setSelectedProject(null)} />
        <div className="absolute inset-0 overflow-y-auto">
          <div className="min-h-full flex items-center justify-center p-6">
            {selectedProject && (
              <div className="relative w-full max-w-4xl glass-card rounded-2xl overflow-hidden">
                <button
                  onClick={() => setSelectedProject(null)}
                  className="absolute top-6 right-6 z-10 w-10 h-10 rounded-full glass flex items-center justify-center text-foreground hover:text-primary transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>

<div className="p-8 md:p-12">
                  <div className="flex items-center gap-3 mb-4">
                    <span className="text-xs tracking-widest text-primary uppercase">{selectedProject.category}</span>
                    <span className="text-xs text-muted-foreground">• {selectedProject.year}</span>
                  </div>

<h2 className="text-3xl md:text-4xl font-light tracking-tight mb-2">{selectedProject.title}</h2>
                  <p className="text-muted-foreground mb-8">Client: {selectedProject.client}</p>

<p className="text-foreground/80 leading-relaxed mb-10">{selectedProject.description}</p>

<div>
                    <h3 className="text-lg font-light tracking-tight mb-4">Key Results</h3>
                    <ul className="space-y-3">
                      {selectedProject.results.map((result) => (
                        <li key={result} className="flex items-center gap-3">
                          <div className="w-2 h-2 rounded-full bg-primary" />
                          <span className="text-muted-foreground">{result}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

{selectedProject.link && (
                    <a
                      href={selectedProject.link}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors"
                    >
                      Visit Project
                      <ExternalLink className="w-4 h-4" />
                    </a>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

<Footer />
    </main>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/auto-scroll-carousel.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import useEmblaCarousel from "embla-carousel-react"
import AutoScroll from "embla-carousel-auto-scroll"
import { cn } from "@/lib/utils"

interface CarouselItem {
  id: string
  icon: React.ComponentType<{ className?: string }>
  title: string
  description: string
}

interface AutoScrollCarouselProps {
  items: CarouselItem[]
  className?: string
}

export function AutoScrollCarousel({ items, className }: AutoScrollCarouselProps) {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, dragFree: true }, [
    AutoScroll({ playOnInit: true, speed: 1 }),
  ])

const [isHovered, setIsHovered] = useState(false)

useEffect(() => {
    if (!emblaApi) return

if (isHovered) {
      emblaApi.plugins().autoScroll?.stop()
    } else {
      emblaApi.plugins().autoScroll?.play()
    }
  }, [emblaApi, isHovered])

return (
    <div
      className={cn("relative", className)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="overflow-hidden" ref={emblaRef}>
        <div className="flex ml-0">
          {items.map((item) => {
            const Icon = item.icon
            return (
              <div key={item.id} className="flex-shrink-0 basis-[280px] pl-4 first:pl-0">
                <div className="p-5 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all group h-full">
                  <div className="flex items-start gap-4">
                    <div className="flex-shrink-0">
                      <div className="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center group-hover:bg-primary/30 transition-colors">
                        <Icon className="w-6 h-6 text-primary" />
                      </div>
                    </div>
                    <div>
                      <h4 className="text-base font-medium mb-2 text-white">{item.title}</h4>
                      <p className="text-sm text-white/70">{item.description}</p>
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
      {/* Gradient fades on edges */}
      <div className="absolute inset-y-0 left-0 w-12 bg-gradient-to-r from-black/50 to-transparent pointer-events-none" />
      <div className="absolute inset-y-0 right-0 w-12 bg-gradient-to-l from-black/50 to-transparent pointer-events-none" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { Twitter, Linkedin, Github, Instagram } from "lucide-react"
import { Logo } from "./logo"

const footerLinks = {
  company: [
    { href: "/about", label: "About" },
    { href: "/services", label: "Services" },
    { href: "/projects", label: "Projects" },
    { href: "/contact", label: "Contact" },
  ],
  services: [
    { href: "/services", label: "AI Web Development", sectionId: "web-development" },
    { href: "/services", label: "AI Automation", sectionId: "automation" },
    { href: "/services", label: "Custom AI Solutions", sectionId: "custom-solutions" },
    { href: "/services", label: "SaaS Development", sectionId: "saas" },
  ],
  social: [
    { href: "#", icon: Twitter, label: "Twitter" },
    { href: "#", icon: Linkedin, label: "LinkedIn" },
    { href: "#", icon: Github, label: "GitHub" },
    { href: "#", icon: Instagram, label: "Instagram" },
  ],
}

export function Footer() {
  const router = useRouter()

const handleLinkClick = () => {
    window.scrollTo({ top: 0, left: 0, behavior: "instant" })
  }

const handleServiceClick = (href: string, sectionId: string) => {
    router.push(href)
    setTimeout(() => {
      const element = document.getElementById(sectionId)
      if (element) {
        const offsetTop = element.offsetTop - 100
        window.scrollTo({ top: offsetTop, behavior: "smooth" })
      }
    }, 100)
  }

return (
    <footer className="relative border-t border-border overflow-hidden bg-card/20">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-primary/5" />

<div className="relative z-10 max-w-7xl mx-auto px-6 py-16">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
          {/* Brand */}
          <div className="md:col-span-1">
            <Link href="/" onClick={handleLinkClick}>
              <Logo className="w-40 h-10" />
            </Link>
            <p className="mt-4 text-sm text-muted-foreground leading-relaxed">
              Transforming businesses with cutting-edge AI-powered digital solutions.
            </p>
          </div>

{/* Company Links */}
          <div>
            <h4 className="text-sm font-medium text-foreground mb-4">Company</h4>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    onClick={handleLinkClick}
                    className="text-sm text-muted-foreground hover:text-primary transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Services Links */}
          <div>
            <h4 className="text-sm font-medium text-foreground mb-4">Services</h4>
            <ul className="space-y-3">
              {footerLinks.services.map((link) => (
                <li key={link.sectionId}>
                  <button
                    onClick={() => handleServiceClick(link.href, link.sectionId)}
                    className="text-sm text-muted-foreground hover:text-primary transition-colors text-left"
                  >
                    {link.label}
                  </button>
                </li>
              ))}
            </ul>
          </div>

{/* Social & Newsletter */}
          <div>
            <h4 className="text-sm font-medium text-foreground mb-4">Connect</h4>
            <div className="flex gap-4">
              {footerLinks.social.map((social) => (
                <a
                  key={social.label}
                  href={social.href}
                  className="w-10 h-10 rounded-full glass flex items-center justify-center text-muted-foreground hover:text-primary hover:border-primary/50 transition-all"
                  aria-label={social.label}
                >
                  <social.icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>
        </div>

<div className="mt-12 pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} Zerovo Labs. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">
              Privacy Policy
            </Link>
            <Link href="#" className="text-sm text-muted-foreground hover:text-primary transition-colors">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/home/case-studies-preview.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import Link from "next/link"
import { ArrowUpRight } from "lucide-react"

const caseStudies = [
  {
    title: "AI-Enhanced E-commerce Platform",
    category: "Web Development",
    image: "/ecommerce-ai-shopping-platform-dark-futuristic-int.jpg",
  },
  {
    title: "Autonomous Workflow Automation",
    category: "AI Automation",
    image: "/workflow-automation-enterprise-dark-futuristic-das.jpg",
  },
  {
    title: "Custom AI Chat System",
    category: "Custom AI",
    image: "/ai-chatbot-support-system-dark-futuristic-conversa.jpg",
  },
  {
    title: "SaaS Analytics Dashboard",
    category: "SaaS Development",
    image: "/b2b-analytics-dashboard-dark-futuristic-data-visua.jpg",
  },
]

export function CaseStudiesPreview() {
  const sectionRef = useRef<HTMLDivElement>(null)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={sectionRef} className="py-24 bg-card/30">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-12">
          <div>
            <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
              Our Work
            </span>
            <h2
              className="animate-on-scroll opacity-0 text-3xl md:text-4xl font-light tracking-tight"
              style={{ animationDelay: "0.1s" }}
            >
              Featured Projects
            </h2>
          </div>
          <Link
            href="/projects"
            className="animate-on-scroll opacity-0 text-sm text-primary hover:underline flex items-center gap-1"
            style={{ animationDelay: "0.2s" }}
          >
            View All Projects <ArrowUpRight className="w-4 h-4" />
          </Link>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {caseStudies.map((study, index) => (
            <Link
              key={study.title}
              href="/projects"
              className="animate-on-scroll opacity-0 group relative overflow-hidden rounded-2xl"
              style={{ animationDelay: `${0.1 * (index + 1)}s` }}
            >
              <img
                src={study.image || "/placeholder.svg"}
                alt={study.title}
                className="w-full h-64 md:h-80 object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <span className="text-xs tracking-widest text-primary uppercase">{study.category}</span>
                <h3 className="text-xl font-light tracking-tight mt-2 group-hover:text-primary transition-colors">
                  {study.title}
                </h3>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/faq-section.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"

const faqs = [
  {
    question: "What are your pricing models?",
    answer:
      "We offer flexible pricing based on project scope—fixed-price for defined projects, retainer models for ongoing partnerships, and milestone-based payments for larger initiatives. Contact us for a custom quote.",
  },
  {
    question: "How long does a typical project take?",
    answer:
      "Timelines vary based on complexity. A simple AI integration might take 2-4 weeks, while a full SaaS platform could take 3-6 months. We provide detailed timelines during our discovery phase.",
  },
  {
    question: "Can you integrate AI into our existing systems?",
    answer:
      "Absolutely. We specialize in seamlessly integrating AI capabilities into existing infrastructure, whether it's adding intelligent automation to your CRM or enhancing your e-commerce platform with personalized recommendations.",
  },
  {
    question: "What technologies do you work with?",
    answer:
      "We work with cutting-edge AI/ML frameworks including TensorFlow, PyTorch, and OpenAI. For web development, we use modern stacks like Next.js, React, and Node.js, along with cloud platforms like AWS, GCP, and Vercel.",
  },
  {
    question: "Do you offer ongoing support and maintenance?",
    answer:
      "Yes, we offer comprehensive post-launch support packages including monitoring, updates, performance optimization, and continuous improvement based on user feedback and analytics.",
  },
]

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)
  const sectionRef = useRef<HTMLDivElement>(null)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={sectionRef} className="py-24">
      <div className="max-w-3xl mx-auto px-6">
        <div className="text-center mb-12">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            FAQ
          </span>
          <h2
            className="animate-on-scroll opacity-0 text-3xl md:text-4xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            Frequently Asked Questions
          </h2>
        </div>

<div className="space-y-4">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="animate-on-scroll opacity-0 glass-card rounded-xl overflow-hidden"
              style={{ animationDelay: `${0.1 * (index + 1)}s` }}
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full flex items-center justify-between p-6 text-left"
              >
                <span className="font-light text-foreground">{faq.question}</span>
                <ChevronDown
                  className={cn(
                    "w-5 h-5 text-primary transition-transform flex-shrink-0 ml-4",
                    openIndex === index && "rotate-180",
                  )}
                />
              </button>
              <div
                className={cn(
                  "overflow-hidden transition-all duration-300",
                  openIndex === index ? "max-h-96" : "max-h-0",
                )}
              >
                <p className="px-6 pb-6 text-muted-foreground leading-relaxed">{faq.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/hero-section.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

export function HeroSection() {
  const heroRef = useRef<HTMLDivElement>(null)
  const iframeRef = useRef<HTMLIFrameElement>(null)

const elements = heroRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={heroRef} className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <video
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          className="w-full h-full object-cover"
          style={{ width: "100%", height: "100%", objectFit: "cover" }}
        >
          <source
            src="https://res.cloudinary.com/dhtva9xag/video/upload/13ac717d-b9d4-4c51-a810-ba6deb6296bf_bwamdu.mp4"
            type="video/mp4"
          />
          {/* Fallback iframe if video element fails */}
          <iframe
            ref={iframeRef}
            src="https://player.cloudinary.com/embed/?cloud_name=dhtva9xag&public_id=13ac717d-b9d4-4c51-a810-ba6deb6296bf_bwamdu&profile=cld-default&autoplay=true&muted=true&loop=true&controls=false&playsinline=true"
            className="w-full h-full"
            style={{ width: "100%", height: "100%", border: "none" }}
            allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
            title="Background Video"
          />
        </video>
        <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/60 to-background" />
      </div>

{/* Content */}
      <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
        <div className="animate-on-scroll opacity-0" style={{ animationDelay: "0.1s" }}>
          <span className="inline-block px-4 py-2 rounded-full glass text-xs tracking-widest text-primary uppercase mb-8">
            AI-Powered Innovation
          </span>
        </div>

<h1
          className="animate-on-scroll opacity-0 text-4xl md:text-6xl lg:text-7xl font-light tracking-tight leading-tight text-balance"
          style={{ animationDelay: "0.2s" }}
        >
          Building the Future with <span className="text-primary">Intelligent</span> Solutions
        </h1>

<p
          className="animate-on-scroll opacity-0 mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed text-pretty"
          style={{ animationDelay: "0.3s" }}
        >
          We build intelligent Automation systems, custom solutions and AI-powered web experiences, that transform how your business operates.
        </p>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/how-we-work.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

const steps = [
  {
    number: "01",
    title: "Strategize & Architect",
    description:
      "We dive deep into understanding your vision, goals, and challenges to create a comprehensive roadmap.",
    image: "/strategy-planning-architecture-blueprints-dark-fut.jpg",
  },
  {
    number: "02",
    title: "Build with Intelligence",
    description:
      "Our team crafts your solution using cutting-edge AI technologies and best-in-class development practices.",
    image: "/ai-coding-development-futuristic-dark-neural-netwo.jpg",
  },
  {
    number: "03",
    title: "Deliver & Optimize",
    description: "We launch your project and continuously refine it based on real-world performance and feedback.",
    image: "/rocket-launch-optimization-analytics-dark-futurist.jpg",
  },
]

export function HowWeWork() {
  const sectionRef = useRef<HTMLDivElement>(null)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={sectionRef} className="py-24 bg-card/30">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-16">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            Our Process
          </span>
          <h2
            className="animate-on-scroll opacity-0 text-3xl md:text-4xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            How We Work
          </h2>
        </div>

<div className="space-y-16">
          {steps.map((step, index) => (
            <div
              key={step.number}
              className={`animate-on-scroll opacity-0 flex flex-col ${
                index % 2 === 1 ? "lg:flex-row-reverse" : "lg:flex-row"
              } items-center gap-10`}
              style={{ animationDelay: `${0.1 * (index + 1)}s` }}
            >
              <div className="flex-1">
                <div className="relative overflow-hidden rounded-2xl">
                  <img
                    src={step.image || "/placeholder.svg"}
                    alt={step.title}
                    className="w-full h-64 lg:h-80 object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
                </div>
              </div>
              <div className="flex-1 text-center lg:text-left">
                <span className="text-6xl font-light text-primary/20">{step.number}</span>
                <h3 className="text-2xl font-light tracking-tight mt-2">{step.title}</h3>
                <p className="mt-4 text-muted-foreground leading-relaxed">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/mission-statement.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

export function MissionStatement() {
  const sectionRef = useRef<HTMLDivElement>(null)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={sectionRef} className="py-24">
      <div className="max-w-4xl mx-auto px-6 text-center">
        <div className="animate-on-scroll opacity-0 glass-card rounded-2xl p-10 md:p-16">
          <span className="inline-block text-xs tracking-widest text-primary uppercase mb-6">Our Mission</span>
          <h2 className="text-2xl md:text-4xl font-light tracking-tight leading-relaxed text-balance">
            We believe in building technology that doesn't just solve today's problems—
            <span className="text-primary"> it anticipates tomorrow's opportunities</span>.
          </h2>
          <p className="mt-8 text-muted-foreground leading-relaxed max-w-2xl mx-auto">
            At Vagrah AI, innovation meets reliability. We're committed to delivering future-ready solutions that
            empower businesses to thrive in an ever-evolving digital landscape.
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/services-overview.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { Globe, Cpu, Sparkles, LayoutDashboard } from "lucide-react"
import Link from "next/link"

const services = [
  {
    icon: Globe,
    title: "AI-Powered Web Development",
    description: "Intelligent websites and applications that learn, adapt, and deliver personalized experiences.",
  },
  {
    icon: Cpu,
    title: "AI Automation Systems",
    description: "Streamline operations with autonomous workflows that reduce costs and boost efficiency.",
  },
  {
    icon: Sparkles,
    title: "Custom AI Solutions",
    description: "Bespoke artificial intelligence tailored to your unique business challenges and goals.",
  },
  {
    icon: LayoutDashboard,
    title: "SaaS Product Development",
    description: "End-to-end development of scalable software-as-a-service platforms built for growth.",
  },
]

export function ServicesOverview() {
  const sectionRef = useRef<HTMLDivElement>(null)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <section ref={sectionRef} className="py-24">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-16">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            What We Do
          </span>
          <h2
            className="animate-on-scroll opacity-0 text-3xl md:text-4xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            Our Services
          </h2>
          <p
            className="animate-on-scroll opacity-0 mt-4 text-muted-foreground max-w-xl mx-auto"
            style={{ animationDelay: "0.2s" }}
          >
            Premium AI-powered solutions designed to elevate your business.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-6 gap-6 auto-rows-[280px]">
          {/* Large Feature Card - AI Web Development */}
          <Link
            href="/services"
            className="animate-on-scroll opacity-0 md:col-span-4 md:row-span-2 glass-card rounded-3xl p-8 group hover:border-primary/30 transition-all duration-300 relative overflow-hidden"
            style={{ animationDelay: "0.1s" }}
          >
            <div
              className="absolute inset-0 opacity-10 bg-gradient-to-br from-primary/20 to-transparent"
              style={{
                backgroundImage: "url(/ai-coding-development-futuristic-dark-neural-netwo.jpg)",
                backgroundSize: "cover",
                backgroundPosition: "center",
              }}
            />
            <div className="relative z-10 h-full flex flex-col justify-between">
              <div>
                <div className="w-14 h-14 rounded-xl glass flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
                  <Globe className="w-7 h-7 text-primary" />
                </div>
                <h3 className="text-2xl md:text-3xl font-light tracking-tight mb-3 group-hover:text-primary transition-colors">
                  {services[0].title}
                </h3>
                <p className="text-muted-foreground leading-relaxed">{services[0].description}</p>
              </div>
              <div className="mt-6 inline-flex items-center gap-2 text-primary text-sm font-medium">Explore More →</div>
            </div>
          </Link>

{/* Medium Card - AI Automation */}
          <Link
            href="/services"
            className="animate-on-scroll opacity-0 md:col-span-2 md:row-span-1 glass-card rounded-3xl p-8 group hover:border-primary/30 transition-all duration-300"
            style={{ animationDelay: "0.2s" }}
          >
            <div className="w-12 h-12 rounded-xl glass flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
              <Cpu className="w-6 h-6 text-primary" />
            </div>
            <h3 className="text-xl font-light tracking-tight mb-3 group-hover:text-primary transition-colors">
              {services[1].title}
            </h3>
            <p className="text-muted-foreground text-sm leading-relaxed">{services[1].description}</p>
          </Link>

{/* Medium Card - Custom AI */}
          <Link
            href="/services"
            className="animate-on-scroll opacity-0 md:col-span-2 md:row-span-1 glass-card rounded-3xl p-8 group hover:border-primary/30 transition-all duration-300"
            style={{ animationDelay: "0.3s" }}
          >
            <div className="w-12 h-12 rounded-xl glass flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
              <Sparkles className="w-6 h-6 text-primary" />
            </div>
            <h3 className="text-xl font-light tracking-tight mb-3 group-hover:text-primary transition-colors">
              {services[2].title}
            </h3>
            <p className="text-muted-foreground text-sm leading-relaxed">{services[2].description}</p>
          </Link>

{/* Large Horizontal Card - SaaS Development */}
          <Link
            href="/services"
            className="animate-on-scroll opacity-0 md:col-span-4 md:row-span-1 glass-card rounded-3xl p-8 group hover:border-primary/30 transition-all duration-300 relative overflow-hidden"
            style={{ animationDelay: "0.4s" }}
          >
            <div
              className="absolute inset-0 opacity-10 bg-gradient-to-br from-primary/20 to-transparent"
              style={{
                backgroundImage: "url(/saas-analytics-dashboard-dark-theme-data-visualiza.jpg)",
                backgroundSize: "cover",
                backgroundPosition: "center",
              }}
            />
            <div className="relative z-10 flex items-center gap-8">
              <div className="w-14 h-14 rounded-xl glass flex items-center justify-center group-hover:bg-primary/10 transition-colors flex-shrink-0">
                <LayoutDashboard className="w-7 h-7 text-primary" />
              </div>
              <div className="flex-1">
                <h3 className="text-xl md:text-2xl font-light tracking-tight mb-2 group-hover:text-primary transition-colors">
                  {services[3].title}
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed">{services[3].description}</p>
              </div>
            </div>
          </Link>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/home/testimonials.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { ChevronLeft, ChevronRight, Quote } from "lucide-react"

const testimonials = [
  {
    quote:
      "Vagrah AI transformed our entire e-commerce operation. Their AI-powered recommendations increased our conversion rate by 340%.",
    author: "Sarah Chen",
    role: "CEO, TechRetail Inc.",
  },
  {
    quote:
      "The automation systems they built saved us over 2,000 hours per month. It's like having an army of tireless workers.",
    author: "Michael Rodriguez",
    role: "COO, GlobalLogistics",
  },
  {
    quote:
      "Their custom AI chatbot handles 80% of our support tickets now. Customer satisfaction has never been higher.",
    author: "Emily Watson",
    role: "Head of Support, FinServe",
  },
  {
    quote:
      "The SaaS dashboard they developed is the backbone of our B2B analytics platform. Absolutely world-class work.",
    author: "David Park",
    role: "Founder, DataMetrics",
  },
]

export function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const sectionRef = useRef<HTMLDivElement>(null)

const next = () => setCurrentIndex((i) => (i + 1) % testimonials.length)
  const prev = () => setCurrentIndex((i) => (i - 1 + testimonials.length) % testimonials.length)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

useEffect(() => {
    const interval = setInterval(next, 5000)
    return () => clearInterval(interval)
  }, [])

return (
    <section ref={sectionRef} className="py-24">
      <div className="max-w-4xl mx-auto px-6">
        <div className="text-center mb-12">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            Testimonials
          </span>
          <h2
            className="animate-on-scroll opacity-0 text-3xl md:text-4xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            Client Success Stories
          </h2>
        </div>

<div className="relative min-h-[200px] flex items-center justify-center">
            {testimonials.map((testimonial, index) => (
              <div
                key={index}
                className={`absolute inset-0 flex flex-col items-center justify-center text-center transition-all duration-500 ${
                  index === currentIndex ? "opacity-100 translate-x-0" : "opacity-0 translate-x-10"
                }`}
              >
                <p className="text-xl md:text-2xl font-light leading-relaxed text-foreground/90 italic">
                  "{testimonial.quote}"
                </p>
                <div className="mt-8">
                  <p className="font-medium text-foreground">{testimonial.author}</p>
                  <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                </div>
              </div>
            ))}
          </div>

<div className="flex items-center justify-center gap-4 mt-8">
            <button
              onClick={prev}
              className="w-10 h-10 rounded-full glass flex items-center justify-center text-muted-foreground hover:text-primary hover:border-primary/50 transition-all"
              aria-label="Previous testimonial"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
            <div className="flex gap-2">
              {testimonials.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentIndex(index)}
                  className={`w-2 h-2 rounded-full transition-all ${
                    index === currentIndex ? "bg-primary w-6" : "bg-muted-foreground/30"
                  }`}
                  aria-label={`Go to testimonial ${index + 1}`}
                />
              ))}
            </div>
            <button
              onClick={next}
              className="w-10 h-10 rounded-full glass flex items-center justify-center text-muted-foreground hover:text-primary hover:border-primary/50 transition-all"
              aria-label="Next testimonial"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-stack-new.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect, useRef, useState } from "react"

export interface ScrollStackCard {
  title: string
  subtitle?: string
  badge?: string
  backgroundImage?: string
  content?: React.ReactNode
}

interface ScrollStackProps {
  cards: ScrollStackCard[]
  backgroundColor?: string
  cardHeight?: string
  sectionHeightMultiplier?: number
  className?: string
}

const defaultBackgrounds = [
  "https://images.pexels.com/photos/6985136/pexels-photo-6985136.jpeg",
  "https://images.pexels.com/photos/6985128/pexels-photo-6985128.jpeg",
  "https://images.pexels.com/photos/2847648/pexels-photo-2847648.jpeg",
]

const ScrollStack: React.FC<ScrollStackProps> = ({
  cards,
  backgroundColor = "bg-background",
  cardHeight = "60vh",
  sectionHeightMultiplier = 3,
  className = "",
}) => {
  const sectionRef = useRef<HTMLDivElement>(null)
  const [activeCardIndex, setActiveCardIndex] = useState(0)

const cardCount = Math.min(cards.length, 5)

/**
   * 🔥 Drive animation from WINDOW scroll (like reference video)
   */
  useEffect(() => {
    const handleScroll = () => {
      if (!sectionRef.current) return

const rect = sectionRef.current.getBoundingClientRect()
      const viewportHeight = window.innerHeight
      const totalScroll = viewportHeight * sectionHeightMultiplier

const progress = Math.min(
        1,
        Math.max(0, (viewportHeight - rect.top) / totalScroll)
      )

const index = Math.floor(progress * cardCount)
      setActiveCardIndex(Math.min(index, cardCount - 1))
    }

window.addEventListener("scroll", handleScroll, { passive: true })
    handleScroll()

return () => window.removeEventListener("scroll", handleScroll)
  }, [cardCount, sectionHeightMultiplier])

/**
   * Card transform logic (your original idea — kept & optimized)
   */
  const getCardTransform = (index: number) => {
    const progressPerCard = 1 / cardCount
    const cardProgress = Math.max(
      0,
      Math.min(1, (activeCardIndex - index) / progressPerCard)
    )

const scale = 0.88 + (1 - cardProgress) * 0.12
    const translateY = cardProgress * -110
    const opacity = index <= activeCardIndex ? 1 - cardProgress * 0.5 : 0

return {
      transform: `translateY(${translateY}%) scale(${scale})`,
      opacity: Math.max(0, opacity),
      zIndex: cardCount - index,
      pointerEvents: opacity > 0.3 ? "auto" : "none",
    }
  }

return (
    <section
      ref={sectionRef}
      className={`relative w-full ${className}`}
      style={{ height: `${sectionHeightMultiplier * 100}vh` }}
    >
      {/* Sticky viewport (this creates the illusion) */}
      <div
        className={`sticky top-0 h-screen w-full flex items-center justify-center overflow-hidden ${backgroundColor}`}
      >
        <div className="container px-4 sm:px-6 lg:px-8 mx-auto h-full flex items-center justify-center">
          <div
            className="relative w-full max-w-5xl mx-auto"
            style={{ height: cardHeight }}
          >
            {cards.slice(0, 5).map((card, index) => {
              const transform = getCardTransform(index)
              const backgroundImage =
                card.backgroundImage ||
                defaultBackgrounds[index % defaultBackgrounds.length]

return (
                <div
                  key={index}
                  className="absolute left-1/2 top-0 overflow-hidden shadow-xl will-change-transform"
                  style={{
                    transform: `translateX(-50%) ${transform.transform}`,
                    opacity: transform.opacity,
                    zIndex: transform.zIndex,
                    pointerEvents: transform.pointerEvents as React.CSSProperties["pointerEvents"],
                    height: cardHeight,
                    maxHeight: "600px",
                    width: "100%",
                    borderRadius: "24px",
                    transition:
                      "transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease",
                  }}
                >
                  <div
                    className="absolute inset-0 bg-gradient-to-b from-black/40 to-black/80"
                    style={{
                      backgroundImage: `url('${backgroundImage}')`,
                      backgroundSize: "cover",
                      backgroundPosition: "center",
                      backgroundBlendMode: "overlay",
                    }}
                  />

{card.badge && (
                    <div className="absolute top-4 right-4 z-20">
                      <div className="px-4 py-2 rounded-full bg-white/20 backdrop-blur text-white text-sm">
                        {card.badge}
                      </div>
                    </div>
                  )}

<div className="relative z-10 p-6 md:p-8 h-full flex items-center">
                    {card.content ? (
                      card.content
                    ) : (
                      <div className="max-w-lg">
                        <h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
                          {card.title}
                        </h3>
                        {card.subtitle && (
                          <p className="text-white/80 text-lg">
                            {card.subtitle}
                          </p>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </section>
  )
}

export default ScrollStack
[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { usePathname } from "next/navigation"

export function ScrollToTop() {
  const pathname = usePathname()

useEffect(() => {
    // Scroll to top on route change
    window.scrollTo({ top: 0, left: 0, behavior: "instant" })
  }, [pathname])

return null
}
[V0_FILE]typescriptreact:file="components/stardust-button.tsx" isMerged="true"
"use client"

import type React from "react"

interface StardustButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode
  href?: string
  variant?: "primary" | "secondary"
}

export function StardustButton({
  children,
  onClick,
  href,
  variant = "primary",
  className = "",
  ...props
}: StardustButtonProps) {
  const buttonStyle = {
    "--white": variant === "primary" ? "#81d8ff" : "#e6f3ff",
    "--bg": "#0a1929",
    "--radius": "100px",
    outline: "none",
    cursor: "pointer",
    border: 0,
    position: "relative" as const,
    borderRadius: "var(--radius)",
    backgroundColor: "var(--bg)",
    transition: "all 0.2s ease",
    boxShadow: `
      inset 0 0.3rem 0.9rem rgba(129, 216, 255, 0.3),
      inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
      inset 0 -0.4rem 0.9rem rgba(64, 180, 255, 0.5),
      0 3rem 3rem rgba(0, 0, 0, 0.3),
      0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8)
    `,
  }

const wrapStyle = {
    fontSize: "16px",
    fontWeight: 500,
    color: "rgba(129, 216, 255, 0.9)",
    padding: "16px 32px",
    borderRadius: "inherit",
    position: "relative" as const,
    overflow: "hidden",
  }

const pStyle = {
    display: "flex",
    alignItems: "center",
    gap: "12px",
    margin: 0,
    transition: "all 0.2s ease",
    transform: "translateY(2%)",
    maskImage: "linear-gradient(to bottom, rgba(129, 216, 255, 1) 40%, transparent)",
  }

const content = (
    <>
      <style>{beforeAfterStyles}</style>
      <button className={`pearl-button ${className}`} style={buttonStyle} onClick={onClick} {...props}>
        <div className="wrap" style={wrapStyle}>
          <p style={pStyle}>
            <span>✧</span>
            <span>✦</span>
            {children}
          </p>
        </div>
      </button>
    </>
  )

if (href) {
    return (
      <a href={href} style={{ textDecoration: "none" }}>
        {content}
      </a>
    )
  }

return content
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
 
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/is-prop-valid": "latest",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@react-email/render": "latest",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel": "latest",
    "embla-carousel-auto-scroll": "8.6.0",
    "embla-carousel-react": "8.5.1",
    "framer-motion": "12.23.26",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "resend": "6.6.0",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "three": "0.182.0",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "@calcom/embed-react": "1.5.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]jpg:file="public/ai-chatbot-interface-dark-futuristic-financial-tec.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/BcH6Hj7rco0SPnEMqtcB6A/public/ai-chatbot-interface-dark-futuristic-financial-tec.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ai-chatbot-support-system-dark-futuristic-conversa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/UvFJsPO13Lb9QG9znqb0aC/public/ai-chatbot-support-system-dark-futuristic-conversa.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ai-coding-development-futuristic-dark-neural-netwo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/VQHTSpOBnyJP9SUCUmhCLP/public/ai-coding-development-futuristic-dark-neural-netwo.jpg" isMerged="true"
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]jpg:file="public/b2b-analytics-dashboard-dark-futuristic-data-visua.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/wrImR3N3sXPr4_zor6VPbU/public/b2b-analytics-dashboard-dark-futuristic-data-visua.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ecommerce-ai-shopping-platform-dark-futuristic-int.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/IFtjjpBFi5hUp4GvNwaif6/public/ecommerce-ai-shopping-platform-dark-futuristic-int.jpg" isMerged="true"
[V0_FILE]xml:file="public/favicon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/-YDbS3yxI_ds-j_tL6qMX4/public/favicon.svg" isMerged="true"
[V0_FILE]jpg:file="public/futuristic-dark-ai-technology-abstract-neural-netw.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/B2_HuBEv7thCVzli5s2YlM/public/futuristic-dark-ai-technology-abstract-neural-netw.jpg" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/ymU0Rff1qvR2IYIAMonD2A/public/images/image.png" isMerged="true"
[V0_FILE]jpg:file="public/luxury-modern-villa-with-pool-at-night-premium-rea.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/8UZIwhHnpAXTN0M1OeaxkR/public/luxury-modern-villa-with-pool-at-night-premium-rea.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-tech-office-team-collaboration-dark-futuris.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/alR7SqwAODw5fJHrXQgZO2/public/modern-tech-office-team-collaboration-dark-futuris.jpg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]jpg:file="public/professional-female-ai-researcher-portrait-dark-ba.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/qyVcuUMtURP4Io9m-emCaY/public/professional-female-ai-researcher-portrait-dark-ba.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-female-designer-portrait-dark-backgro.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/wyCZ-guQ4XLJSpbuXra6qM/public/professional-female-designer-portrait-dark-backgro.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-male-ceo-portrait-dark-background.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/l_QBbCj_tuiq7FhTZ1pbvq/public/professional-male-ceo-portrait-dark-background.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-male-engineer-portrait-dark-backgroun.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/BkD9y6NK-U3b2C3cvCr4tu/public/professional-male-engineer-portrait-dark-backgroun.jpg" isMerged="true"
[V0_FILE]jpg:file="public/rocket-launch-optimization-analytics-dark-futurist.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/xCAHhhIYkXwJ0iokYoUVWX/public/rocket-launch-optimization-analytics-dark-futurist.jpg" isMerged="true"
[V0_FILE]jpg:file="public/saas-analytics-dashboard-dark-theme-data-visualiza.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/Rh5ZPPV5SkXJ9dOLsXyjj5/public/saas-analytics-dashboard-dark-theme-data-visualiza.jpg" isMerged="true"
[V0_FILE]jpg:file="public/strategy-planning-architecture-blueprints-dark-fut.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/jj4ddwUb4ci5NdQ3a7l1AX/public/strategy-planning-architecture-blueprints-dark-fut.jpg" isMerged="true"
[V0_FILE]jpg:file="public/workflow-automation-enterprise-dark-futuristic-das.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_TT8OzlXUyzO7tmPOOEaypNf2Tbvh/OF6e-KVYUUmbW8iuCf_N4J/public/workflow-automation-enterprise-dark-futuristic-das.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/cal-modal.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { getCalApi } from "@calcom/embed-react"
import { X } from "lucide-react"

interface CalModalProps {
  isOpen: boolean
  onClose: () => void
}

export function CalModal({ isOpen, onClose }: CalModalProps) {
  const [calLoaded, setCalLoaded] = useState(false)

useEffect(() => {
    if (isOpen && !calLoaded) {
      ;(async () => {
        const cal = await getCalApi({ namespace: "30min" })
        cal("ui", { hideEventTypeDetails: false, layout: "month_view" })
        setCalLoaded(true)
      })()
    }
  }, [isOpen, calLoaded])

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm">
      <div className="relative w-full max-w-4xl h-[90vh] bg-background rounded-lg shadow-2xl overflow-hidden mx-4">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 z-10 p-2 rounded-full bg-card hover:bg-card/80 transition-colors"
          aria-label="Close"
        >
          <X className="w-5 h-5" />
        </button>

<div className="w-full h-full p-4">
          <iframe
            src="https://cal.com/ravi-zerovo/30min?embed=true&theme=auto&layout=month_view"
            width="100%"
            height="100%"
            frameBorder="0"
            style={{ border: 0 }}
            allowFullScreen
          />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/home/cta-section.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { StardustButton } from "@/components/stardust-button"
import { CalModal } from "@/components/cal-modal"

export function CTASection() {
  const sectionRef = useRef<HTMLDivElement>(null)
  const [isCalModalOpen, setIsCalModalOpen] = useState(false)

const elements = sectionRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <>
      <section ref={sectionRef} className="py-24 bg-card/30">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
            Let's Create Together
          </span>
          <h2
            className="animate-on-scroll opacity-0 text-3xl md:text-5xl font-light tracking-tight"
            style={{ animationDelay: "0.1s" }}
          >
            Ready to Transform Your Business?
          </h2>
          <p
            className="animate-on-scroll opacity-0 mt-6 text-lg text-muted-foreground max-w-xl mx-auto"
            style={{ animationDelay: "0.2s" }}
          >
            Whether you need AI automation, a custom solution, or a complete digital overhaul—we're here to help.
          </p>
          <div
            className="animate-on-scroll opacity-0 mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
            style={{ animationDelay: "0.3s" }}
          >
            <StardustButton onClick={() => setIsCalModalOpen(true)}>Start a Project</StardustButton>
            <StardustButton onClick={() => setIsCalModalOpen(true)} variant="secondary">
              Schedule a Consultation
            </StardustButton>
          </div>
        </div>
      </section>

<CalModal isOpen={isCalModalOpen} onClose={() => setIsCalModalOpen(false)} />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/services/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import ScrollStack, { type ScrollStackCard } from "@/components/scroll-stack-new"
import { AutoScrollCarousel } from "@/components/auto-scroll-carousel"
import { StardustButton } from "@/components/stardust-button"
import { CalModal } from "@/components/cal-modal"
import {
  Globe,
  Sparkles,
  LayoutDashboard,
  Zap,
  Database,
  Shield,
  Layers,
  Code,
  LineChart,
  Bot,
  Workflow,
  Brain,
  CheckCircle2,
} from "lucide-react"

const services = [
  {
    id: "automation",
    icon: Workflow,
    title: "AI Automation Systems",
    description:
      "Streamline operations with autonomous workflows that reduce costs, eliminate errors, and boost efficiency.",
    backgroundImage: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=1200&auto=format&fit=crop",
    included: [
      {
        id: "auto-1",
        icon: Workflow,
        title: "End-to-End Process Automation",
        description: "Complete workflow orchestration",
      },
      {
        id: "auto-2",
        icon: Database,
        title: "Intelligent Document Processing",
        description: "Extract data from any document type",
      },
      {
        id: "auto-3",
        icon: Bot,
        title: "Automated Customer Communications",
        description: "Smart email and chat responses",
      },
      {
        id: "auto-4",
        icon: LineChart,
        title: "Supply Chain Optimization",
        description: "Predictive inventory management",
      },
      {
        id: "auto-5",
        icon: Shield,
        title: "Predictive Maintenance Systems",
        description: "Prevent failures proactively",
      },
      { id: "auto-6", icon: Code, title: "Real-Time Monitoring Dashboards", description: "Live operational insights" },
    ],
  },
  {
    id: "web-development",
    icon: Globe,
    title: "AI-Powered Web Development",
    description:
      "Intelligent websites and applications that learn, adapt, and deliver personalized experiences at scale.",
    backgroundImage: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1200&auto=format&fit=crop",
    included: [
      {
        id: "web-1",
        icon: Zap,
        title: "Dynamic Content Personalization",
        description: "AI adapts content based on user behavior",
      },
      {
        id: "web-2",
        icon: Brain,
        title: "Predictive User Analytics",
        description: "Anticipate needs before users act",
      },
      { id: "web-3", icon: Layers, title: "Intelligent A/B Testing", description: "Automated conversion optimization" },
      { id: "web-4", icon: Database, title: "Smart Search & Recommendations", description: "Context-aware discovery" },
      { id: "web-5", icon: Bot, title: "Voice & Chatbot Integration", description: "Natural language interfaces" },
      { id: "web-6", icon: LineChart, title: "Performance Optimization", description: "Lightning-fast load times" },
    ],
  },
  {
    id: "saas",
    icon: LayoutDashboard,
    title: "SaaS Product Development",
    description: "End-to-end development of scalable software-as-a-service platforms built for growth and reliability.",
    backgroundImage: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&auto=format&fit=crop",
    included: [
      {
        id: "saas-1",
        icon: Layers,
        title: "Full-Stack Architecture Design",
        description: "Scalable system architecture",
      },
      { id: "saas-2", icon: Database, title: "Multi-Tenant Infrastructure", description: "Efficient resource sharing" },
      { id: "saas-3", icon: Zap, title: "Subscription & Billing Systems", description: "Automated revenue management" },
      {
        id: "saas-4",
        icon: Shield,
        title: "User Management & Authentication",
        description: "Secure identity solutions",
      },
      {
        id: "saas-5",
        icon: LineChart,
        title: "Analytics & Reporting Tools",
        description: "Actionable business insights",
      },
      {
        id: "saas-6",
        icon: Code,
        title: "API Development & Documentation",
        description: "Developer-friendly integrations",
      },
    ],
  },
  {
    id: "custom-solutions",
    icon: Sparkles,
    title: "Custom AI Solutions",
    description:
      "Bespoke artificial intelligence tailored precisely to your unique business challenges and strategic goals.",
    backgroundImage: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=1200&auto=format&fit=crop",
    included: [
      {
        id: "custom-1",
        icon: Brain,
        title: "Custom ML Model Development",
        description: "Tailored machine learning solutions",
      },
      {
        id: "custom-2",
        icon: Code,
        title: "Natural Language Processing",
        description: "Understand and generate human text",
      },
      {
        id: "custom-3",
        icon: Zap,
        title: "Computer Vision Applications",
        description: "Interpret visual data intelligently",
      },
      {
        id: "custom-4",
        icon: LineChart,
        title: "Predictive Analytics Engine",
        description: "Forecast future business outcomes",
      },
      {
        id: "custom-5",
        icon: Database,
        title: "Recommendation Systems",
        description: "Personalized suggestions at scale",
      },
      { id: "custom-6", icon: Sparkles, title: "AI Strategy Consulting", description: "Roadmap for AI transformation" },
    ],
  },
]

export default function ServicesPage() {
  const pageRef = useRef<HTMLDivElement>(null)
  const [isCalModalOpen, setIsCalModalOpen] = useState(false)

const elements = pageRef.current?.querySelectorAll(".animate-on-scroll")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

const scrollStackCards: ScrollStackCard[] = services.map((service) => ({
    title: service.title,
    subtitle: service.description,
    badge: "Learn More",
    backgroundImage: service.backgroundImage,
    content: (
      <div className="w-full h-full flex flex-col justify-between">
        <div>
          <div className="inline-flex items-center gap-2 mb-3 sm:mb-4 text-primary">
            <service.icon className="w-6 h-6 sm:w-8 sm:h-8" />
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-light tracking-tight mb-3 sm:mb-4 text-white">
            {service.title}
          </h2>
          <p className="text-sm sm:text-base md:text-lg text-white/90 leading-relaxed max-w-2xl">
            {service.description}
          </p>
        </div>

{/* What's Included - Auto Scroll Carousel */}
        <div className="mt-6 sm:mt-8">
          <h3 className="text-base sm:text-lg font-light tracking-tight mb-3 sm:mb-4 flex items-center gap-2 text-white">
            <CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
            What's Included
          </h3>
          <AutoScrollCarousel items={service.included} />
        </div>

<div className="mt-4 sm:mt-6">
          <StardustButton onClick={() => setIsCalModalOpen(true)}>Get Started</StardustButton>
        </div>
      </div>
    ),
  }))

return (
    <>
      <main ref={pageRef} className="min-h-screen">
        <Navigation />

{/* Hero */}
        <section className="pt-24 sm:pt-32 pb-12 sm:pb-20 px-4">
          <div className="max-w-4xl mx-auto text-center">
            <span className="animate-on-scroll opacity-0 inline-block text-xs tracking-widest text-primary uppercase mb-4">
              Our Services
            </span>
            <h1
              className="animate-on-scroll opacity-0 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light tracking-tight"
              style={{ animationDelay: "0.1s" }}
            >
              Premium <span className="text-primary">AI Solutions</span> for Modern Business
            </h1>
            <p
              className="animate-on-scroll opacity-0 mt-4 sm:mt-6 text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed"
              style={{ animationDelay: "0.2s" }}
            >
              From intelligent web experiences to autonomous automation—we deliver technology that transforms how you
              operate.
            </p>
          </div>
        </section>

{/* CTA */}
        <section className="py-16 sm:py-24 bg-card/30 px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="animate-on-scroll opacity-0 text-2xl sm:text-3xl md:text-4xl font-light tracking-tight">
              Not Sure Which Service You Need?
            </h2>
            <p
              className="animate-on-scroll opacity-0 mt-4 text-sm sm:text-base text-muted-foreground max-w-xl mx-auto"
              style={{ animationDelay: "0.1s" }}
            >
              Let's talk. Our team will help you identify the right solution for your business goals.
            </p>
            <div className="animate-on-scroll opacity-0 mt-6 sm:mt-8" style={{ animationDelay: "0.2s" }}>
              <StardustButton onClick={() => setIsCalModalOpen(true)}>Request Consulting</StardustButton>
            </div>
          </div>
        </section>

<CalModal isOpen={isCalModalOpen} onClose={() => setIsCalModalOpen(false)} />
    </>
  )
}
[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Gemini_Generated_Image_58sndo58sndo58sn__1_-removebg-preview-8tNDyWaYtbeFoqvf7lsb1KCzIZdh8i.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true"
export function Logo({ className = "" }: { className?: string }) {
  return (
    <img
      src="/logo.png"
      alt="Zerovo Labs"
      className={className}
      style={{ height: "auto", maxHeight: "100%", imageRendering: "crisp-edges" }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Info, Briefcase, FolderOpen, Mail, Menu, X } from "lucide-react"
import { cn } from "@/lib/utils"
import { Logo } from "./logo"

const navItems = [
  { name: "Home", url: "/", icon: Home },
  { name: "About", url: "/about", icon: Info },
  { name: "Services", url: "/services", icon: Briefcase },
  { name: "Projects", url: "/projects", icon: FolderOpen },
  { name: "Contact", url: "/contact", icon: Mail },
]

export function Navigation() {
  const pathname = usePathname()
  const [activeTab, setActiveTab] = useState(navItems[0].name)
  const [isMobile, setIsMobile] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768)
    }
    handleResize()
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

useEffect(() => {
    const currentItem = navItems.find((item) => item.url === pathname)
    if (currentItem) {
      setActiveTab(currentItem.name)
    }
  }, [pathname])

const handleLinkClick = (name: string) => {
    setActiveTab(name)
    setIsMobileMenuOpen(false)
    window.scrollTo({ top: 0, left: 0, behavior: "instant" })
  }

return (
    <>
      <div className="fixed top-0 left-1/2 -translate-x-1/2 z-50 pt-4 sm:pt-6 w-full px-4">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center justify-between gap-4 sm:gap-8 bg-background/80 border border-border backdrop-blur-lg py-3 px-4 sm:px-6 rounded-full shadow-lg">
            {/* Logo */}
            <Link href="/" onClick={() => handleLinkClick("Home")} className="flex-shrink-0">
              <Logo className="w-36 sm:w-44 md:w-48 h-auto" />
            </Link>

{/* Desktop Navigation Items */}
            <div className="hidden md:flex items-center gap-1">
              {navItems.map((item) => {
                const isActive = activeTab === item.name

return (
                  <Link
                    key={item.name}
                    href={item.url}
                    onClick={() => handleLinkClick(item.name)}
                    className={cn(
                      "relative cursor-pointer text-sm font-light tracking-wide px-4 py-2 rounded-full transition-all",
                      "text-foreground/80 hover:text-primary hover:bg-primary/5",
                      isActive && "bg-primary/10 text-primary font-normal",
                    )}
                  >
                    {item.name}
                  </Link>
                )
              })}
            </div>

{/* Mobile Menu Toggle */}
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-full hover:bg-primary/10 transition-colors"
              aria-label="Toggle menu"
            >
              {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>

{/* Mobile Menu Dropdown */}
          {isMobileMenuOpen && (
            <div className="md:hidden mt-2 bg-background/95 border border-border backdrop-blur-lg rounded-2xl shadow-lg overflow-hidden">
              <div className="flex flex-col py-2">
                {navItems.map((item) => {
                  const Icon = item.icon
                  const isActive = activeTab === item.name

return (
                    <Link
                      key={item.name}
                      href={item.url}
                      onClick={() => handleLinkClick(item.name)}
                      className={cn(
                        "flex items-center gap-3 px-6 py-3 text-sm font-light tracking-wide transition-colors",
                        "text-foreground/80 hover:text-primary hover:bg-primary/5",
                        isActive && "bg-primary/10 text-primary font-normal",
                      )}
                    >
                      <Icon size={18} />
                      {item.name}
                    </Link>
                  )
                })}
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  )
}</article></body></html>