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

refactor:change the card UI expertise section

Browse Source
This commit is contained in:
sanjidaRimi023
2026-04-19 20:25:48 +06:00
parent a8b73d81ec
commit e5e7089645
6 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ServicesSection.tsx
+25 -21
View File
@@ -1,44 +1,48 @@
import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { Globe, Smartphone, Brain, Cloud } from 'lucide-react';
import { motion, useInView } from "framer-motion";
import { Brain, Cloud, Globe, Smartphone } from "lucide-react";
import { useRef } from "react";
const services = [
{
icon: Globe,
title: 'Web Development',
description: 'Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.',
color: 'neon-blue',
title: "Web Development",
description:
"Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.",
color: "primary",
},
{
icon: Smartphone,
title: 'Mobile App Development',
description: 'Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.',
color: 'neon-purple',
title: "Mobile App Development",
description:
"Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.",
color: "primary",
},
{
icon: Brain,
title: 'AI Solutions',
description: 'Intelligent automation and machine learning solutions that transform data into actionable insights.',
color: 'neon-green',
title: "AI Solutions",
description:
"Intelligent automation and machine learning solutions that transform data into actionable insights.",
color: "primary",
},
{
icon: Cloud,
title: 'Cloud Solutions',
description: 'Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.',
color: 'neon-blue',
title: "Cloud Solutions",
description:
"Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.",
color: "primary",
},
];
export default function ServicesSection() {
const ref = useRef<HTMLElement>(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section id="services" ref={ref} className="py-24 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-1/2 left-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
<div className="absolute bottom-0 right-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
<div className="absolute bottom-1/2 left-0 w-96 h-96 bg-primary rounded-full blur-[200px]" />
<div className="absolute bottom-0 right-0 w-80 h-80 bg-primary rounded-full blur-[200px]" />
</div>
<div className="container mx-auto px-4 relative z-10">
@@ -56,8 +60,8 @@ export default function ServicesSection() {
What We <span className="text-primary neon-text-glow">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.
We deliver comprehensive technology solutions that empower
businesses to thrive in the digital age.
</p>
</motion.div>
@@ -73,7 +77,7 @@ export default function ServicesSection() {
className="group relative"
>
{/* Card */}
<div className="relative h-full p-6 rounded-2xl glass border border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden">
<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" />