Champhunt - Terms & Conditions

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import TermsConditions from "../terms-conditions" export default function Page() { return } [V0_FILE]typescriptreact:file="terms-conditions.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ChevronDown, Zap, AlertTriangle, Gift, Trophy, Users, MessageCircle, Share2, Star, Shield, Clock, CheckCircle, } from "lucide-react" const pulseVariants = { pulse: { scale: [1, 1.05, 1], transition: { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", }, }, } const itemVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } interface SectionProps { title: string icon: React.ReactNode color: string children: React.ReactNode defaultOpen?: boolean } function Section({ title, icon, color, children, defaultOpen = false }: SectionProps) { const [isOpen, setIsOpen] = useState(defaultOpen) return ( setIsOpen(!isOpen)} whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} >

{icon}

{title}

{isOpen && ( {children} )} ) } function RunsSection() { const engagementItems = [ { icon: , text: "10 runs for every pitch (post) created", points: "10" }, { icon: , text: "5 runs for every pitch reshared", points: "5" }, { icon: , text: "2 runs for comments on others' pitches", points: "2" }, ] return (

How to Score Runs

By Engagement

{engagementItems.map((item, index) => (

{item.icon} {item.text}

+{item.points} ))}

By Making Good Content

Other users can give your pitches 2/4/6 runs based on how much they like it. These runs get added to your tally, but are not deducted from the other user's tally.

By Referrals

Score runs by referring friends to Champhunt. Get{" "} 1000 runs for every new user that joins using your referral!

What to do with Runs

Use your runs to redeem amazing deals from the deals section of the website.

) } function SpammingSection() { const violations = [ { title: "Reposting Pitches", description: "Posting the same pitch multiple times to increase runs unfairly", consequence: "Account action may be taken", }, { title: "Excessive Commenting", description: "Unnecessary and multiple comments will be considered spamming", consequence: "Comments may be removed", }, { title: "Account Suspension", description: "Activities can lead to account suspension for 3 months, 6 months, a year or permanently", consequence: "Based on violation severity", }, { title: "Deal Cancellation", description: "Deals redeemed can be cancelled and runs scored can be deducted", consequence: "Alternative to suspension", }, ] return (

Anti-Spam Policy

This policy applies to all users of Champ Hunt to maintain a fair and engaging community.

{violations.map((violation, index) => (

{index + 1}

{violation.title}

{violation.description}

{violation.consequence}

))}

) } function DealsSection() { const dealRules = [ { icon: , title: "Weekly Release", description: "Deals redeemed by users will be released by Champ Hunt on a weekly basis. Expect to receive your deal by the first half of the succeeding week.", }, { icon: , title: "Correct Details Required", description: "If a user enters incorrect or incomplete details, they won't be able to redeem deals until the error has been corrected.", }, { icon: , title: "One Account Policy", description: "A user should create only one account for personal use. This account will be linked to their contact number and considered their primary account.", }, { icon: , title: "Multiple Account Prevention", description: "If a user tries to redeem deals in more than one account having the same contact number, they won't be able to redeem deals.", }, ] return (

Deal Redemption Rules

{dealRules.map((rule, index) => (

{rule.icon}

{rule.title}

{rule.description}

))}

) } export default function Component() { return (

{/* Header */}

Terms & Conditions Your guide to earning runs and staying fair in the game

{/* Main Content */}

} color="bg-primary" defaultOpen={true}>

} color="bg-destructive">

} color="bg-success">

{/* Footer CTA */}

Ready to Start Your Cricket Journey?

