[V0_FILE]typescriptreact:file="components/section.tsx" isMerged="true" "use client" import { type HTMLAttributes } from "react" import { motion, useAnimation, useInView } from "framer-motion" import { cn } from "@/lib/utils" import { useEffect, useRef } from "react" type Props = HTMLAttributes & { id?: string } export default function Section({ className, children, id, ...props }: Props) { const ref = useRef(null) const inView = useInView(ref, { once: true, margin: "-100px" }) const controls = useAnimation() useEffect(() => { if (inView) controls.start("show") }, [inView, controls]) return ( {children} ) } [V0_FILE]typescriptreact:file="components/glow-card.tsx" isMerged="true" "use client" import { type HTMLAttributes } from "react" import { cn } from "@/lib/utils" type Props = HTMLAttributes & { accent?: "blue" | "green" | "yellow" | "red" } export default function GlowCard({ className, children, accent, ...props }: Props) { const accentClass = accent === "green" ? "shadow-[0_0_30px_rgba(39,201,63,0.25)] ring-success/20" : accent === "yellow" ? "shadow-[0_0_30px_rgba(229,197,88,0.25)] ring-warning/20" : accent === "red" ? "shadow-[0_0_30px_rgba(185,28,28,0.25)] ring-red-600/20" : "shadow-[0_0_34px_rgba(0,110,135,0.35)] ring-accent/20" return (

{children}

) } [V0_FILE]css:file="app/sapphire.css" isEdit="true" isMerged="true" /* Sapphire MUN — Clean Parallax Scroll Theme Navy: #00025F, #000339, #000827 Accent: #006E87 Text: #ECECEC Crisis Red: #B91C1C Voting Green: #27C93F Break Yellow: #E5C558 */ :root { --sapphire-900: #000339; --sapphire-950: #000827; --sapphire-980: #00025F; --accent: #006E87; --fg: #ECECEC; --muted: rgba(236, 236, 236, 0.7); --crisis: #B91C1C; --success: #27C93F; --warning: #E5C558; } .bg-sapphire-900 { background-color: var(--sapphire-900); } .bg-sapphire-950 { background-color: var(--sapphire-950); } .text-sapphire-foreground { color: var(--fg); } .text-sapphire-muted { color: var(--muted); } .bg-accent { background-color: var(--accent); } .text-accent { color: var(--accent); } .bg-success { background-color: var(--success); } .bg-warning { background-color: var(--warning); } /* Layout */ .container { max-width: 1120px; margin-inline: auto; padding-inline: 1rem; } .snap-y { scroll-snap-type: y mandatory; } .snap-start { scroll-snap-align: start; } /* Hero */ .hero-gradient { position: absolute; inset: 0; background: radial-gradient(800px 400px at 50% -10%, rgba(0, 110, 135, 0.35), transparent 60%), radial-gradient(600px 300px at 10% 20%, rgba(0, 8, 39, 0.9), transparent 60%), radial-gradient(600px 300px at 90% 20%, rgba(0, 2, 95, 0.6), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.25), transparent 30%, rgba(0,0,0,0.5)); } .accent-spot { position: absolute; inset: -10%; background: radial-gradient(500px 260px at 60% 40%, rgba(0, 110, 135, 0.55), transparent 60%), radial-gradient(500px 260px at 40% 60%, rgba(0, 2, 95, 0.45), transparent 60%); filter: blur(40px); } /* Glow utilities */ .glow-strong { box-shadow: 0 0 18px rgba(0, 110, 135, 0.5), 0 0 48px rgba(0, 110, 135, 0.35); } .parallax-glow { position: absolute; inset: 0; background: radial-gradient(500px 300px at 20% 20%, rgba(0,110,135,.35), transparent 60%), radial-gradient(600px 380px at 80% 60%, rgba(0,2,95,.35), transparent 60%); filter: blur(40px); } /* Pills and cards */ .pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; padding: 4px 10px; font-size: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); text-transform: uppercase; letter-spacing: .12em; } .glow-card { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 30px rgba(0,110,135,0.25); } .glow-dot { width: 8px; height: 8px; border-radius: 9999px; box-shadow: 0 0 12px currentColor; } .committee-card { border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); padding: 18px; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; } .committee-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.05); box-shadow: 0 0 30px rgba(0,110,135,0.25); } /* Timeline */ .timeline-step { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; position: relative; } .timeline-step .step-dot { width: 12px; height: 12px; border-radius: 9999px; display: block; margin-top: 6px; box-shadow: 0 0 22px rgba(255,255,255,0.25); } .timeline-step + .timeline-step::before { content: ""; position: absolute; left: 5px; top: -16px; bottom: 20px; width: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent); } /* Status badges */ .state-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 4px 10px; font-size: 12px; margin-right: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); } .state-badge::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; display: inline-block; } .state-green { color: #c8f8d1; border-color: rgba(39,201,63,0.35); } .state-yellow { color: #fff6cf; border-color: rgba(229,197,88,0.35); } .state-red { color: #ffd1d1; border-color: rgba(185,28,28,0.35); } .state-green::before { background: var(--success); box-shadow: 0 0 14px rgba(39,201,63,0.6); } .state-yellow::before { background: var(--warning); box-shadow: 0 0 14px rgba(229,197,88,0.6); } .state-red::before { background: var(--crisis); box-shadow: 0 0 14px rgba(185,28,28,0.6); } /* Docs tiles */ .doc-tile { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: var(--fg); } .doc-dot { width: 8px; height: 8px; border-radius: 9999px; box-shadow: 0 0 12px currentColor; } .doc-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: var(--fg); } .doc-link:hover { background: rgba(255,255,255,0.06); } .social-btn { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); color: var(--fg); } /* Scroll cue */ .scroll-cue { position: relative; width: 22px; height: 36px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.4); } .scroll-cue .dot { position: absolute; left: 50%; transform: translateX(-50%); top: 6px; width: 4px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,0.7); animation: scroll-dot 1.6s ease-in-out infinite; } @keyframes scroll-dot { 0% { transform: translate(-50%, 0); opacity: 1; } 80% { transform: translate(-50%, 16px); opacity: 0; } 100% { transform: translate(-50%, 16px); opacity: 0; } } /* Accent glow utility used across sections */ .bg-accent-glow { background: radial-gradient(400px 220px at 60% 40%, rgba(0, 110, 135, 0.55), transparent 60%), radial-gradient(400px 220px at 40% 60%, rgba(0, 2, 95, 0.45), transparent 60%); } /* Typography */ h1, h2, h3 { letter-spacing: 0.2px; } [V0_FILE]png:file="public/images/crest-6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-hPt7N1Y22trDRgIZZYy21Bt5x5V9xW.png" isMerged="true" [V0_FILE]plaintext:file="public/video/parallax-inspo.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artistic%20Parallax%20Slider%20for%20WordPress%20-%20Slider%20Revolution%20%28360p%2C%20h264%29-WYdiu0QySebH6HRB9A1Aa3TqHPffWo.mp4" isMerged="true" [V0_FILE]png:file="public/images/crest-1.png" url="https://blobs.vusercontent.net/blob/image-removebg-preview%20%281%29-0ZMCPQZPikGYJqLZvYM2iUd1XckjDi.svg" isMerged="true" [V0_FILE]png:file="public/images/glyph-8.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8-p8ZEDKtPMT5i5oiAIiDIgSRn0k0qiE.png" isMerged="true" [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true" import Link from 'next/link' import { Button } from '@/components/ui/button' import { useMobile } from '@/hooks/use-mobile' import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' import { Menu } from 'lucide-react' const NAV_ITEMS = [ { href: "#experience", label: "Experience" }, { href: "#committees", label: "Committees" }, { href: "#resources", label: "Resources" }, { href: "#register", label: "Register" }, ] export default function Navbar() { const isMobile = useMobile() return (

Sapphire MUN {isMobile ? (

{NAV_ITEMS.map((item) => ( {item.label} ))}

) : ( )}

) } [V0_FILE]typescriptreact:file="components/scroll-reveal.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" interface ScrollRevealProps { children: React.ReactNode className?: string } export default function ScrollReveal({ children, className }: ScrollRevealProps) { const ref = useRef(null) const [isVisible, setIsVisible] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1, rootMargin: "0px 0px -100px 0px" } ) if (ref.current) { observer.observe(ref.current) } return () => observer.disconnect() }, []) return ( {children} ) } [V0_FILE]xml:file="public/images/sapphire-emblem.svg" url="https://blobs.vusercontent.net/blob/image-removebg-preview%20%281%29-0ZMCPQZPikGYJqLZvYM2iUd1XckjDi.svg" isMerged="true" [V0_FILE]xml:file="public/images/sapphire-logo-provided.svg" url="https://blobs.vusercontent.net/blob/logo-5jPRiWclwSTuFH5aI1GG8m1VzHpAbb.svg" isMerged="true" [V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true" isMerged="true" import { useState, useEffect } from 'react'; export const useMobile = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); // Adjust breakpoint as needed }; // Set initial value handleResize(); // Listen for window resize events window.addEventListener('resize', handleResize); // Clean up event listener on unmount return () => { window.removeEventListener('resize', handleResize); }; }, []); return isMobile; }; [V0_FILE]png:file="public/images/sapphire-emblem-full.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-zf9frdxJg8VTDgi5J6KNv9A3aig19z.png" isMerged="true" [V0_FILE]typescriptreact:file="components/enhanced-scroll-reveal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { motion, useAnimation } from "framer-motion" interface EnhancedScrollRevealProps { children: React.ReactNode className?: string direction?: "up" | "left" | "right" | "fade" delay?: number duration?: number } export default function EnhancedScrollReveal({ children, className, direction = "up", delay = 0, duration = 0.9, }: EnhancedScrollRevealProps) { const ref = useRef(null) const [isVisible, setIsVisible] = useState(false) const controls = useAnimation() useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.15, rootMargin: "0px 0px -60px 0px" }, ) if (ref.current) observer.observe(ref.current) return () => observer.disconnect() }, []) useEffect(() => { if (isVisible) controls.start("visible") }, [isVisible, controls]) const variants = { hidden: { opacity: 0, y: direction === "up" ? 36 : 0, x: direction === "left" ? -36 : direction === "right" ? 36 : 0, scale: 0.985, filter: "brightness(0.95) saturate(0.95)", }, visible: { opacity: 1, y: 0, x: 0, scale: 1, filter: "brightness(1) saturate(1)", transition: { duration, delay, // fast start, slow finish ease: [0.05, 0.9, 0.2, 1], }, }, } return ( {children} ) } [V0_FILE]xml:file="public/images/logo-attachment.svg" url="https://blobs.vusercontent.net/blob/logo-mr8M343eJB9BM9NFSUSOu16tivForU.svg" isMerged="true" [V0_FILE]plaintext:file="public/video/alle-house.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/alle%20house%20%281%29-kmPSrW85x4Zre7OZDTK4e1x7khLVAf.mp4" isMerged="true" [V0_FILE]plaintext:file="MULTI" isQuickEdit="true" isMerged="true" // app/page.tsx import React from 'react'; import { ChunkSection, FloatingCard, Button, Link, Sparkles } from './components'; const Page = () => { return (

{/* Hero Section */}

Welcome to Sanskriti Degree College, Kondapur

Sanskriti Degree College, Kondapur • Social Night at Alle House

{/* Other hero content */}

{/* Social Night Section */}

After Hours

Social Night at Alle House

A well‑prepped social experience to unwind, connect, and celebrate. Music, safe logistics, and curated vibes to wrap up your day on the floor.

{/* Contact Section */}

{/* Other contact content */}

Contact Us

Social Night at Alle House

{/* Footer Section */}

); }; export default Page; [V0_FILE]plaintext:file="public/video/venue.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled%20design%20%281%29-JUoNqmvuGi09WaEPaaBd6wmyzUvIIy.mp4" isMerged="true" [V0_FILE]png:file="public/images/sapphire-mun-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SapphireMUN_LogoDesigns-l6mn1WTOwjpXTJ8yN6FCjn8McCd9tb.png" isMerged="true" [V0_FILE]png:file="public/images/sapphire-logo-navbar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/download-D7L0CnXfjeL6Zp7Eas2qvAkjSey5Vz.png" isMerged="true" [V0_FILE]png:file="public/images/sapphire-mun-logo-transparent.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SapphireMUN_LogoDesigns-removebg-ftTwfDW9Up9zmXP0rY143PJZiViVKK.png" isMerged="true" [V0_FILE]png:file="public/images/sapphire-mun-hero-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SapphireMUN_LogoDesigns-removebg-z9RjoG68pwWfV63pPjW6xZya1gaAEh.png" isMerged="true" [V0_FILE]typescriptreact:file="components/chunk-section.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { motion, useAnimation } from "framer-motion" import { cn } from "@/lib/utils" type ChunkSectionProps = { id?: string className?: string children: React.ReactNode threshold?: number } /** * ChunkSection: Animates in when the section is the current chunk in view. * It uses an IntersectionObserver to toggle an "active" state and drives * a fast-start -> slow-finish animation to feel reflective and premium. * Optimized for mobile performance with reduced animation complexity. */ export default function ChunkSection({ id, className, children, threshold = 0.45 }: ChunkSectionProps) { const ref = useRef(null) const controls = useAnimation() const [active, setActive] = useState(false) const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768 || "ontouchstart" in window) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) useEffect(() => { const el = ref.current if (!el) return const obs = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= threshold) { setActive(true) } else if (entry.intersectionRatio < 0.1) { setActive(false) } }) }, { threshold: isMobile ? [0, threshold] : Array.from({ length: 10 }, (_, i) => i / 10), rootMargin: isMobile ? "0px 0px -5% 0px" : "0px 0px -10% 0px", }, ) obs.observe(el) return () => obs.disconnect() }, [threshold, isMobile]) useEffect(() => { if (active) { controls.start("visible") } else { controls.start("hidden") } }, [active, controls]) return ( {children} ) } [V0_FILE]typescriptreact:file="components/floating-card.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" interface FloatingCardProps { children: React.ReactNode className?: string } export default function FloatingCard({ children, className }: FloatingCardProps) { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768 || "ontouchstart" in window) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{children}

) } [V0_FILE]png:file="public/images/conference-schedule.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-ExwKqUDoMvpbek62BBuSbrd7YKpjfM.png" isMerged="true" [V0_FILE]typescriptreact:file="components/parallax-hero.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import Link from "next/link" import { ArrowRight } from "lucide-react" export default function ParallaxHero() { const [scrollY, setScrollY] = useState(0) const containerRef = useRef(null) const rafRef = useRef() const handleScroll = useCallback(() => { if (rafRef.current) { cancelAnimationFrame(rafRef.current) } rafRef.current = requestAnimationFrame(() => { setScrollY(window.scrollY) }) }, []) useEffect(() => { window.addEventListener("scroll", handleScroll, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) if (rafRef.current) { cancelAnimationFrame(rafRef.current) } } }, [handleScroll]) const calc = (speed: number) => `translate3d(0, ${scrollY * speed}px, 0)` return (

