Merge version_1 into main #1
395
src/app/page.tsx
395
src/app/page.tsx
@@ -16,281 +16,146 @@ import { Award, Clock, LayoutDashboard, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Nexus"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Nexus"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Defining the Future of Professional Excellence"
|
||||
description="We build sophisticated solutions for modern brands, balancing minimalist aesthetics with high-performance results."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-geometrical-background-with-white-triangles_23-2148811537.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
|
||||
alt: "Client Portrait 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6597.jpg",
|
||||
alt: "Client Portrait 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
||||
alt: "Client Portrait 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-woman-black-blazer-portrait_23-2152009548.jpg",
|
||||
alt: "Client Portrait 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middle-aged-businessman-black-background_176420-5559.jpg",
|
||||
alt: "Client Portrait 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50+ industry leaders"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Defining the Future of Professional Excellence"
|
||||
description="We build sophisticated solutions for modern brands, balancing minimalist aesthetics with high-performance results."
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-geometrical-background-with-white-triangles_23-2148811537.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg", alt: "Client Portrait 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6597.jpg", alt: "Client Portrait 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg", alt: "Client Portrait 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-woman-black-blazer-portrait_23-2152009548.jpg", alt: "Client Portrait 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middle-aged-businessman-black-background_176420-5559.jpg", alt: "Client Portrait 5" },
|
||||
]}
|
||||
avatarText="Trusted by 50+ industry leaders"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Us"
|
||||
title="Crafting Digital Experiences"
|
||||
description="We believe in the power of simplicity. Every project we touch is an opportunity to streamline processes and elevate brand perception through thoughtful design."
|
||||
subdescription="Our team combines technical expertise with creative vision to ensure your business stays ahead of the curve."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/thoughtful-woman-with-studies-n-cafeteria_23-2147778672.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={LayoutDashboard}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="About Us"
|
||||
title="Crafting Digital Experiences"
|
||||
description="We believe in the power of simplicity. Every project we touch is an opportunity to streamline processes and elevate brand perception through thoughtful design."
|
||||
subdescription="Our team combines technical expertise with creative vision to ensure your business stays ahead of the curve."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/thoughtful-woman-with-studies-n-cafeteria_23-2147778672.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={LayoutDashboard}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Scalable Growth",
|
||||
description: "Adaptive infrastructure for expanding business needs.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f014th",
|
||||
},
|
||||
{
|
||||
title: "Data-Driven Insights",
|
||||
description: "Make informed decisions with our analytics engine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg",
|
||||
},
|
||||
{
|
||||
title: "Seamless Integration",
|
||||
description: "Unified workflow management for your team.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-grey-craftpapers-blue-surface_23-2147878451.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Nexus?"
|
||||
description="Integrated tools and services designed to scale your operations effortlessly."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Scalable Growth", description: "Adaptive infrastructure for expanding business needs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f014th" },
|
||||
{ title: "Data-Driven Insights", description: "Make informed decisions with our analytics engine.", imageSrc: "http://img.b2bpic.net/free-photo/business-analytics-financial-technology-concept-generative-ai_8829-2894.jpg" },
|
||||
{ title: "Seamless Integration", description: "Unified workflow management for your team.", imageSrc: "http://img.b2bpic.net/free-photo/three-grey-craftpapers-blue-surface_23-2147878451.jpg" },
|
||||
]}
|
||||
title="Why Choose Nexus?"
|
||||
description="Integrated tools and services designed to scale your operations effortlessly."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "200%",
|
||||
title: "Efficiency Gain",
|
||||
description: "Across internal workflows.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50+",
|
||||
title: "Clients Served",
|
||||
description: "Globally trusted partners.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15k",
|
||||
title: "Hours Saved",
|
||||
description: "For our client teams.",
|
||||
icon: Clock,
|
||||
},
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Hard numbers that show our impact on your business trajectory."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "200%", title: "Efficiency Gain", description: "Across internal workflows.", icon: Zap },
|
||||
{ id: "m2", value: "50+", title: "Clients Served", description: "Globally trusted partners.", icon: Award },
|
||||
{ id: "m3", value: "15k", title: "Hours Saved", description: "For our client teams.", icon: Clock },
|
||||
]}
|
||||
title="Proven Results"
|
||||
description="Hard numbers that show our impact on your business trajectory."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Rivet",
|
||||
role: "CEO",
|
||||
testimonial: "Nexus transformed how we approach digital projects.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6622.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Chen",
|
||||
role: "CTO",
|
||||
testimonial: "Exceptional expertise and unmatched attention to detail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-crossed-arms-wearing-wool-suit_613910-1866.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "James Miller",
|
||||
role: "VP",
|
||||
testimonial: "Their strategy led to record growth for us.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happily-with-hand-hip-confident-positive-proud-friendly-attitude_1194-633391.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Elena Ross",
|
||||
role: "Director",
|
||||
testimonial: "Professional, efficient, and deeply creative.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-black-hat-posing-white-wall_176420-8471.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Mark D.",
|
||||
role: "Founder",
|
||||
testimonial: "The best partner for our digital transformation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17815.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What leaders say about their transformation."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex Rivet", role: "CEO", testimonial: "Nexus transformed how we approach digital projects.", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6622.jpg" },
|
||||
{ id: "2", name: "Sarah Chen", role: "CTO", testimonial: "Exceptional expertise and unmatched attention to detail.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-crossed-arms-wearing-wool-suit_613910-1866.jpg" },
|
||||
{ id: "3", name: "James Miller", role: "VP", testimonial: "Their strategy led to record growth for us.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-happily-with-hand-hip-confident-positive-proud-friendly-attitude_1194-633391.jpg" },
|
||||
{ id: "4", name: "Elena Ross", role: "Director", testimonial: "Professional, efficient, and deeply creative.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-black-hat-posing-white-wall_176420-8471.jpg" },
|
||||
{ id: "5", name: "Mark D.", role: "Founder", testimonial: "The best partner for our digital transformation.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17815.jpg" },
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What leaders say about their transformation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do we start?",
|
||||
content: "Schedule a discovery call with our team.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer support?",
|
||||
content: "Yes, we provide 24/7 dedicated support.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can you scale?",
|
||||
content: "Our solutions grow with your business needs.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Quick answers to common inquiries about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do we start?", content: "Schedule a discovery call with our team." },
|
||||
{ id: "q2", title: "Do you offer support?", content: "Yes, we provide 24/7 dedicated support." },
|
||||
{ id: "q3", title: "Can you scale?", content: "Our solutions grow with your business needs." },
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Quick answers to common inquiries about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Connect"
|
||||
description="Ready to elevate your business? Reach out to us today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-hotel-lobby-interior_74190-4868.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Let's Connect"
|
||||
description="Ready to elevate your business? Reach out to us today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-hotel-lobby-interior_74190-4868.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Nexus"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Strategy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Growth",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Nexus"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Strategy", href: "#" }, { label: "Growth", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user