Join thousands of cricket fans and start earning runs today!

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { motion } from "framer-motion" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, } from "@/components/ui/sidebar" import { Badge } from "@/components/ui/badge" import { Zap, StickerIcon as Stadium, Play, Gift, Users, Store, TrendingUp, FileText, BarChart3, MessageCircle, ChevronDown, } from "lucide-react" // Navigation items const navigationItems = [ { title: "Pitch", url: "/pitch", icon: Zap, description: "Create and share your cricket content", }, { title: "Arena", url: "/arena", icon: Stadium, description: "Join cricket discussions and debates", }, { title: "Highlights", url: "/highlights", icon: Play, description: "Watch the best cricket moments", }, { title: "Deals", url: "/deals", icon: Gift, description: "Redeem amazing rewards with your runs", badge: "Hot", }, { title: "Dugout", url: "/dugout", icon: Users, description: "Connect with fellow cricket fans", }, { title: "Marketplace", url: "/marketplace", icon: Store, description: "Buy and sell cricket merchandise", }, { title: "Trending", url: "/trending", icon: TrendingUp, description: "See what's popular in cricket", badge: "New", }, ] // Explore section items const exploreItems = [ { title: "Rules", url: "/rules", icon: FileText, description: "Terms & Conditions", isActive: true, }, { title: "Analytics", url: "/analytics", icon: BarChart3, description: "Track your performance", }, { title: "Chat With Champhunt", url: "/chat", icon: MessageCircle, description: "Get help and support", }, ] // More options items const moreOptionsItems = [ { title: "Settings", url: "/settings" }, { title: "Help Center", url: "/help" }, { title: "Feedback", url: "/feedback" }, { title: "About", url: "/about" }, ] const itemVariants = { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1, transition: { duration: 0.3, ease: "easeOut", }, }, } const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.05, }, }, } export function AppSidebar() { const [moreOptionsOpen, setMoreOptionsOpen] = React.useState(false) return ( {/* Main Navigation */} {navigationItems.map((item) => (

{item.title} {item.badge && ( {item.badge} )}

{item.description}

))} {/* Explore Section */} Explore {exploreItems.map((item) => (

{item.title}

{item.description}

))} {/* More Options */} setMoreOptionsOpen(!moreOptionsOpen)} className="group h-10 hover:bg-card/50 transition-all duration-200" >

More Options

{moreOptionsOpen && ( {moreOptionsItems.map((item) => ( {item.title} ))} )} ) } [V0_FILE]typescriptreact:file="components/top-bar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { motion } from "framer-motion" import { Search, Bell, Star, Zap } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function TopBar() { const [searchValue, setSearchValue] = React.useState("") return (

{/* Logo */}

CHAMPHUNT {/* Search Bar */}

setSearchValue(e.target.value)} className="pl-10 bg-card/50 border-border text-foreground placeholder:text-muted-foreground focus:ring-primary focus:border-primary" />

{/* Right Side Actions */}

{/* Notifications */} Notifications

New match highlights available!

India vs Australia - Best moments

You earned 50 runs!

Great pitch about cricket strategy

{/* Runs Counter */} 1108.3k {/* User Profile */}

Cricket Fan

fan@champhunt.com

