From 0772f8d82732f186fe14dd1f75cebbb77ae5ea25 Mon Sep 17 00:00:00 2001
From: sanjidarimi <sanjidarimi312@gmail.com>
Date: Wed, 13 May 2026 20:35:59 +0600
Subject: [PATCH] feat:change service design

---
 src/components/ServicesSection.tsx     | 107 ++++++++++++-------------
 src/components/shared/PremiumBadge.tsx |  39 +++++++++
 2 files changed, 90 insertions(+), 56 deletions(-)
 create mode 100644 src/components/shared/PremiumBadge.tsx

diff --git a/src/components/ServicesSection.tsx b/src/components/ServicesSection.tsx
index a1b2a98..df95872 100644
--- a/src/components/ServicesSection.tsx
+++ b/src/components/ServicesSection.tsx
@@ -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>
diff --git a/src/components/shared/PremiumBadge.tsx b/src/components/shared/PremiumBadge.tsx
new file mode 100644
index 0000000..21923c0
--- /dev/null
+++ b/src/components/shared/PremiumBadge.tsx
@@ -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;