179 lines
6.5 KiB
TypeScript
179 lines
6.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Zap, Smartphone, Search } from "lucide-react";
|
|
|
|
export default function ServicesPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "About", id: "about" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{ label: "Website Design", href: "/services" },
|
|
{ label: "Website Redesign", href: "/services" },
|
|
{ label: "Mobile Optimization", href: "/services" },
|
|
{ label: "Local SEO", href: "/services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Portfolio", href: "portfolio" },
|
|
{ label: "Pricing", href: "pricing" },
|
|
{ label: "Contact", href: "contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Disclaimer", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="fluid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Webuild"
|
|
navItems={navItems.map((item) => ({
|
|
name: item.name,
|
|
id: item.id,
|
|
}))}
|
|
button={{
|
|
text: "Get Your Website",
|
|
href: "contact",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services-overview" data-section="services-overview">
|
|
<FeatureBorderGlow
|
|
title="Our Web Design Services"
|
|
description="Comprehensive solutions tailored to help your local business attract more customers and generate consistent leads"
|
|
features={[
|
|
{
|
|
icon: Zap,
|
|
title: "Custom Website Design",
|
|
description:
|
|
"Beautiful, high-converting websites built specifically for your business. We create unique designs that reflect your brand and engage your target audience.",
|
|
},
|
|
{
|
|
icon: Smartphone,
|
|
title: "Mobile Optimization",
|
|
description:
|
|
"Fully responsive designs that look perfect on all devices. With over 60% of web traffic from mobile, we ensure your site performs flawlessly everywhere.",
|
|
},
|
|
{
|
|
icon: Search,
|
|
title: "SEO & Lead Generation",
|
|
description:
|
|
"Websites optimized for search engines to attract qualified leads. We implement proven SEO strategies to help your business rank higher and capture more customers.",
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="service-process" data-section="service-process">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Process"
|
|
tagIcon={Zap}
|
|
title="How We Create Your Perfect Website"
|
|
description="Our proven process ensures that every website we build is tailored to your business goals, optimized for conversions, and built to grow with your business. From discovery to launch, we keep you involved every step of the way."
|
|
metrics={[
|
|
{ value: "2-4", title: "Weeks from start to launch" },
|
|
{ value: "100%", title: "Mobile responsive on all devices" },
|
|
]}
|
|
useInvertedBackground={true}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUYJU6LXiTBEy0Kb9BXpupMdnR/a-professional-business-owner-or-entrepr-1772817344297-fb9fc28e.png?_wi=2"
|
|
imageAlt="Web design process and team collaboration"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services-contact" data-section="services-contact">
|
|
<ContactSplitForm
|
|
title="Ready to Get Started?"
|
|
description="Let's discuss how our web design services can transform your business. Schedule a free consultation with our team and we'll create a custom plan for your success."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email Address",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "service",
|
|
type: "text",
|
|
placeholder: "Service Interested In",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "details",
|
|
placeholder: "Tell us about your project...",
|
|
rows: 4,
|
|
required: false,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUYJU6LXiTBEy0Kb9BXpupMdnR/a-professional-web-design-team-having-a--1772817344156-344998f3.png?_wi=2"
|
|
imageAlt="Professional web design team meeting"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Schedule Consultation"
|
|
onSubmit={(data) => {
|
|
console.log("Services form submitted:", data);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Webuild"
|
|
copyrightText="© 2025 Webuild. All rights reserved. | Helping Local Businesses Grow Online"
|
|
columns={footerColumns}
|
|
onPrivacyClick={() => {
|
|
console.log("Privacy clicked");
|
|
}}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |