[V0_FILE]typescriptreact:file="lib/cart-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useReducer, useEffect } from "react" export interface CartItem { id: number name: string price: number category: string image: string quantity: number size?: string } interface CartState { items: CartItem[] total: number itemCount: number } type CartAction = | { type: "ADD_ITEM"; payload: Omit & { quantity?: number; size?: string } } | { type: "REMOVE_ITEM"; payload: number } | { type: "UPDATE_QUANTITY"; payload: { id: number; quantity: number } } | { type: "CLEAR_CART" } | { type: "LOAD_CART"; payload: CartState } const CartContext = createContext<{ state: CartState dispatch: React.Dispatch } | null>(null) const cartReducer = (state: CartState, action: CartAction): CartState => { switch (action.type) { case "ADD_ITEM": { const existingItem = state.items.find( (item) => item.id === action.payload.id && item.size === action.payload.size, ) if (existingItem) { const updatedItems = state.items.map((item) => item.id === action.payload.id && item.size === action.payload.size ? { ...item, quantity: item.quantity + (action.payload.quantity || 1) } : item, ) return { ...state, items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), itemCount: updatedItems.reduce((sum, item) => sum + item.quantity, 0), } } else { const newItem = { ...action.payload, quantity: action.payload.quantity || 1 } const updatedItems = [...state.items, newItem] return { ...state, items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), itemCount: updatedItems.reduce((sum, item) => sum + item.quantity, 0), } } } case "REMOVE_ITEM": { const updatedItems = state.items.filter((item) => item.id !== action.payload) return { ...state, items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), itemCount: updatedItems.reduce((sum, item) => sum + item.quantity, 0), } } case "UPDATE_QUANTITY": { if (action.payload.quantity <= 0) { return cartReducer(state, { type: "REMOVE_ITEM", payload: action.payload.id }) } const updatedItems = state.items.map((item) => item.id === action.payload.id ? { ...item, quantity: action.payload.quantity } : item, ) return { ...state, items: updatedItems, total: updatedItems.reduce((sum, item) => sum + item.price * item.quantity, 0), itemCount: updatedItems.reduce((sum, item) => sum + item.quantity, 0), } } case "CLEAR_CART": return { items: [], total: 0, itemCount: 0 } case "LOAD_CART": return action.payload default: return state } } export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0, itemCount: 0, }) // Load cart from localStorage on mount useEffect(() => { const savedCart = localStorage.getItem("starspring-cart") if (savedCart) { try { const parsedCart = JSON.parse(savedCart) dispatch({ type: "LOAD_CART", payload: parsedCart }) } catch (error) { console.error("Error loading cart from localStorage:", error) } } }, []) // Save cart to localStorage whenever it changes useEffect(() => { localStorage.setItem("starspring-cart", JSON.stringify(state)) }, [state]) return {children} } export const useCart = () => { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within a CartProvider") } return context } [V0_FILE]typescriptreact:file="components/cart-drawer.tsx" isMerged="true" "use client" import { useState } from "react" import { useCart } from "@/lib/cart-context" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { X, Plus, Minus, ShoppingBag, Trash2 } from "lucide-react" import Image from "next/image" interface CartDrawerProps { isOpen: boolean onClose: () => void } export function CartDrawer({ isOpen, onClose }: CartDrawerProps) { const { state, dispatch } = useCart() const [isCheckingOut, setIsCheckingOut] = useState(false) const updateQuantity = (id: number, quantity: number) => { dispatch({ type: "UPDATE_QUANTITY", payload: { id, quantity } }) } const removeItem = (id: number) => { dispatch({ type: "REMOVE_ITEM", payload: id }) } const handleCheckout = () => { setIsCheckingOut(true) // Simulate checkout process setTimeout(() => { alert("Order placed successfully! Thank you for shopping with StarSpring Apparel.") dispatch({ type: "CLEAR_CART" }) setIsCheckingOut(false) onClose() }, 2000) } if (!isOpen) return null return (

{/* Header */}

CART ({state.itemCount})

{/* Cart Items */}

{state.items.length === 0 ? (

Your cart is empty

Add some StarSpring pieces to get started

) : (

{state.items.map((item) => (

{item.name}

{item.category}

{item.size &&

Size: {item.size}

}

${item.price}

{item.quantity}

))}

)}

{/* Footer */} {state.items.length > 0 && (

TOTAL: ${state.total.toFixed(2)}

Free shipping on orders over $75

)}

) } [V0_FILE]typescriptreact:file="components/nautical-star.tsx" isMerged="true" interface NauticalStarProps { className?: string size?: number } export function NauticalStar({ className = "", size = 24 }: NauticalStarProps) { return ( ) } [V0_FILE]typescriptreact:file="components/shooting-star.tsx" isEdit="true" isMerged="true" interface ShootingStarProps { className?: string size?: number } export function ShootingStar({ className = "", size = 20 }: ShootingStarProps) { return (

{/* Animated shooting star container */}

{/* Star */} {/* Trailing lines */} {/* Small sparkles */}

) } [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-YpuD2OaFWilo780EowEuXCapTJ38EV.png" isMerged="true" [V0_FILE]typescriptreact:file="components/header-logo.tsx" isMerged="true" import Image from "next/image" import { ShootingStar } from "@/components/shooting-star" export function HeaderLogo() { return (

{/* Logo image */}

{/* Positioned shooting star */}

) } [V0_FILE]png:file="public/dollar-star-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-1y8MrkeANIEcVbvVol6ZYMwffkzm0r.png" isMerged="true" [V0_FILE]typescriptreact:file="components/rotating-logo.tsx" isEdit="true" isMerged="true" import Image from "next/image" export function RotatingLogo() { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, fontFamily: { mono: ["var(--font-mono)", "monospace"], brotherhood: ["var(--font-brotherhood)", "cursive"], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/product-card.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useCart } from "@/lib/cart-context" // Keep this for potential future direct sales or other cart features import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import Image from "next/image" import Link from "next/link" // Import Link for external links interface Product { id: number name: string category: string price: string image: string etsyLink: string // Added Etsy link } interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { const { dispatch } = useCart() // Still imported, but not used for Etsy products const [selectedSize, setSelectedSize] = useState("M") const sizes = ["XS", "S", "M", "L", "XL", "XXL"] // const priceNumber = Number.parseInt(product.price.replace("$", "")) // No longer needed for direct add to cart // Removed addToCart function as products will link to Etsy return (

{/* Size Selection */}

{sizes.map((size) => ( ))}

{/* View on Etsy Button */}

{product.category}

{product.name}

{product.price}

) } [V0_FILE]png:file="public/trendstar-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-jDCNEnKoDetuRxFNPFIzrjNyjDv6xV.png" isMerged="true" [V0_FILE]png:file="public/starwings-shorts.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-duIKT3HNYBb2RGzQjWeY1S2M0CibzT.png" isMerged="true" [V0_FILE]png:file="public/spring-time-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-dkitck6Em4k22fzpOF55wm6kmEIZFe.png" isMerged="true" [V0_FILE]typescriptreact:file="app/mission/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Star, Sparkles, ArrowLeft, Heart, Target, Zap } from "lucide-react" import { RotatingLogo } from "@/components/rotating-logo" export default function MissionPage() { return (

