bender/c377169e-38ce-46b5-b873-fa02399d3ba8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-19 17:54:53 +00:00
parent 8141734760
commit 09bc3661b2
1 changed files with 121 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/app/page.tsx
View File

@@ -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 Creating
</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>
);
}