summer2026/techzaa-frontend
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat:change service design

Browse Source
This commit is contained in:
sanjidarimi
2026-05-13 20:35:59 +06:00
parent 0485bb2744
commit 0772f8d827
2 changed files with 90 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ServicesSection.tsx
+51 -56
View File
@@ -1,6 +1,7 @@
import { motion, useInView } from "framer-motion";
import { Brain, Cloud, Globe, Smartphone } from "lucide-react";
import { useRef } from "react";
import PremiumBadge from "./shared/PremiumBadge";
const services = [
{
@@ -39,67 +40,61 @@ export default function ServicesSection() {
return (
<section id="services" ref={ref} className="py-20 relative overflow-hidden">
<div className="container mx-auto px-4 relative z-10">
{/* Section Header */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
Our Expertise
</span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
What We <span className="text-primary">Do</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
We deliver comprehensive technology solutions that empower
businesses to thrive in the digital age.
</p>
</motion.div>
<div className="flex flex-col lg:flex-row gap-12 lg:gap-8 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6 }}
className="w-full lg:w-1/3 lg:sticky lg:top-24 text-left"
>
<PremiumBadge text="Our Expertise" />
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
What We <span className="text-primary">Do</span>
</h2>
<p className="text-muted-foreground text-lg leading-relaxed">
We deliver comprehensive technology solutions that empower
businesses to thrive in the digital age.
</p>
</motion.div>
{/* Services Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{services.map((service, index) => (
<motion.div
key={service.title}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -8, transition: { duration: 0.2 } }}
className="group relative"
>
{/* Card */}
<div className="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden">
{/* Glow effect on hover */}
{/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" />
</div> */}
{/* Icon */}
<div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-8 lg:pt-6">
{services.map((service, index) => {
return (
<motion.div
whileHover={{ scale: 1.1, rotate: 5 }}
className={`relative w-14 h-14 rounded-xl bg-${service.color}/10 flex items-center justify-center mb-5 group-hover:neon-glow transition-all duration-300`}
key={service.title}
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: index * 0.1 }}
className={`group relative p-[1.5px] overflow-hidden transition-all duration-500 `}
>
<service.icon className="w-7 h-7 text-primary" />
<div className="absolute top-0 left-0 w-0 h-[2px] bg-gradient-to-r from-primary to-transparent group-hover:w-full transition-all duration-500 ease-out z-10" />
<div className="absolute top-0 left-0 w-[2px] h-0 bg-gradient-to-b from-primary to-transparent group-hover:h-full transition-all duration-500 ease-out z-10" />
<div className="absolute bottom-0 right-0 w-0 h-[2px] bg-gradient-to-l from-primary to-transparent group-hover:w-full transition-all duration-500 ease-out z-10" />
<div className="absolute bottom-0 right-0 w-[2px] h-0 bg-gradient-to-t from-primary to-transparent group-hover:h-full transition-all duration-500 ease-out z-10" />
<div className="relative h-full p-8 bg-primary/5 dark:bg-card/40 backdrop-blur-sm transition-all duration-300 overflow-hidden z-0">
<motion.div
whileHover={{ scale: 1.1, rotate: 5 }}
className="relative w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300"
>
<service.icon className="w-7 h-7 text-primary group-hover:text-inherit transition-colors" />
</motion.div>
<h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors">
{service.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed">
{service.description}
</p>
<div className="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-primary blur-xl to-transparent rounded-tl-full opacity-100 transition-opacity" />
</div>
</motion.div>
{/* Content */}
<h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors">
{service.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed">
{service.description}
</p>
{/* Decorative corner */}
<div className="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-primary/5 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
</motion.div>
))}
);
})}
</div>
</div>
</div>
</section>