Add src/app/services/page.tsx
This commit is contained in:
148
src/app/services/page.tsx
Normal file
148
src/app/services/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Monitor, Code, Search, Sparkles, DollarSign, Wrench, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Webild"
|
||||
navItems={[
|
||||
{ name: "Work", href: "/work" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "About", href: "/#about" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
]}
|
||||
button={{ text: "Get Started", href: "/#contact" }}
|
||||
/>
|
||||
<HeroSplit
|
||||
title="Comprehensive Web Design & Development Services"
|
||||
description="From stunning visuals to robust functionality, we build digital solutions that drive growth and connect with your audience."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp"
|
||||
imageAlt="Web design services illustration"
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Get a Quote", href: "#contact-form" },
|
||||
{ text: "View Portfolio", href: "/work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="our-services" data-section="our-services">
|
||||
<FeatureHoverPattern
|
||||
title="Our Core Expertise"
|
||||
description="We cover every aspect of your online presence, ensuring a cohesive and high-performing digital ecosystem."
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Monitor, title: "Custom Web Design", description: "Crafting intuitive and aesthetically pleasing user interfaces (UI) and engaging user experiences (UX) tailored to your brand." },
|
||||
{ icon: Code, title: "Full-Stack Web Development", description: "Building robust, scalable, and secure websites using the latest technologies for both front-end and back-end." },
|
||||
{ icon: Search, title: "SEO Strategy & Optimization", description: "Improving your search engine rankings to drive organic traffic and increase online visibility." },
|
||||
{ icon: Sparkles, title: "Brand Identity & Strategy", description: "Developing a strong and consistent brand image that resonates with your target audience and stands out." },
|
||||
{ icon: DollarSign, title: "E-commerce Solutions", description: "Creating powerful online stores with seamless shopping experiences to maximize your sales and conversions." },
|
||||
{ icon: Wrench, title: "Website Maintenance & Support", description: "Ensuring your website remains secure, updated, and performs optimally with ongoing support and maintenance plans." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
title="Transparent Pricing Plans"
|
||||
description="Find the perfect package to match your project needs and budget."
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Basic", badgeIcon: CheckCircle,
|
||||
price: "$1,500+", subtitle: "Starter Website", buttons: [{ text: "Get Started", href: "#contact-form" }],
|
||||
features: [
|
||||
"5-Page Custom Design", "Responsive Development", "Basic SEO Setup", "1-Month Support"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "standard", badge: "Standard", badgeIcon: CheckCircle,
|
||||
price: "$3,500+", subtitle: "Business Growth", buttons: [{ text: "Choose Plan", href: "#contact-form" }],
|
||||
features: [
|
||||
"10-Page Custom Design", "Advanced SEO Strategy", "CRM Integration", "3-Months Support & Analytics", "Content Management System"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium", badge: "Premium", badgeIcon: CheckCircle,
|
||||
price: "$7,000+", subtitle: "Enterprise Solution", buttons: [{ text: "Contact Us", href: "#contact-form" }],
|
||||
features: [
|
||||
"Unlimited Pages", "E-commerce / Advanced Features", "Dedicated Project Manager", "6-Months Priority Support", "Custom Integrations & APIs"
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplitForm
|
||||
title="Ready to Start Your Project?"
|
||||
description="Let's discuss your vision and how we can bring it to life. Fill out the form below to get a custom quote."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp"
|
||||
imageAlt="Contact us for web design services"
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project", rows: 5, required: true }}
|
||||
buttonText="Send Message"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
logoText="Webild"
|
||||
copyrightText="© 2026 | Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/#about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Work", href: "/work" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Web Development", href: "/services" },
|
||||
{ label: "SEO", href: "/services" },
|
||||
{ label: "Branding", href: "/services" },
|
||||
{ label: "UI/UX Design", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Dribbble", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user