Andres Santana
100 lines
4.3 KiB
React
100 lines
4.3 KiB
React
import React from 'react';
|
|
import { usePageTitle } from '@/hooks/usePageTitle.js';
|
|
import { useParams, Navigate, Link } from 'react-router-dom';
|
|
import { servicesData } from '@/lib/servicesData';
|
|
import { motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { CheckCircle2, ArrowLeft, ArrowRight } from 'lucide-react';
|
|
|
|
const ServiceDetail = () => {
|
|
const { slug } = useParams();
|
|
const service = servicesData.find((s) => s.slug === slug);
|
|
|
|
const pageTitle = service ? `${service.title} | AI Growth Technologies` : "Service Not Found | AI Growth Technologies";
|
|
usePageTitle(pageTitle);
|
|
|
|
if (!service) {
|
|
return <Navigate to="/services" replace />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="pt-28 md:pt-32 pb-20 min-h-screen bg-background relative overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 bg-tech-grid [mask-image:radial-gradient(ellipse_at_top_right,black,transparent_70%)] opacity-60 pointer-events-none" />
|
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] glow-red rounded-full filter blur-[120px] pointer-events-none" />
|
|
|
|
<div className="container mx-auto px-4 max-w-7xl relative z-10">
|
|
<Link to="/services" className="inline-flex items-center text-muted-foreground hover:text-primary mb-8 transition-colors">
|
|
<ArrowLeft size={20} className="mr-2" /> Back to Services
|
|
</Link>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className={`w-20 h-20 rounded-2xl bg-gradient-to-br ${service.gradient} flex items-center justify-center mb-8 shadow-lg`}>
|
|
<service.icon className="text-white" size={40} />
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-6xl font-black text-foreground mb-6">
|
|
{service.title}
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground mb-8 leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
|
|
<div className="text-lg text-muted-foreground leading-relaxed mb-10 max-w-2xl">
|
|
<p>{service.longDescription}</p>
|
|
</div>
|
|
|
|
<Link to="/contact">
|
|
<Button size="lg" className="bg-primary hover:bg-primary/90 text-white px-8 py-6 rounded-full text-lg shadow-lg shadow-primary/25 group">
|
|
Get Started <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="bg-white border border-border rounded-3xl p-8 lg:p-10 shadow-xl shadow-black/5"
|
|
>
|
|
<h3 className="text-2xl font-bold text-foreground mb-8">Key Benefits</h3>
|
|
<div className="space-y-6">
|
|
{service.benefits.map((benefit, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4 + (index * 0.1) }}
|
|
className="flex items-start"
|
|
>
|
|
<div className="mt-1 mr-4 flex-shrink-0">
|
|
<CheckCircle2 className="text-primary" size={24} />
|
|
</div>
|
|
<p className="text-lg text-foreground/80">{benefit}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-10 p-6 bg-primary/5 rounded-2xl border border-primary/20">
|
|
<h4 className="text-primary font-semibold mb-2">Why Choose Us?</h4>
|
|
<p className="text-sm text-muted-foreground">
|
|
Our {service.title.toLowerCase()} services are backed by data-driven insights and a team of dedicated experts committed to your long-term success.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ServiceDetail;
|