Profile My Runs Settings Log out

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 280 85% 63%; /* HEX: #B056F2 */ --primary-foreground: 0 0% 100%; /* White text for primary */ --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 215 20% 65%; /* HEX: #64748b */ --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84% 60%; /* HEX: #ef4444 */ --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; /* HEX: #22c55e */ --success-foreground: 0 0% 98%; --warning: 45 93% 47%; /* HEX: #f59e0b */ --warning-foreground: 0 0% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262.1 83.3% 57.8%; /* Adjusted ring to match primary */ --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 220 39% 14%; /* #1e293b */ --foreground: 0 0% 98%; --card: 220 39% 14%; /* #1e293b */ --card-foreground: 0 0% 98%; --popover: 220 39% 14%; /* #1e293b */ --popover-foreground: 0 0% 98%; --primary: 280 85% 63%; /* #B056F2 */ --primary-foreground: 0 0% 100%; --secondary: 220 20% 20%; --secondary-foreground: 0 0% 98%; --muted: 215 20% 65%; /* #64748b */ --muted-foreground: 220 10% 70%; --accent: 220 20% 20%; --accent-foreground: 0 0% 98%; --destructive: 0 84% 60%; /* #ef4444 */ --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; /* #22c55e */ --success-foreground: 0 0% 98%; --warning: 45 93% 47%; /* #f59e0b */ --warning-foreground: 0 0% 98%; --border: 220 20% 25%; --input: 220 20% 25%; --ring: 270 70% 50%; /* matches primary */ --radius: 0.5rem; --sidebar-background: 0 0% 3.9%; --sidebar-foreground: 240 5.9% 10%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .bg-primary-gradient { background: linear-gradient(90deg, #b056f2 0%, #d389f4 100%); } .text-primary-gradient { background: linear-gradient(90deg, #b056f2 0%, #d389f4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isDeleted="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./*.{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))", }, success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))", }, warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))", }, slate: { 900: "hsl(var(--slate-900))", 800: "hsl(var(--slate-800))", 700: "hsl(var(--slate-700))", }, "primary-gradient": { start: "#B056F2", end: "#D389F4", }, }, 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", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" import { TopBar } from "@/components/top-bar" import "./globals.css" export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]json:file="package.json" isEdit="true" { "name": "champhunt-terms", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@reduxjs/toolkit": "^2.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.0.4", "framer-motion": "^10.16.4", "lucide-react": "^0.263.1", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "tailwind-merge": "^1.14.0", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-badge": "^1.0.4", "@radix-ui/react-button": "^0.1.0", "@radix-ui/react-card": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-input": "^1.0.4", "@radix-ui/react-sidebar": "^1.0.0" }, "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", "autoprefixer": "^10.4.14", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "postcss": "^8.4.27", "tailwindcss": "^3.3.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.0.2", "vite": "^4.4.5" } } [V0_FILE]typescript:file="vite.config.ts" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import path from "path" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }) [V0_FILE]javascript:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ export default { 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))", }, success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))", }, warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))", }, "primary-gradient": { start: "#B056F2", end: "#D389F4", }, }, 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", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="src/index.css" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 280 85% 63%; /* HEX: #B056F2 */ --primary-foreground: 0 0% 100%; /* White text for primary */ --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 215 20% 65%; /* HEX: #64748b */ --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84% 60%; /* HEX: #ef4444 */ --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; /* HEX: #22c55e */ --success-foreground: 0 0% 98%; --warning: 45 93% 47%; /* HEX: #f59e0b */ --warning-foreground: 0 0% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 262.1 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 220 39% 14%; /* #1e293b */ --foreground: 0 0% 98%; --card: 220 39% 14%; /* #1e293b */ --card-foreground: 0 0% 98%; --popover: 220 39% 14%; /* #1e293b */ --popover-foreground: 0 0% 98%; --primary: 280 85% 63%; /* #B056F2 */ --primary-foreground: 0 0% 100%; --secondary: 220 20% 20%; --secondary-foreground: 0 0% 98%; --muted: 215 20% 65%; /* #64748b */ --muted-foreground: 220 10% 70%; --accent: 220 20% 20%; --accent-foreground: 0 0% 98%; --destructive: 0 84% 60%; /* #ef4444 */ --destructive-foreground: 0 0% 98%; --success: 142 71% 45%; /* #22c55e */ --success-foreground: 0 0% 98%; --warning: 45 93% 47%; /* #f59e0b */ --warning-foreground: 0 0% 98%; --border: 220 20% 25%; --input: 220 20% 25%; --ring: 270 70% 50%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .bg-primary-gradient { background: linear-gradient(90deg, #b056f2 0%, #d389f4 100%); } .text-primary-gradient { background: linear-gradient(90deg, #b056f2 0%, #d389f4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } } [V0_FILE]typescript:file="src/main.tsx" import React from "react" import ReactDOM from "react-dom/client" import { Provider } from "react-redux" import { store } from "./store/index.ts" import App from "./App.tsx" import "./index.css" ReactDOM.createRoot(document.getElementById("root")!).render( , ) [V0_FILE]typescript:file="src/store/index.ts" import { configureStore } from "@reduxjs/toolkit" import uiSlice from "./slices/uiSlice" export const store = configureStore({ reducer: { ui: uiSlice, }, }) export type RootState = ReturnType export type AppDispatch = typeof store.dispatch [V0_FILE]typescript:file="src/store/slices/uiSlice.ts" import { createSlice, type PayloadAction } from "@reduxjs/toolkit" interface UIState { searchValue: string sidebarCollapsed: boolean notifications: Array<{ id: string title: string description: string timestamp: string }> runsCount: number } const initialState: UIState = { searchValue: "", sidebarCollapsed: false, notifications: [ { id: "1", title: "New match highlights available!", description: "India vs Australia - Best moments", timestamp: new Date().toISOString(), }, { id: "2", title: "You earned 50 runs!", description: "Great pitch about cricket strategy", timestamp: new Date().toISOString(), }, ], runsCount: 1108300, } const uiSlice = createSlice({ name: "ui", initialState, reducers: { setSearchValue: (state, action: PayloadAction) => { state.searchValue = action.payload }, toggleSidebar: (state) => { state.sidebarCollapsed = !state.sidebarCollapsed }, addNotification: (state, action: PayloadAction>) => { const notification = { ...action.payload, id: Date.now().toString(), } state.notifications.unshift(notification) }, removeNotification: (state, action: PayloadAction) => { state.notifications = state.notifications.filter((n) => n.id !== action.payload) }, updateRunsCount: (state, action: PayloadAction) => { state.runsCount = action.payload }, }, }) export const { setSearchValue, toggleSidebar, addNotification, removeNotification, updateRunsCount } = uiSlice.actions export default uiSlice.reducer [V0_FILE]typescript:file="src/App.tsx" import { TopBar } from "./components/TopBar" import { AppSidebar } from "./components/AppSidebar" import { TermsConditions } from "./components/TermsConditions" function App() { return (

) } export default App [V0_FILE]typescript:file="src/components/TopBar.tsx" "use client" import type React from "react" import { useSelector, useDispatch } from "react-redux" import { motion } from "framer-motion" import { Search, Bell, Star, Zap } from "lucide-react" import type { RootState } from "../store" import { setSearchValue } from "../store/slices/uiSlice" import { Input } from "./ui/input" import { Button } from "./ui/button" import { Badge } from "./ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./ui/dropdown-menu" export function TopBar() { const dispatch = useDispatch() const { searchValue, notifications, runsCount } = useSelector((state: RootState) => state.ui) const handleSearchChange = (e: React.ChangeEvent) => { dispatch(setSearchValue(e.target.value)) } const formatRunsCount = (count: number) => { if (count >= 1000000) { return `${(count / 1000000).toFixed(1)}M` } else if (count >= 1000) { return `${(count / 1000).toFixed(1)}k` } return count.toString() } return (

{/* Logo */}

CHAMPHUNT {/* Search Bar */}

{/* Right Side Actions */}

{/* Notifications */} Notifications {notifications.map((notification) => (

{notification.title}

{notification.description}

))} {/* Runs Counter */} {formatRunsCount(runsCount)} {/* User Profile */}

Cricket Fan

fan@champhunt.com

Profile My Runs Settings Log out

) } [V0_FILE]typescript:file="src/components/AppSidebar.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Badge } from "./ui/badge" import { Zap, StickerIcon as Stadium, Play, Gift, Users, Store, TrendingUp, FileText, BarChart3, MessageCircle, ChevronDown, } from "lucide-react" // Navigation items const navigationItems = [ { title: "Pitch", url: "/pitch", icon: Zap, description: "Create and share your cricket content", }, { title: "Arena", url: "/arena", icon: Stadium, description: "Join cricket discussions and debates", }, { title: "Highlights", url: "/highlights", icon: Play, description: "Watch the best cricket moments", }, { title: "Deals", url: "/deals", icon: Gift, description: "Redeem amazing rewards with your runs", badge: "Hot", }, { title: "Dugout", url: "/dugout", icon: Users, description: "Connect with fellow cricket fans", }, { title: "Marketplace", url: "/marketplace", icon: Store, description: "Buy and sell cricket merchandise", }, { title: "Trending", url: "/trending", icon: TrendingUp, description: "See what's popular in cricket", badge: "New", }, ] // Explore section items const exploreItems = [ { title: "Rules", url: "/rules", icon: FileText, description: "Terms & Conditions", isActive: true, }, { title: "Analytics", url: "/analytics", icon: BarChart3, description: "Track your performance", }, { title: "Chat With Champhunt", url: "/chat", icon: MessageCircle, description: "Get help and support", }, ] // More options items const moreOptionsItems = [ { title: "Settings", url: "/settings" }, { title: "Help Center", url: "/help" }, { title: "Feedback", url: "/feedback" }, { title: "About", url: "/about" }, ] const itemVariants = { hidden: { x: -20, opacity: 0 }, visible: { x: 0, opacity: 1, transition: { duration: 0.3, ease: "easeOut", }, }, } const staggerContainer = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.05, }, }, } export function AppSidebar() { const [moreOptionsOpen, setMoreOptionsOpen] = useState(false) return (

