Update src/app/page.tsx

Merge version_25 into main

src/app/layout.tsx

@@ -5,7 +5,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "studio ads - Professional Ad Creatives in 48 Hours",  description: "Get agency-quality ad creatives delivered in 48 hours. 40% ROAS increase, 50% cheaper than traditional agencies."
+  title: "studio ads - Professional Ad Creatives in 48 Hours",  description: "Get agency-quality ads in 48 hours with proven 40% ROAS lift. Professional ad creatives delivered fast, 50% cheaper than traditional agencies."
 };
 
 export default function RootLayout({
@@ -1385,4 +1385,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -64,7 +64,7 @@ export default function LandingPage() {
               { name: "Contact", id: "contact" }
             ]}
             button={{
-              text: "Get 3 Free Ads Now",              href: "#free-offer"
+              text: "Get Your Free Ads → See 48-Hour Results",              href: "#free-offer"
             }}
             animateOnLoad={true}
           />
@@ -91,15 +91,15 @@ export default function LandingPage() {
             onClick={() => document.getElementById('free-offer')?.scrollIntoView({ behavior: 'smooth' })}
             className="w-full py-3 px-4 bg-white text-primary-cta font-semibold rounded-full hover:opacity-90 transition-opacity"
           >
-            Get 3 Free Ads
+            Get Your Free Ads
           </button>
         </div>
       )}
 
       <div id="hero" data-section="hero">
         <HeroCentered
