Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -11,8 +11,29 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Award, Sparkles, TrendingUp, Zap } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [generatedPalette, setGeneratedPalette] = useState<string[] | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const generateColors = async () => {
+    setIsGenerating(true);
+    try {
+      // Simulate color generation
+      const colors = [
+        '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+        '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+        '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+        '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+        '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'),
+      ];
+      setGeneratedPalette(colors);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -47,8 +68,8 @@ export default function LandingPage() {
           logoText="Professional color palettes in seconds"
           description="Generate stunning, market-tested color combinations powered by design science. No guesswork. Pure quality."
           buttons={[
-            { text: "Create Your Palette", href: "#contact" },
-            { text: "Learn More", href: "#features" }
+            { text: "Create Your Palette Now", href: "#contact" },
+            { text: "Explore Features", href: "#features" }
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
@@ -59,6 +80,45 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="colorGenerator" data-section="colorGenerator" className="py-20">
+        <div className="w-content-width mx-auto px-vw-1_5">
+          <div className="bg-card rounded-theme-capped p-8 md:p-12 text-center">
+            <h2 className="text-4xl md:text-5xl font-semibold mb-4">Generate Colors Instantly</h2>
+            <p className="text-foreground/75 mb-8 max-w-2xl mx-auto">Try our color palette generator right here. Click below to generate a professional color palette based on advanced color theory principles.</p>
+            
+            {generatedPalette && (
+              <div className="mb-8 p-6 bg-background rounded-theme-capped">
+                <h3 className="text-lg font-medium mb-4">Your Generated Palette:</h3>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-4">
+                  {generatedPalette.map((color, idx) => (
+                    <div key={idx} className="flex flex-col items-center gap-2">
+                      <div
+                        className="w-full aspect-square rounded-theme-capped border border-accent/30 cursor-pointer hover:scale-105 transition-transform"
+                        style={{ backgroundColor: color }}
+                        onClick={() => {
+                          navigator.clipboard.writeText(color);
+                        }}
+                        title="Click to copy"
+                      />
+                      <span className="text-sm font-mono text-foreground/60">{color}</span>
+                    </div>
+                  ))}
+                </div>
+                <p className="text-sm text-foreground/50">Click any color to copy its hex code</p>
+              </div>
+            )}
+            
+            <button
+              onClick={generateColors}
+              disabled={isGenerating}
+              className="bg-primary-cta hover:bg-primary-cta/90 disabled:opacity-50 text-primary-cta-text px-8 py-3 rounded-theme-capped font-medium transition-all"
+            >
+              {isGenerating ? 'Generating...' : 'Generate Palette'}
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div id="features" data-section="features">
         <FeatureCardTwentyThree
           title="Why Designers Choose ChromaLab"
@@ -189,8 +249,8 @@ export default function LandingPage() {
 
       <div id="contact" data-section="contact">
         <ContactSplitForm
-          title="Ready to transform your workflow?"
-          description="Get started with ChromaLab today and experience the power of design-science-backed color palettes. Join thousands of creative professionals who've already made the switch."
+          title="Start generating palettes instantly"
+          description="Get started with ChromaLab right now. No sign-up required, no waiting. Generate your first professional color palette in seconds and join thousands of designers creating beautiful, accessible palettes."
           inputs={[
             { name: "name", type: "text", placeholder: "Your name", required: true },
             { name: "email", type: "email", placeholder: "your@email.com", required: true }
@@ -204,7 +264,7 @@ export default function LandingPage() {
           imageAlt="Designer working with color palettes"
           mediaAnimation="blur-reveal"
           mediaPosition="right"
-          buttonText="Create Your Palette"
+          buttonText="Generate Now"
         />
       </div>
 
@@ -242,4 +302,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}