{/* Main Navigation */}

{navigationItems.map((item) => (

{item.title} {item.badge && ( {item.badge} )}

{item.description}

))}

{/* Explore Section */}

Explore

{exploreItems.map((item) => (

{item.title}

{item.description}

))}

{/* More Options */}

{moreOptionsOpen && ( {moreOptionsItems.map((item) => ( {item.title} ))} )}

) } [V0_FILE]typescript:file="src/components/TermsConditions.tsx" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent } from "./ui/card" import { Badge } from "./ui/badge" import { ChevronDown, Zap, AlertTriangle, Gift, Trophy, Users, MessageCircle, Share2, Star, Shield, Clock, CheckCircle, } from "lucide-react" const pulseVariants = { pulse: { scale: [1, 1.05, 1], transition: { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut", }, }, } const itemVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } interface SectionProps { title: string icon: React.ReactNode color: string children: React.ReactNode defaultOpen?: boolean } function Section({ title, icon, color, children, defaultOpen = false }: SectionProps) { const [isOpen, setIsOpen] = useState(defaultOpen) return ( setIsOpen(!isOpen)} whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} >

{icon}

{title}

How to Score Runs

By Engagement

{engagementItems.map((item, index) => (

{item.icon} {item.text}

+{item.points} ))}

By Making Good Content

Other users can give your pitches 2/4/6 runs based on how much they like it. These runs get added to your tally, but are not deducted from the other user's tally.

By Referrals

Score runs by referring friends to Champhunt. Get{" "} 1000 runs for every new user that joins using your referral!

What to do with Runs

Use your runs to redeem amazing deals from the deals section of the website.

Anti-Spam Policy

This policy applies to all users of Champ Hunt to maintain a fair and engaging community.

{violations.map((violation, index) => (

{index + 1}

{violation.title}

{violation.description}

{violation.consequence}

))}

Deal Redemption Rules

{dealRules.map((rule, index) => (

{rule.icon}

{rule.title}

{rule.description}

))}

) } export function TermsConditions() { return (

{/* Header */}

Terms & Conditions Your guide to earning runs and staying fair in the game

{/* Main Content */}

} color="bg-primary-gradient" defaultOpen={true} >

} color="bg-destructive">

} color="bg-success">

) } [V0_FILE]html:file="index.html" Champhunt - Terms & Conditions

[V0_FILE]typescript:file="src/lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescript:file="src/components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescript:file="src/components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescript:file="src/components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescript:file="src/components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescript:file="src/components/ui/avatar.tsx" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescript:file="src/components/ui/dropdown-menu.tsx" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescript:file="postcss.config.js" export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } [V0_FILE]typescript:file="tsconfig.json" { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode / "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", / Linting / "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, / Path mapping / "baseUrl": ".", "paths": { "@/": ["./src/*"] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } [V0_FILE]typescript:file="tsconfig.node.json" { "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, "include": ["vite.config.ts"] }