From 8da0e1f603652880a20df69038b7a1bee705e996 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Fri, 3 Jul 2026 23:28:14 +0530 Subject: [PATCH] improved overall ui of header footer and home section and removed search bar --- components/footer.tsx | 85 ++---- components/navbar.tsx | 416 +++++++++++++++++++----------- features/landing/universities.tsx | 48 ++-- 3 files changed, 314 insertions(+), 235 deletions(-) diff --git a/components/footer.tsx b/components/footer.tsx index 78c1a2c..0339d34 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -184,9 +184,9 @@ export default function Footer() { {/* Premium Outer wrapper */}
{/* Top Section */} -
+
{/* Brand - Flexible Width */} -
+
{/* Navigation Container */} -
+
{/* Platform */} -
-

+
+

Platform

@@ -273,37 +273,9 @@ export default function Footer() {
  • - - • - - {item.name} - -
    • - ))} - -
    - - {/* Learning */} -
    -

    - Learning -

    -
    -
      - {[ - { name: "AI Notes", href: "/rgpv" }, - { name: "PYQs", href: "/rgpv" }, - { name: "AI Tutor", href: "/rgpv" }, - { name: "Syllabus", href: "/rgpv" }, - ].map((item) => ( -
    • - - + • {item.name} @@ -314,12 +286,12 @@ export default function Footer() {
    {/* Company */} -
    -

    +
    +

    Company

    -
    -
      +
      +
        {[ { name: "About Us", href: "/about" }, { name: "Contact", href: "/contact" }, @@ -329,9 +301,9 @@ export default function Footer() {
      • - + • {item.name} @@ -343,50 +315,45 @@ export default function Footer() {
      {/* Feature Cards */} -
      -
      +
      +
      {[ { title: "AI-Powered", - desc: "Smarter learning for better results", + desc: "Smarter learning", icon: Zap, }, { title: "Trusted & Secure", - desc: "Your data is safe and protected", + desc: "Data protected", icon: Shield, }, { - title: "Built for Engineers", - desc: "Designed by learners, for learners", + title: "For Engineers", + desc: "Designed by learners", icon: Users, }, { title: "Always Updated", - desc: "New content & features added", + desc: "New content added", icon: Bell, }, ].map((feature, idx) => (
      - {/* Faint Inner Top Highlight */} -
      - - {/* Icon with Radial Blue Glow */} -
      -
      +
      -

      +

      {feature.title}

      -

      +

      {feature.desc}

      diff --git a/components/navbar.tsx b/components/navbar.tsx index 13669b2..1ac7fd4 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -12,10 +12,13 @@ import { GraduationCap, MessageSquare, Info, + Search, } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { useTheme } from "next-themes"; import { useRouter, usePathname } from "next/navigation"; +import { universities } from "../features/landing/universities"; +import { toast } from "sonner"; const navLinks = [ { @@ -28,16 +31,16 @@ const navLinks = [ href: "/#Universities", icon: GraduationCap, }, - { - label: "Contact", - href: "/#Contact", - icon: MessageSquare, - }, { label: "About", href: "/about", icon: Info, }, + { + label: "Contact", + href: "/#Contact", + icon: MessageSquare, + }, ]; function MagneticNavItem({ @@ -55,7 +58,6 @@ function MagneticNavItem({ }) { const ref = useRef(null); const [position, setPosition] = useState({ x: 0, y: 0 }); - const [isHovered, setIsHovered] = useState(false); const handleMouse = (e: React.MouseEvent) => { const { clientX, clientY } = e; @@ -63,7 +65,7 @@ function MagneticNavItem({ const { height, width, left, top } = ref.current.getBoundingClientRect(); const middleX = clientX - (left + width / 2); const middleY = clientY - (top + height / 2); - setPosition({ x: middleX * 0.15, y: middleY * 0.15 }); + setPosition({ x: middleX * 0.1, y: middleY * 0.1 }); }; const reset = () => { @@ -75,34 +77,16 @@ function MagneticNavItem({ ref={ref} href={href} onMouseMove={handleMouse} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => { - reset(); - setIsHovered(false); - }} + onMouseLeave={reset} onClick={(e) => onClick(e, href)} animate={{ x: position.x, y: position.y }} - transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.1 }} - className={`group relative flex h-[40px] cursor-pointer items-center justify-center rounded-[12px] outline-none transition-all duration-500 ease-out ${ - isActive ? "" : "hover:-translate-y-[2px]" - }`} + transition={{ type: "spring", stiffness: 200, damping: 20, mass: 0.1 }} + className="group relative flex h-[48px] w-[64px] cursor-pointer items-center justify-center rounded-[8px] outline-none transition-colors duration-200 hover:bg-white/[0.04]" + aria-label={label} + title={label} > -
      +
      {children} - - {isHovered && ( - - {label} - - )} -
      ); @@ -110,6 +94,7 @@ function MagneticNavItem({ export default function Navbar() { const [isOpen, setIsOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); const [scrolled, setScrolled] = useState(false); const { theme, resolvedTheme, setTheme } = useTheme(); const [mounted, setMounted] = useState(false); @@ -119,6 +104,37 @@ export default function Navbar() { const [activeSection, setActiveSection] = useState("/#Home"); const isClickScrolling = useRef(false); + const handleSearchChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSearchQuery(value); + window.dispatchEvent( + new CustomEvent("university-search", { detail: value }) + ); + }; + + const handleSearchKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + const element = document.getElementById("Universities"); + if (element) { + element.scrollIntoView({ behavior: "smooth", block: "start" }); + } else { + router.push("/#Universities"); + } + setIsOpen(false); + } + }; + + const filteredUniversities = universities.filter((uni) => { + const query = searchQuery.trim().toLowerCase(); + if (!query) return false; + return ( + uni.name.toLowerCase().includes(query) || + uni.fullName.toLowerCase().includes(query) || + uni.description.toLowerCase().includes(query) || + uni.branches.some((branch) => branch.toLowerCase().includes(query)) + ); + }); + useEffect(() => { const timer = setTimeout(() => { setMounted(true); @@ -205,51 +221,113 @@ export default function Navbar() { }`} >
      -
      - {/* Logo */} - -
      - Hyper Learning Official Logo + {/* Left Side: Logo & Search */} +
      + {/* Logo */} + +
      + Hyper Learning Official Logo +
      + +
      + + Hyper Learning + +

      + AI-Powered Learning Platform +

      +
      + + + {/* Search Bar */} +
      + + -
      -
      - - Hyper Learning - -

      - AI-Powered Learning Platform -

      + {/* Desktop Search Dropdown */} + + {searchQuery && ( + + {filteredUniversities.length > 0 ? ( +
      + {filteredUniversities.map((uni) => ( + + ))} +
      + ) : ( +
      + No universities found +
      + )} +       + )} +
      - - - {/* Desktop Navigation - Ultra Premium Floating Dock */} -
      -
      - {navLinks.map((link, index) => { + {/* Center-Right: Desktop Navigation */} +
      +
      {/* Desktop Actions */} -
      +
      {mounted && ( )} Sign In - - - Start Learning -
      {/* Mobile Menu Button */} @@ -390,6 +438,82 @@ export default function Navbar() { className="overflow-hidden border-t border-border/50 bg-background/95 backdrop-blur-xl dark:border-white/10 dark:bg-[#091A40]/95 md:hidden" >
      + {/* Mobile Search Bar */} +
      +
      + + +
      + + {/* Mobile Search Dropdown */} + + {searchQuery && ( + + {filteredUniversities.length > 0 ? ( +
      + {filteredUniversities.map((uni) => ( + + ))} +
      + ) : ( +
      + No universities found +
      + )} +       + )} +       +
      + {navLinks.map((link) => { const isActive = (pathname === "/" && diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx index 0dd66d6..da6e1e4 100644 --- a/features/landing/universities.tsx +++ b/features/landing/universities.tsx @@ -1,10 +1,10 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { GraduationCap, ArrowRight, Sparkles, Search } from "lucide-react"; -const universities = [ +export const universities = [ { id: "rgpv", name: "RGPV", @@ -40,6 +40,18 @@ const universities = [ export default function Universities() { const [searchQuery, setSearchQuery] = useState(""); + useEffect(() => { + const handleSearch = (e: CustomEvent) => { + setSearchQuery(e.detail); + }; + window.addEventListener("university-search", handleSearch as EventListener); + return () => + window.removeEventListener( + "university-search", + handleSearch as EventListener + ); + }, []); + const filteredUniversities = universities.filter((uni) => { const query = searchQuery.trim().toLowerCase(); if (!query) return true; @@ -52,7 +64,7 @@ export default function Universities() { }); return ( -
      +
      {/* Background Layers */}
      {/* Light Mode Wavy Refraction Background - Centered with edge fade */} @@ -88,7 +100,7 @@ export default function Universities() { whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} viewport={{ once: true }} - className="mx-auto mb-6 max-w-3xl text-center" + className="mx-auto mb-16 md:mb-20 max-w-3xl text-center" >
      @@ -106,37 +118,13 @@ export default function Universities() {

    -

    +

    Hyper Learning is designed to evolve into a multi-university learning platform. Start with RGPV and expand to universities across India.

    - {/* Search Bar */} - -
    - setSearchQuery(e.target.value)} - placeholder="Search universities by name, branch, or location..." - className="w-full bg-transparent px-6 py-3 text-base text-foreground placeholder:text-muted-foreground/50 focus:outline-none" - /> -
    -
    - -
    -
    - - {/* Cards */}
    @@ -244,7 +232,7 @@ export default function Universities() { No universities found

    - Try adjusting your search query. + Try adjusting your search query in the navbar.

    )}