fixed nav and hero section design

2026-05-12 22:28:59 +06:00
parent ca96e13579
commit 0485bb2744
6 changed files with 93 additions and 73 deletions
@@ -1,9 +1,12 @@
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ThemeProvider } from "@/contexts/ThemeContext";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { AnimatePresence } from "framer-motion";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 import ScrollToTop from "./components/ScrollToTop";
+import OverviewPage from "./pages/admins/components/dashboards/OverviewPage";
+import ManageProject from "./pages/admins/components/projects/ManageProject";
 import DashboardLayout from "./pages/admins/layout/DashboardLayout";
 import MainLayout from "./pages/admins/layout/MainLayout";
 import Index from "./pages/Index";
@@ -12,10 +15,6 @@ import { PrivacyPolicy } from "./pages/PrivacyPolicy";
 import ProjectDetails from "./pages/ProjectDetails";
 import Projects from "./pages/Projects";
 import { QueryProvider } from "./provider/QueryProvider";
-import OverviewPage from "./pages/admins/components/dashboards/OverviewPage";
-import ManageProject from "./pages/admins/components/projects/ManageProject";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-

 function AnimatedRoutes() {
  const location = useLocation();
@@ -36,7 +35,7 @@ function AnimatedRoutes() {
        {/* dashboard layouts */}
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<OverviewPage />} />
-          <Route path="/dashboard/projects" element={<ManageProject/>}/>
+          <Route path="/dashboard/projects" element={<ManageProject />} />
          {/* <Route path="users" element={<Users />} />
    <Route path="settings" element={<Settings />} /> */}
        </Route>
@@ -54,7 +53,6 @@ const App = () => (
        <Sonner />
        <BrowserRouter>
          <ScrollToTop />
-
          <AnimatedRoutes />
        </BrowserRouter>
      </TooltipProvider>
@@ -66,7 +66,7 @@ export default function HeroSection() {
        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
-        className="absolute bottom-1/4 right-[15%] w-24 h-24 border-2 border-neon-purple/30 rotate-45"
+        className="absolute bottom-1/4 right-[15%] w-24 h-24 border-2 border-primary/30 rotate-45"
        style={{
          transform:
            "translate(calc(var(--mouse-x, 0) * 0.5), calc(var(--mouse-y, 0) * 0.5)) rotate(45deg)",
@@ -74,22 +74,6 @@ export default function HeroSection() {
        animate={{ rotate: [45, 405] }}
        transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
      />
-      <motion.div
-        className="absolute top-1/3 right-[25%] w-16 h-16 bg-neon-green/10 rounded-lg"
-        style={{
-          transform:
-            "translate(calc(var(--mouse-x, 0) * 1.5), calc(var(--mouse-y, 0) * 1.5))",
-        }}
-        animate={{
-          y: [-10, 10, -10],
-          rotate: [0, 180, 360],
-        }}
-        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
-      />
-
-      {/* Glowing orbs */}
-      <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/20 rounded-full blur-[100px] animate-float" />
-      <div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-neon-purple/20 rounded-full blur-[80px] animate-float-delayed" />

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-center">
@@ -100,15 +84,49 @@ export default function HeroSection() {
        >
          {/* Badge */}
          <motion.div
-            initial={{ opacity: 0, scale: 0.8 }}
+            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
-            transition={{ delay: 0.2 }}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8"
+            transition={{ duration: 0.5, ease: "easeOut" }}
+            className="relative group inline-flex items-center justify-center p-[1.5px] overflow-hidden rounded-full mb-4"
          >
-            <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
-            <span className="text-sm font-medium text-muted-foreground">
-              Innovating the Future
+    
+            <motion.div
+              animate={{
+                rotate: [0, 360],
+              }}
+              transition={{
+                duration: 3,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+              style={{
+                background: `conic-gradient(from 0deg, 
+            transparent 40%, 
+            hsl(var(--accent-neon)) 50%, 
+            hsl(var(--accent-neon-glow)) 60%, 
+            transparent 80%)`,
+              }}
+              className="absolute inset-[-200%] aspect-square"
+            />
+
+            <div className="relative z-10 px-4 py-1.5 rounded-full bg-background/80 backdrop-blur-xl border border-white/5 flex items-center gap-2">
+              {/* Animated Active Pulse Dot */}
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[hsl(var(--accent-neon))] opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-[hsl(var(--accent-neon))]"></span>
              </span>
+
+             
+              <span className="text-sm font-medium tracking-tight text-foreground/90">
+                Empowering Ideas Through Innovation
+              </span>
+            </div>
+
+            {/* 3. Outer Glow (Glows based on theme) */}
+            <div
+              className="absolute inset-0 rounded-full blur-md opacity-20 group-hover:opacity-40 transition-opacity duration-500"
+              style={{ backgroundColor: "hsl(var(--accent-neon))" }}
+            />
          </motion.div>

          {/* Main headline */}
@@ -125,7 +143,7 @@ export default function HeroSection() {
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
-              className="block text-primary neon-text-glow"
+              className="block text-primary"
            >
              with Technology
            </motion.span>
@@ -160,7 +178,7 @@ export default function HeroSection() {
            <Button
              size="lg"
              variant="outline"
-              className="font-semibold px-8 py-6 text-lg rounded-full border-primary bg-primary/10 transition-all"
+              className="font-semibold hover:neon-glow px-8 py-6 text-lg rounded-full border-primary bg-primary/10 transition-all"
            >
              <Link to="/projects">View Our Work</Link>
            </Button>
@@ -80,23 +80,23 @@ export default function Navbar() {
                    className="relative text-foreground/80 hover:text-foreground transition-colors font-medium group"
                  >
                    {item.name}
-                    <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full neon-glow" />
+                    <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full " />
                  </a>
                </motion.li>
              ))}
            </ul>

            {/* Theme Controls */}
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
              {/* Accent Color Picker */}
-              <div className="flex items-center gap-1.5 p-1 rounded-full glass">
+              <div className="flex items-center gap-1.5 rounded-full glass p-1">
                {accentColors.map((color) => (
                  <motion.button
                    key={color.name}
                    onClick={() => setAccent(color.name)}
                    className={`w-6 h-6 rounded-full ${color.color} transition-all ${
                      accent === color.name
-                        ? "ring-2 dark:ring-white ring-primary ring-offset-2 ring-offset-background"
+                        ? "ring-1 dark:ring-white ring-primary ring-offset-2 ring-offset-background"
                        : ""
                    }`}
                    whileHover={{ scale: 1.2 }}
@@ -148,7 +148,7 @@ export default function Navbar() {
            >
              <Button
                onClick={() => setIsModalOpen(true)}
-                className="bg-primary text-primary-foreground font-semibold px-6 py-2 rounded-full animate-pulse-glow hover:scale-105 transition-transform"
+                className="bg-primary text-primary-foreground font-semibold px-6 py-2 rounded-full transition-transform neon-glow hover:neon-glow-strong"
              >
                Talk with Us
              </Button>
@@ -228,7 +228,7 @@ export default function Navbar() {
                        onClick={() => setAccent(color.name)}
                        className={`w-8 h-8 rounded-full ${color.color} transition-all ${
                          accent === color.name
-                            ? "ring-2 ring-white ring-offset-2 ring-offset-background"
+                            ? "ring-2 ring-white ring-offset-1 ring-offset-background"
                            : ""
                        }`}
                        aria-label={`Set ${color.name} theme`}
@@ -256,7 +256,7 @@ export default function Navbar() {
                    setIsMobileMenuOpen(false);
                    setIsModalOpen(true);
                  }}
-                  className="w-full bg-primary text-primary-foreground font-semibold py-3 rounded-full neon-glow"
+                  className="w-full bg-primary text-primary-foreground font-semibold py-3 rounded-full"
                >
                  Let Me Talk
                </Button>
@@ -39,11 +39,7 @@ export default function ServicesSection() {

  return (
    <section id="services" ref={ref} className="py-20 relative overflow-hidden">
-      {/* Background decoration */}
-      <div className="absolute inset-0 opacity-30">
-        <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">
        {/* Section Header */}
@@ -57,7 +53,7 @@ export default function ServicesSection() {
            Our Expertise
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
-            What We <span className="text-primary neon-text-glow">Do</span>
+            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
@@ -79,9 +75,9 @@ export default function ServicesSection() {
              {/* 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 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>
+                </div> */}

                {/* Icon */}
                <motion.div
@@ -125,9 +125,6 @@
    --accent-neon: var(--neon-green);
    --accent-neon-glow: 146 51% 50%;
  }
-}
-
-@layer base {
   * {
    @apply border-border;
  }
@@ -141,6 +138,8 @@
  }
 }

+
+
@layer utilities {
  /* Neon glow effects */
  .neon-glow {
@@ -189,21 +188,29 @@
    );
  }

-  .gradient-primary-animated {
+.gradient-primary-animated {
  background: linear-gradient(
-      135deg,
+    180deg,
    hsl(var(--neon-blue)) 0%,
-      hsl(var(--neon-purple)) 50%,
-      hsl(var(--neon-green)) 100%
-    );
-    background-size: 200% 200%;
-    animation: gradient-shift 8s ease infinite;
-  }
+    hsl(var(--neon-purple)) 100%,
 
-  @keyframes gradient-shift {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
+  );
+  
+  background-size: 100% 200%;
+  animation: gradient-shift 8s ease infinite;
+}
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 50% 0%;
  }
+  50% {
+    background-position: 50% 100%;
+  }
+  100% {
+    background-position: 50% 0%;
+  }
+}

  /* Animated border gradient */
  .border-gradient {
@@ -242,9 +249,9 @@
  }

  /* Pulse glow */
-  .animate-pulse-glow {
+  /* .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
-  }
+  } */

  @keyframes pulse-glow {
    0%, 100% {
@@ -283,4 +290,7 @@
  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }
+
+  
 }
+
@@ -1,9 +1,7 @@
 import AboutSection from "@/components/AboutSection";
 import ContactSection from "@/components/ContactSection";
 import FAQSection from "@/components/FAQSection";
-import Footer from "@/components/Footer";
 import HeroSection from "@/components/HeroSection";
-import Navbar from "@/components/Navbar";
 import PageTransition from "@/components/PageTransition";
 import ProjectsSection from "@/components/ProjectsSection";
 import ServicesSection from "@/components/ServicesSection";
@@ -14,7 +12,7 @@ const Index = () => {
  return (
    <PageTransition>
      <div className="min-h-screen bg-background overflow-x-hidden">
-        <Navbar />
+        
        <HeroSection />
        <ServicesSection />
        <ProjectsSection />
@@ -24,7 +22,7 @@ const Index = () => {
        {/* <BlogSection /> */}
        <FAQSection />
        <ContactSection />
-        <Footer />
+       
      </div>
    </PageTransition>
  );