99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Code2,
|
|
Server,
|
|
Cloud,
|
|
Smartphone,
|
|
} from "lucide-react";
|
|
import GlassCard from "@/components/ui/GlassCard";
|
|
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
|
|
import type { Dictionary, Locale } from "@/lib/dictionaries";
|
|
|
|
const icons = [Code2, Server, Cloud, Smartphone];
|
|
|
|
interface ServicesProps {
|
|
locale: Locale;
|
|
dict: Dictionary;
|
|
}
|
|
|
|
export default function Services({ dict }: ServicesProps) {
|
|
return (
|
|
<section id="features" className="relative w-full py-24 sm:py-32">
|
|
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewportConfig}
|
|
variants={stagger(0.06)}
|
|
className="mx-auto mb-16 max-w-3xl text-center"
|
|
>
|
|
<motion.span
|
|
variants={fadeUp}
|
|
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
|
>
|
|
{dict.services.badge}
|
|
</motion.span>
|
|
|
|
<motion.h2
|
|
variants={fadeUp}
|
|
className="font-display text-display-lg font-medium tracking-tight"
|
|
>
|
|
<span className="text-gradient-fade">
|
|
{dict.services.title}
|
|
</span>
|
|
<br />
|
|
<span className="text-gradient-purple">
|
|
{dict.services.titleAccent}
|
|
</span>
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
variants={fadeUp}
|
|
className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
|
|
>
|
|
{dict.services.subtitle}
|
|
</motion.p>
|
|
</motion.div>
|
|
|
|
{/* Grid */}
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewportConfig}
|
|
variants={stagger(0.08)}
|
|
className="grid grid-cols-1 gap-4 sm:grid-cols-2"
|
|
>
|
|
{dict.services.items.map((service, i) => {
|
|
const Icon = icons[i];
|
|
return (
|
|
<motion.div key={i} variants={fadeUp} className="group h-full">
|
|
<GlassCard className="h-full overflow-hidden">
|
|
{/* Hover glow */}
|
|
<div className="absolute -right-12 -top-12 h-32 w-32 rounded-full bg-purple-500/0 blur-3xl transition-all duration-700 group-hover:bg-purple-500/25" />
|
|
|
|
<div className="relative">
|
|
<div className="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:text-purple-200 group-hover:shadow-glow-sm">
|
|
<Icon className="h-5 w-5" strokeWidth={1.5} />
|
|
</div>
|
|
|
|
<h3 className="mb-2 text-lg font-medium text-text-primary">
|
|
{service.title}
|
|
</h3>
|
|
|
|
<p className="text-sm leading-relaxed text-text-secondary">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
</GlassCard>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|