feat:change service design
This commit is contained in:
sanjidarimi
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user