Skip to content

Add header and hero-section components #11

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

Merged
VIDYANKSHINI merged 1 commit into from
May 14, 2026
Merged

Add header and hero-section components #11

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
259 changes: 259 additions & 0 deletions components/natyasetu/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X, Theater, ChevronDown, User, LogOut } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useAuth } from "@/lib/auth-context"

const navLinks = [
{ href: "#events", label: "Events" },
{ href: "#artists", label: "Artists" },
{ href: "#how-it-works", label: "How It Works" },
{ href: "#about", label: "About" },
]

const exploreLinks = [
{ href: "#", label: "Marathi Plays" },
{ href: "#", label: "Hindi Theatre" },
{ href: "#", label: "Street Performances" },
{ href: "#", label: "College Events" },
]

export function Header() {
const [isOpen, setIsOpen] = useState(false)
const [scrolled, setScrolled] = useState(false)
const { user, isAuthenticated, openAuthModal, logout } = useAuth()

useEffect(() => {
const handleScroll = () => {
setScrolled(window.scrollY > 50)
}
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, [])

return (
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
scrolled
? "bg-background/95 backdrop-blur-lg border-b border-border shadow-sm"
: "bg-transparent"
}`}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-18 md:h-20">
{/* Logo */}
<Link href="/" className="flex items-center gap-2.5 group">
<div className={`p-2 rounded-lg transition-all duration-300 ${scrolled ? "bg-primary/10" : "bg-background/10"}`}>
<Theater className={`h-6 w-6 transition-colors duration-300 ${scrolled ? "text-primary" : "text-background"}`} />
</div>
<div className="flex flex-col">
<span className={`font-serif text-xl font-bold transition-colors duration-300 ${scrolled ? "text-foreground" : "text-background"}`}>
NatyaSetu
</span>
<span className={`text-[10px] tracking-widest uppercase transition-colors duration-300 ${scrolled ? "text-muted-foreground" : "text-background/60"}`}>
Theatre Discovery
</span>
</div>
</Link>

{/* Desktop Navigation */}
<nav className="hidden lg:flex items-center gap-1">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className={`px-4 py-2 rounded-lg font-medium transition-all duration-300 ${
scrolled
? "text-muted-foreground hover:text-primary hover:bg-muted"
: "text-background/80 hover:text-background hover:bg-background/10"
}`}
>
{link.label}
</Link>
))}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className={`flex items-center gap-1 px-4 py-2 rounded-lg font-medium transition-all duration-300 ${
scrolled
? "text-muted-foreground hover:text-primary hover:bg-muted"
: "text-background/80 hover:text-background hover:bg-background/10"
}`}>
Explore
<ChevronDown className="h-4 w-4" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{exploreLinks.map((link) => (
<DropdownMenuItem key={link.label} asChild>
<Link href={link.href}>{link.label}</Link>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</nav>

{/* Desktop CTA */}
<div className="hidden lg:flex items-center gap-3">
{isAuthenticated ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex items-center gap-2 p-1.5 rounded-full hover:bg-muted/50 transition-colors">
<img
src={user?.avatar}
alt={user?.name}
className="w-9 h-9 rounded-full ring-2 ring-primary/20"
/>
<span className={`font-medium ${scrolled ? "text-foreground" : "text-background"}`}>
{user?.name}
</span>
<ChevronDown className={`h-4 w-4 ${scrolled ? "text-muted-foreground" : "text-background/60"}`} />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<div className="px-3 py-2">
<p className="font-medium text-foreground">{user?.name}</p>
<p className="text-sm text-muted-foreground">{user?.email}</p>
</div>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User className="mr-2 h-4 w-4" />
My Profile
</DropdownMenuItem>
<DropdownMenuItem>My Bookings</DropdownMenuItem>
<DropdownMenuItem>Saved Events</DropdownMenuItem>
<DropdownMenuItem>Following</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout} className="text-destructive">
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<Button
variant="ghost"
className={`transition-colors duration-300 ${
scrolled
? "text-foreground hover:bg-muted"
: "text-background hover:bg-background/10"
}`}
onClick={() => openAuthModal("login")}
>
Sign In
</Button>
<Button
className="bg-accent text-accent-foreground hover:bg-accent/90 shadow-md hover:shadow-lg transition-all duration-300"
onClick={() => openAuthModal("signup")}
>
List Your Event
</Button>
</>
)}
</div>

{/* Mobile Menu Button */}
<button
className={`lg:hidden p-2.5 rounded-lg transition-colors duration-300 ${
scrolled
? "text-foreground hover:bg-muted"
: "text-background hover:bg-background/10"
}`}
onClick={() => setIsOpen(!isOpen)}
aria-label="Toggle menu"
>
{isOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>

{/* Mobile Navigation */}
{isOpen && (
<div className="lg:hidden py-4 border-t border-border bg-background rounded-b-2xl shadow-xl animate-in slide-in-from-top duration-300">
<nav className="flex flex-col gap-1 px-2">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-foreground hover:text-primary hover:bg-muted px-4 py-3 rounded-lg transition-colors font-medium"
onClick={() => setIsOpen(false)}
>
{link.label}
</Link>
))}
<div className="border-t border-border my-2" />
<p className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
Explore
</p>
{exploreLinks.map((link) => (
<Link
key={link.label}
href={link.href}
className="text-muted-foreground hover:text-primary hover:bg-muted px-4 py-2.5 rounded-lg transition-colors text-sm"
onClick={() => setIsOpen(false)}
>
{link.label}
</Link>
))}
<div className="flex flex-col gap-2 pt-4 mt-2 border-t border-border px-2">
{isAuthenticated ? (
<>
<div className="flex items-center gap-3 px-2 py-2">
<img
src={user?.avatar}
alt={user?.name}
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-medium text-foreground">{user?.name}</p>
<p className="text-sm text-muted-foreground">{user?.email}</p>
</div>
</div>
<Button variant="outline" className="justify-center" onClick={logout}>
<LogOut className="mr-2 h-4 w-4" />
Sign Out
</Button>
</>
) : (
<>
<Button
variant="outline"
className="justify-center"
onClick={() => {
openAuthModal("login")
setIsOpen(false)
}}
>
Sign In
</Button>
<Button
className="bg-accent text-accent-foreground justify-center"
onClick={() => {
openAuthModal("signup")
setIsOpen(false)
}}
>
List Your Event
</Button>
</>
)}
</div>
</nav>
</div>
)}
</div>
</header>
)
}
119 changes: 119 additions & 0 deletions components/natyasetu/hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
"use client"

import { Button } from "@/components/ui/button"
import { Sparkles, MapPin, Play, Users, Calendar } from "lucide-react"
import { useAuth } from "@/lib/auth-context"
import { useRef, useEffect } from "react"

export function HeroSection() {
const { openAuthModal } = useAuth()
const videoRef = useRef<HTMLVideoElement>(null)

useEffect(() => {
if (videoRef.current) {
videoRef.current.playbackRate = 0.5
}
}, [])

return (
<section className="relative h-screen min-h-screen flex items-center justify-center overflow-hidden mb-20">
{/* Theatre Background Video */}
<div className="absolute inset-0">
<video
ref={videoRef}
autoPlay
muted
playsInline
className="w-full h-full object-cover object-center"
>
<source src="/hero-theatre-bg.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
{/* Dark overlay for text readability */}
<div className="absolute inset-0 bg-foreground/60" />
{/* Subtle vignette */}
<div className="absolute inset-0 bg-gradient-to-b from-foreground/40 via-transparent to-foreground/70" />
</div>

{/* Content */}
<div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-24">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-5 py-2.5 bg-accent/15 backdrop-blur-sm rounded-full mb-8 border border-accent/20">
<Sparkles className="h-4 w-4 text-accent" />
<span className="text-sm font-semibold text-accent tracking-wide">
Discover Live Theatre Near You
</span>
</div>

{/* Heading */}
<h1 className="font-serif text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-background mb-6 leading-[1.1] tracking-tight">
<span className="block mb-2">Experience the Magic of</span>
<span className="relative inline-block">
<span className="relative z-10 text-white bg-[length:200%_auto]">
Indian Theatre
</span>
<span className="absolute bottom-2 left-0 right-0 h-3 bg-accent/20 -z-10 rounded" />
</span>
</h1>

{/* Description */}
<p className="text-lg md:text-xl text-background/75 max-w-2xl mx-auto mb-12 leading-relaxed text-pretty">
Connecting you to local nataks, talented artists, and unforgettable live performances.
From Marathi plays to street theatre — discover it all.
</p>

{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<Button
size="lg"
className="bg-accent text-accent-foreground hover:bg-accent/90 text-base md:text-lg px-8 py-6 rounded-full shadow-lg shadow-accent/25 hover:shadow-xl hover:shadow-accent/30 transition-all duration-300 hover:-translate-y-1"
>
<MapPin className="mr-2 h-5 w-5" />
Explore Events
</Button>
<Button
size="lg"
variant="outline"
className="border-2 border-background/25 text-background hover:bg-background/10 hover:border-background/40 text-base md:text-lg px-8 py-6 rounded-full transition-all duration-300 group"
onClick={() => openAuthModal("signup")}
>
<Play className="mr-2 h-5 w-5 group-hover:scale-110 transition-transform" />
Join Now
</Button>
</div>

{/* Stats */}
<div className="grid grid-cols-3 gap-6 md:gap-12 max-w-xl mx-auto">
<div className="text-center group">
<div className="flex items-center justify-center gap-2 mb-1">
<Calendar className="h-5 w-5 text-accent opacity-75" />
<p className="text-3xl md:text-4xl font-bold text-accent">500+</p>
</div>
<p className="text-sm text-background/50 font-medium">Live Events</p>
</div>
<div className="text-center group">
<div className="flex items-center justify-center gap-2 mb-1">
<Users className="h-5 w-5 text-accent opacity-75" />
<p className="text-3xl md:text-4xl font-bold text-accent">200+</p>
</div>
<p className="text-sm text-background/50 font-medium">Artists</p>
</div>
<div className="text-center group">
<div className="flex items-center justify-center gap-2 mb-1">
<MapPin className="h-5 w-5 text-accent opacity-75" />
<p className="text-3xl md:text-4xl font-bold text-accent">50+</p>
</div>
<p className="text-sm text-background/50 font-medium">Cities</p>
</div>
</div>
</div>

{/* Scroll Indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2">
<div className="w-7 h-11 border-2 border-background/30 rounded-full flex items-start justify-center p-1.5">
<div className="w-1.5 h-3 bg-accent rounded-full" />
</div>
</div>
</section>
)
}
Loading