From 9f86cb92875ed28fd36e8f795c71162a6fadf1bb Mon Sep 17 00:00:00 2001 From: VIDYANKSHINI Date: Thu, 14 May 2026 22:04:44 +0530 Subject: [PATCH] Add header and hero-section components --- components/natyasetu/header.tsx | 259 ++++++++++++++++++++++++++ components/natyasetu/hero-section.tsx | 119 ++++++++++++ 2 files changed, 378 insertions(+) create mode 100644 components/natyasetu/header.tsx create mode 100644 components/natyasetu/hero-section.tsx diff --git a/components/natyasetu/header.tsx b/components/natyasetu/header.tsx new file mode 100644 index 0000000..e2d39e8 --- /dev/null +++ b/components/natyasetu/header.tsx @@ -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 ( +
+
+
+ {/* Logo */} + +
+ +
+
+ + NatyaSetu + + + Theatre Discovery + +
+ + + {/* Desktop Navigation */} + + + {/* Desktop CTA */} +
+ {isAuthenticated ? ( + + + + + +
+

{user?.name}

+

{user?.email}

+
+ + + + My Profile + + My Bookings + Saved Events + Following + + + + Sign Out + + + + ) : ( + <> + + + + )} +
+ + {/* Mobile Menu Button */} + +
+ + {/* Mobile Navigation */} + {isOpen && ( +
+ +
+ )} +
+
+ ) +} diff --git a/components/natyasetu/hero-section.tsx b/components/natyasetu/hero-section.tsx new file mode 100644 index 0000000..8936382 --- /dev/null +++ b/components/natyasetu/hero-section.tsx @@ -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(null) + + useEffect(() => { + if (videoRef.current) { + videoRef.current.playbackRate = 0.5 + } + }, []) + + return ( +
+ {/* Theatre Background Video */} +
+ + {/* Dark overlay for text readability */} +
+ {/* Subtle vignette */} +
+
+ + {/* Content */} +
+ {/* Badge */} +
+ + + Discover Live Theatre Near You + +
+ + {/* Heading */} +

+ Experience the Magic of + + + Indian Theatre + + + +

+ + {/* Description */} +

+ Connecting you to local nataks, talented artists, and unforgettable live performances. + From Marathi plays to street theatre — discover it all. +

+ + {/* CTA Buttons */} +
+ + +
+ + {/* Stats */} +
+
+
+ +

500+

+
+

Live Events

+
+
+
+ +

200+

+
+

Artists

+
+
+
+ +

50+

+
+

Cities

+
+
+
+ + {/* Scroll Indicator */} +
+
+
+
+
+
+ ) +}