Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
-import { Sparkles } from "lucide-react";
+import { Sparkles, Leaf, Zap, Users } from "lucide-react";
 
 export default function LandingPage() {
   const navItems = [
@@ -14,17 +14,23 @@ export default function LandingPage() {
 
   const carouselItems = [
     {
-      id: "carousel-1",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/stunning-macro-photography-of-a-blooming-1773942477196-089f4739.png",      imageAlt: "Pink orchid macro photography"},
+      id: "carousel-1",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/stunning-macro-photography-of-a-blooming-1773942477196-089f4739.png",      imageAlt: "Pink orchid macro photography"
+    },
     {
-      id: "carousel-2",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/beautiful-close-up-of-white-peony-petals-1773942475091-b9f4be17.png",      imageAlt: "White peony soft focus bloom"},
+      id: "carousel-2",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/beautiful-close-up-of-white-peony-petals-1773942475091-b9f4be17.png",      imageAlt: "White peony soft focus bloom"
+    },
     {
-      id: "carousel-3",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/vibrant-purple-butterfly-on-yellow-flowe-1773942476904-fb0a3aab.png",      imageAlt: "Purple butterfly on yellow flower"},
+      id: "carousel-3",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/vibrant-purple-butterfly-on-yellow-flowe-1773942476904-fb0a3aab.png",      imageAlt: "Purple butterfly on yellow flower"
+    },
     {
-      id: "carousel-4",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/red-rose-in-full-bloom-with-dramatic-moo-1773942476880-3684acbe.png",      imageAlt: "Red rose dramatic lighting"},
+      id: "carousel-4",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/red-rose-in-full-bloom-with-dramatic-moo-1773942476880-3684acbe.png",      imageAlt: "Red rose dramatic lighting"
+    },
     {
-      id: "carousel-5",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/sunflower-field-at-golden-hour-sunset-wa-1773942475933-b6e303e4.png",      imageAlt: "Sunflower field golden hour"},
+      id: "carousel-5",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/sunflower-field-at-golden-hour-sunset-wa-1773942475933-b6e303e4.png",      imageAlt: "Sunflower field golden hour"
+    },
     {
-      id: "carousel-6",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/contemporary-indoor-plant-arrangement-in-1773942476069-7c341135.png",      imageAlt: "Contemporary indoor plant arrangement"},
+      id: "carousel-6",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAqiZutya4TbealrEW17hntJfa/contemporary-indoor-plant-arrangement-in-1773942476069-7c341135.png",      imageAlt: "Contemporary indoor plant arrangement"
+    },
   ];
 
   return (
@@ -35,9 +41,9 @@ export default function LandingPage() {
       contentWidth="small"
       sizing="mediumSizeLargeTitles"
       background="blurBottom"
-      cardStyle="outline"
+      cardStyle="glass-elevated"
       primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="solid"
+      secondaryButtonStyle="glass"
       headingFontWeight="light"
     >
       <div id="nav" data-section="nav">
@@ -62,8 +68,114 @@ export default function LandingPage() {
           autoPlay={true}
           autoPlayInterval={5000}
           ariaLabel="Apex AI plant design hero section carousel"
+          containerClassName="relative min-h-screen flex items-center justify-center bg-gradient-to-b from-slate-900 via-slate-800 to-slate-950 overflow-hidden"
+          textBoxClassName="relative z-20 max-w-2xl mx-auto text-center px-4 backdrop-blur-xl bg-white/5 rounded-3xl p-8 border border-white/10 shadow-2xl"
         />
       </div>
+
+      <div id="features" data-section="features" className="relative py-24 px-4 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-5xl font-light text-white text-center mb-4">Powered by Innovation</h2>
+          <p className="text-xl text-slate-300 text-center mb-20 max-w-2xl mx-auto">Experience the next generation of botanical AI design</p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="group relative backdrop-blur-xl bg-white/5 rounded-2xl p-8 border border-white/10 hover:border-white/20 transition-all hover:shadow-2xl hover:-translate-y-1">
+              <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="relative z-10">
+                <Leaf className="w-12 h-12 text-emerald-400 mb-4" />
+                <h3 className="text-lg font-semibold text-white mb-2">AI Generation</h3>
+                <p className="text-sm text-slate-300">Create stunning botanical designs with advanced AI algorithms</p>
+              </div>
+            </div>
+
+            <div className="group relative backdrop-blur-xl bg-white/5 rounded-2xl p-8 border border-white/10 hover:border-white/20 transition-all hover:shadow-2xl hover:-translate-y-1">
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="relative z-10">
+                <Zap className="w-12 h-12 text-blue-400 mb-4" />
+                <h3 className="text-lg font-semibold text-white mb-2">Real-time Rendering</h3>
+                <p className="text-sm text-slate-300">Immersive 3D environments rendered in real-time</p>
+              </div>
+            </div>
+
+            <div className="group relative backdrop-blur-xl bg-white/5 rounded-2xl p-8 border border-white/10 hover:border-white/20 transition-all hover:shadow-2xl hover:-translate-y-1">
+              <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="relative z-10">
+                <Sparkles className="w-12 h-12 text-purple-400 mb-4" />
+                <h3 className="text-lg font-semibold text-white mb-2">Creative Tools</h3>
+                <p className="text-sm text-slate-300">Intuitive interface for seamless design creation</p>
+              </div>
+            </div>
+
+            <div className="group relative backdrop-blur-xl bg-white/5 rounded-2xl p-8 border border-white/10 hover:border-white/20 transition-all hover:shadow-2xl hover:-translate-y-1">
+              <div className="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              <div className="relative z-10">
+                <Users className="w-12 h-12 text-pink-400 mb-4" />
+                <h3 className="text-lg font-semibold text-white mb-2">Community</h3>
+                <p className="text-sm text-slate-300">Share and collaborate with designers worldwide</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cta" data-section="cta" className="relative py-20 px-4 bg-gradient-to-r from-slate-900 via-emerald-900/20 to-slate-900 border-t border-white/10">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="backdrop-blur-xl bg-white/5 rounded-3xl p-12 border border-white/10">
+            <h2 className="text-4xl font-light text-white mb-4">Ready to Transform Your Designs?</h2>
+            <p className="text-lg text-slate-300 mb-8">Join thousands of creators using Apex to revolutionize botanical design</p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <button className="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-xl transition-all hover:shadow-lg hover:-translate-y-0.5">
+                Start Free Trial
+              </button>
+              <button className="px-8 py-3 border border-white/20 hover:border-white/40 text-white font-semibold rounded-xl backdrop-blur-xl bg-white/5 hover:bg-white/10 transition-all">
+                Learn More
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer" className="relative py-12 px-4 bg-slate-950 border-t border-white/10">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+            <div>
+              <h3 className="text-white font-semibold mb-4">Product</h3>
+              <ul className="space-y-2 text-slate-400 text-sm">
+                <li><a href="#" className="hover:text-white transition-colors">Features</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Pricing</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Gallery</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-white font-semibold mb-4">Company</h3>
+              <ul className="space-y-2 text-slate-400 text-sm">
+                <li><a href="#" className="hover:text-white transition-colors">About</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Careers</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-white font-semibold mb-4">Resources</h3>
+              <ul className="space-y-2 text-slate-400 text-sm">
+                <li><a href="#" className="hover:text-white transition-colors">Documentation</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Community</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Support</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="text-white font-semibold mb-4">Follow</h3>
+              <ul className="space-y-2 text-slate-400 text-sm">
+                <li><a href="#" className="hover:text-white transition-colors">Twitter</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">Instagram</a></li>
+                <li><a href="#" className="hover:text-white transition-colors">LinkedIn</a></li>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-white/10 pt-8 text-center text-slate-400 text-sm">
+            <p>&copy; 2025 Apex AI. All rights reserved. | <a href="#" className="hover:text-white transition-colors">Privacy</a> | <a href="#" className="hover:text-white transition-colors">Terms</a></p>
+          </div>
+        </div>
+      </div>
     </ThemeProvider>
   );
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #0f172a;
-  --card: #1a1a1a;
+  --card: #1e293b;
-  --foreground: #f5f5f5;
+  --foreground: #f1f5f9;
-  --primary-cta: #ffdf7d;
+  --primary-cta: #10b981;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #1e293b;
   --secondary-cta-text: #ffffff;
-  --accent: #8b9a1b;
+  --accent: #06b6d4;
-  --background-accent: #5d6b00;
+  --background-accent: #334155;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);