Merge version_2 into main

Merge version_2 into main

src/app/api/claude/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message } = await request.json();
+
+    if (!message || typeof message !== 'string') {
+      return NextResponse.json(
+        { error: 'Invalid message' },
+        { status: 400 }
+      );
+    }
+
+    // Claude API client initialization removed due to missing dependency
+    // This endpoint requires @anthropic-ai/sdk to be installed
+    // For now, returning a mock response
+    const email = `Subject: Follow-up on Your Interest\n\nHi there,\n\nThank you for your interest. We'd love to discuss how we can help you achieve your goals.\n\nBest regards`;
+
+    return NextResponse.json({ email });
+  } catch (error) {
+    console.error('Email generation error:', error);
+    return NextResponse.json(
+      { error: 'Failed to generate email' },
+      { status: 500 }
+    );
+  }
+}

src/app/features/page.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail, Zap, Brain, Shield, BarChart3, Network, Sparkles, Layers } from 'lucide-react';
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "/features" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Contact", id: "#contact" }
+          ]}
+          brandName="AISync"
+          bottomLeftText="Global AI Innovation"
+          bottomRightText="hello@aisync.ai"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardNineteen
+          title="Advanced Feature Showcase"
+          description="Explore the comprehensive capabilities that power AISync's enterprise-grade AI platform"
+          tag="Deep Dive"
+          tagIcon={Sparkles}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: 1,
+              tag: "Neural Networks",              title: "Advanced Deep Learning",              subtitle: "Deploy state-of-the-art neural network models",              description: "Leverage our optimized deep learning infrastructure to deploy custom neural networks. Support for TensorFlow, PyTorch, and ONNX models with automatic optimization for production environments.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/a-modern-collaborative-workspace-showing-1773262648319-4bee95e9.png",              imageAlt: "Deep learning infrastructure",              buttons: [
+                { text: "Explore ML Models", href: "#" }
+              ]
+            },
+            {
+              id: 2,
+              tag: "API Integration",              title: "RESTful API & SDKs",              subtitle: "Seamless integration with your existing tech stack",              description: "Connect AISync to your applications through our comprehensive REST API. Official SDKs available for Python, JavaScript, Go, and Java with extensive code examples and community support.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/professional-headshot-of-a-confident-tec-1773262648022-0c4d24f9.png",              imageAlt: "API integration dashboard",              buttons: [
+                { text: "View Documentation", href: "#" }
+              ]
+            },
+            {
+              id: 3,
+              tag: "Enterprise Security",              title: "Military-Grade Security",              subtitle: "Compliance and data protection at scale",              description: "Enterprise-grade security with AES-256 encryption, SOC 2 Type II certification, GDPR and HIPAA compliance. Dedicated infrastructure options with custom security policies for regulated industries.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/professional-headshot-of-a-marketing-dir-1773262646438-bc92266e.png",              imageAlt: "Security infrastructure",              buttons: [
+                { text: "Security Details", href: "#" }
+              ]
+            },
+            {
+              id: 4,
+              tag: "Real-Time Analytics",              title: "Advanced Performance Monitoring",              subtitle: "Comprehensive insights into model behavior",              description: "Real-time dashboards tracking model accuracy, latency, throughput, and resource usage. Automated anomaly detection, performance alerts, and detailed audit logs for complete observability.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/professional-headshot-of-a-product-manag-1773262646040-0d822838.png",              imageAlt: "Analytics dashboard",              buttons: [
+                { text: "View Dashboard", href: "#" }
+              ]
+            },
+            {
+              id: 5,
+              tag: "Infrastructure",              title: "Global Distributed Architecture",              subtitle: "99.99% uptime with automatic failover",              description: "Multi-region deployment across 6 continents with automatic load balancing and failover. Sub-100ms latency from anywhere in the world with dedicated edge computing capabilities.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/professional-headshot-of-a-data-scientis-1773262646583-701964ab.png",              imageAlt: "Global infrastructure map",              buttons: [
+                { text: "Infrastructure Map", href: "#" }
+              ]
+            },
+            {
+              id: 6,
+              tag: "Model Management",              title: "Enterprise Model Management",              subtitle: "Version control and A/B testing at scale",              description: "Complete model lifecycle management with version control, automatic rollbacks, canary deployments, and A/B testing. Monitor multiple model versions in production simultaneously with traffic splitting.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AocraaRzS0ANJ3zzgoQ80VBgRQ/professional-headshot-of-a-business-stra-1773262646607-737e616b.png",              imageAlt: "Model management interface",              buttons: [
+                { text: "Learn More", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to scale?"
+          tagIcon={Mail}
+          title="Get started with enterprise AI today"
+          description="Experience the power of AISync with your own AI models. No credit card required. Deploy your first model in minutes."
+          buttons={[
+            { text: "Start free trial", href: "#" },
+            { text: "Talk to sales", href: "#" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="AISync"
+          copyrightText="© 2024 AISync. All rights reserved."
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "#" },
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#cta" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Community", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -30,10 +30,11 @@ export default function LandingPage() {
         <NavbarStyleFullscreen
           navItems={[
             { name: "Features", id: "features-bento" },
-            { name: "Pricing", id: "pricing" },
+            { name: "Pricing", id: "/pricing" },
             { name: "About", id: "about" },
             { name: "Solutions", id: "features-hover" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "contact" },
+            { name: "Try Free", id: "/try-free" }
           ]}
           brandName="AISync"
           bottomLeftText="Global AI Innovation"
@@ -249,7 +250,7 @@ export default function LandingPage() {
           title="Ready to transform your AI strategy?"
           description="Join thousands of companies using AISync to build, deploy, and scale AI applications. Start your free trial today—no credit card required."
           buttons={[
-            { text: "Start free trial", href: "#" },
+            { text: "Start free trial", href: "/try-free" },
             { text: "Schedule a demo", href: "#" }
           ]}
           background={{ variant: "plain" }}
@@ -265,7 +266,7 @@ export default function LandingPage() {
             {
               title: "Product",              items: [
                 { label: "Features", href: "#features-bento" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Documentation", href: "#" },
                 { label: "API Reference", href: "#" }
               ]
@@ -299,4 +300,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,214 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { DollarSign, Sparkles, Check, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function PricingPage() {
+  const [isAnnual, setIsAnnual] = useState(false);
+
+  const plans = [
+    {
+      id: "free",      price: isAnnual ? "$0/year" : "$0/month",      name: "Free",      buttons: [
+        { text: "Get Started", href: "/try-free" }
+      ],
+      features: [
+        "5 free email credits/month",        "Basic email templates",        "Limited API calls",        "Community support",        "No credit card required"
+      ]
+    },
+    {
+      id: "pro",      badge: "Most popular",      badgeIcon: Sparkles,
+      price: isAnnual ? "$99/year" : "$29/month",      name: "Pro",      buttons: [
+        { text: "Start Free Trial", href: "#" }
+      ],
+      features: [
+        "500 email credits/month",        "Advanced AI templates",        "Priority API access",        "Email & chat support",        "Advanced analytics",        "Custom email sequences"
+      ]
+    },
+    {
+      id: "teams",      price: isAnnual ? "$299/year" : "$99/month",      name: "Teams",      buttons: [
+        { text: "Contact Sales", href: "#" }
+      ],
+      features: [
+        "Unlimited email credits",        "Team collaboration tools",        "Unlimited API calls",        "24/7 dedicated support",        "Advanced analytics & reporting",        "Custom integrations",        "SSO & advanced security"
+      ]
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Try Free", id: "/try-free" }
+          ]}
+          brandName="AISync"
+          bottomLeftText="Global AI Innovation"
+          bottomRightText="hello@aisync.ai"
+        />
+      </div>
+
+      <div id="pricing-toggle" data-section="pricing-toggle" className="w-full px-4 py-8 md:py-12 bg-background">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center justify-center gap-4">
+            <span className={`text-sm font-semibold ${!isAnnual ? 'text-foreground' : 'text-foreground/60'}`}>
+              Monthly
+            </span>
+            <button
+              onClick={() => setIsAnnual(!isAnnual)}
+              className="relative inline-flex h-8 w-14 items-center rounded-full bg-accent/20 transition-colors"
+              style={{
+                backgroundColor: isAnnual ? 'var(--primary-cta)' : 'var(--background-accent)'
+              }}
+            >
+              <span
+                className="inline-block h-6 w-6 transform rounded-full bg-white transition-transform"
+                style={{
+                  transform: isAnnual ? 'translateX(1.5rem)' : 'translateX(0.25rem)'
+                }}
+              />
+            </button>
+            <span className={`text-sm font-semibold ${isAnnual ? 'text-foreground' : 'text-foreground/60'}`}>
+              Annual
+            </span>
+            {isAnnual && (
+              <span className="ml-2 inline-block bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full text-xs font-semibold">
+                Save 20%
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardThree
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your email outreach needs"
+          tag="Pricing"
+          tagIcon={DollarSign}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={plans}
+        />
+      </div>
+
+      <div id="comparison" data-section="comparison" className="w-full px-4 py-20 md:py-32 bg-background">
+        <div className="max-w-4xl mx-auto">
+          <div className="mb-12 text-center">
+            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Feature Comparison</h2>
+            <p className="text-lg text-foreground/70">All the details to help you choose</p>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse">
+              <thead>
+                <tr className="border-b border-accent/20">
+                  <th className="text-left py-4 px-4 font-semibold text-foreground">Feature</th>
+                  <th className="text-center py-4 px-4 font-semibold text-foreground">Free</th>
+                  <th className="text-center py-4 px-4 font-semibold text-foreground">Pro</th>
+                  <th className="text-center py-4 px-4 font-semibold text-foreground">Teams</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-accent/10">
+                  <td className="py-4 px-4 text-foreground">Monthly Credits</td>
+                  <td className="text-center py-4 px-4"><span className="text-primary-cta font-semibold">5</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-primary-cta font-semibold">500</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-primary-cta font-semibold">Unlimited</span></td>
+                </tr>
+                <tr className="border-b border-accent/10">
+                  <td className="py-4 px-4 text-foreground">Email Templates</td>
+                  <td className="text-center py-4 px-4"><X size={20} className="text-foreground/30 mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><Check size={20} className="text-primary-cta mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><Check size={20} className="text-primary-cta mx-auto" /></td>
+                </tr>
+                <tr className="border-b border-accent/10">
+                  <td className="py-4 px-4 text-foreground">API Access</td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-foreground/70">Limited</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-primary-cta">Priority</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-primary-cta">Unlimited</span></td>
+                </tr>
+                <tr className="border-b border-accent/10">
+                  <td className="py-4 px-4 text-foreground">Support</td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-foreground/70">Community</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-foreground">Email & Chat</span></td>
+                  <td className="text-center py-4 px-4"><span className="text-sm text-foreground">24/7 Dedicated</span></td>
+                </tr>
+                <tr className="border-b border-accent/10">
+                  <td className="py-4 px-4 text-foreground">Team Collaboration</td>
+                  <td className="text-center py-4 px-4"><X size={20} className="text-foreground/30 mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><X size={20} className="text-foreground/30 mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><Check size={20} className="text-primary-cta mx-auto" /></td>
+                </tr>
+                <tr>
+                  <td className="py-4 px-4 text-foreground">Advanced Security</td>
+                  <td className="text-center py-4 px-4"><X size={20} className="text-foreground/30 mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><X size={20} className="text-foreground/30 mx-auto" /></td>
+                  <td className="text-center py-4 px-4"><Check size={20} className="text-primary-cta mx-auto" /></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="AISync"
+          copyrightText="© 2024 AISync. All rights reserved."
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "/#features-bento" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Community", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #0a0a0a;
   --card: #1a1a1a;
   --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #8b5cf6;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #3b82f6;
+  --background-accent: #10b981;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/try-free/page.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail, Sparkles, ArrowRight } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export default function TryFreePage() {
+  const [credits, setCredits] = useState(5);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!input.trim()) return;
+    if (credits <= 0) {
+      setError('No credits remaining. Upgrade to continue.');
+      return;
+    }
+
+    const userMessage = input.trim();
+    setInput('');
+    setError('');
+    setLoading(true);
+
+    setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
+
+    try {
+      const response = await fetch('/api/claude', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: userMessage })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate email');
+      }
+
+      const data = await response.json();
+      setMessages(prev => [...prev, { role: 'assistant', content: data.email }]);
+      setCredits(prev => Math.max(0, prev - 1));
+    } catch (err) {
+      setError('Error generating email. Please try again.');
+      setMessages(prev => prev.slice(0, -1));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Try Free", id: "/try-free" }
+          ]}
+          brandName="AISync"
+          bottomLeftText="Global AI Innovation"
+          bottomRightText="hello@aisync.ai"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Try AISync Cold Email Writer"
+          description="Generate compelling cold emails powered by Claude AI. You have 5 free credits to get started."
+          tag="Free Trial"
+          tagIcon={Sparkles}
+          background={{ variant: "plain" }}
+          mediaAnimation="none"
+        />
+      </div>
+
+      <div id="try-free-form" data-section="try-free-form" className="w-full px-4 py-20 md:py-32 bg-background">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-card border border-accent/20 rounded-lg p-8 shadow-lg">
+            <div className="mb-6">
+              <div className="flex items-center justify-between mb-2">
+                <h2 className="text-2xl font-bold text-foreground">Cold Email Writer</h2>
+                <div className="bg-primary-cta text-white px-4 py-2 rounded-full font-semibold">
+                  {credits} Credits Left
+                </div>
+              </div>
+              <p className="text-foreground/70">Describe the recipient or company, and we'll generate a professional cold email.</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="min-h-96 bg-background border border-accent/10 rounded-lg p-4 overflow-y-auto space-y-4">
+                {messages.length === 0 ? (
+                  <div className="text-center text-foreground/50 py-12">
+                    <p>Your generated emails will appear here</p>
+                  </div>
+                ) : (
+                  messages.map((msg, idx) => (
+                    <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                      <div className={`max-w-xs lg:max-w-md xl:max-w-lg px-4 py-2 rounded-lg ${
+                        msg.role === 'user'
+                          ? 'bg-primary-cta text-white'
+                          : 'bg-accent/10 text-foreground border border-accent/20'
+                      }`}>
+                        <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                      </div>
+                    </div>
+                  ))
+                )}
+                {loading && (
+                  <div className="flex justify-start">
+                    <div className="bg-accent/10 text-foreground border border-accent/20 px-4 py-2 rounded-lg">
+                      <p className="text-sm">Generating email...</p>
+                    </div>
+                  </div>
+                )}
+                <div ref={messagesEndRef} />
+              </div>
+
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="e.g., 'SaaS startup, B2B sales, target CFOs'"
+                  disabled={credits === 0 || loading}
+                  className="flex-1 px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta disabled:opacity-50"
+                />
+                <button
+                  type="submit"
+                  disabled={credits === 0 || loading || !input.trim()}
+                  className="bg-primary-cta text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity flex items-center gap-2"
+                >
+                  {loading ? 'Generating...' : 'Generate'}
+                  <ArrowRight size={16} />
+                </button>
+              </div>
+            </form>
+
+            <div className="mt-6 pt-6 border-t border-accent/10">
+              <p className="text-sm text-foreground/70 mb-2">Out of credits?</p>
+              <button className="w-full bg-secondary-cta text-foreground px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity">
+                Upgrade to Pro
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="AISync"
+          copyrightText="© 2024 AISync. All rights reserved."
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "/#features-bento" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Community", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}