161 lines
7.8 KiB
TypeScript
161 lines
7.8 KiB
TypeScript
"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, Users } from "lucide-react";
|
|
|
|
const NAV_ITEMS = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "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?_wi=2", 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?_wi=3", 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?_wi=2", 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?_wi=2"
|
|
},
|
|
{
|
|
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?_wi=2"
|
|
},
|
|
{
|
|
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?_wi=2"
|
|
},
|
|
]}
|
|
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?_wi=3"
|
|
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>
|
|
);
|
|
}
|