Update theme colors

Merge version_20 into main

src/app/layout.tsx

@@ -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: "Claim 3 Free Ads",              href: "#free-offer"
             }}
             animateOnLoad={true}
           />
@@ -91,7 +91,7 @@ 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
+            Claim 3 Free Ads
           </button>
         </div>
       )}
@@ -99,7 +99,7 @@ export default function LandingPage() {
       <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."
+          description="Turn 48-hour briefs into conversion-ready creatives. 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: "Claim 3 Free Ads", href: "#free-offer" },
             { text: "See Our Work", href: "#features" }
           ]}
           buttonAnimation="slide-up"
@@ -306,74 +306,21 @@ export default function LandingPage() {
           buttonAnimation="opacity"
         />
 
-        {/* Comparison Chart Section */}
+        {/* Video Explainer Section */}
         <div className="mt-12 md:mt-16 px-4">
-          <div className="max-w-5xl mx-auto">
-            <div className="mb-8 text-center">
-              <h3 className="text-2xl md:text-3xl font-bold text-foreground mb-3">studio ads vs Traditional Agencies</h3>
-              <p className="text-foreground/70">See how we stack up against the competition</p>
+          <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>
-            <div className="bg-card rounded-lg border border-accent/20 overflow-hidden">
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm">
-                  <thead>
-                    <tr className="bg-primary-cta/10 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-primary-cta">studio ads</th>
-                      <th className="text-center py-4 px-4 font-semibold text-foreground/60">Traditional Agencies</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Turnaround Time</td>
-                      <td className="text-center py-4 px-4 text-primary-cta font-semibold">48 Hours</td>
-                      <td className="text-center py-4 px-4 text-foreground/70">2-3 Weeks</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Cost per Creative</td>
-                      <td className="text-center py-4 px-4 text-primary-cta font-semibold">50% Less</td>
-                      <td className="text-center py-4 px-4 text-foreground/70">$2,000-$5,000+</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Creative Variations</td>
-                      <td className="text-center py-4 px-4 text-primary-cta font-semibold">10+ Options</td>
-                      <td className="text-center py-4 px-4 text-foreground/70">1-3 Options</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Revision Process</td>
-                      <td className="text-center py-4 px-4 text-primary-cta font-semibold">24hr Revisions</td>
-                      <td className="text-center py-4 px-4 text-foreground/70">1-2 Weeks</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Unlimited Projects</td>
-                      <td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
-                      <td className="text-center py-4 px-4 text-foreground/40">-</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Dedicated Account Manager</td>
-                      <td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
-                      <td className="text-center py-4 px-4 text-foreground/40">-</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Platform Optimization</td>
-                      <td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
-                      <td className="text-center py-4 px-4 text-foreground/40">-</td>
-                    </tr>
-                    <tr className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Average ROAS Lift</td>
-                      <td className="text-center py-4 px-4 text-primary-cta font-semibold">40%</td>
-                      <td className="text-center py-4 px-4 text-foreground/70">15-25%</td>
-                    </tr>
-                    <tr className="hover:bg-accent/5 transition-colors">
-                      <td className="py-4 px-4 text-foreground font-medium">Performance Tracking</td>
-                      <td className="text-center py-4 px-4"><CheckCircle size={20} className="inline text-primary-cta" /></td>
-                      <td className="text-center py-4 px-4 text-foreground/40">-</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <p className="text-center text-foreground/60 text-sm mt-6">Comparison based on industry averages and typical agency practices. Results may vary.</p>
+            <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>
@@ -406,7 +353,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
+                Claim 3 Free Ads Now
               </button>
             </div>
 
@@ -499,7 +446,7 @@ export default function LandingPage() {
           plans={[
             {
               id: "growth",              badge: "Growth - Most Popular - 40% ROAS Lift",              badgeIcon: ZapIcon,
-              price: "$5,000",              subtitle: "Per Month (Recurring)",              buttons: [
+              price: "$5,000",              subtitle: "For high-volume, results-driven marketing teams",              buttons: [
                 { text: "Start Your 48-Hour Project", href: "#free-offer" }
               ],
               features: [
@@ -508,8 +455,8 @@ 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: "Claim 3 Free Ads Now", 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"
@@ -517,7 +464,7 @@ export default function LandingPage() {
             },
             {
               id: "enterprise",              badge: "Enterprise - Custom ROAS",              badgeIcon: Calendar,
-              price: "Custom",              subtitle: "Schedule a Call",              buttons: [
+              price: "Custom",              subtitle: "For agencies and enterprises with unique needs",              buttons: [
                 { text: "Book Appointment", href: "#contact" }
               ],
               features: [
@@ -631,13 +578,13 @@ export default function LandingPage() {
         <ContactCenter
           tag="Get Started"
           title="Ready to Scale Your Creative Output?"
-          description="Join 100+ brands and agencies already transforming their ad production with studio ads. Start with your free 3 ads today. 30-day money-back guarantee. No credit card required. Cancel anytime."
+          description="Join 100+ brands and agencies already transforming their ad production with studio ads. Start with your free 3 ads today."
           tagIcon={Mail}
           background={{ variant: "downward-rays-static-grid" }}
           useInvertedBackground={true}
           inputPlaceholder="Enter your email address"
-          buttonText="Get 3 Free Ads Now"
-          termsText="No credit card required. 30-day money-back guarantee on paid plans. Cancel anytime."
+          buttonText="Claim 3 Free Ads Now"
+          termsText="No card required. 30-day guarantee. Cancel anytime."
           ariaLabel="Contact form and ad offer signup"
         />
       </div>
@@ -675,4 +622,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);