summer2026/techzaa-frontend
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fixed nav and hero section design

Browse Source
This commit is contained in:
sanjidarimi
2026-05-12 22:28:59 +06:00
parent ca96e13579
commit 0485bb2744
6 changed files with 93 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+6 -8
View File
@@ -1,9 +1,12 @@
import { Toaster as Sonner } from "@/components/ui/sonner"; import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { ThemeProvider } from "@/contexts/ThemeContext"; import { ThemeProvider } from "@/contexts/ThemeContext";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { AnimatePresence } from "framer-motion"; import { AnimatePresence } from "framer-motion";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom"; import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import ScrollToTop from "./components/ScrollToTop"; 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 DashboardLayout from "./pages/admins/layout/DashboardLayout";
import MainLayout from "./pages/admins/layout/MainLayout"; import MainLayout from "./pages/admins/layout/MainLayout";
import Index from "./pages/Index"; import Index from "./pages/Index";
@@ -12,10 +15,6 @@ import { PrivacyPolicy } from "./pages/PrivacyPolicy";
import ProjectDetails from "./pages/ProjectDetails"; import ProjectDetails from "./pages/ProjectDetails";
import Projects from "./pages/Projects"; import Projects from "./pages/Projects";
import { QueryProvider } from "./provider/QueryProvider"; 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() { function AnimatedRoutes() {
const location = useLocation(); const location = useLocation();
@@ -36,8 +35,8 @@ function AnimatedRoutes() {
{/* dashboard layouts */} {/* dashboard layouts */}
<Route path="/dashboard" element={<DashboardLayout />}> <Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<OverviewPage />} /> <Route index element={<OverviewPage />} />
<Route path="/dashboard/projects" element={<ManageProject/>}/> <Route path="/dashboard/projects" element={<ManageProject />} />
{/* <Route path="users" element={<Users />} /> {/* <Route path="users" element={<Users />} />
<Route path="settings" element={<Settings />} /> */} <Route path="settings" element={<Settings />} /> */}
</Route> </Route>
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
@@ -48,13 +47,12 @@ function AnimatedRoutes() {
const App = () => ( const App = () => (
<QueryProvider> <QueryProvider>
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
<ThemeProvider> <ThemeProvider>
<TooltipProvider> <TooltipProvider>
<Sonner /> <Sonner />
<BrowserRouter> <BrowserRouter>
<ScrollToTop /> <ScrollToTop />
<AnimatedRoutes /> <AnimatedRoutes />
</BrowserRouter> </BrowserRouter>
</TooltipProvider> </TooltipProvider>
src/components/HeroSection.tsx
+44 -26
View File
@@ -66,7 +66,7 @@ export default function HeroSection() {
transition={{ duration: 20, repeat: Infinity, ease: "linear" }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
/> />
<motion.div <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={{ style={{
transform: transform:
"translate(calc(var(--mouse-x, 0) * 0.5), calc(var(--mouse-y, 0) * 0.5)) rotate(45deg)", "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] }} animate={{ rotate: [45, 405] }}
transition={{ duration: 25, repeat: Infinity, ease: "linear" }} 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 */} {/* Content */}
<div className="relative z-10 container mx-auto px-4 text-center"> <div className="relative z-10 container mx-auto px-4 text-center">
@@ -100,15 +84,49 @@ export default function HeroSection() {
> >
{/* Badge */} {/* Badge */}
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }} transition={{ duration: 0.5, ease: "easeOut" }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8" 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"> <motion.div
Innovating the Future animate={{
</span> 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> </motion.div>
{/* Main headline */} {/* Main headline */}
@@ -125,7 +143,7 @@ export default function HeroSection() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }} transition={{ delay: 0.5 }}
className="block text-primary neon-text-glow" className="block text-primary"
> >
with Technology with Technology
</motion.span> </motion.span>
@@ -160,7 +178,7 @@ export default function HeroSection() {
<Button <Button
size="lg" size="lg"
variant="outline" 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> <Link to="/projects">View Our Work</Link>
</Button> </Button>
src/components/Navbar.tsx
+8 -8
View File
@@ -80,23 +80,23 @@ export default function Navbar() {
className="relative text-foreground/80 hover:text-foreground transition-colors font-medium group" className="relative text-foreground/80 hover:text-foreground transition-colors font-medium group"
> >
{item.name} {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> </a>
</motion.li> </motion.li>
))} ))}
</ul> </ul>
{/* Theme Controls */} {/* Theme Controls */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
{/* Accent Color Picker */} {/* 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) => ( {accentColors.map((color) => (
<motion.button <motion.button
key={color.name} key={color.name}
onClick={() => setAccent(color.name)} onClick={() => setAccent(color.name)}
className={`w-6 h-6 rounded-full ${color.color} transition-all ${ className={`w-6 h-6 rounded-full ${color.color} transition-all ${
accent === color.name 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 }} whileHover={{ scale: 1.2 }}
@@ -148,9 +148,9 @@ export default function Navbar() {
> >
<Button <Button
onClick={() => setIsModalOpen(true)} 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 Talk with Us
</Button> </Button>
</motion.div> </motion.div>
</div> </div>
@@ -228,7 +228,7 @@ export default function Navbar() {
onClick={() => setAccent(color.name)} onClick={() => setAccent(color.name)}
className={`w-8 h-8 rounded-full ${color.color} transition-all ${ className={`w-8 h-8 rounded-full ${color.color} transition-all ${
accent === color.name 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`} aria-label={`Set ${color.name} theme`}
@@ -256,7 +256,7 @@ export default function Navbar() {
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
setIsModalOpen(true); 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 Let Me Talk
</Button> </Button>
src/components/ServicesSection.tsx
+4 -8
View File
@@ -39,11 +39,7 @@ 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">
{/* 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"> <div className="container mx-auto px-4 relative z-10">
{/* Section Header */} {/* Section Header */}
@@ -57,7 +53,7 @@ export default function ServicesSection() {
Our Expertise Our Expertise
</span> </span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4"> <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> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg"> <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
We deliver comprehensive technology solutions that empower We deliver comprehensive technology solutions that empower
@@ -79,9 +75,9 @@ export default function ServicesSection() {
{/* Card */} {/* Card */}
<div className="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden"> <div className="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden">
{/* Glow effect on hover */} {/* 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 className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" />
</div> </div> */}
{/* Icon */} {/* Icon */}
<motion.div <motion.div
src/index.css
+29 -19
View File
@@ -125,10 +125,7 @@
--accent-neon: var(--neon-green); --accent-neon: var(--neon-green);
--accent-neon-glow: 146 51% 50%; --accent-neon-glow: 146 51% 50%;
} }
} * {
@layer base {
* {
@apply border-border; @apply border-border;
} }
@@ -141,6 +138,8 @@
} }
} }
@layer utilities { @layer utilities {
/* Neon glow effects */ /* Neon glow effects */
.neon-glow { .neon-glow {
@@ -189,21 +188,29 @@
); );
} }
.gradient-primary-animated { .gradient-primary-animated {
background: linear-gradient( background: linear-gradient(
135deg, 180deg,
hsl(var(--neon-blue)) 0%, hsl(var(--neon-blue)) 0%,
hsl(var(--neon-purple)) 50%, hsl(var(--neon-purple)) 100%,
hsl(var(--neon-green)) 100%
); );
background-size: 200% 200%;
animation: gradient-shift 8s ease infinite; background-size: 100% 200%;
} animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift { @keyframes gradient-shift {
0%, 100% { background-position: 0% 50%; } 0% {
50% { background-position: 100% 50%; } background-position: 50% 0%;
} }
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
/* Animated border gradient */ /* Animated border gradient */
.border-gradient { .border-gradient {
@@ -242,9 +249,9 @@
} }
/* Pulse glow */ /* Pulse glow */
.animate-pulse-glow { /* .animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite; animation: pulse-glow 2s ease-in-out infinite;
} } */
@keyframes pulse-glow { @keyframes pulse-glow {
0%, 100% { 0%, 100% {
@@ -283,4 +290,7 @@
@keyframes shimmer { @keyframes shimmer {
100% { transform: translateX(100%); } 100% { transform: translateX(100%); }
} }
} }
src/pages/Index.tsx
+2 -4
View File
@@ -1,9 +1,7 @@
import AboutSection from "@/components/AboutSection"; import AboutSection from "@/components/AboutSection";
import ContactSection from "@/components/ContactSection"; import ContactSection from "@/components/ContactSection";
import FAQSection from "@/components/FAQSection"; import FAQSection from "@/components/FAQSection";
import Footer from "@/components/Footer";
import HeroSection from "@/components/HeroSection"; import HeroSection from "@/components/HeroSection";
import Navbar from "@/components/Navbar";
import PageTransition from "@/components/PageTransition"; import PageTransition from "@/components/PageTransition";
import ProjectsSection from "@/components/ProjectsSection"; import ProjectsSection from "@/components/ProjectsSection";
import ServicesSection from "@/components/ServicesSection"; import ServicesSection from "@/components/ServicesSection";
@@ -14,7 +12,7 @@ const Index = () => {
return ( return (
<PageTransition> <PageTransition>
<div className="min-h-screen bg-background overflow-x-hidden"> <div className="min-h-screen bg-background overflow-x-hidden">
<Navbar />
<HeroSection /> <HeroSection />
<ServicesSection /> <ServicesSection />
<ProjectsSection /> <ProjectsSection />
@@ -24,7 +22,7 @@ const Index = () => {
{/* <BlogSection /> */} {/* <BlogSection /> */}
<FAQSection /> <FAQSection />
<ContactSection /> <ContactSection />
<Footer />
</div> </div>
</PageTransition> </PageTransition>
); );