Update src/app/services/page.tsx
This commit is contained in:
@@ -1,161 +1,91 @@
|
||||
"use client";
|
||||
'use client';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import TextAnimation from '@/components/text/TextAnimation';
|
||||
import { LayoutDashboard, Rocket, Palette } from 'lucide-react';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TextNumberCount from '@/components/text/TextNumberCount';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import { Target, Lightbulb, TrendingUp, Handshake } from 'lucide-react';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navbarNavItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Services', id: '/services' }
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Case Studies", id: "/case-studies" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
const footerColumns = [
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{ label: 'Features', href: '#' },
|
||||
{ label: 'Pricing', href: '/pricing' }
|
||||
title: 'Business Strategy',
|
||||
description: 'Crafting clear strategies for growth and market leadership through in-depth analysis and visionary planning.',
|
||||
icon: Target,
|
||||
mediaItems: [
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Strategy+Meeting', imageAlt: 'Strategy meeting in progress' },
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Data+Analysis', imageAlt: 'Data analysis charts' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About', href: '/about' },
|
||||
{ label: 'Contact', href: '/contact' }
|
||||
title: 'Innovative Solutions',
|
||||
description: 'Developing cutting-edge solutions that leverage the latest technology to solve complex business challenges.',
|
||||
icon: Lightbulb,
|
||||
mediaItems: [
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Innovation+Concept', imageAlt: 'Lightbulb representing innovation' },
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Software+Development', imageAlt: 'Code on a computer screen' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Growth Marketing',
|
||||
description: 'Implementing data-driven marketing campaigns designed to maximize reach, engagement, and conversion rates.',
|
||||
icon: TrendingUp,
|
||||
mediaItems: [
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Marketing+Analytics', imageAlt: 'Marketing analytics dashboard' },
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Digital+Campaign', imageAlt: 'Digital marketing campaign on mobile' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Client Partnership',
|
||||
description: 'Building strong, collaborative relationships with our clients, ensuring shared success and long-term value.',
|
||||
icon: Handshake,
|
||||
mediaItems: [
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Client+Meeting', imageAlt: 'Client meeting discussion' },
|
||||
{ imageSrc: 'https://placehold.co/400x300/png?text=Team+Collaboration', imageAlt: 'Team collaborating on project' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navbarNavItems}
|
||||
button={{ text: 'Get Started', href: '/contact' }}
|
||||
brandName="Webild"
|
||||
/>
|
||||
<div id="services-hero" data-section="services-hero">
|
||||
<div className="relative isolate flex h-svh flex-col items-center justify-center p-8 text-center">
|
||||
<TextAnimation
|
||||
className="flex flex-col items-center justify-center space-y-4"
|
||||
titleClassName="text-5xl font-bold"
|
||||
descriptionClassName="mt-4 text-lg text-foreground/70"
|
||||
description="Explore our comprehensive offerings designed to meet your unique business needs."
|
||||
>
|
||||
Our Services
|
||||
</TextAnimation>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="Webild" />
|
||||
</div>
|
||||
<div id="services" data-section="services" className="py-12 md:py-20 lg:py-24">
|
||||
<TextNumberCount
|
||||
value={1234}
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
/>
|
||||
<div className="mt-12 md:mt-20 lg:mt-24">
|
||||
<FeatureCardTwentyFive
|
||||
features={features}
|
||||
animationType="depth-3d"
|
||||
title="Our Core Services"
|
||||
description="We offer a comprehensive suite of digital services to empower your business."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="detailed-offerings" data-section="detailed-offerings">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
title="What We Offer"
|
||||
description="From concept to launch, we provide end-to-end solutions."
|
||||
tag="Offerings"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 'web-dev',
|
||||
title: 'Web Development',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Building responsive, high-performance websites tailored to your business goals.',
|
||||
tags: ['Frontend', 'Backend', 'CMS'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1549692520-acc6669e2fde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'Web development code on screen'
|
||||
},
|
||||
{
|
||||
id: 'mobile-dev',
|
||||
title: 'Mobile App Development',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Crafting intuitive and engaging mobile applications for iOS and Android platforms.',
|
||||
tags: ['iOS', 'Android', 'Cross-Platform'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1590492211244-77a827419846?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'Mobile app development UI screens'
|
||||
},
|
||||
{
|
||||
id: 'ui-ux-design',
|
||||
title: 'UI/UX Design',
|
||||
author: 'Our Expert Team',
|
||||
description: 'Creating stunning and user-friendly interfaces that enhance user experience.',
|
||||
tags: ['Wireframing', 'Prototyping', 'User Research'],
|
||||
imageSrc: 'https://images.unsplash.com/photo-1531297484643-982d6174164b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
imageAlt: 'UI/UX design mockups'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="service-plans" data-section="service-plans">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
title="Our Service Plans"
|
||||
description="Find the perfect package for your project needs, from startups to enterprises."
|
||||
tag="Pricing"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: 'basic',
|
||||
badge: 'Starter',
|
||||
badgeIcon: Rocket,
|
||||
price: '$999',
|
||||
subtitle: 'Ideal for small projects & MVPs',
|
||||
buttons: [{ text: 'Get Started', href: '/contact' }],
|
||||
features: [
|
||||
'Basic Web Development',
|
||||
'Responsive Design',
|
||||
'1 Month Support',
|
||||
'SEO Fundamentals'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'standard',
|
||||
badge: 'Popular',
|
||||
badgeIcon: LayoutDashboard,
|
||||
price: '$2499',
|
||||
subtitle: 'Perfect for growing businesses',
|
||||
buttons: [{ text: 'Choose Plan', href: '/contact' }],
|
||||
features: [
|
||||
'Custom Web Development',
|
||||
'Mobile App Integration',
|
||||
'3 Months Support',
|
||||
'Advanced SEO',
|
||||
'Analytics Setup'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'premium',
|
||||
badge: 'Enterprise',
|
||||
badgeIcon: Palette,
|
||||
price: '$4999+',
|
||||
subtitle: 'For large-scale, custom solutions',
|
||||
buttons: [{ text: 'Contact Sales', href: '/contact' }],
|
||||
features: [
|
||||
'Enterprise-grade Solutions',
|
||||
'Dedicated Team',
|
||||
'6 Months Priority Support',
|
||||
'Full Stack Development',
|
||||
'Custom Integrations',
|
||||
'Advanced Security'
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseReveal columns={footerColumns} copyrightText="© 2025 Webild" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user