{/* Background crest with deep glow */}

{/* Floating gem */} Sapphire glyph

{/* Title lockup */}

SAPPHIRE '25 MUN — Strategize • Socialize • Succeed

Sapphire Model United Nations. Technology-forward debate. Unmatched experience.

{/* Laurel mark at bottom */}

) } [V0_FILE]typescriptreact:file="components/layered-hero.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useCallback } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export default function LayeredHero() { const ref = useRef(null) const rafRef = useRef() const handleScroll = useCallback(() => { if (rafRef.current) { cancelAnimationFrame(rafRef.current) } rafRef.current = requestAnimationFrame(() => { const el = ref.current if (!el) return const rect = el.getBoundingClientRect() const h = rect.height || 1 const progress = Math.min(1, Math.max(0, (window.innerHeight - rect.top) / (window.innerHeight + h))) el.style.setProperty("--p", String(progress)) const layers = el.querySelectorAll("[data-speed]") layers.forEach((layer) => { const speed = Number(layer.dataset.speed || "0") const y = window.scrollY * speed layer.style.transform = `translate3d(0, ${y}px, 0)` layer.style.willChange = "transform" }) }) }, []) useEffect(() => { handleScroll() window.addEventListener("scroll", handleScroll, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) if (rafRef.current) { cancelAnimationFrame(rafRef.current) } } }, [handleScroll]) return (