{/* Crystallized Stars Background */}

{[...Array(45)].map((_, i) => (

))} {[...Array(30)].map((_, i) => (

))}

{/* Navigation */} {/* Hero Section */}

THE MI$$ION

"Every star was once darkness before it chose to shine"

{/* Story Content */}

{/* Introduction */}

My name is behind StarSpring Apparel, and I'm just a{" "} 16-year-old kid from Los Angeles with a dream bigger than the city skyline. Growing up in LA, I've seen how fashion can be a form of expression, a way to tell your story without saying a word.

{/* Core Values */}

PASSION

Every design comes from the heart, representing the dreams and struggles of young creators.

PURPOSE

To show other young Black entrepreneurs that we can create, build, and make our mark.

POWER

Fashion as a tool for self-expression and breaking barriers in the industry.

{/* Main Story */}

$tarSpring isn't just a clothing brand – it's a movement. {" "} It represents every young person who's ever felt like they were reaching for something beyond their current circumstances. The name comes from the idea that we're all made of stardust, and like a spring, we have the potential to bounce back from anything and reach new heights.

The grunge aesthetic mixed with Y2K vibes represents the duality of our generation – we're nostalgic for times we never lived through, but we're also creating something entirely new. We're taking the rebellion of grunge and the optimism of Y2K and making it our own.

WHY STARSPRING MATTERS

