Merge version_2 into main #2
197
src/app/page.tsx
197
src/app/page.tsx
@@ -3,11 +3,9 @@
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { Sparkles, Users, Globe, Zap, Layers, Twitter, Instagram, Linkedin, Target, ShieldCheck, DollarSign } from "lucide-react";
|
||||
import { Users, Globe, Zap, Layers, ShieldCheck, Target } from "lucide-react";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||||
@@ -36,97 +34,108 @@ export default function WebAgencyThemePage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="HOMNEX"
|
||||
button={{ text: "Get in Touch", href: "#contact" }}
|
||||
/>
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Scale Your Future with HOMNEX"
|
||||
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
|
||||
enableKpiAnimation={true}
|
||||
kpis={[
|
||||
{ value: "150+", label: "Projects Delivered" },
|
||||
{ value: "98%", label: "Client Satisfaction" },
|
||||
{ value: "12+", label: "Years Experience" },
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#pricing" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero1.webp"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
<FeatureCardTen
|
||||
id="process"
|
||||
tag="How We Work"
|
||||
tagIcon={Layers}
|
||||
title="Our Proven Methodology"
|
||||
description="A structured approach that turns your vision into results, every step of the way."
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Discovery & Strategy", description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how1.webp" },
|
||||
reverse: false,
|
||||
items: [{ icon: Target, text: "Strategy alignment" }, { icon: Users, text: "Audience analysis" }],
|
||||
},
|
||||
{
|
||||
title: "Design & Prototyping", description: "We translate strategy into visual concepts, iterating with you until every detail feels right.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how2.webp" },
|
||||
reverse: true,
|
||||
items: [{ icon: Layers, text: "UX design" }, { icon: Zap, text: "Prototyping" }],
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<FeatureCardNineteen
|
||||
id="who-its-for"
|
||||
tag="Who It's For"
|
||||
tagIcon={Users}
|
||||
title="Designed for Ambition"
|
||||
description="Built for teams that need performance, reliability, and scale."
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "01", subtitle: "Startups", description: "Rapid growth and agile solutions for early-stage companies." },
|
||||
{ title: "02", subtitle: "Enterprises", description: "High-performance scaling for global operations." },
|
||||
]}
|
||||
/>
|
||||
<MetricCardEleven
|
||||
id="why-homnex"
|
||||
title="Why HOMNEX"
|
||||
description="Unmatched excellence in digital product design."
|
||||
metrics={[
|
||||
{ id: "perf", value: "99.9%", title: "Reliability", description: "Your digital infrastructure, always online.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp" },
|
||||
{ id: "sec", value: "100%", title: "Secure", description: "Enterprise-grade protection for your data.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
<PricingCardFive
|
||||
id="pricing"
|
||||
title="Transparent Pricing"
|
||||
description="Choose the plan that suits your growth."
|
||||
animationType="blur-reveal"
|
||||
plans={[
|
||||
{ id: "pro", tag: "Standard", price: "$99", period: "/mo", description: "Everything you need to get started.", button: { text: "Buy Now" }, featuresTitle: "Core features:", features: ["Responsive design", "Basic SEO", "Support"] },
|
||||
{ id: "elite", tag: "Elite", tagIcon: ShieldCheck, price: "$299", period: "/mo", description: "Full-scale professional solutions.", button: { text: "Upgrade" }, featuresTitle: "Everything in Pro, plus:", features: ["Custom development", "Dedicated Manager", "Analytics"] }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
<ContactSplit
|
||||
id="contact"
|
||||
tag="Final CTA"
|
||||
title="Ready to Build?"
|
||||
description="Let's transform your vision into a reality."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp"
|
||||
/>
|
||||
<FooterLogoEmphasis
|
||||
logoText="HOMNEX"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#home" }, { label: "Services", href: "#" }] },
|
||||
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="HOMNEX"
|
||||
button={{ text: "Get in Touch", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Scale Your Future with HOMNEX"
|
||||
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
|
||||
enableKpiAnimation={true}
|
||||
kpis={[
|
||||
{ value: "150+", label: "Projects Delivered" },
|
||||
{ value: "98%", label: "Client Satisfaction" },
|
||||
{ value: "12+", label: "Years Experience" },
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "#pricing" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero1.webp"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardTen
|
||||
tag="How We Work"
|
||||
tagIcon={Layers}
|
||||
title="Our Proven Methodology"
|
||||
description="A structured approach that turns your vision into results, every step of the way."
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Discovery & Strategy", description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how1.webp" },
|
||||
reverse: false,
|
||||
items: [{ icon: Target, text: "Strategy alignment" }, { icon: Users, text: "Audience analysis" }],
|
||||
},
|
||||
{
|
||||
title: "Design & Prototyping", description: "We translate strategy into visual concepts, iterating with you until every detail feels right.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how2.webp" },
|
||||
reverse: true,
|
||||
items: [{ icon: Layers, text: "UX design" }, { icon: Zap, text: "Prototyping" }],
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="who-its-for" data-section="who-its-for">
|
||||
<FeatureCardNineteen
|
||||
tag="Who It's For"
|
||||
tagIcon={Users}
|
||||
title="Designed for Ambition"
|
||||
description="Built for teams that need performance, reliability, and scale."
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "01", subtitle: "Startups", description: "Rapid growth and agile solutions for early-stage companies." },
|
||||
{ title: "02", subtitle: "Enterprises", description: "High-performance scaling for global operations." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="why-homnex" data-section="why-homnex">
|
||||
<MetricCardEleven
|
||||
title="Why HOMNEX"
|
||||
description="Unmatched excellence in digital product design."
|
||||
metrics={[
|
||||
{ value: "99.9%", title: "Reliability", description: "Your digital infrastructure, always online.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp" },
|
||||
{ value: "100%", title: "Secure", description: "Enterprise-grade protection for your data.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Transparent Pricing"
|
||||
description="Choose the plan that suits your growth."
|
||||
animationType="blur-reveal"
|
||||
plans={[
|
||||
{ tag: "Standard", price: "$99", period: "/mo", description: "Everything you need to get started.", button: { text: "Buy Now" }, featuresTitle: "Core features:", features: ["Responsive design", "Basic SEO", "Support"] },
|
||||
{ tag: "Elite", tagIcon: ShieldCheck, price: "$299", period: "/mo", description: "Full-scale professional solutions.", button: { text: "Upgrade" }, featuresTitle: "Everything in Pro, plus:", features: ["Custom development", "Dedicated Manager", "Analytics"] }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Final CTA"
|
||||
title="Ready to Build?"
|
||||
description="Let's transform your vision into a reality."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="HOMNEX"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#home" }, { label: "Services", href: "#" }] },
|
||||
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user