{/* Background video layer */}

) } [V0_FILE]typescriptreact:file="components/parallax-scene.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useCallback } from "react" interface ParallaxSceneProps { children: React.ReactNode className?: string } export default function ParallaxScene({ children, className }: ParallaxSceneProps) { const ref = useRef(null) const rafRef = useRef() const mouseRafRef = useRef() const handleScroll = useCallback(() => { if (rafRef.current) { cancelAnimationFrame(rafRef.current) } rafRef.current = requestAnimationFrame(() => { const root = ref.current if (!root) return const layers = root.querySelectorAll("[data-speed]") const scrollY = window.scrollY layers.forEach((el) => { const speed = Number(el.dataset.speed || "0") el.style.transform = `translate3d(0, ${scrollY * speed}px, 0)` el.style.willChange = "transform" }) }) }, []) const handleMouseMove = useCallback((e: MouseEvent) => { if (mouseRafRef.current) { cancelAnimationFrame(mouseRafRef.current) } mouseRafRef.current = requestAnimationFrame(() => { const root = ref.current if (!root) return const rect = root.getBoundingClientRect() const cx = rect.left + rect.width / 2 const cy = rect.top + rect.height / 2 const dx = (e.clientX - cx) / rect.width const dy = (e.clientY - cy) / rect.height const tilts = root.querySelectorAll("[data-rotate]") tilts.forEach((el) => { const rotate = Number(el.dataset.rotate || "0") el.style.transform = `translate3d(0, ${window.scrollY * Number(el.dataset.speed || "0")}px, 0) rotateX(${dy * -rotate}deg) rotateY(${dx * rotate}deg)` el.style.willChange = "transform" }) }) }, []) useEffect(() => { const root = ref.current if (!root) return handleScroll() window.addEventListener("scroll", handleScroll, { passive: true }) root.addEventListener("mousemove", handleMouseMove, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) root.removeEventListener("mousemove", handleMouseMove) if (rafRef.current) cancelAnimationFrame(rafRef.current) if (mouseRafRef.current) cancelAnimationFrame(mouseRafRef.current) } }, [handleScroll, handleMouseMove]) return (

