Skip to content

navbar herosection #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aman8543 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

navbar herosection #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 68 additions & 51 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,63 +209,80 @@ export default function HomePage() {


return (
<div className="min-h-screen">
<div className="min-h-screen px-0 mx-0">
{/* Hero Section - Full Viewport Height */}
<div className="min-h-screen flex items-center justify-center relative">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Left side - Welcome to HackHub */}
<div className="space-y-6">
<div className="relative">
{/* Main heading with enhanced styling */}
<div className="relative z-10 -mt-24 pb-8">
<h1 className="text-6xl lg:text-7xl font-black leading-tight">
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700 drop-shadow-sm">
<DecryptedText
text="Welcome to the On-Chain"
animateOn="view"
speed={75}
maxIterations={15}
sequential={true}
revealDirection="start"
className=""
encryptedClassName="text-amber-400/40"
/>
</span>
<span className="block text-6xl lg:text-8xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800 mt-4 tracking-tight">
<DecryptedText
text="Hackathon Hub."
animateOn="view"
speed={100}
maxIterations={20}
sequential={true}
revealDirection="center"
className=""
encryptedClassName="text-orange-400/30"
/>
</span>
</h1>

{/* Accent line */}
<div className="mt-6 w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>

<div className="mt-8">
<p className="text-xl lg:text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-orange-600 tracking-wider">
<DecryptedText
text="Transparent. Permissionless. Intuitive."
animateOn="view"
speed={60}
maxIterations={12}
sequential={true}
revealDirection="start"
className=""
encryptedClassName="text-amber-500/30"
/>
</p>
</div>
</div>
</div>
</div>
<div className="relative">
{/* Main heading with enhanced styling */}
<div className="relative z-10
mt-0 sm:-mt-16 lg:-mt-24
pb-8">

<h1 className="font-black leading-snug sm:leading-tight
text-4xl sm:text-5xl md:text-6xl lg:text-7xl
max-w-full break-words">

<span className="block text-transparent bg-clip-text
bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700
drop-shadow-sm">
<DecryptedText
text="Welcome to the On-Chain"
animateOn="view"
speed={75}
maxIterations={15}
sequential={true}
revealDirection="start"
className=""
encryptedClassName="text-amber-400/40"
/>
</span>

<span className="block font-extrabold text-transparent bg-clip-text
bg-gradient-to-r from-amber-700 via-orange-600 to-amber-800
mt-3 sm:mt-4 tracking-tight
text-4xl sm:text-6xl md:text-7xl lg:text-8xl">
<DecryptedText
text="Hackathon Hub."
animateOn="view"
speed={100}
maxIterations={20}
sequential={true}
revealDirection="center"
className=""
encryptedClassName="text-orange-400/30"
/>
</span>
</h1>

{/* Accent line */}
<div className="mt-6 w-24 h-1 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full shadow-lg"></div>

<div className="mt-8">
<p className="font-semibold tracking-wider
text-lg sm:text-xl lg:text-2xl
text-transparent bg-clip-text
bg-gradient-to-r from-amber-600 to-orange-600">
<DecryptedText
text="Transparent. Permissionless. Intuitive."
animateOn="view"
speed={60}
maxIterations={12}
sequential={true}
revealDirection="start"
className=""
encryptedClassName="text-amber-500/30"
/>
</p>
</div>

</div>
</div>
</div>


{/* Right side - HackHub image */}
<div className="flex justify-center lg:justify-end pt-0">
Expand Down
172 changes: 116 additions & 56 deletions components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,81 +2,141 @@

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ConnectButton } from '@rainbow-me/rainbowkit'
import { ConnectButton } from "@rainbow-me/rainbowkit"

// Helper function to get the correct image path for GitHub Pages
const getImagePath = (path: string) => {
// For static export, we need to ensure the path works with GitHub Pages
return path.startsWith('/') ? path : `/${path}`;
};
return path.startsWith("/") ? path : `/${path}`
}

export default function Navigation() {
const pathname = usePathname()
const [open, setOpen] = useState(false)

return (
<header className="border-b border-amber-100/60 bg-white/95 backdrop-blur-md sticky top-0 z-50 shadow-sm">
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
<div className="w-12 h-12 flex items-center justify-center">
<img
src={getImagePath("/block.png")}
alt="HackHub Logo"
width={48}
height={48}
className="object-contain"
<div className="px-3 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-14 sm:h-16">

{/* Logo */}
<Link
href="/"
className="flex items-center gap-2 sm:gap-3 hover:opacity-80 transition-opacity"
>
<div className="w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
<img
src={getImagePath("/block.png")}
alt="HackHub Logo"
className="object-contain w-10 h-10 sm:w-12 sm:h-12"
/>
</div>
<span className="font-bold text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
<span className="font-bold text-xl sm:text-2xl lg:text-3xl bg-gradient-to-r from-amber-700 to-orange-600 bg-clip-text text-transparent">
HackHub
</span>
</Link>


{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-1">
<Link href="/explorer">
<Button
variant="ghost"
className={`${
pathname === "/explorer"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
Explore Hackathons
</Button>
</Link>
<Link href="/createHackathon">
<Button
variant="ghost"
className={`${
pathname === "/myHackathons"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
Organize a Hackathon
</Button>
</Link>
<Link href="/myHackathons">
<Button
variant="ghost"
className={`${
pathname === "/createHackathon"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
My Hackathons
</Button>
</Link>
<NavButton href="/explorer" active={pathname === "/explorer"}>
Explore Hackathons
</NavButton>
<NavButton href="/createHackathon" active={pathname === "/createHackathon"}>
Organize a Hackathon
</NavButton>
<NavButton href="/myHackathons" active={pathname === "/myHackathons"}>
My Hackathons
</NavButton>
</nav>

<div className="flex items-center gap-3">
<ConnectButton />
{/* Right Section */}
<div className="flex items-center gap-2">
<div className="hidden sm:block">
<ConnectButton />
</div>

{/* Hamburger */}
<button
onClick={() => setOpen(!open)}
className="md:hidden flex flex-col justify-center gap-1.5 p-2"
aria-label="Open menu"
>
<span className="w-6 h-0.5 bg-gray-800" />
<span className="w-6 h-0.5 bg-gray-800" />
<span className="w-6 h-0.5 bg-gray-800" />
</button>
</div>
</div>
</div>

{/* Mobile Menu */}
{open && (
<div className="md:hidden border-t border-amber-100 bg-white">
<nav className="flex flex-col px-4 py-3 gap-2">
<MobileLink href="/explorer" onClick={() => setOpen(false)}>
Explore Hackathons
</MobileLink>
<MobileLink href="/createHackathon" onClick={() => setOpen(false)}>
Organize a Hackathon
</MobileLink>
<MobileLink href="/myHackathons" onClick={() => setOpen(false)}>
My Hackathons
</MobileLink>

<div className="pt-2 sm:hidden">
<ConnectButton />
</div>
</nav>
</div>
)}
</header>
)
}
}

/* ---------- helpers ---------- */

function NavButton({
href,
active,
children,
}: {
href: string
active: boolean
children: React.ReactNode
}) {
return (
<Link href={href}>
<Button
variant="ghost"
className={`${
active
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
{children}
</Button>
</Link>
)
}

function MobileLink({
href,
onClick,
children,
}: {
href: string
onClick: () => void
children: React.ReactNode
}) {
return (
<Link
href={href}
onClick={onClick}
className="px-3 py-2 rounded-md text-gray-700 hover:bg-amber-50 hover:text-amber-800 transition font-medium"
>
{children}
</Link>
)
}