408 lines
16 KiB
TypeScript
408 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import Link from "next/link";
|
|
import { Sparkles, Zap, Award, Users, Mail, TrendingUp } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Work", id: "portfolio" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Services", href: "/services" },
|
|
{ label: "Portfolio", href: "/portfolio" },
|
|
{ label: "Team", href: "/team" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Blog", href: "/#" },
|
|
{ label: "Careers", href: "/#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Privacy", href: "/#" },
|
|
{ label: "Terms", href: "/#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Webuild"
|
|
navItems={navItems}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="We Build Websites That Convert"
|
|
description="Award-winning web design agency crafting beautiful, high-performing websites for ambitious brands. From concept to launch, we deliver digital excellence."
|
|
tag="Web Design Excellence"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "aurora" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/modern-minimalist-website-interface-desi-1773298645286-0a4cb084.png",
|
|
imageAlt: "Modern website interface design"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/web-design-portfolio-mockup-displaying-m-1773298645326-e75e6ee6.png",
|
|
imageAlt: "Web design mockup showcase"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/creative-digital-design-workspace-with-t-1773298644814-08423686.png",
|
|
imageAlt: "Digital design portfolio"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/premium-website-interface-design-showing-1773298645316-f0501756.png",
|
|
imageAlt: "Creative web interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-web-design-agency-homepage--1773298645011-efa33dbd.png",
|
|
imageAlt: "Professional website design"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View Our Work",
|
|
href: "#portfolio"
|
|
},
|
|
{
|
|
text: "Start Your Project",
|
|
href: "/contact"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="We're Designers & Developers Who Create Impact"
|
|
description={[
|
|
"Webuild is a full-service web design and development agency. We combine strategic thinking, creative design, and technical expertise to build websites that don't just look good—they drive real results for your business.",
|
|
"With over 50 successful projects across diverse industries, we've learned what it takes to create digital experiences that engage users and convert visitors into customers. Our collaborative approach ensures your vision becomes reality."
|
|
]}
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Learn More About Us",
|
|
href: "/about"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwelve
|
|
title="What We Do Best"
|
|
description="Comprehensive web design and development services tailored to your unique business needs and goals."
|
|
tag="Our Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "web-design",
|
|
label: "Design",
|
|
title: "Strategic Web Design",
|
|
items: [
|
|
"Responsive layouts for all devices",
|
|
"User-centered design approach",
|
|
"Brand-aligned visual identity",
|
|
"Modern interface design"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Learn More",
|
|
href: "/services"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "development",
|
|
label: "Development",
|
|
title: "Full-Stack Development",
|
|
items: [
|
|
"Fast, optimized performance",
|
|
"SEO-ready architecture",
|
|
"Secure and scalable solutions",
|
|
"Cross-browser compatibility"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Learn More",
|
|
href: "/services"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "strategy",
|
|
label: "Strategy",
|
|
title: "Digital Strategy & Consulting",
|
|
items: [
|
|
"Business goal alignment",
|
|
"Market research insights",
|
|
"User journey optimization",
|
|
"Growth-focused recommendations"
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Learn More",
|
|
href: "/services"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardThree
|
|
title="Featured Projects"
|
|
description="Explore our recent work and see the impact we've created for our clients across various industries."
|
|
tag="Our Portfolio"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "project-1",
|
|
name: "TechFlow - SaaS Platform",
|
|
price: "Enterprise Solution",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/saas-dashboard-interface-with-data-visua-1773298645355-89df8d87.png?_wi=1",
|
|
imageAlt: "TechFlow SaaS dashboard design",
|
|
initialQuantity: 1
|
|
},
|
|
{
|
|
id: "project-2",
|
|
name: "Luxe Retail - E-commerce Store",
|
|
price: "Full Development",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/luxury-e-commerce-website-showcasing-hig-1773298645364-f348b668.png?_wi=1",
|
|
imageAlt: "Luxe Retail e-commerce website",
|
|
initialQuantity: 1
|
|
},
|
|
{
|
|
id: "project-3",
|
|
name: "HealthHub - Medical Platform",
|
|
price: "Custom Build",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/medical-platform-interface-with-healthca-1773298645303-7a218c92.png?_wi=1",
|
|
imageAlt: "HealthHub medical platform interface",
|
|
initialQuantity: 1
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View Full Portfolio",
|
|
href: "#portfolio"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Meet Our Creative Team"
|
|
description="Talented designers, developers, and strategists dedicated to bringing your vision to life with expertise and passion."
|
|
tag="Our Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
members={[
|
|
{
|
|
id: "member-1",
|
|
name: "Sarah Chen",
|
|
role: "Creative Director",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-creative-woma-1773298643520-d3685aa1.png?_wi=1"
|
|
},
|
|
{
|
|
id: "member-2",
|
|
name: "Marcus Johnson",
|
|
role: "Lead Developer",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-male-develope-1773298643388-04e6310f.png?_wi=1"
|
|
},
|
|
{
|
|
id: "member-3",
|
|
name: "Elena Rodriguez",
|
|
role: "UI/UX Designer",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-ui-ux-d-1773298645213-acd425bf.png?_wi=1"
|
|
},
|
|
{
|
|
id: "member-4",
|
|
name: "David Kumar",
|
|
role: "Strategy Lead",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-strategy--1773298645064-9c05ec17.png?_wi=1"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Webuild transformed our digital presence. Their strategic approach and attention to detail resulted in a website that not only looks stunning but drives real business results. Highly recommended!"
|
|
rating={5}
|
|
author="Jennifer Williams, CEO of TechFlow"
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-confident-wom-1773298645405-26516181.png",
|
|
alt: "Jennifer Williams"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-busine-1773298645239-ead247b3.png",
|
|
alt: "Client testimonial"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-with-wa-1773298643311-142996d5.png",
|
|
alt: "Satisfied customer"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-diverse-man-i-1773298645259-5b0324ee.png",
|
|
alt: "Business partner"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-woman-entrepr-1773298645138-b5061219.png",
|
|
alt: "Happy client"
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/professional-headshot-of-a-man-in-modern-1773298644720-3c698e00.png",
|
|
alt: "Webuild client"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Our Track Record"
|
|
description="Numbers that demonstrate our commitment to excellence and client success."
|
|
tag="By The Numbers"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "clients",
|
|
value: "50+",
|
|
title: "Happy Clients",
|
|
items: [
|
|
"Across 12+ industries",
|
|
"98% satisfaction rate"
|
|
]
|
|
},
|
|
{
|
|
id: "projects",
|
|
value: "150+",
|
|
title: "Projects Delivered",
|
|
items: [
|
|
"From startups to enterprises",
|
|
"Award-winning work"
|
|
]
|
|
},
|
|
{
|
|
id: "team",
|
|
value: "25",
|
|
title: "Team Members",
|
|
items: [
|
|
"Designers and developers",
|
|
"Strategic thinkers"
|
|
]
|
|
},
|
|
{
|
|
id: "experience",
|
|
value: "10+",
|
|
title: "Years in Industry",
|
|
items: [
|
|
"Proven track record",
|
|
"Continuous innovation"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-section" data-section="contact-section">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
title="Ready to Build Something Amazing?"
|
|
description="Let's discuss your project and how we can help bring your vision to life. Reach out today to schedule a consultation."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ApnqSRMKMirhtVTTPS9dBhgxZV/team-collaboration-scene-showing-designe-1773298645817-616aa0fd.png?_wi=1"
|
|
imageAlt="Team collaboration scene showing designers and developers working together on web projects. Modern o"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get in Touch"
|
|
termsText="We respect your privacy. We'll only use your email to discuss your project and send updates about our services."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Webuild"
|
|
columns={footerColumns}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |