Add src/app/services/page.tsx
This commit is contained in:
141
src/app/services/page.tsx
Normal file
141
src/app/services/page.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
|
||||
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Monitor, Code, PenTool, Megaphone, Rocket, LayoutGrid, Search, Handshake } 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" }}
|
||||
/>
|
||||
<HeroOverlay
|
||||
title="Our Digital Services"
|
||||
description="We offer a comprehensive suite of digital solutions to elevate your brand and achieve your business goals."
|
||||
tag="Tailored for Success"
|
||||
tagIcon={Monitor}
|
||||
buttons={[
|
||||
{ text: "Get a Quote", href: "/#contact" },
|
||||
{ text: "View Our Work", href: "/#work" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/services-hero.webp"
|
||||
imageAlt="Modern workspace with creative elements"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
textPosition="bottom"
|
||||
/>
|
||||
<FeatureCardTwentyOne
|
||||
title="Custom Web Development"
|
||||
description="Crafting bespoke websites and web applications tailored to your unique business needs. From complex platforms to elegant portfolios, we build scalable and secure digital experiences."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/service-dev.webp"
|
||||
imageAlt="Web development code on a screen"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
buttons={[{ text: "Learn More", href: "/#contact" }]}
|
||||
/>
|
||||
<FeatureCardTwentyOne
|
||||
title="UI/UX Design & Branding"
|
||||
description="Creating intuitive user interfaces and engaging user experiences that captivate your audience. We also develop strong brand identities that resonate and leave a lasting impression."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/service-design.webp"
|
||||
imageAlt="UI UX design process on a tablet"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
buttons={[{ text: "Learn More", href: "/#contact" }]}
|
||||
/>
|
||||
<FeatureCardTwentyOne
|
||||
title="Search Engine Optimization (SEO)"
|
||||
description="Boost your online visibility and drive organic traffic with our expert SEO strategies. We optimize your website to rank higher on search engines, connecting you with your target audience."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/service-seo.webp"
|
||||
imageAlt="SEO analytics dashboard"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
buttons={[{ text: "Learn More", href: "/#contact" }]}
|
||||
/>
|
||||
<FeatureCardTwentyOne
|
||||
title="Content Marketing"
|
||||
description="Developing compelling content strategies that engage your audience, build authority, and drive conversions. From blog posts to video scripts, we help you tell your story effectively."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/service-content.webp"
|
||||
imageAlt="Person writing content on a laptop"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
buttons={[{ text: "Learn More", href: "/#contact" }]}
|
||||
/>
|
||||
<FeatureCardTwentyOne
|
||||
title="Digital Marketing Strategy"
|
||||
description="Comprehensive digital marketing plans designed to maximize your reach and return on investment. We integrate various channels to create a cohesive and powerful online presence."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/service-marketing.webp"
|
||||
imageAlt="Digital marketing strategy meeting"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="left"
|
||||
buttons={[{ text: "Learn More", href: "/#contact" }]}
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
title="Ready to Start Your Project?"
|
||||
description="Let's discuss how our services can transform your digital presence. Reach out today for a personalized consultation."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
buttons={[
|
||||
{ text: "Request a Consultation", href: "/#contact" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<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