-          title="40% ROAS Increase in 48 Hours"
-          description="Professional ad creatives delivered in 48 hours instead of 3 weeks. Agency-quality video ads and static creatives, 50% cheaper than traditional agencies."
+          title="Get Agency-Quality Ads in 48 Hours"
+          description="Turn 48-hour briefs into conversion-ready creatives with proven 40% ROAS lift. Professional ad creatives delivered in 48 hours instead of 3 weeks. Agency-quality video ads and static creatives, 50% cheaper than traditional agencies."
           background={{ variant: "downward-rays-animated" }}
           avatars={[
             {
@@ -114,7 +114,7 @@ export default function LandingPage() {
           ]}
           avatarText="Trusted by 100+ agencies and brands"
           buttons={[
-            { text: "Get 3 Free Ads Now", href: "#free-offer" },
+            { text: "Start Free Project", href: "#free-offer" },
             { text: "See Our Work", href: "#features" }
           ]}
           buttonAnimation="slide-up"
@@ -189,44 +189,86 @@ export default function LandingPage() {
       </div>
 
       <div id="pain-points" data-section="pain-points">
-        <FeatureBorderGlow
-          title="The Old Way vs. The studio ads Way"
-          description="Stop wasting weeks on ad production. Here's how we're different."
-          tag="Why Switch"
-          tagIcon={Zap}
-          features={[
-            {
-              icon: Clock,
-              title: "3 Weeks Production Time vs 48 Hours",              description: "Traditional agencies take weeks for approvals and revisions. We deliver in 48 hours."
-            },
-            {
-              icon: Users,
-              title: "Managing Multiple Vendors",              description: "Juggling designers, videographers, and copywriters. We handle everything under one roof."
-            },
-            {
-              icon: Palette,
-              title: "Limited Creative Variations",              description: "You get one option and hope it works. We create 10+ variations to maximize ROI."
-            },
-            {
-              icon: TrendingUp,
-              title: "40% Average ROAS Increase",              description: "Guessing which creatives will perform best. We optimize based on real data insights."
-            },
-            {
-              icon: CreditCard,
-              title: "50% Cheaper Than Agencies",              description: "Hidden fees and scope creep add up fast. Our pricing is transparent and fixed."
-            },
-            {
-              icon: Sparkles,
-              title: "Poor Quality at Scale",              description: "Agencies cut corners when scaling. We maintain premium quality every single time."
-            }
-          ]}
-          animationType="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Experience the Difference", href: "#features" }
-          ]}
-        />
+        <div className="relative py-16 md:py-24 px-4 bg-background">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-12 md:mb-16">
+              <div className="inline-block mb-4">
+                <span className="px-4 py-2 rounded-full bg-primary-cta/10 text-primary-cta text-sm font-semibold flex items-center gap-2">
+                  <Zap size={16} />
+                  Why Switch
+                </span>
+              </div>
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">The Old Way vs. The studio ads Way</h2>
+              <p className="text-foreground/70 text-lg md:text-xl">Stop wasting weeks on ad production. Here's how we're different.</p>
+            </div>
+
+            {/* Comparison Chart */}
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm md:text-base">
+                <thead>
+                  <tr className="border-b-2 border-accent/20 bg-card/50">
+                    <th className="text-left py-4 px-4 md:px-6 font-semibold text-foreground">Feature</th>
+                    <th className="text-center py-4 px-4 md:px-6 font-semibold text-foreground">Traditional Agencies</th>
+                    <th className="text-center py-4 px-4 md:px-6 font-semibold text-primary-cta">studio ads</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Production Time</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">3-4 Weeks</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">48 Hours</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Cost per Ad</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">$2,500-5,000</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">$500-1,500</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Creative Variations</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">1-3 Base Concepts</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">10+ Included</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Revision Rounds</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">Limited / Extra Cost</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Unlimited (48hr)</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Platform Optimization</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">Limited Formats</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">All Major Platforms</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Average ROAS Lift</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">20-25% Average</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">40% Average</td>
+                  </tr>
+                  <tr className="border-b border-accent/10 hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Account Manager</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">Always Included</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Growth+ Plans</td>
+                  </tr>
+                  <tr className="hover:bg-card/30 transition-colors">
+                    <td className="py-4 px-4 md:px-6 font-semibold text-foreground">Setup/Onboarding</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-foreground/70">2-4 Weeks</td>
+                    <td className="text-center py-4 px-4 md:px-6 text-primary-cta font-semibold">Minimal</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div className="mt-12 text-center">
+              <button
+                onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
+                className="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-primary-cta text-primary-cta-text hover:opacity-90 transition-opacity font-semibold"
+                aria-label="View features"
+              >
+                <span>Experience the Difference</span>
+                <ArrowRight size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="features" data-section="features">
@@ -238,7 +280,7 @@ export default function LandingPage() {
           features={[
             {
               title: "Video Ads",              description: "Professional 15-60 second video ads optimized for every platform. Cinematic, conversion-focused, and brand-consistent.",              bentoComponent: "media-stack",              items: [
-                { videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=1" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png", imageAlt: "Video ad sample" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png", imageAlt: "Creative sample" },
                 { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png", imageAlt: "Creative sample" }
               ]
@@ -305,24 +347,6 @@ export default function LandingPage() {
           ]}
           buttonAnimation="opacity"
         />
-
-        {/* Video Explainer Section */}
-        <div className="mt-12 md:mt-16 px-4">
-          <div className="max-w-4xl mx-auto">
-            <div className="aspect-video bg-card rounded-lg border border-accent/20 flex items-center justify-center overflow-hidden">
-              <iframe
-                width="100%"
-                height="100%"
-                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-                title="studio ads Demo"
-                frameBorder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-              />
-            </div>
-            <p className="text-center text-foreground/60 text-sm mt-4">60-90 second video explainer - See how our process works</p>
-          </div>
-        </div>
       </div>
 
       <div id="free-offer" data-section="free-offer">
@@ -353,7 +377,7 @@ export default function LandingPage() {
                 onClick={handleUrlSubmit}
                 className="w-full py-4 px-6 bg-primary-cta text-primary-cta-text font-semibold rounded-full hover:opacity-90 transition-opacity text-lg"
               >
-                Get 3 Free Ads Now
+                Start Free Project
               </button>
             </div>
 
@@ -378,59 +402,56 @@ export default function LandingPage() {
           </div>
           {showComparison && (
             <div className="mb-8 p-6 rounded-lg bg-gradient-to-br from-accent/10 to-accent/5 border border-accent/20">
-              <h3 className="text-lg font-semibold mb-4 text-foreground">Feature Comparison</h3>
+              <h3 className="text-lg font-semibold mb-4 text-foreground">Studio Ads vs Traditional Agencies</h3>
               <div className="overflow-x-auto">
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-accent/20">
-                      <th className="text-left py-2 px-3 font-semibold">Feature</th>
-                      <th className="text-center py-2 px-3 font-semibold">Starter</th>
-                      <th className="text-center py-2 px-3 font-semibold">Growth</th>
-                      <th className="text-center py-2 px-3 font-semibold">Enterprise</th>
+                      <th className="text-left py-2 px-3 font-semibold">Metric</th>
+                      <th className="text-center py-2 px-3 font-semibold">Studio Ads</th>
+                      <th className="text-center py-2 px-3 font-semibold">Traditional Agencies</th>
                     </tr>
                   </thead>
                   <tbody>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Average ROAS Lift</td>
-                      <td className="text-center py-3 px-3">20%</td>
-                      <td className="text-center py-3 px-3">40%</td>
-                      <td className="text-center py-3 px-3">Custom</td>
+                      <td className="py-3 px-3 font-semibold">Production Time</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">48 Hours</td>
+                      <td className="text-center py-3 px-3">3-4 Weeks</td>
                     </tr>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Projects/Month</td>
-                      <td className="text-center py-3 px-3">4</td>
-                      <td className="text-center py-3 px-3">Unlimited</td>
-                      <td className="text-center py-3 px-3">Unlimited</td>
+                      <td className="py-3 px-3 font-semibold">Cost per Ad</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">$500-1,500</td>
+                      <td className="text-center py-3 px-3">$2,500-5,000</td>
                     </tr>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Creatives/Month</td>
-                      <td className="text-center py-3 px-3">Included</td>
-                      <td className="text-center py-3 px-3">30+</td>
-                      <td className="text-center py-3 px-3">Unlimited</td>
+                      <td className="py-3 px-3 font-semibold">Creative Variations</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">10+ Included</td>
+                      <td className="text-center py-3 px-3">1-3 Base Concepts</td>
                     </tr>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Turnaround Time</td>
-                      <td className="text-center py-3 px-3">48 hours</td>
-                      <td className="text-center py-3 px-3">24 hours</td>
-                      <td className="text-center py-3 px-3">24 hours</td>
+                      <td className="py-3 px-3 font-semibold">Revision Rounds</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Unlimited (48hr)</td>
+                      <td className="text-center py-3 px-3">Limited / Extra Cost</td>
                     </tr>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">Account Manager</td>
-                      <td className="text-center py-3 px-3">-</td>
-                      <td className="text-center py-3 px-3">✓</td>
-                      <td className="text-center py-3 px-3">✓</td>
+                      <td className="py-3 px-3 font-semibold">Platform Optimization</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">All Major Platforms</td>
+                      <td className="text-center py-3 px-3">Limited Formats</td>
                     </tr>
                     <tr className="border-b border-accent/10">
-                      <td className="py-3 px-3">API Access</td>
-                      <td className="text-center py-3 px-3">-</td>
-                      <td className="text-center py-3 px-3">-</td>
-                      <td className="text-center py-3 px-3">✓</td>
+                      <td className="py-3 px-3 font-semibold">Average ROAS Lift</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">40% Average</td>
+                      <td className="text-center py-3 px-3">20-25% Average</td>
+                    </tr>
+                    <tr className="border-b border-accent/10">
+                      <td className="py-3 px-3 font-semibold">Account Manager</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Growth+ Plans</td>
+                      <td className="text-center py-3 px-3">Always Included</td>
                     </tr>
                     <tr>
-                      <td className="py-3 px-3">24/7 Support</td>
-                      <td className="text-center py-3 px-3">-</td>
-                      <td className="text-center py-3 px-3">-</td>
-                      <td className="text-center py-3 px-3">✓</td>
+                      <td className="py-3 px-3 font-semibold">Setup/Onboarding</td>
+                      <td className="text-center py-3 px-3 text-primary-cta font-semibold">Minimal</td>
+                      <td className="text-center py-3 px-3">2-4 Weeks</td>
                     </tr>
                   </tbody>
                 </table>
@@ -445,8 +466,8 @@ export default function LandingPage() {
           tagIcon={CreditCard}
           plans={[
             {
-              id: "growth",              badge: "Growth - Most Popular - 40% ROAS Lift",              badgeIcon: ZapIcon,
-              price: "$5,000",              subtitle: "Per Month (Recurring)",              buttons: [
+              id: "growth",              badge: "Growth - Most Popular - 40% ROAS Lift Guaranteed",              badgeIcon: ZapIcon,
+              price: "$5,000",              subtitle: "For high-volume, results-driven marketing teams",              buttons: [
                 { text: "Start Your 48-Hour Project", href: "#free-offer" }
               ],
               features: [
@@ -455,16 +476,16 @@ export default function LandingPage() {
             },
             {
               id: "starter",              badge: "Starter - 20% Average ROAS Lift",              badgeIcon: Sparkles,
-              price: "$1,500",              subtitle: "Per Month (Recurring)",              buttons: [
-                { text: "Get 3 Free Ads Now", href: "#free-offer" }
+              price: "$1,500",              subtitle: "Perfect for growing brands testing ad creation",              buttons: [
+                { text: "Start Free Project", href: "#free-offer" }
               ],
               features: [
                 "✓ 4 ad projects per month",                "✓ Video ads (up to 3 variations each)",                "✓ Static creatives (10+ variations)",                "✓ Full-funnel packs",                "✓ 48-hour turnaround",                "✓ Brand consistency maintained",                "✓ Email support"
               ]
             },
             {
-              id: "enterprise",              badge: "Enterprise - Custom ROAS",              badgeIcon: Calendar,
-              price: "Custom",              subtitle: "Schedule a Call",              buttons: [
+              id: "enterprise",              badge: "Enterprise - Custom ROAS Targets",              badgeIcon: Calendar,
+              price: "Custom",              subtitle: "For agencies and enterprises with unique needs",              buttons: [
                 { text: "Book Appointment", href: "#contact" }
               ],
               features: [
@@ -522,19 +543,19 @@ export default function LandingPage() {
         <TestimonialCardFifteen
           testimonial="We went from spending 3 weeks on ad production to 48 hours. The quality is exceptional and our ROAS improved by 40%. studio ads is a game-changer for our agency."
           rating={5}
-          author="Emma Rodriguez, Creative Director"
+          author="Marcus Chen, Founder"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png",              alt: "Emma Rodriguez"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png",              alt: "Marcus Chen"
             },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-female-creati-1772624560954-fe3f44ea.png",              alt: "Team member"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png",              alt: "Team member"
             }
           ]}
           ratingAnimation="slide-up"
           avatarsAnimation="blur-reveal"
           useInvertedBackground={true}
-          ariaLabel="Customer testimonial from Emma Rodriguez"
+          ariaLabel="Customer testimonial from Marcus Chen"
         />
       </div>
 
@@ -560,7 +581,7 @@ export default function LandingPage() {
               id: "6",              title: "What's included in the free 3 ads offer?",              content: "You get three custom ad creatives tailored to your business. This might be a mix of video ads, static creatives, or a full-funnel sample. No credit card needed."
             }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-young-marketi-1772624560922-a81a2ec0.png?_wi=2"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATkkwMdD0iTY5cZ1obi8rWoV7q/professional-headshot-of-a-male-entrepre-1772624561085-2e00132e.png?_wi=2"
           imageAlt="FAQ support team"
           title="Frequently Asked Questions"
           description="Everything you need to know about working with studio ads."
@@ -583,7 +604,7 @@ export default function LandingPage() {
           background={{ variant: "downward-rays-static-grid" }}
           useInvertedBackground={true}
           inputPlaceholder="Enter your email address"
-          buttonText="Get 3 Free Ads Now"
+          buttonText="Start Free Project"
           termsText="No card required. 30-day guarantee. Cancel anytime."
           ariaLabel="Contact form and ad offer signup"
         />
@@ -622,4 +643,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #684f7b;;
   --background-accent: #65417c;; */
 
-  --background: #050012;;
-  --card: #040121;;
-  --foreground: #f0e6ff;;
-  --primary-cta: #c89bff;;
-  --primary-cta-text: #050012;;
-  --secondary-cta: #1d123b;;
-  --secondary-cta-text: #f0e6ff;;
-  --accent: #684f7b;;
-  --background-accent: #65417c;;
+  --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
+  --primary-cta-text: #f5faff;;
+  --secondary-cta: #ffffff;;
+  --secondary-cta-text: #001122;;
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);