Merge version_1 into main #2
387
src/app/page.tsx
387
src/app/page.tsx
@@ -28,286 +28,129 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="OX"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="OX"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="OX DESIGN"
|
||||
description="Architecting the future of AI automation and digital experience. Transforming complex workflows into seamless, futuristic visual systems."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
text: "Connect",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/futuristic-digital-designer-workspace-ai-1774696589307-2b78519e.png"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="OX DESIGN"
|
||||
description="Architecting the future of AI automation and digital experience. Transforming complex workflows into seamless, futuristic visual systems."
|
||||
buttons={[
|
||||
{ text: "View Projects", href: "#portfolio" },
|
||||
{ text: "Connect", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/futuristic-digital-designer-workspace-ai-1774696589307-2b78519e.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Intelligent Realities"
|
||||
description={[
|
||||
"I blend deep design aesthetics with high-performance AI automation.",
|
||||
"My goal is to create products that don't just function—they anticipate needs.",
|
||||
"Let's build systems that scale, inspire, and redefine digital boundaries.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Intelligent Realities"
|
||||
description={[
|
||||
"I blend deep design aesthetics with high-performance AI automation.", "My goal is to create products that don't just function—they anticipate needs.", "Let's build systems that scale, inspire, and redefine digital boundaries."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Web Development",
|
||||
description: "High-performance, responsive websites with a focus on speed and SEO.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/modern-saas-dashboard-interface-dark-the-1774696589583-a9edef72.png?_wi=1",
|
||||
imageAlt: "Web Dev",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "AI Automation",
|
||||
description: "Intelligent workflow integration to streamline complex manual processes.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/ai-automation-data-visualization-screen--1774696590703-406d322b.png?_wi=1",
|
||||
imageAlt: "AI Automation",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "UI/UX Design",
|
||||
description: "Immersive visual systems and high-fidelity interface design.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/mobile-app-ui-screen-dark-mode-purple-an-1774696589365-c08a8b64.png?_wi=1",
|
||||
imageAlt: "Design",
|
||||
},
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Premium solutions engineered for the digital age."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: 1, title: "Web Development", description: "High-performance, responsive websites with a focus on speed and SEO.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/modern-saas-dashboard-interface-dark-the-1774696589583-a9edef72.png", imageAlt: "Web Dev" },
|
||||
{ id: 2, title: "AI Automation", description: "Intelligent workflow integration to streamline complex manual processes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/ai-automation-data-visualization-screen--1774696590703-406d322b.png", imageAlt: "AI Automation" },
|
||||
{ id: 3, title: "UI/UX Design", description: "Immersive visual systems and high-fidelity interface design.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/mobile-app-ui-screen-dark-mode-purple-an-1774696589365-c08a8b64.png", imageAlt: "Design" },
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Premium solutions engineered for the digital age."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Design",
|
||||
name: "Nexus Dashboard",
|
||||
price: "AI System",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/modern-saas-dashboard-interface-dark-the-1774696589583-a9edef72.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "App",
|
||||
name: "Flux Finance",
|
||||
price: "Fintech App",
|
||||
rating: 5,
|
||||
reviewCount: "89",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/mobile-app-ui-screen-dark-mode-purple-an-1774696589365-c08a8b64.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "System",
|
||||
name: "AutoNode AI",
|
||||
price: "Automation",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/ai-automation-data-visualization-screen--1774696590703-406d322b.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A glimpse into high-impact digital solutions."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", brand: "Design", name: "Nexus Dashboard", price: "AI System", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/modern-saas-dashboard-interface-dark-the-1774696589583-a9edef72.png" },
|
||||
{ id: "p2", brand: "App", name: "Flux Finance", price: "Fintech App", rating: 5, reviewCount: "89", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/mobile-app-ui-screen-dark-mode-purple-an-1774696589365-c08a8b64.png" },
|
||||
{ id: "p3", brand: "System", name: "AutoNode AI", price: "Automation", rating: 5, reviewCount: "45", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/ai-automation-data-visualization-screen--1774696590703-406d322b.png" },
|
||||
]}
|
||||
title="Selected Works"
|
||||
description="A glimpse into high-impact digital solutions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "s1",
|
||||
icon: Code,
|
||||
title: "Development",
|
||||
value: "95%",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
icon: Lightbulb,
|
||||
title: "AI Integration",
|
||||
value: "98%",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
icon: Palette,
|
||||
title: "UI Design",
|
||||
value: "92%",
|
||||
},
|
||||
]}
|
||||
title="Tech Stack"
|
||||
description="Continuous evolution in emerging technologies."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<MetricCardThree
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "s1", icon: Code, title: "Development", value: "95%" },
|
||||
{ id: "s2", icon: Lightbulb, title: "AI Integration", value: "98%" },
|
||||
{ id: "s3", icon: Palette, title: "UI Design", value: "92%" },
|
||||
]}
|
||||
title="Tech Stack"
|
||||
description="Continuous evolution in emerging technologies."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Marcus V.",
|
||||
role: "CEO",
|
||||
testimonial: "Exceptional vision and execution. The AI workflows changed how we operate.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-friendly-expression-s-1774696588371-544aef70.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Sarah J.",
|
||||
role: "Founder",
|
||||
testimonial: "A true professional. Brought a futuristic design that impressed all our investors.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-professional-setting--1774696590541-3582671f.png",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "David L.",
|
||||
role: "Product Manager",
|
||||
testimonial: "Understands complex design better than anyone I've met.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-neutral-background-sh-1774696591840-34970d70.png",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Emma R.",
|
||||
role: "Marketing",
|
||||
testimonial: "Responsive, creative, and highly technical. Highly recommend.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-creative-professional-1774696588481-8b7cffe4.png",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Alex K.",
|
||||
role: "CTO",
|
||||
testimonial: "The precision and speed of delivery were unmatched.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-friendly-expression-s-1774696588371-544aef70.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Partnerships built on quality and results."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Marcus V.", role: "CEO", testimonial: "Exceptional vision and execution. The AI workflows changed how we operate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-friendly-expression-s-1774696588371-544aef70.png" },
|
||||
{ id: "t2", name: "Sarah J.", role: "Founder", testimonial: "A true professional. Brought a futuristic design that impressed all our investors.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-professional-setting--1774696590541-3582671f.png" },
|
||||
{ id: "t3", name: "David L.", role: "Product Manager", testimonial: "Understands complex design better than anyone I've met.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-neutral-background-sh-1774696591840-34970d70.png" },
|
||||
{ id: "t4", name: "Emma R.", role: "Marketing", testimonial: "Responsive, creative, and highly technical. Highly recommend.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-creative-professional-1774696588481-8b7cffe4.png" },
|
||||
{ id: "t5", name: "Alex K.", role: "CTO", testimonial: "The precision and speed of delivery were unmatched.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/avatar-of-a-client-friendly-expression-s-1774696588371-544aef70.png" },
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Partnerships built on quality and results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Collaborate"
|
||||
description="Ready to build something extraordinary? Send a message to discuss your next project."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message",
|
||||
}}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/abstract-background-with-glowing-particl-1774696588401-cf557d2f.png"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Collaborate"
|
||||
description="Ready to build something extraordinary? Send a message to discuss your next project."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your message" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZVMHKHaENRfRx1SCypZPFWzKs/abstract-background-with-glowing-particl-1774696588401-cf557d2f.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
items: [
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Case Studies",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:hello@ox.design",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 OX Design. All rights reserved."
|
||||
bottomRightText="Built with precision."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Portfolio", items: [{ label: "Projects", href: "#portfolio" }, { label: "Case Studies", href: "#" }] },
|
||||
{ title: "Socials", items: [{ label: "LinkedIn", href: "#" }, { label: "Instagram", href: "#" }, { label: "Email", href: "mailto:hello@ox.design" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 OX Design. All rights reserved."
|
||||
bottomRightText="Built with precision."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user