'use client'
import { useState, useEffect } from 'react'
import { subscribeUser, unsubscribeUser, sendNotification } from './actions'
import { SignInButton, SignedOut, SignedIn, SignIn, useUser } from '@clerk/nextjs'
import Link from 'next/link';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Monitor, Gamepad2, Utensils, Users, ArrowRight, TwitchIcon, Calendar, Sparkles, ArrowUpRight } from "lucide-react";
import Image from "next/image";
export default function Home() {
const { isSignedIn, user } = useUser();
return (
<div className="min-h-screen bg-gradient-to-b from-violet-50 via-white to-sky-50">
{/* Hero Section */}
<div className="relative">
{/* Decorative Elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-200 rounded-full blur-3xl opacity-20" />
<div className="absolute top-20 -left-40 w-80 h-80 bg-blue-200 rounded-full blur-3xl opacity-20" />
<div className="absolute bottom-0 right-0 w-80 h-80 bg-pink-200 rounded-full blur-3xl opacity-20" />
</div>
<div className="relative max-w-[1400px] mx-auto px-8 py-32">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="space-y-8">
<div className="inline-flex items-center gap-2 bg-white/80 backdrop-blur-sm px-4 py-2 rounded-full border border-purple-100">
<Sparkles className="h-4 w-4 text-purple-500" />
<span className="text-sm font-medium text-purple-700">Next Generation Display Management</span>
</div>
<h1 className="text-6xl font-bold leading-tight">
<span className="bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
Transform Your Venue
</span>
<br />
<span className="text-gray-800">
With Smart Displays
</span>
</h1>
<p className="text-xl text-gray-600 max-w-lg">
The ultimate display management system for modern E-sports centers. Streamline operations, enhance viewer experience, and boost engagement.
</p>
<div className="flex items-center gap-6">
<SignedOut>
<Button size="lg" className="rounded-full bg-purple-600 hover:bg-purple-700 text-lg h-14 px-8">
Get Started
<ArrowUpRight className="ml-2 h-5 w-5" />
</Button>
</SignedOut>
<SignedIn>
<Link href="/dashboard">
<Button size="lg" className="rounded-full bg-purple-600 hover:bg-purple-700 text-lg h-14 px-8">
Go to Dashboard
<ArrowUpRight className="ml-2 h-5 w-5" />
</Button>
</Link>
</SignedIn>
<Button variant="outline" size="lg" className="rounded-full border-purple-200 hover:bg-purple-50 text-lg h-14 px-8">
Watch Demo
</Button>
</div>
{/* Rest of the marketing content remains the same */}
<div className="flex items-center gap-8 pt-8">
{/* Statistical highlights */}
<div>
<h4 className="text-3xl font-bold text-purple-600">1+</h4>
<p className="text-gray-600">Active Venues</p>
</div>
{/* ... other statistical highlights ... */}
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-purple-200 to-pink-200 rounded-[40px] blur-3xl opacity-30 transform rotate-3" />
<SignedOut>
<div className="relative z-10">
<SignIn
routing="hash"
appearance={{
layout: {
socialButtonsVariant: 'blockButton',
logoImageUrl: '/ico.png',
},
variables: {
colorPrimary: '#7c3aed', // Tailwind's purple-600
colorText: '#111827', // Gray-900
colorInputText: '#374151', // Gray-700
borderRadius: '1rem',
},
elements: {
cardBox: {
width: "500px",
marginLeft: "120px",
},
card: 'shadow-2xl w-[500px] mx-auto ', // Width of the card
logoImage: {
width: '100px',
height: '100px',
},
socialButtonsBlockButton: 'bg-purple-600 hover:bg-purple-700 text-white',
formButtonPrimary: 'bg-purple-600 hover:bg-purple-700 text-white',
headerTitle: 'text-2xl font-bold',
headerSubtitle: 'text-gray-500',
},
}}
/>
</div>
</SignedOut>
<SignedIn>
<div className="relative rounded-[30px] border-0 shadow-2xl bg-white/70 backdrop-blur-sm p-8 text-center">
<h2 className="text-2xl font-bold mb-4">Welcome back, {user?.firstName || 'User'}!</h2>
<Link href="/admin">
<Button className="w-full rounded-xl h-12 text-lg bg-purple-600 text-white hover:bg-purple-700">
Go to Dashboard
</Button>
</Link>
</div>
</SignedIn>
</div>
</div>
</div>
</div>
{/* Features Grid */}
<div className="relative py-32 bg-white">
<div className="max-w-[1400px] mx-auto px-8">
<div className="text-center space-y-4 mb-16">
<h2 className="text-4xl font-bold">
Everything you need to manage your venue
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Powerful features designed for modern E-sports and gaming centers
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<Card key={index} className="group relative overflow-hidden rounded-3xl border-0 bg-gradient-to-b from-white to-gray-50 hover:shadow-xl transition-all duration-300">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
<CardContent className="p-8">
<div className="mb-6">
<feature.icon className={`h-12 w-12 ${feature.iconColor}`} />
</div>
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
<p className="text-gray-600">{feature.description}</p>
<Button variant="ghost" className="mt-6 rounded-full group-hover:bg-purple-50 group-hover:text-purple-600">
Learn more
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</div>
{/* Social Proof */}
<div className="py-32 bg-gradient-to-b from-white to-purple-50">
<div className="max-w-[1400px] mx-auto px-8 text-center">
<h2 className="text-4xl font-bold mb-16">Trusted by leading venues worldwide</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-12 items-center opacity-70">
{logos.map((logo, index) => (
<div key={index} className="flex items-center justify-center">
<Image
src={logo.url}
alt={logo.alt}
width={150}
height={50}
className="opacity-50 hover:opacity-100 transition-opacity"
/>
</div>
))}
</div>
</div>
</div>
{/* CTA Section */}
<div className="relative py-32 overflow-hidden">
<div className="absolute inset-0 bg-purple-900" />
<div className="absolute inset-0 bg-gradient-to-br from-purple-600/90 to-blue-600/90" />
<div className="absolute inset-0">
<div className="absolute top-0 right-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl opacity-30" />
<div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-500 rounded-full blur-3xl opacity-30" />
</div>
<div className="relative max-w-[1400px] mx-auto px-8 text-center">
<div className="max-w-3xl mx-auto space-y-8">
<h2 className="text-5xl font-bold text-white">
Ready to transform your venue?
</h2>
<p className="text-xl text-purple-100">
Join hundreds of successful venues already using our platform to deliver exceptional experiences.
</p>
<div className="flex items-center justify-center gap-6">
<Button size="lg" className="rounded-full bg-white text-purple-600 hover:bg-purple-50 text-lg h-14 px-8">
Get Started Now
<ArrowUpRight className="ml-2 h-5 w-5" />
</Button>
<Button variant="outline" size="lg" className="rounded-full border-white text-white hover:bg-white/10 text-lg h-14 px-8">
Contact Sales
</Button>
</div>
</div>
</div>
</div>
</div>
);
}
const features = [
{
icon: Monitor,
iconColor: "text-purple-500",
title: "Smart Display Control",
description: "Manage multiple displays with intelligent content distribution and scheduling."
},
{
icon: TwitchIcon,
iconColor: "text-pink-500",
title: "Twitch Integration",
description: "Seamlessly stream and manage Twitch content across your displays."
},
{
icon: Calendar,
iconColor: "text-blue-500",
title: "Event Management",
description: "Organize and promote events with automated display updates."
},
{
icon: Gamepad2,
iconColor: "text-purple-500",
title: "Gaming Services",
description: "Track and manage gaming stations with real-time monitoring."
},
{
icon: Utensils,
iconColor: "text-pink-500",
title: "Menu Management",
description: "Update and display your menu items with dynamic pricing."
},
{
icon: Users,
iconColor: "text-blue-500",
title: "User Management",
description: "Control access and permissions with role-based authentication."
}
];
const logos = [
{
url: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=150&h=50&fit=crop&crop=edges",
alt: "Company 1"
},
{
url: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=150&h=50&fit=crop&crop=edges",
alt: "Company 2"
},
{
url: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=150&h=50&fit=crop&crop=edges",
alt: "Company 3"
},
{
url: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=150&h=50&fit=crop&crop=edges",
alt: "Company 4"
}
];
function urlBase64ToUint8Array(base64String: string) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
const rawData = window.atob(base64)
const outputArray = new Uint8Array(rawData.length)
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i)
}
return outputArray
}
function PushNotificationManager() {
const [isSupported, setIsSupported] = useState(false)
const [subscription, setSubscription] = useState<PushSubscription | null>(
null
)
const [message, setMessage] = useState('')
useEffect(() => {
if ('serviceWorker' in navigator && 'PushManager' in window) {
setIsSupported(true)
registerServiceWorker()
}
}, [])
async function registerServiceWorker() {
const registration = await navigator.serviceWorker.register('/sw.js', {
scope: '/',
updateViaCache: 'none',
})
const sub = await registration.pushManager.getSubscription()
setSubscription(sub)
}
async function subscribeToPush() {
const registration = await navigator.serviceWorker.ready
const sub = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!
),
})
setSubscription(sub)
const serializedSub = JSON.parse(JSON.stringify(sub))
await subscribeUser(serializedSub)
}
async function unsubscribeFromPush() {
await subscription?.unsubscribe()
setSubscription(null)
await unsubscribeUser()
}
async function sendTestNotification() {
if (subscription) {
await sendNotification(message)
setMessage('')
}
}
if (!isSupported) {
return <p>Push notifications are not supported in this browser.</p>
}
return (
<div>
<h3>Push Notifications</h3>
{subscription ? (
<>
<p>You are subscribed to push notifications.</p>
<button onClick={unsubscribeFromPush}>Unsubscribe</button>
<input
type="text"
placeholder="Enter notification message"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendTestNotification}>Send Test</button>
</>
) : (
<>
<p>You are not subscribed to push notifications.</p>
<button onClick={subscribeToPush}>Subscribe</button>
</>
)}
</div>
)
}
function InstallPrompt() {
const [isIOS, setIsIOS] = useState(false)
const [isStandalone, setIsStandalone] = useState(false)
useEffect(() => {
setIsIOS(
/iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream
)
setIsStandalone(window.matchMedia('(display-mode: standalone)').matches)
}, [])
if (isStandalone) {
return null // Don't show install button if already installed
}
return (
<div>
<h3>Install App</h3>
<button>Add to Home Screen</button>
{isIOS && (
<p>
To install this app on your iOS device, tap the share button
<span role="img" aria-label="share icon">
{' '}
⎋{' '}
</span>
and then "Add to Home Screen"
<span role="img" aria-label="plus icon">
{' '}
➕{' '}
</span>.
</p>
)}
</div>
)
}
export function Page() {
return (
<div>
<PushNotificationManager />
<InstallPrompt />
</div>
)
}