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
+26 -31
View File
@@ -1,6 +1,7 @@
import { motion, useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
import { Brain, Cloud, Globe, Smartphone } from "lucide-react"; import { Brain, Cloud, Globe, Smartphone } from "lucide-react";
import { useRef } from "react"; import { useRef } from "react";
import PremiumBadge from "./shared/PremiumBadge";
const services = [ const services = [
{ {
@@ -39,55 +40,48 @@ export default function ServicesSection() {
return ( return (
<section id="services" ref={ref} className="py-20 relative overflow-hidden"> <section id="services" ref={ref} className="py-20 relative overflow-hidden">
<div className="container mx-auto px-4 relative z-10"> <div className="container mx-auto px-4 relative z-10">
{/* Section Header */} <div className="flex flex-col lg:flex-row gap-12 lg:gap-8 items-center">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, x: -30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-center mb-16" className="w-full lg:w-1/3 lg:sticky lg:top-24 text-left"
> >
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4"> <PremiumBadge text="Our Expertise" />
Our Expertise <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
</span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
What We <span className="text-primary">Do</span> What We <span className="text-primary">Do</span>
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg"> <p className="text-muted-foreground text-lg leading-relaxed">
We deliver comprehensive technology solutions that empower We deliver comprehensive technology solutions that empower
businesses to thrive in the digital age. businesses to thrive in the digital age.
</p> </p>
</motion.div> </motion.div>
{/* Services Grid */} <div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-8 lg:pt-6">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> {services.map((service, index) => {
{services.map((service, index) => ( return (
<motion.div <motion.div
key={service.title} key={service.title}
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }} transition={{ duration: 0.6, delay: index * 0.1 }}
whileHover={{ y: -8, transition: { duration: 0.2 } }} className={`group relative p-[1.5px] overflow-hidden transition-all duration-500 `}
className="group relative"
> >
{/* Card */} <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="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden"> <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" />
{/* 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="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 <motion.div
whileHover={{ scale: 1.1, rotate: 5 }} 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`} 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" /> <service.icon className="w-7 h-7 text-primary group-hover:text-inherit transition-colors" />
</motion.div> </motion.div>
{/* Content */}
<h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors"> <h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors">
{service.title} {service.title}
</h3> </h3>
@@ -95,11 +89,12 @@ export default function ServicesSection() {
{service.description} {service.description}
</p> </p>
{/* Decorative corner */} <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 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> </div>
</motion.div> </motion.div>
))} );
})}
</div>
</div> </div>
</div> </div>
</section> </section>
src/components/shared/PremiumBadge.tsx
+39
View File
@@ -0,0 +1,39 @@
import { motion } from "framer-motion";
const PremiumBadge = ({ text }) => {
return (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="relative group inline-flex items-center justify-center p-[1px] overflow-hidden rounded-full mb-6"
>
<motion.div
animate={{ rotate: [0, 360] }}
transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
style={{
background: `conic-gradient(from 0deg,
transparent 20%,
hsl(var(--accent-neon)) 50%,
transparent 80%)`,
}}
className="absolute inset-[-200%] aspect-square opacity-70 group-hover:opacity-100 transition-opacity"
/>
{/* 2. Inner Glass Container */}
<div className="relative z-10 px-4 py-1 rounded-full bg-background/90 backdrop-blur-2xl flex items-center gap-2.5 border border-white/10">
{/* The Leading "Status" Indicator */}
<div className="relative flex h-2 w-2">
<div className="absolute inset-0 rounded-full bg-[hsl(var(--accent-neon))] animate-ping opacity-40" />
<div className="relative rounded-full h-2 w-2 bg-[hsl(var(--accent-neon))] shadow-[0_0_8px_hsl(var(--accent-neon-glow))]" />
</div>
{/* Text with Dynamic Themed Gradient */}
<span className="text-xs font-semibold uppercase tracking-widest transition-colors text-[hsl(var(--accent-neon-glow))]">
{text}
</span>
</div>
</motion.div>
);
};
export default PremiumBadge;