{children}

) } [V0_FILE]css:file="app/refined.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" /* Sapphire MUN — Oceanic Neon Theme (chunk-based, reflective) Palette: - Deep Background: ink navy to ocean blue gradient - Accents: aqua/cyan glow, sky blue heading accents, amber notice */ :root { --ocean-1000: #050a2a; --ocean-950: #07113b; --ocean-900: #0a1b54; --ocean-800: #0f2a6a; --aqua: #0fe0ff; --sky: #3aa7ff; --amber: #f4a300; --fg: #e6f0ff; --muted: rgba(230, 240, 255, 0.7); } /* Fixed body and html overflow issues causing white bars */ html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; } /* Ensured all containers respect viewport width */ * { box-sizing: border-box; } /* Layout and background */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; width: 100%; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: no-preference) { html { scroll-padding-top: 100px; } } .bg-app { background: radial-gradient(1200px 700px at 70% -10%, rgba(10, 27, 84, 0.45), transparent 60%), radial-gradient(800px 500px at 20% 110%, rgba(7, 17, 59, 0.55), transparent 60%), linear-gradient(180deg, var(--ocean-950) 0%, var(--ocean-1000) 100%); } .text-app, .text-fg { color: var(--fg); } .text-muted { color: var(--muted); } .bg-hero { background: radial-gradient(1600px 800px at 50% -10%, rgba(10, 27, 84, 0.45), transparent 60%), radial-gradient(1000px 600px at 0% 120%, rgba(7, 17, 59, 0.55), transparent 60%), linear-gradient(180deg, var(--ocean-950) 0%, var(--ocean-1000) 70%); } .bg-navy-900 { background-color: var(--ocean-900); } .bg-accent { background-color: var(--aqua); } .text-accent { color: var(--aqua); } .border-accent { border-color: var(--aqua); } /* Surfaces and cards */ .bg-card, .metallic-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), radial-gradient(100% 220% at 100% 0%, rgba(15, 224, 255, 0.07), transparent 40%), linear-gradient(180deg, rgba(10, 27, 84, 0.9), rgba(7, 17, 59, 0.9)); border: 1px solid rgba(15, 224, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(15, 224, 255, 0.1); border-radius: 16px; position: relative; overflow: hidden; } /* Reflective sweep on hover for cards */ .metallic-card::after { content: ""; position: absolute; inset: -40% auto auto -60%; width: 45%; height: 180%; transform: rotate(18deg); background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 90% ); opacity: 0; pointer-events: none; } .metallic-card:hover::after, .metallic-card:focus-within::after { animation: sheen 1.05s cubic-bezier(0.05, 0.9, 0.2, 1); } .bg-surface { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), linear-gradient(180deg, rgba(10, 27, 84, 0.85), rgba(7, 17, 59, 0.85)); border: 1px solid rgba(15, 224, 255, 0.12); } /* Header glass */ .bg-header { background: linear-gradient(180deg, rgba(10, 27, 84, 0.65), rgba(7, 17, 59, 0.65)); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 224, 255, 0.15); } /* Buttons */ .btn-accent { background: linear-gradient(180deg, var(--aqua), #0ab7d1) !important; color: #001223 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; font-weight: 600 !important; box-shadow: 0 8px 26px rgba(15, 224, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important; } .btn-accent:hover { filter: saturate(1.1); transform: translateY(-1px) !important; } .btn-accent-alt, .btn-outline, .btn-glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important; border: 1px solid rgba(15, 224, 255, 0.22) !important; color: var(--fg) !important; font-weight: 600 !important; backdrop-filter: blur(12px) !important; position: relative; overflow: hidden; } .btn-glass::after, .btn-outline::after, .btn-accent-alt::after { content: ""; position: absolute; inset: -40% auto auto -60%; width: 45%; height: 180%; transform: rotate(18deg); background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 90% ); opacity: 0; pointer-events: none; } .btn-glass:hover::after, .btn-outline:hover::after, .btn-accent-alt:hover::after, .btn-glass:focus-visible::after, .btn-outline:focus-visible::after, .btn-accent-alt:focus-visible::after { animation: sheen 1.05s cubic-bezier(0.05, 0.9, 0.2, 1); } @keyframes sheen { 0% { left: -60%; opacity: 0; } 25% { opacity: 0.85; } 100% { left: 140%; opacity: 0; } } /* Floating navigation */ .floating-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: linear-gradient(180deg, rgba(10, 27, 84, 0.6), rgba(7, 17, 59, 0.6)); backdrop-filter: blur(20px); border: 1px solid rgba(15, 224, 255, 0.22); border-radius: 50px; padding: 8px 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(15, 224, 255, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-width: 320px; max-width: calc(100vw - 40px); width: fit-content; } .floating-nav .flex { width: 100%; min-height: 40px; } .floating-nav.scrolled { background: linear-gradient(180deg, rgba(10, 27, 84, 0.8), rgba(7, 17, 59, 0.8)); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); } /* Hide scrollbar for navigation */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Ensure navigation items stay within bounds */ .floating-nav nav { max-width: calc(100vw - 200px); } @media (max-width: 768px) { .floating-nav nav { max-width: calc(100vw - 150px); } } @media (max-width: 640px) { .floating-nav nav { max-width: calc(100vw - 120px); } } .nav-brand { font-weight: 700; font-size: 1.05rem; color: var(--fg); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .nav-brand:hover { color: var(--aqua); } .nav-item { color: rgba(230, 240, 255, 0.9); font-size: 0.9rem; font-weight: 600; padding: 8px 16px; border-radius: 24px; transition: all .2s; text-decoration: none; white-space: nowrap; } .nav-item:hover { color: var(--ocean-1000); background: var(--aqua); } .nav-item.active { color: var(--ocean-1000); background: linear-gradient(180deg, var(--aqua), #0ab7d1); } /* Hamburger menu */ .hamburger { display: flex; flex-direction: column; justify-content: space-around; width: 24px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10; } .hamburger .line { width: 24px; height: 2px; background: var(--fg); border-radius: 10px; transition: all 0.3s linear; position: relative; transform-origin: 1px; } .hamburger .line.open:nth-child(1) { transform: rotate(45deg); } .hamburger .line.open:nth-child(2) { opacity: 0; } .hamburger .line.open:nth-child(3) { transform: rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background: linear-gradient(180deg, rgba(10, 27, 84, 0.95), rgba(7, 17, 59, 0.95)); backdrop-filter: blur(20px); border: 1px solid rgba(15, 224, 255, 0.22); border-radius: 16px; margin-top: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav-item { color: var(--fg); font-size: 1rem; font-weight: 600; padding: 12px 16px; border-radius: 12px; transition: all .2s; text-decoration: none; text-align: center; } .mobile-nav-item:hover { color: var(--ocean-1000); background: var(--aqua); } /* Accents */ .metallic-text { background: linear-gradient(90deg, #c3f1ff, #ffffff, #b6e9ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(255, 255, 255, 0.08); } .reflect-ribbon { position: relative; } .reflect-ribbon::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 120px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(15, 224, 255, 0.8), transparent); animation: ribbon 2.4s cubic-bezier(0.05, 0.9, 0.2, 1) infinite; opacity: 0.6; } @keyframes ribbon { 0% { width: 40px; opacity: 0.25; } 50% { width: 140px; opacity: 0.85; } 100% { width: 40px; opacity: 0.25; } } /* Metallic logo from SVG via mask */ .metallic-logo { width: min(720px, 85vw); height: clamp(120px, 18vw, 220px); margin-inline: auto; background: linear-gradient(90deg, #bcd8e0, #ffffff, #bcd8e0), radial-gradient(600px 300px at 75% 40%, rgba(15, 224, 255, 0.35), transparent 60%), radial-gradient(600px 300px at 25% 60%, rgba(58, 167, 255, 0.25), transparent 60%); -webkit-mask: url("/images/logo-attachment.svg") center / contain no-repeat; mask: url("/images/logo-attachment.svg") center / contain no-repeat; filter: drop-shadow(0 12px 28px rgba(0, 8, 39, 0.35)); } /* Subtle glitter overlay util */ .glitter { position: relative; overflow: hidden; } .glitter::before { content: ""; position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.9), transparent 60%), radial-gradient(1.5px 1.5px at 80% 60%, rgba(255, 255, 255, 0.7), transparent 60%), radial-gradient(1.8px 1.8px at 60% 80%, rgba(255, 255, 255, 0.8), transparent 60%), radial-gradient(2px 2px at 35% 65%, rgba(255, 255, 255, 0.8), transparent 60%); filter: blur(.2px); opacity: 0.22; animation: twinkle 3.8s ease-in-out infinite alternate; } @keyframes twinkle { 0% { opacity: 0.14; transform: translateY(0); } 100% { opacity: 0.33; transform: translateY(-3px); } } /* Reflective hover utility for any interactive container */ .reflective-hover { position: relative; overflow: hidden; } .reflective-hover::after { content: ""; position: absolute; inset: -40% auto auto -60%; width: 45%; height: 180%; transform: rotate(18deg); background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 90% ); opacity: 0; pointer-events: none; } .reflective-hover:hover::after, .reflective-hover:focus-within::after { animation: sheen 1.05s cubic-bezier(0.05, 0.9, 0.2, 1); } /* Focus and transitions */ * { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } button:focus-visible, a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0b1131; } ::-webkit-scrollbar-thumb { background: #17306c; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #20419a; } /* Mobile-first responsive utilities */ @media (max-width: 640px) { .container { padding: 0 1rem; max-width: 100%; } .metallic-logo { width: min(480px, 90vw); height: clamp(80px, 12vw, 160px); } .floating-nav { top: 12px; left: 20px; right: 20px; padding: 10px 16px; transform: none; min-width: auto; max-width: calc(100vw - 40px); width: auto; } .nav-links { display: none; } h1 { font-size: 2.5rem; line-height: 1.1; } h2 { font-size: 1.875rem; line-height: 1.2; } .reflect-ribbon::after { width: 80px; } /* Fix grid layouts on mobile */ .grid { gap: 1rem; width: 100%; } /* Ensure all sections fit within viewport */ section { width: 100%; overflow-x: hidden; } } @media (max-width: 768px) { .floating-nav { top: 16px; left: 20px; right: 20px; transform: none; padding: 12px 20px; min-width: auto; max-width: calc(100vw - 40px); width: auto; } .metallic-logo { width: min(600px, 85vw); height: clamp(100px, 15vw, 180px); } } @media (max-width: 768px) { .floating-nav { top: 16px; left: 20px; right: 20px; transform: none; padding: 12px 20px; min-width: auto; max-width: none; width: auto; } .nav-brand { font-size: 0.95rem; } } @media (max-width: 640px) { .floating-nav { top: 12px; left: 20px; right: 20px; padding: 10px 16px; transform: none; min-width: auto; max-width: none; width: auto; } .nav-brand { font-size: 0.9rem; } } @media (max-width: 480px) { .floating-nav { padding: 8px 12px; } .nav-brand { font-size: 0.85rem; } } /* Responsive grid utilities */ .responsive-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .responsive-grid-2 { grid-template-columns: repeat(2, 1fr); } } .responsive-grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .responsive-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .responsive-grid-3 { grid-template-columns: repeat(3, 1fr); } } .responsive-grid-4 { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 640px) { .responsive-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .responsive-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Mobile button adjustments */ @media (max-width: 640px) { .btn-accent, .btn-glass, .btn-outline, .btn-accent-alt { width: 100%; justify-content: center; } .flex.flex-col.sm\:flex-row { gap: 0.75rem; } .flex.flex-wrap { flex-direction: column; } } /* Mobile-optimized styles for better performance */ @media (max-width: 768px) { .floating-nav { top: 16px; left: 20px; right: 20px; transform: none; padding: 12px 20px; min-width: auto; max-width: none; width: auto; } .metallic-logo { width: min(600px, 85vw); height: clamp(100px, 15vw, 180px); } /* Simplified metallic cards for mobile performance */ .metallic-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), linear-gradient(180deg, rgba(10, 27, 84, 0.9), rgba(7, 17, 59, 0.9)); border: 1px solid rgba(15, 224, 255, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); border-radius: 12px; } /* Disabled heavy hover effects on mobile for performance */ .metallic-card::after, .reflective-hover::after { display: none; } /* Added touch-optimized card styles */ .touch-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .touch-card:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Improved touch targets for mobile */ button, a { min-height: 44px; min-width: 44px; } /* Optimized grid spacing for mobile */ .grid { gap: 1rem; width: 100%; } } /* Added touch-specific optimizations */ @media (hover: none) and (pointer: coarse) { .reflective-hover:hover::after, .metallic-card:hover::after { display: none; } .reflective-hover, .metallic-card { transition: transform 0.2s ease; } .reflective-hover:active, .metallic-card:active { transform: scale(0.98); } } /* Floating animations for hero background orbs */ @keyframes float { 0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); } 33% { transform: translate3d(0, -20px, 0) rotate(120deg); } 66% { transform: translate3d(0, 10px, 0) rotate(240deg); } } @keyframes float-delayed { 0%, 100% { transform: translate3d(0, 0px, 0) rotate(0deg); } 33% { transform: translate3d(0, 15px, 0) rotate(-90deg); } 66% { transform: translate3d(0, -25px, 0) rotate(-180deg); } } @keyframes float-slow { 0%, 100% { transform: translate3d(0, 0px, 0) scale(1); } 50% { transform: translate3d(0, -15px, 0) scale(1.05); } } @keyframes shimmer { 0% { transform: translate3d(-100%, 0, 0) skewX(-12deg); opacity: 0; } 50% { opacity: 0.8; } 100% { transform: translate3d(100%, 0, 0) skewX(-12deg); opacity: 0; } } @keyframes shimmer-reverse { 0% { transform: translate3d(100%, 0, 0) skewX(12deg); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: translate3d(-100%, 0, 0) skewX(12deg); opacity: 0; } } /* Animation classes for hero background effects */ .animate-float { animation: float 6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-float-delayed { animation: float-delayed 8s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: -2s; } .animate-float-slow { animation: float-slow 10s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: -4s; } .animate-shimmer { animation: shimmer 12s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-shimmer-reverse { animation: shimmer-reverse 15s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: -3s; } /* Gradient utilities for hero effects */ .bg-gradient-radial { background: radial-gradient(circle, var(--tw-gradient-stops)); } .mask-gradient-to-b { mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); } /* Reduced motion support for accessibility */ @media (prefers-reduced-motion: reduce) { .animate-float, .animate-float-delayed, .animate-float-slow, .animate-shimmer, .animate-shimmer-reverse { animation: none; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Adding fade-in-up animation for center logo */ @keyframes fade-in-up { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } .fade-in-up { animation: fade-in-up 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; will-change: transform, opacity; } [V0_FILE]typescriptreact:file="components/footer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Mail, Calendar, MapPin, Sparkles, Instagram } from "lucide-react" const Footer: React.FC = () => { return ( ) } export default Footer [V0_FILE]typescriptreact:file="app/demo/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import FloatingCard from "@/components/floating-card" export default function Demo() { const [activeState, setActiveState] = useState<"session" | "voting" | "break" | "crisis">("session") const states = { session: { title: "Moderated Caucus", color: "blue", description: "Active debate in progress" }, voting: { title: "Voting Procedure", color: "green", description: "Resolution voting underway" }, break: { title: "Unmoderated Caucus", color: "yellow", description: "Informal negotiations" }, crisis: { title: "Crisis Update", color: "red", description: "Breaking news alert" }, } return (

Back to Home

Integrated Tech Experience

Experience our real-time committee status system. Toggle between states to see how delegates stay synchronized.

Live Committee Status

{Object.entries(states).map(([key, state]) => ( ))}

{states[activeState].title}

{states[activeState].description}

Last updated: {new Date().toLocaleTimeString()}

How It Works

Real-time Updates

Committee chairs update status instantly via dashboard

Live Projection

Status displays in committee rooms and delegate devices

Synchronized Experience

All delegates stay aligned with current proceedings

) } [V0_FILE]typescriptreact:file="components/rolling-text.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" const diplomacyTerms = [ "Peace", "Security", "Human Rights", "Cooperation", "Sovereignty", "Dignity", "Justice", "Equality", "Freedom", "Solidarity", "Tolerance", "Development", "Prosperity", "Harmony", "Unity", "Dialogue", "Consensus", "Resolution", "Diplomacy", "Negotiation", ] export default function RollingText() { const containerRef = useRef(null) useEffect(() => { const container = containerRef.current if (!container) return // Shuffle and duplicate terms for continuous flow const shuffled = [...diplomacyTerms].sort(() => Math.random() - 0.5) const terms = [...shuffled, ...shuffled, ...shuffled] container.innerHTML = terms.map((term) => `${term}`).join("") }, []) return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "framer-motion": "12.23.22" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) export const metadata: Metadata = { title: "Sapphire MUN", description: "Sapphire Model United Nations - Join us for an exceptional diplomatic experience", generator: "v0.dev", icons: { icon: "/images/sapphire-logo-navbar.png", shortcut: "/images/sapphire-logo-navbar.png", apple: "/images/sapphire-logo-navbar.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* Updated font family to use Inter for modern, clean typography */ --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]png:file="public/images/design-mode/6.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/6-cU39N76R6IZRxPmXpUjyjiSTUFctQu.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/8.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/8-QOwdEiRSP4wRzewBplDSK0iE2bKOdc.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/7-XwiwGr1IluXkWzqjp5cT8joMqjJZJQ.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/1-cB6hO2ftVmYp1yyMaxcIkV7QrL0rxA.png" isMerged="true" [V0_FILE]png:file="public/images/design-mode/download.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/download-nS1kKOMRYPiNIIO7bY62sm13kscX9P.png" isMerged="true" [V0_FILE]typescriptreact:file="app/docs/page.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, Download, ExternalLink } from "lucide-react" import FloatingNavbar from "@/components/floating-navbar" import Footer from "@/components/footer" export default function DocsPage() { const documents = [ { title: "Schedule", description: "Complete conference schedule and timeline for all three days", status: "Available", link: "https://drive.google.com/drive/folders/156jzi6shKIxdVn1NCqrhIIvuXXwUgEEI?usp=drive_link", }, { title: "Code of Conduct", description: "Expected behavior and guidelines for all participants", status: "Available", link: "https://drive.google.com/file/d/1qBvpZD26KGsBUmk1_sihgwob_hhpn8zy/view?usp=sharing", }, { title: "Liability form", description: "Procedural and formality form mandatory to be signed and brought by all delegates", status: "Available", link: "https://drive.google.com/file/d/16k1LsZpw0nJnzN3g1tW5b0ePdrQXohQf/view?usp=drive_link", }, { title: "Background Guides", description: "Committee-specific background information and research materials", status: "Available", link: "https://drive.google.com/drive/folders/197TAHdk-qhutra_iNpsrixhr6P4TlArA?usp=drive_link", }, ] return (

Back to Home

Conference Resources

Essential documents and guides to help you prepare for Sapphire MUN.

{documents.map((doc, index) => (

{doc.status}

{doc.title}

{doc.description}

))}

) } [V0_FILE]typescriptreact:file="components/floating-navbar.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { useMobile } from "@/hooks/use-mobile" const NAV_ITEMS = [ { href: "#experience", label: "Experience" }, { href: "#committees", label: "Committees" }, { href: "https://www.sapphiremun.com/docs", label: "Resources" }, { href: "https://www.instagram.com/sapphire_mun/", label: "Contact" }, ] export default function FloatingNavbar() { const [isScrolled, setIsScrolled] = useState(false) const [activeSection, setActiveSection] = useState("") const [isOpen, setIsOpen] = useState(false) const isMobile = useMobile() useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) // Update active section based on scroll position const sections = NAV_ITEMS.map((item) => item.href.replace("#", "")).filter( (href) => !href.startsWith("/") && !href.startsWith("https://"), ) let current = "" for (const section of sections) { const element = document.getElementById(section) if (element) { const rect = element.getBoundingClientRect() if (rect.top <= 100 && rect.bottom >= 100) { current = section } } } setActiveSection(current) } window.addEventListener("scroll", handleScroll, { passive: true }) handleScroll() return () => window.removeEventListener("scroll", handleScroll) }, []) const handleNavClick = (href: string) => { setIsOpen(false) if (href.startsWith("#")) { const element = document.getElementById(href.slice(1)) if (element) { element.scrollIntoView({ behavior: "smooth" }) } } } const handleLogoClick = () => { window.scrollTo({ top: 0, behavior: "smooth" }) } return ( <>

{/* Logo */} {/* Desktop Navigation */} {!isMobile && ( )} {/* Mobile Hamburger */} {isMobile && ( )}

{/* Mobile Menu */} {isMobile && (

{NAV_ITEMS.map((item) => ( { if (!item.href.startsWith("https://")) { handleNavClick(item.href) } else { setIsOpen(false) } }} > {item.label} ))}

)} {isMobile && isOpen && (

setIsOpen(false)} /> )} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import React from "react" import { useEffect, useRef } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, Play, Users, Calendar, MapPin, GraduationCap, Sparkles, Gavel, Camera, Heart, Shield, Anchor, Instagram, ImageIcon, TrendingUp, } from "lucide-react" import Footer from "@/components/footer" import FloatingCard from "@/components/floating-card" import FloatingNavbar from "@/components/floating-navbar" import "./refined.css" import ChunkSection from "@/components/chunk-section" import ParallaxScene from "@/components/parallax-scene" import Section from "@/components/section" import GlowCard from "@/components/glow-card" export default function Page() { const heroRef = useRef(null) useEffect(() => { const hero = heroRef.current if (!hero) return let ticking = false const updateParallax = () => { const scrolled = window.pageYOffset const rate = scrolled * -0.15 hero.style.transform = `translate3d(0, ${rate}px, 0)` ticking = false } const requestTick = () => { if (!ticking) { requestAnimationFrame(updateParallax) ticking = true } } window.addEventListener("scroll", requestTick, { passive: true }) return () => window.removeEventListener("scroll", requestTick) }, []) return (

First Edition Complete ✓

Sapphire MUN

India's first Experience-targeted Model UN. Celebrating a successful inaugural edition.

Committees

200+

Delegates

Days

August 15-17, 2025 • Sanskriti Degree College, Kondapur

First Edition Highlights

Moments That Mattered

Explore the highlights from our inaugural edition—three days of diplomacy, debate, and unforgettable experiences.

{[ { label: "Total Delegates", value: "200+", icon: Users }, { label: "Committee Sessions", value: "24", icon: Gavel }, { label: "Networking Hours", value: "6+", icon: Sparkles }, { label: "Social Events", value: "2", icon: Heart }, ].map((stat, i) => (

{React.createElement(stat.icon, { className: "h-6 w-6 text-accent" })}

{stat.value}

{stat.label}

))}

Explore hundreds of photos from our first edition

{/* Experience — first chunk, parallax glow, highlight */}

Tech Innovation

Tech‑Forward Experience

Our custom-built platform delivered real-time committee states, live agenda tracking, and instant updates throughout the event.

{["Live Updates", "Real-time Voting", "Crisis Alerts", "Session Tracking"].map((label, i) => (

{label}

))}

Committee Status Archive

DISEC COMPLETED

UNHRC COMPLETED

Lok Sabha COMPLETED

{/* Prizes & Opportunities */}

Prizes & Opportunities

Excel at Sapphire MUN and unlock a world of rewards.

Certified Prizes

Compete for Significant Certificates and Recommendations under our Sapphire Ambassador Program Along with the standard prizes.

Internships & Opportunities

Gain access to internships at leading AI companies and opportunities worth ₹80 Cr+.

{/* Conference Schedule - Simplified for mobile performance */}

Conference Schedule

Three Days of Excellence

A comprehensive schedule designed to maximize learning, networking, and diplomatic engagement.

{/* Day 1 */}

Day 1

August 15th

{[ { time: "9:00-10:00 AM", event: "Registrations" }, { time: "10:00-11:00 AM", event: "Opening Ceremony" }, { time: "11:00-11:30 AM", event: "Break" }, { time: "11:30-1:30 PM", event: "Committee Session 1" }, { time: "1:30-2:00 PM", event: "Lunch" }, { time: "2:00-4:00 PM", event: "Committee Session 2" }, { time: "4:30 PM-5:30 PM", event: "Networking Hour" }, { time: "5:30 Onwards", event: "Dispersal" }, ].map((item, index) => (

{item.time} {item.event}

))}

{/* Day 2 */}

Day 2

August 16th

{[ { time: "9:00-10:30 AM", event: "Committee Session 3" }, { time: "10:30-11:00 AM", event: "Break" }, { time: "11:00-1:30 PM", event: "Committee Session 4" }, { time: "1:30-2:00 PM", event: "Lunch" }, { time: "2:00-4:00 PM", event: "Committee Session 5" }, { time: "4:00-4:30 PM", event: "Transition to Ale House" }, { time: "4:30 PM-7:30 PM", event: "Social Night (Ale House)" }, { time: "7:30 PM Onwards", event: "Dispersal" }, ].map((item, index) => (

{item.time} {item.event}

))}

{/* Day 3 */}

Day 3

August 17th

{[ { time: "9:00-10:30 AM", event: "Committee Session 6" }, { time: "10:30-11:00 AM", event: "Break" }, { time: "11:00-1:30 PM", event: "Committee Session 7" }, { time: "1:30-2:00 PM", event: "Lunch" }, { time: "2:00-3:00 PM", event: "Committee Session 8" }, { time: "3:00-4:00 PM", event: "Networking Hour" }, { time: "4:00 PM-4:30 PM", event: "Break" }, { time: "4:30-6:00 PM", event: "Closing Ceremony" }, { time: "6:00 Onwards", event: "Dispersal" }, ].map((item, index) => (

{item.time} {item.event}

))}

{/* Venue highlight - Fixed mobile alignment and padding */}

Venue

Sanskriti Degree College, Kondapur

Modern facilities, state-of-the-art technology, and the perfect setting for an unforgettable MUN experience.

{/* Social Night highlight */}

After Hours

Social Night at Ale House

A well-prepped social experience to unwind, connect, and celebrate with on-spot social registrations with unlimited food and drinks

Social passes Sold Out!

{/* Delegate Journey */}

Your Journey

From registration to recognition, every step is designed for your success.

{[ { step: "01", title: "Register", description: "Transparent process and quick onboarding", icon: Users, }, { step: "02", title: "Prepare", description: "Background guides, training modules, chair support", icon: Calendar, }, { step: "03", title: "Debate", description: "Structured sessions with live tech integration", icon: MapPin, }, { step: "04", title: "Celebrate", description: "Awards and socials to remember", icon: Play }, ].map((item, i) => (

{React.createElement(item.icon, { className: "h-6 w-6 text-accent" })}

{item.step}

{item.title}

{item.description}

))}

{/* Committees */}

Our Committees

Five diverse committees offering unique perspectives on global challenges.

{[ { name: "Lok Sabha", type: "Parliamentary", level: "Intermediate", icon: Gavel, bgLink: "https://drive.google.com/drive/folders/1rt4ZITfHwwNj5XQVznU-6x9EJAblA77n?usp=drive_link", }, { name: "DISEC", type: "Security Council", level: "Intermediate", icon: Shield, bgLink: "https://drive.google.com/drive/folders/1buOOmJAKAj9C0NiJeCKGkfCN6xVFlNwr?usp=drive_link", }, { name: "UNHRC", type: "Human Rights", level: "Intermediate", icon: Heart, bgLink: "https://drive.google.com/drive/folders/1b6ceBb-UaMOQ7jMQBS0XCUU-_ZtqT5AC?usp=drive_link", }, { name: "Telugu Film Industry", type: "Creative", level: "Advanced", icon: Camera, bgLink: "https://drive.google.com/drive/folders/148lIkkL8HhXKrn7W0ZBCx-XpThVEIg83?usp=drive_link", }, { name: "One Piece", type: "Crisis", level: "Fun", icon: Anchor, bgLink: "https://drive.google.com/drive/folders/1Wb_75uAuLN6WmcsZHOCRCpSf0MC50y6f?usp=drive_link", }, ].map((c, i) => (

{React.createElement(c.icon, { className: "h-5 w-5 text-accent" })}

{c.name}

{c.type} — {c.level}

Agenda's and background guides out.

))}

{/* Resources */}

Resources & Documentation

Everything you need to prepare, participate, and excel at Sapphire MUN.

{[ { title: "Conference Schedule", status: "Available" }, { title: "Background Guides", status: "Available" }, { title: "Code of Conduct", status: "Available" }, { title: "Liability Form", status: "Available" }, ].map((doc, i) => (

{doc.title}

{doc.status}

))}

{/* Contact CTA (prominent) */}

Questions? Contact us

We're here to help with registrations, partnerships, or just to say hi.

Sanskriti Degree College, Kondapur

15–17 August

Social Night at Ale House

What's Next

The Journey Continues

The success of our first edition has set the stage for something even bigger. Exciting plans for the second edition of Sapphire MUN are already underway. Stay tuned for announcements!

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This