308 lines
13 KiB
TypeScript
308 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Rocket, Star, Zap, Heart, TrendingUp, Award, Users, Twitter, Linkedin, Github, Mail } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "Portfolio", id: "/portfolio" },
|
|
{ name: "Contact", id: "/contact" },
|
|
];
|
|
|
|
const handleNavClick = (id: string) => {
|
|
if (id.startsWith("/")) {
|
|
window.location.href = id;
|
|
} else {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Get Started",
|
|
href: "/contact",
|
|
}}
|
|
brandName="Clean Tech"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Build Your Business Website With Clean Tech"
|
|
description="We create stunning, high-performance business websites that drive growth and convert visitors into customers. From design to deployment, we handle it all."
|
|
tag="Web Development"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "noise" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/a-modern-software-dashboard-interface-sh-1772656046259-dd77da7a.png"
|
|
imageAlt="Clean Tech dashboard interface"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "/contact" },
|
|
{ text: "View Our Work", href: "/portfolio" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Who We Are"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
title="We transform businesses through thoughtful web design and cutting-edge development. Clean Tech specializes in creating websites that not only look beautiful but drive real results for your business."
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn Our Process", href: "/services" },
|
|
{ text: "Get a Free Quote", href: "/contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
title="Our Services"
|
|
description="Comprehensive web solutions tailored to your business needs"
|
|
tag="What We Do"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Custom Web Design",
|
|
description: "Beautiful, responsive websites designed specifically for your brand and audience.",
|
|
phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/a-smartphone-mockup-displaying-a-modern--1772656044573-5d6a68f7.png?_wi=1",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/another-smartphone-display-showing-a-bea-1772656044937-2fce6bab.png?_wi=1",
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Full-Stack Development",
|
|
description: "Robust, scalable web applications built with the latest technologies and best practices.",
|
|
phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/a-developer-s-workspace-showing-code-edi-1772656045133-8eed1e53.png?_wi=1",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/a-smartphone-mockup-showing-a-full-stack-1772656045624-194a87d6.png?_wi=1",
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "E-Commerce Solutions",
|
|
description: "Complete online stores with secure payment processing and inventory management.",
|
|
phoneOne: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/a-smartphone-mockup-displaying-an-e-comm-1772656044591-00be9f4c.png?_wi=1",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/another-smartphone-view-showing-an-e-com-1772656044552-81feacb7.png?_wi=1",
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Impact"
|
|
description="Proven results that speak for themselves"
|
|
tag="By The Numbers"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "500+",
|
|
title: "Projects Completed",
|
|
description: "Successful websites and applications delivered",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "98%",
|
|
title: "Client Satisfaction",
|
|
description: "Average satisfaction rating across all projects",
|
|
icon: Star,
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "7 Years",
|
|
title: "Industry Experience",
|
|
description: "Building quality web solutions since 2018",
|
|
icon: Award,
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "45+",
|
|
title: "Team Members",
|
|
description: "Talented designers and developers",
|
|
icon: Users,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Chen",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-woma-1772656043717-6e032308.png?_wi=1",
|
|
imageAlt: "Sarah Chen",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael Rodriguez",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-man--1772656043424-0bd77ce1.png?_wi=1",
|
|
imageAlt: "Michael Rodriguez",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily Watson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-woma-1772656043702-0cb9a490.png?_wi=1",
|
|
imageAlt: "Emily Watson",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "James Patterson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-man--1772656043990-69507e5c.png?_wi=1",
|
|
imageAlt: "James Patterson",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Lisa Johnson",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-woma-1772656043964-0a6b7615.png",
|
|
imageAlt: "Lisa Johnson",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "David Kim",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUnO7hTAR4DUTZL30lOgUKcOJI/professional-headshot-of-a-business-man--1772656043481-85ec205d.png",
|
|
imageAlt: "David Kim",
|
|
},
|
|
]}
|
|
cardTitle="Trusted by 500+ businesses who've transformed their online presence with Clean Tech"
|
|
cardTag="Client Success Stories"
|
|
cardTagIcon={Heart}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our services and process"
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How long does a typical website project take?",
|
|
content: "Project timelines vary based on complexity and scope. A standard business website typically takes 6-12 weeks from discovery to launch. More complex applications may take 3-6 months. We'll provide a detailed timeline during your initial consultation.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "What is your process for web development?",
|
|
content: "Our process includes: Discovery & Strategy, Design & Prototyping, Development & Testing, Launch & Optimization, and Ongoing Support. We maintain clear communication throughout and involve you at each stage.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Do you provide ongoing maintenance and support?",
|
|
content: "Yes! We offer comprehensive support packages including security updates, performance monitoring, content updates, and technical support. Most of our clients are on long-term maintenance plans.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What technologies do you work with?",
|
|
content: "We specialize in modern web technologies including React, Next.js, Node.js, TypeScript, and more. We choose the right tech stack based on your specific needs and business goals.",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Can you help with SEO?",
|
|
content: "Absolutely! SEO is built into our development process. We follow best practices for site speed, mobile optimization, structured data, and content optimization to ensure your website ranks well in search engines.",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "How much does a website cost?",
|
|
content: "Pricing depends on your project's scope and requirements. Simple websites start around $5K, while complex applications can range from $20K-$100K+. We provide custom quotes after understanding your needs.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Clean Tech"
|
|
copyrightText="© 2025 Clean Tech. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/cleantech",
|
|
ariaLabel: "Twitter",
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/cleantech",
|
|
ariaLabel: "LinkedIn",
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com/cleantech",
|
|
ariaLabel: "GitHub",
|
|
},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@cleantech.com",
|
|
ariaLabel: "Email",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |