Files
9d711507-9590-41ad-bbdf-f60…/src/app/services/page.tsx

115 lines
5.8 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, TrendingUp, Users, Target, Rocket } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="blurBottom"
cardStyle="gradient-mesh"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
brandName="Proof Digital"
bottomLeftText="Global Reach"
bottomRightText="hello@proofdigital.com"
/>
</div>
<div id="services-detail" data-section="services-detail">
<FeatureCardTwentySeven
title="Our Complete Service Offerings"
description="We deliver end-to-end digital solutions designed to transform your business and maximize your online potential."
tag="Comprehensive Solutions"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
id: "1", title: "Web Development", description: "From responsive websites to complex web applications, we build scalable solutions using cutting-edge technologies including React, Next.js, and Node.js.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-web-development-concept-ima-1772538619187-01dd9557.png", imageAlt: "Web Development Services"},
{
id: "2", title: "UI/UX Design", description: "We create intuitive, beautiful interfaces that users love. Our design process focuses on user research, wireframing, prototyping, and rigorous testing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-con-1772538617879-adc7cf56.png", imageAlt: "UI/UX Design Services"},
{
id: "3", title: "Digital Strategy", description: "Strategic consulting to help you navigate the digital landscape. We analyze market trends, competitive positioning, and develop roadmaps for success.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-consultation-scene-with-1772538618258-45f82cfc.png", imageAlt: "Digital Strategy Services"},
{
id: "4", title: "Brand Identity", description: "Complete branding from concept to implementation. We develop cohesive visual identities that communicate your values and resonate with your target audience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-workspace-showing--1772538617285-0010346f.png", imageAlt: "Brand Identity Services"},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="service-metrics" data-section="service-metrics">
<MetricCardThree
title="Why Choose Our Services"
description="We deliver measurable results backed by expertise, innovation, and dedication to your success"
metrics={[
{
id: "1", icon: TrendingUp,
title: "Average ROI Increase", value: "245%"},
{
id: "2", icon: Users,
title: "Active Partnerships", value: "120+"},
{
id: "3", icon: Target,
title: "Successful Launches", value: "98%"},
{
id: "4", icon: Zap,
title: "Industry Experience", value: "10 Years"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="service-cta" data-section="service-cta">
<ContactCTA
tag="Ready to Get Started"
tagIcon={Rocket}
tagAnimation="slide-up"
title="Let's Discuss Your Project"
description="Our team is ready to understand your unique needs and create a customized solution that drives real results."
buttons={[
{ text: "Schedule Consultation", href: "/contact" },
{ text: "View Our Portfolio", href: "/portfolio" },
]}
buttonAnimation="slide-up"
background={{ variant: "animated-grid" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Proof Digital"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
/>
</div>
</ThemeProvider>
);
}