Merge version_1 into main #1
439
src/app/page.tsx
439
src/app/page.tsx
@@ -17,312 +17,161 @@ import { Globe, Palette, Zap } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
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: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="EAI DEV"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="EAI DEV"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Digital Solutions for Growth"
|
||||
description="EAI DEV builds professional, fast, and visually appealing digital experiences that help your business thrive online."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-woman-business-embrace-confidence-posing-beauty-black-african-american-isolated-gray-background_640221-39.jpg",
|
||||
alt: "professional portrait corporate leader",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-hispanic-woman-wearing-business-jacket-looking-confident-camera-smiling-with-crossed-arms-hand-raised-chin-thinking-positive_839833-8974.jpg",
|
||||
alt: "happy female entrepreneur portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/african-american-male-professional-works-desk-corporation_482257-122689.jpg",
|
||||
alt: "diverse business man executive portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-aside-smiling-confident-with-arms-crossed-chest_141793-55366.jpg",
|
||||
alt: "professional woman ceo portrait",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
alt: "young tech entrepreneur studio shot",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Next.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "TypeScript",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Tailwind CSS",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Framer Motion",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cloud Infrastructure",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "plain" }}
|
||||
title="Digital Solutions for Growth"
|
||||
description="EAI DEV builds professional, fast, and visually appealing digital experiences that help your business thrive online."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-business-embrace-confidence-posing-beauty-black-african-american-isolated-gray-background_640221-39.jpg", alt: "professional portrait corporate leader" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-hispanic-woman-wearing-business-jacket-looking-confident-camera-smiling-with-crossed-arms-hand-raised-chin-thinking-positive_839833-8974.jpg", alt: "happy female entrepreneur portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/african-american-male-professional-works-desk-corporation_482257-122689.jpg", alt: "diverse business man executive portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-aside-smiling-confident-with-arms-crossed-chest_141793-55366.jpg", alt: "professional woman ceo portrait" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg", alt: "young tech entrepreneur studio shot" }
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Next.js" },
|
||||
{ type: "text", text: "TypeScript" },
|
||||
{ type: "text", text: "Tailwind CSS" },
|
||||
{ type: "text", text: "Framer Motion" },
|
||||
{ type: "text", text: "Cloud Infrastructure" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Innovation Meets Creativity"
|
||||
description="We blend cutting-edge technology with creative strategies to deliver websites that don't just look good but drive real business results."
|
||||
metrics={[
|
||||
{
|
||||
value: "100+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "95%",
|
||||
title: "Client Retention",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994335.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Innovation Meets Creativity"
|
||||
description="We blend cutting-edge technology with creative strategies to deliver websites that don't just look good but drive real business results."
|
||||
metrics={[
|
||||
{ value: "100+", title: "Projects Completed" },
|
||||
{ value: "95%", title: "Client Retention" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994335.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Website Development",
|
||||
description: "High-performance, secure, and fast websites built with modern stacks.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Modern UI/UX Design",
|
||||
description: "Engaging, intuitive design patterns that convert visitors into customers.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Creative Strategy",
|
||||
description: "Data-driven creative solutions to improve your online brand presence.",
|
||||
},
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Comprehensive digital solutions tailored to your unique requirements."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Globe, title: "Website Development", description: "High-performance, secure, and fast websites built with modern stacks." },
|
||||
{ icon: Palette, title: "Modern UI/UX Design", description: "Engaging, intuitive design patterns that convert visitors into customers." },
|
||||
{ icon: Zap, title: "Creative Strategy", description: "Data-driven creative solutions to improve your online brand presence." }
|
||||
]}
|
||||
title="Our Expertise"
|
||||
description="Comprehensive digital solutions tailored to your unique requirements."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "2x",
|
||||
description: "Average Performance Increase",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "30%",
|
||||
description: "Average Growth Lift",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "0.8s",
|
||||
description: "Avg Load Speed",
|
||||
},
|
||||
]}
|
||||
title="Measurable Results"
|
||||
description="Delivering impact through numbers and data-driven performance."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "2x", description: "Average Performance Increase" },
|
||||
{ id: "m2", value: "30%", description: "Average Growth Lift" },
|
||||
{ id: "m3", value: "0.8s", description: "Avg Load Speed" }
|
||||
]}
|
||||
title="Measurable Results"
|
||||
description="Delivering impact through numbers and data-driven performance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"TechCorp",
|
||||
"InnovateLab",
|
||||
"GrowthCo",
|
||||
"StartupXYZ",
|
||||
"DigitalWave",
|
||||
]}
|
||||
title="Trusted Partners"
|
||||
description="Working with forward-thinking businesses to build the future."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "DigitalWave"]}
|
||||
title="Trusted Partners"
|
||||
description="Working with forward-thinking businesses to build the future."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
company: "TechCorp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "CTO",
|
||||
company: "InnovateLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-3843.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Marketing Director",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-copy-space_23-2149636314.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Product Manager",
|
||||
company: "StartupXYZ",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Anna Smith",
|
||||
role: "Founder",
|
||||
company: "DigitalWave",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What our clients say about our partnership."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg" },
|
||||
{ id: "2", name: "Michael Chen", role: "CTO", company: "InnovateLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-3843.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", role: "Marketing Director", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-with-copy-space_23-2149636314.jpg" },
|
||||
{ id: "4", name: "David Kim", role: "Product Manager", company: "StartupXYZ", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg" },
|
||||
{ id: "5", name: "Anna Smith", role: "Founder", company: "DigitalWave", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" }
|
||||
]}
|
||||
title="Client Success"
|
||||
description="What our clients say about our partnership."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does it take?",
|
||||
content: "Development times vary by project, typically ranging from 4-8 weeks.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What technologies do you use?",
|
||||
content: "We use modern stacks including Next.js, TypeScript, and Tailwind CSS.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do we get started?",
|
||||
content: "Simply reach out via our contact form to schedule a discovery call.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "How long does it take?", content: "Development times vary by project, typically ranging from 4-8 weeks." },
|
||||
{ id: "2", title: "What technologies do you use?", content: "We use modern stacks including Next.js, TypeScript, and Tailwind CSS." },
|
||||
{ id: "3", title: "How do we get started?", content: "Simply reach out via our contact form to schedule a discovery call." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Let's Connect"
|
||||
title="Ready to scale your business?"
|
||||
description="Reach out to discuss your digital goals and how we can bring them to life."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Connect"
|
||||
title="Ready to scale your business?"
|
||||
description="Reach out to discuss your digital goals and how we can bring them to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="EAI DEV"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="EAI DEV"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user