REPRESENTATION

As a young Black entrepreneur, I want to show other kids that look like me that we can create, we can build, and we can make our mark on the world. Representation matters, and I'm here to be that example.

AUTHENTICITY

Every piece is designed with the grunge Y2K aesthetic that speaks to our generation – raw, real, and unapologetically bold. No fake personas, just authentic expression.

Every hoodie, every tee, every piece of StarSpring apparel is made for the{" "} dreamers, the hustlers, the kids who stay up late working on their craft. {" "} It's for anyone who's ever felt like an outsider but refused to dim their light.

{/* Vision Statement */}

THE VISION

To build a brand that represents hope, hustle, and the belief that no dream is too big.

From the streets of LA to wherever your dreams take you – $tarSpring is here to remind you that you're made of stars, and stars are meant to shine.

{/* Final Message */}

"This is just the beginning."

Join me on this journey. Wear your dreams. Shine your light. Let's make StarSpring a name that represents what's possible when you refuse to give up on yourself.

{/* Footer */}

) } [V0_FILE]png:file="public/star-slippin.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rx3HSXTthGAsOiQpw02c881GAu8o4Y.png" isMerged="true" [V0_FILE]png:file="public/str-gazing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-gUJKyTYuYbkD29o6mMAPUGQcSDVBPJ.png" isMerged="true" [V0_FILE]png:file="public/str-tee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-A625O6GVy9fjhfVMqeU5kgu3xj3qPW.png" isMerged="true" [V0_FILE]png:file="public/saint-work-sweats.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-LyppccoGOqpjxJAfW8fnMQv2a9DVJ9.png" isMerged="true" [V0_FILE]png:file="public/star-chillin-polo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-zlhhpUc3YpCkzgSAgbMIBhqRaBnKSk.png" isMerged="true" [V0_FILE]png:file="public/slander-longsleeve.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Cg3xWoGq9Bf11zhee70JjzuAZsu7gx.png" isMerged="true" [V0_FILE]png:file="public/find-your-wings-bra.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-oKmFD4tz8OIbeRoWndNxeoqwFTJPOO.png" isMerged="true" [V0_FILE]png:file="public/trauma-hoodie.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-tcPdSVfYXHGsxsiIEdStrsYc2Fjr0N.png" isMerged="true" [V0_FILE]png:file="public/trauma-hoodie-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Qxl4VlFmGmzP9tddwhdokk4qXDVQmU.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" import { JetBrains_Mono, Creepster } from "next/font/google" import { CartProvider } from "@/lib/cart-context" import { CursorTrail } from "@/components/cursor-trail" const jetbrains = JetBrains_Mono({ subsets: ["latin"], weight: ["400", "700"], display: "swap", variable: "--font-mono", }) const creepster = Creepster({ subsets: ["latin"], weight: ["400"], display: "swap", variable: "--font-brotherhood", }) export const metadata: Metadata = { title: "$tarSpring Apparel", description: "$HOP NOW $TARSPRINGSLANDER", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/cursor-trail.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { Star } from "lucide-react" interface Particle { id: number x: number y: number } export function CursorTrail() { const [particles, setParticles] = useState([]) const maxParticles = 25 // Slightly reduced for better performance with stars const handleMouseMove = useCallback((e: MouseEvent) => { const newParticle: Particle = { id: Date.now() + Math.random(), // Unique ID x: e.clientX, y: e.clientY, } setParticles((prevParticles) => { const updatedParticles = [...prevParticles, newParticle] // Remove oldest particles if limit is exceeded if (updatedParticles.length > maxParticles) { return updatedParticles.slice(updatedParticles.length - maxParticles) } return updatedParticles }) }, []) useEffect(() => { window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, [handleMouseMove]) // Effect to remove particles after their animation duration useEffect(() => { if (particles.length > 0) { const timer = setTimeout(() => { setParticles((prevParticles) => prevParticles.slice(1)) // Remove the oldest particle }, 1200) // Slightly longer duration for stars return () => clearTimeout(timer) } }, [particles]) return ( <> {particles.map((particle) => (

))} ) } [V0_FILE]png:file="public/city-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/city-background-J26qG4mlXxKH3I0t077KfZuZ8l4Lnm.png" isMerged="true" [V0_FILE]png:file="public/la-night-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/la-night-background-Iii4mAgkgsXNNmIlRDXVqd1zFACg1z.png" isMerged="true" [V0_FILE]png:file="public/melrose-street-background.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/melrose-street-background-tQqqkhuch9qHfSOETTJYC44lqTc4z9.png" isMerged="true" [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; font-family: "JetBrains Mono", monospace; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } a { color: inherit; text-decoration: none; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } /* Enhanced grunge effects */ .grunge-text { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); filter: contrast(1.2); } /* Star animations */ @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } } /* Fast and blurry star wave animation */ @keyframes star-wave-fast { 0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); opacity: 0.2; } 25% { transform: translateY(-30px) translateX(15px) rotate(90deg) scale(1.3); opacity: 0.4; } 50% { transform: translateY(0px) translateX(-10px) rotate(180deg) scale(0.8); opacity: 0.6; } 75% { transform: translateY(25px) translateX(20px) rotate(270deg) scale(1.1); opacity: 0.3; } 100% { transform: translateY(0px) translateX(0px) rotate(360deg) scale(1); opacity: 0.2; } } /* Shooting star animation */ @keyframes shooting-star { 0% { transform: translateX(-15px) translateY(2px); opacity: 0.6; } 25% { transform: translateX(-5px) translateY(-1px); opacity: 1; } 50% { transform: translateX(5px) translateY(1px); opacity: 1; } 75% { transform: translateX(10px) translateY(-1px); opacity: 0.8; } 100% { transform: translateX(15px) translateY(2px); opacity: 0.6; } } /* 3D Rotation Animation */ @keyframes rotate-3d { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 25% { transform: rotateX(15deg) rotateY(90deg) rotateZ(0deg); } 50% { transform: rotateX(0deg) rotateY(180deg) rotateZ(15deg); } 75% { transform: rotateX(-15deg) rotateY(270deg) rotateZ(0deg); } 100% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); } } /* Shiny effect animation */ @keyframes shine { 0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(200%) skewX(-20deg); opacity: 0; } } /* Star Trail Animation */ @keyframes star-trail { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 50% { opacity: 0.6; transform: translate(-50%, -60%) scale(0.8) rotate(180deg); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(0.3) rotate(360deg); } } /* Flashing text animation */ @keyframes flash-text { 0%, 100% { color: transparent; /* Shows background gradient */ -webkit-text-stroke: 1px white; } 50% { color: black; /* Solid black text */ -webkit-text-stroke: 0px black; /* Remove stroke when black */ } } /* Bottom slime trail animations - only active when at bottom */ @keyframes slime-emerge { 0% { transform: translateY(100%) scaleY(0); opacity: 0; } 30% { transform: translateY(50%) scaleY(0.3); opacity: 0.3; } 60% { transform: translateY(20%) scaleY(0.7); opacity: 0.6; } 100% { transform: translateY(0%) scaleY(1); opacity: 0.8; } } @keyframes slime-drip-bottom { 0% { height: 0px; opacity: 0; } 50% { height: 30px; opacity: 0.7; } 100% { height: 50px; opacity: 0.5; } } @keyframes slime-bubble-rise { 0% { transform: translateY(50px) scale(0); opacity: 0; } 50% { transform: translateY(0px) scale(1.2); opacity: 0.8; } 100% { transform: translateY(-20px) scale(0.8); opacity: 0.3; } } @keyframes slime-ooze { 0% { width: 0%; opacity: 0; } 50% { width: 100%; opacity: 0.6; } 100% { width: 120%; opacity: 0.4; } } .animate-shooting-star { animation: shooting-star 4s ease-in-out infinite; } .animate-rotate-3d { animation: rotate-3d 6s ease-in-out infinite; } .animate-shine { animation: shine 3s ease-in-out infinite; } .animate-twinkle { animation: twinkle 2s infinite; } .animate-star-wave-fast { animation: star-wave-fast 1.5s ease-in-out infinite; } .animate-star-trail { animation: star-trail 1.2s ease-out forwards; } .animate-flash-text { animation: flash-text 1.5s infinite alternate; } /* Bottom slime animations */ .animate-slime-emerge { animation: slime-emerge 2s ease-out forwards; } .animate-slime-drip-bottom { animation: slime-drip-bottom 3s ease-out infinite; } .animate-slime-bubble-rise { animation: slime-bubble-rise 4s ease-in-out infinite; } .animate-slime-ooze { animation: slime-ooze 5s ease-out forwards; } /* 3D Perspective utilities */ .perspective-1000 { perspective: 1000px; } .preserve-3d { transform-style: preserve-3d; } /* Y2K glitch effects */ @keyframes glitch { 0% { text-shadow: 0.05em 0 0 #00ffff, -0.05em -0.025em 0 #ff00ff, 0.025em 0.05em 0 #ffff00; } 15% { text-shadow: 0.05em 0 0 #00ffff, -0.05em -0.025em 0 #ff00ff, 0.025em 0.05em 0 #ffff00; } 16% { text-shadow: -0.05em -0.025em 0 #00ffff, 0.025em 0.025em 0 #ff00ff, -0.05em -0.05em 0 #ffff00; } 49% { text-shadow: -0.05em -0.025em 0 #00ffff, 0.025em 0.025em 0 #ff00ff, -0.05em -0.05em 0 #ffff00; } 50% { text-shadow: 0.025em 0.05em 0 #00ffff, 0.05em 0 0 #ff00ff, 0 -0.05em 0 #ffff00; } 99% { text-shadow: 0.025em 0.05em 0 #00ffff, 0.05em 0 0 #ff00ff, 0 -0.05em 0 #ffff00; } 100% { text-shadow: -0.025em 0 0 #00ffff, -0.025em -0.025em 0 #ff00ff, -0.025em -0.05em 0 #ffff00; } } .glitch:hover { animation: glitch 0.3s; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { Button } from "@/components/ui/button" import { Star, Sparkles, ShoppingBag, Instagram } from "lucide-react" import { ProductCard } from "@/components/product-card" import { CartDrawer } from "@/components/cart-drawer" import { useCart } from "@/lib/cart-context" import { RotatingLogo } from "@/components/rotating-logo" import { BottomSlimeEffect } from "@/components/bottom-slime-effect" export default function HomePage() { const [isCartOpen, setIsCartOpen] = useState(false) const { state } = useCart() const products = [ { id: 1, name: "Trendstar Hoodie", category: "Hoodies", price: "$27", image: "/trendstar-hoodie.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 2, name: "Spring Time Hoodie", category: "Hoodies", price: "$29", image: "/spring-time-hoodie.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 3, name: "Starwings Shorts", category: "Shorts", price: "$30", image: "/starwings-shorts.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 4, name: "Star slippin", category: "Slippers", price: "$25", image: "/star-slippin.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 5, name: "$TR TEE", category: "T-Shirts", price: "$22", image: "/str-tee.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 6, name: "$TR GAZING", category: "Sweats", price: "$35", image: "/str-gazing.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 7, name: "SAINT WORK", category: "Sweats", price: "$78.24", image: "/saint-work-sweats.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 8, name: "STAR CHILLIN", category: "Polo Shirts", price: "$60.98", image: "/star-chillin-polo.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 9, name: "$lander longsleeve", category: "Long Sleeves", price: "$52.35", image: "/slander-longsleeve.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 10, name: "FIND YOUR WINGS", category: "Bras & Tops", price: "$30", // Placeholder price, please confirm image: "/find-your-wings-bra.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, { id: 11, name: "trauma", category: "Hoodies", price: "$55", // Placeholder price, please confirm image: "/trauma-hoodie-blue.png", etsyLink: "https://www.etsy.com/shop/CloudrangeCollective", }, ] return (

{/* Black and White Melrose Street Background */}

{/* Enhanced dark overlay */}

{/* Fast moving blurry star particles */}

{[...Array(60)].map((_, i) => (

))} {[...Array(40)].map((_, i) => (

))}

{/* Scroll-triggered bottom slime effect */} {/* Navigation */} {/* Hero Section */}

$T★RSPRING

$LANDER

Born from late nights and big dreams. Made for those who refuse to settle. Every piece tells a story of ambition, hustle, and reaching for something greater.

{/* Products Section */}

LATEST DROP

Minimalist designs with maximum impact. Each piece crafted for those who understand that less is more.

{products.length === 0 ? (

No products to display. Please provide your Etsy product details!

) : ( products.map((product) => ) )}

{/* Brand Story Teaser */}

BUILT DIFFERENT

"Stay In the Light, Stay in the motion, No need for slander, Become a star."

16 years old. LA born. Dream chaser.

{/* Social Media Section */}

FOLLOW THE MOVEMENT

@starspringapparel @duuled

Stay connected for drops, behind-the-scenes, and more ✨

{/* Footer */} {/* Cart Drawer */} setIsCartOpen(false)} />

) } [V0_FILE]typescriptreact:file="hooks/use-slime-audio.ts" "use client" import { useCallback } from "react" export function useSlimeAudio() { const playSlimeSound = useCallback(() => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() // Create multiple oscillators for a richer slime sound const createSlimeLayer = (frequency: number, duration: number, delay = 0) => { const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() const filter = audioContext.createBiquadFilter() oscillator.connect(filter) filter.connect(gainNode) gainNode.connect(audioContext.destination) // Frequency sweep for gooey effect oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime + delay) oscillator.frequency.exponentialRampToValueAtTime(frequency * 0.5, audioContext.currentTime + delay + duration) // Low-pass filter for muffled, wet sound filter.type = "lowpass" filter.frequency.setValueAtTime(300, audioContext.currentTime + delay) filter.Q.setValueAtTime(3, audioContext.currentTime + delay) // Volume envelope gainNode.gain.setValueAtTime(0, audioContext.currentTime + delay) gainNode.gain.linearRampToValueAtTime(0.05, audioContext.currentTime + delay + 0.1) gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + delay + duration) oscillator.type = "sawtooth" oscillator.start(audioContext.currentTime + delay) oscillator.stop(audioContext.currentTime + delay + duration) } // Layer multiple sounds for richness createSlimeLayer(80, 1.2, 0) // Main slime sound createSlimeLayer(120, 0.8, 0.2) // Higher frequency layer createSlimeLayer(60, 1.5, 0.1) // Lower rumble // Add some bubble pops setTimeout(() => { createSlimeLayer(200, 0.3, 0) }, 800) setTimeout(() => { createSlimeLayer(180, 0.2, 0) }, 1200) } catch (error) { console.log("Audio context not available:", error) } }, []) const playBubbleSound = useCallback(() => { try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) // Quick bubble pop sound oscillator.frequency.setValueAtTime(400, audioContext.currentTime) oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.1) gainNode.gain.setValueAtTime(0, audioContext.currentTime) gainNode.gain.linearRampToValueAtTime(0.03, audioContext.currentTime + 0.01) gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.15) oscillator.type = "sine" oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + 0.15) } catch (error) { console.log("Audio context not available:", error) } }, []) return { playSlimeSound, playBubbleSound } } [V0_FILE]typescriptreact:file="components/bottom-slime-effect.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useSlimeAudio } from "@/hooks/use-slime-audio" export function BottomSlimeEffect() { const [isAtBottom, setIsAtBottom] = useState(false) const [hasPlayedAudio, setHasPlayedAudio] = useState(false) const { playSlimeSound, playBubbleSound } = useSlimeAudio() useEffect(() => { const handleScroll = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop const scrollHeight = document.documentElement.scrollHeight const clientHeight = document.documentElement.clientHeight // Trigger when user is within 200px of the bottom const isNearBottom = scrollTop + clientHeight >= scrollHeight - 200 // Play audio only once when first reaching bottom if (isNearBottom && !hasPlayedAudio) { playSlimeSound() setHasPlayedAudio(true) // Play additional bubble sounds with delays setTimeout(() => playBubbleSound(), 1000) setTimeout(() => playBubbleSound(), 1800) setTimeout(() => playBubbleSound(), 2500) } // Reset audio flag when scrolling back up significantly if (!isNearBottom && scrollTop + clientHeight < scrollHeight - 400) { setHasPlayedAudio(false) } setIsAtBottom(isNearBottom) } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, [hasPlayedAudio, playSlimeSound, playBubbleSound]) if (!isAtBottom) return null return (

{/* Main slime base that emerges from bottom */}

{/* Primary slime layer */}

{/* Secondary slime layer for depth */}

{/* Slime drips emerging from bottom */} {[...Array(15)].map((_, i) => (

))} {/* Rising slime bubbles */} {[...Array(10)].map((_, i) => (

))} {/* Slime tendrils reaching upward */} {[...Array(8)].map((_, i) => (

))} {/* Grunge texture overlay for the slime */}

{/* Slime splash effects */} {[...Array(6)].map((_, i) => (

))}

) }