fixed border isssues

This commit is contained in:
sanjidarimi
2026-05-17 21:03:25 +06:00
parent 245d868f83
commit 92f56a42ad
2 changed files with 15 additions and 7 deletions
+14 -6
View File
@@ -1,7 +1,9 @@
import { motion, useInView } from "framer-motion"; import { motion, useInView } from "framer-motion";
import { Brain, Cloud, Globe, Smartphone } from "lucide-react"; import { ArrowRight, Brain, Cloud, Globe, Smartphone } from "lucide-react";
import { useRef } from "react"; import { useRef } from "react";
import { Link } from "react-router-dom";
import PremiumBadge from "../shared/PremiumBadge"; import PremiumBadge from "../shared/PremiumBadge";
import { Button } from "../ui/button";
const services = [ const services = [
{ {
@@ -51,7 +53,7 @@ export default function ServicesSection() {
<PremiumBadge text="Our Expertise" /> <PremiumBadge text="Our Expertise" />
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2"> <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground"> <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
Services {" "} Services{" "}
</span> </span>
We Provide We Provide
</h2> </h2>
@@ -59,6 +61,12 @@ export default function ServicesSection() {
We design and develop digital products that solve real business We design and develop digital products that solve real business
problems and create better user experiences. problems and create better user experiences.
</p> </p>
<Button className="mt-4 rounded-full neon-glow flex gap-2">
<Link to="technologies"> Know More </Link>{" "}
<span>
<ArrowRight />
</span>
</Button>
</motion.div> </motion.div>
<div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-8 lg:pt-6"> <div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-8 lg:pt-6">
@@ -71,11 +79,11 @@ export default function ServicesSection() {
transition={{ duration: 0.6, delay: index * 0.1 }} transition={{ duration: 0.6, delay: index * 0.1 }}
className={`group relative p-[1.5px] overflow-hidden transition-all duration-500 `} className={`group relative p-[1.5px] overflow-hidden transition-all duration-500 `}
> >
<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 h-0.5 bg-gradient-to-r from-primary to-transparent 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 top-0 left-0 w-0.5 bg-gradient-to-b from-primary to-transparent 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-0 h-0.5 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="absolute bottom-0 right-0 w-0.5 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"> <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
@@ -36,7 +36,7 @@ export default function Sidebar({ isCollapsed }: { isCollapsed: boolean }) {
<div className="h-16 flex items-center px-6"> <div className="h-16 flex items-center px-6">
<Link to="/" className={cn("font-bold truncate text-4xl", isCollapsed && "hidden")}> <Link to="/" className={cn("font-bold truncate text-4xl", isCollapsed && "hidden")}>
TechZaa.tech TechZaa
</Link> </Link>
{isCollapsed && <span className="font-bold mx-auto text-xl">TZ</span>} {isCollapsed && <span className="font-bold mx-auto text-xl">TZ</span>}
</div> </div>