Add src/app/services/page.tsx
This commit is contained in:
160
src/app/services/page.tsx
Normal file
160
src/app/services/page.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Sparkles, Monitor, Rocket, Paintbrush, Check, LayoutDashboard, Code, Megaphone, Palette, Handshake } from "lucide-react";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Work", href: "/#work" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "About", href: "/about" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
];
|
||||
|
||||
const FOOTER_COLUMNS = [
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ 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: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
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="HoB Media"
|
||||
navItems={NAV_ITEMS}
|
||||
button={{ text: "Get Started", href: "/#contact" }}
|
||||
/>
|
||||
<FeatureCardTen
|
||||
title="Our Core Services"
|
||||
description="We offer a comprehensive suite of digital solutions to help your business thrive online."
|
||||
features={[
|
||||
{
|
||||
title: "Web Design & Development", description: "Crafting modern, responsive websites and web applications tailored to your business goals. From engaging user interfaces to robust backend systems, we build digital platforms that perform.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web Design & Development" },
|
||||
items: [
|
||||
{ icon: LayoutDashboard, text: "Custom Website Design" },
|
||||
{ icon: Code, text: "Front-end & Back-end Development" },
|
||||
{ icon: Monitor, text: "Responsive & Mobile-First" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "SEO & Digital Marketing", description: "Elevate your online presence with strategic SEO, content marketing, and paid advertising campaigns. Drive organic traffic, increase conversions, and achieve measurable ROI.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "SEO & Digital Marketing" },
|
||||
items: [
|
||||
{ icon: Rocket, text: "Search Engine Optimization" },
|
||||
{ icon: Megaphone, text: "Social Media & Content Strategy" },
|
||||
{ icon: Handshake, text: "PPC & Ad Campaign Management" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Branding & UI/UX Design", description: "Develop a memorable brand identity and create intuitive, engaging user experiences. We ensure your brand communicates effectively and resonates with your target audience.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Branding & UI/UX Design" },
|
||||
items: [
|
||||
{ icon: Palette, text: "Brand Strategy & Identity" },
|
||||
{ icon: LayoutDashboard, text: "User Interface (UI) Design" },
|
||||
{ icon: Users, text: "User Experience (UX) Design" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
textboxLayout="default"
|
||||
tag="What We Do"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
<PricingCardNine
|
||||
title="Flexible Service Packages"
|
||||
description="Choose a plan that fits your business needs and budget, designed to deliver maximum value and impact."
|
||||
plans={[
|
||||
{
|
||||
id: "basic", title: "Starter", price: "$999", period: "One-time project", features: [
|
||||
"5 Page Custom Website", "Basic SEO Optimization", "Mobile Responsive Design", "2 Revisions", "Standard Support"
|
||||
],
|
||||
button: { text: "Get Started", href: "/#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp"
|
||||
},
|
||||
{
|
||||
id: "pro", title: "Professional", price: "$2499", period: "One-time project", features: [
|
||||
"10 Page Custom Website", "Advanced SEO Strategy", "E-commerce Integration", "Unlimited Revisions", "Priority Support", "Basic Content Creation"
|
||||
],
|
||||
button: { text: "Choose Plan", href: "/#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp"
|
||||
},
|
||||
{
|
||||
id: "enterprise", title: "Enterprise", price: "Custom", period: "Tailored solutions", features: [
|
||||
"Unlimited Pages", "Full Digital Marketing", "Custom Web Application", "Dedicated Account Manager", "Advanced Analytics", "Ongoing Maintenance"
|
||||
],
|
||||
button: { text: "Contact Us", href: "/#contact" },
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
textboxLayout="default"
|
||||
tag="Pricing"
|
||||
tagIcon={Check}
|
||||
/>
|
||||
<ContactSplit
|
||||
tag="Ready to Start?"
|
||||
title="Let's Discuss Your Project"
|
||||
description="Reach out to us for a free consultation and quote. We're excited to hear about your vision."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp"
|
||||
imageAlt="Contact Us"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Your email address"
|
||||
buttonText="Send Inquiry"
|
||||
termsText="By sending an inquiry, you agree to our Terms and Conditions."
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
<FooterBase
|
||||
logoText="HoB Media"
|
||||
copyrightText="© 2026 | HoB Media"
|
||||
columns={FOOTER_COLUMNS}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user