Skip to content

style: redesign ui to be modern and minimalist #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
artosien wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style: redesign ui to be modern and minimalist #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 38 additions & 43 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,53 @@

@layer base {
:root {
--background: 0 0% 98%;
--foreground: 261 43% 10%;
--background: 0 0% 100%;
--foreground: 0 0% 9%;
--card: 0 0% 100%;
--card-foreground: 261 43% 10%;
--card-foreground: 0 0% 9%;
--popover: 0 0% 100%;
--popover-foreground: 261 43% 10%;
--primary: 261 43% 47%;
--primary-foreground: 0 0% 100%;
--secondary: 187 100% 42%;
--secondary-foreground: 0 0% 100%;
--muted: 0 0% 92%;
--muted-foreground: 261 20% 35%; /* Increased contrast for WCAG AA */
--accent: 187 100% 42%;
--accent-foreground: 0 0% 100%;
--popover-foreground: 0 0% 9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 88%;
--input: 0 0% 88%;
--ring: 261 43% 47%;
--radius: 1rem;
--chart-1: 261 43% 47%;
--chart-2: 187 100% 42%;
--chart-3: 280 65% 60%;
--chart-4: 200 80% 50%;
--chart-5: 160 60% 45%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 9%;
--radius: 0.5rem;
--chart-1: 0 0% 9%;
--chart-2: 0 0% 25%;
--chart-3: 0 0% 40%;
--chart-4: 0 0% 60%;
--chart-5: 0 0% 80%;
}

.dark {
--background: 261 43% 4%;
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 261 43% 7%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 261 43% 7%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 261 43% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 187 100% 42%;
--secondary-foreground: 0 0% 100%;
--muted: 261 25% 15%;
--muted-foreground: 261 10% 75%;
--accent: 187 100% 42%;
--accent-foreground: 0 0% 100%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 261 20% 18%;
--input: 261 20% 18%;
--ring: 261 43% 60%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
}

Expand All @@ -63,18 +63,13 @@
}
}

/* 3D Lottery Ball Styling */
/* Minimalist Lottery Ball Styling */
.lotto-ball-3d {
@apply relative flex items-center justify-center font-black rounded-full overflow-hidden border-none shadow-[inset_-4px_-4px_10px_rgba(0,0,0,0.3),inset_4px_4px_10px_rgba(255,255,255,0.4),0_10px_20px_-5px_rgba(0,0,0,0.3)] transition-all;
}

.lotto-ball-3d::before {
content: '';
@apply absolute top-[15%] left-[20%] w-[35%] h-[25%] bg-white/40 rounded-full blur-[1px] pointer-events-none;
@apply relative flex items-center justify-center font-bold rounded-full overflow-hidden border border-border bg-card shadow-sm transition-all;
}

.glass-morphism {
@apply bg-white/80 dark:bg-black/40 backdrop-blur-xl border border-white/20 dark:border-white/5 shadow-2xl;
@apply bg-background border border-border shadow-sm;
}

.animate-spin-slow {
Expand Down
64 changes: 32 additions & 32 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function DashboardPage() {

{/* Premium Redesigned Hero Section */}
{heroImage && (
<div className="relative w-full aspect-[16/9] md:aspect-[3/1] rounded-[2rem] md:rounded-[3.5rem] overflow-hidden shadow-2xl border-4 border-white/20 dark:border-white/5 bg-muted group">
<div className="relative w-full aspect-[16/9] md:aspect-[3/1] rounded-lg md:rounded-xl overflow-hidden shadow-sm border-white/20 dark:border-white/5 bg-muted group">
<Image
src={heroImage.imageUrl}
alt={heroImage.description}
Expand All @@ -52,27 +52,27 @@ export default function DashboardPage() {
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-8 md:p-14">
<div className="max-w-2xl space-y-4 animate-in fade-in slide-in-from-bottom-8 duration-1000">
<div className="flex items-center gap-3">
<div className="w-3 h-3 rounded-full bg-secondary animate-pulse shadow-[0_0_15px_rgba(0,255,255,1)]" />
<p className="text-secondary font-black text-xs uppercase tracking-[0.4em] drop-shadow-md">Professional Studio Feed</p>
<div className="w-3 h-3 rounded-full bg-secondary " />
<p className="text-secondary font-bold text-xs uppercase tracking-[0.4em] ">Professional Studio Feed</p>
</div>
<h2 className="text-white text-3xl md:text-6xl font-black tracking-tighter drop-shadow-2xl leading-[0.9]">
<h2 className="text-white text-3xl md:text-6xl font-bold tracking-tighter drop-shadow-sm leading-[0.9]">
Real-Time <br />
<span className="text-secondary">PCSO Analytics</span>
</h2>
<div className="pt-4 flex flex-wrap gap-4">
<Button
onClick={handleOpenScanner}
className="h-14 px-10 rounded-2xl bg-white text-primary hover:bg-white/90 font-black text-xs uppercase tracking-widest shadow-2xl transition-all hover:scale-105 active:scale-95"
className="h-14 px-10 rounded-lg bg-white text-primary hover:bg-white/90 font-bold text-xs uppercase tracking-widest shadow-sm transition-all hover:scale-105 active:scale-95"
>
<Scan className="mr-2 h-5 w-5" />
Scan My Ticket
</Button>
<Button
variant="outline"
onClick={handleOpenLive}
className="h-14 px-10 rounded-2xl border-white/30 bg-white/10 backdrop-blur-md text-white hover:bg-white/20 font-black text-xs uppercase tracking-widest"
className="h-14 px-10 rounded-lg border-white/30 bg-white/10 text-white hover:bg-white/20 font-bold text-xs uppercase tracking-widest"
>
<Radio className="mr-2 h-5 w-5 animate-pulse" />
<Radio className="mr-2 h-5 w-5 " />
Watch Studio Live
</Button>
</div>
Expand All @@ -89,9 +89,9 @@ export default function DashboardPage() {
{ game: "6/49", time: "Tomorrow", label: "Super Lotto" },
{ game: "6/45", time: "In 2 Days", label: "Mega Lotto" },
].map((item, i) => (
<div key={i} className="p-4 glass-morphism rounded-3xl space-y-1 text-center border-primary/5">
<p className="text-[10px] font-black uppercase tracking-widest text-primary/60">{item.label}</p>
<p className="text-lg font-black text-primary">{item.game}</p>
<div key={i} className="p-4 bg-background border border-border rounded-xl space-y-1 text-center border-border">
<p className="text-[10px] font-bold uppercase tracking-widest text-primary/60">{item.label}</p>
<p className="text-lg font-bold text-primary">{item.game}</p>
<div className="flex items-center justify-center gap-1.5 text-[10px] font-bold text-muted-foreground">
<Clock className="w-3 h-3" /> {item.time}
</div>
Expand All @@ -108,7 +108,7 @@ export default function DashboardPage() {
<section className="space-y-6 pt-8">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-2">
<div>
<h2 className="text-2xl font-black flex items-center gap-3 text-foreground tracking-tight">
<h2 className="text-2xl font-bold flex items-center gap-3 text-foreground tracking-tight">
<Trophy className="w-6 h-6 text-secondary fill-secondary/20" />
Latest Draw Results
</h2>
Expand All @@ -119,15 +119,15 @@ export default function DashboardPage() {
</section>

{/* Premium Upgrade (Repositioned & Redesigned) */}
<section className="rounded-[3rem] bg-gradient-to-br from-primary via-indigo-900 to-black p-10 md:p-16 text-white shadow-2xl relative overflow-hidden group">
<section className="rounded-xl bg-muted border border-border p-10 md:p-16 text-white shadow-sm relative overflow-hidden group">
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12 text-center lg:text-left">
<div className="max-w-lg space-y-6">
<Badge className="bg-secondary text-white border-none px-4 py-1.5 font-black text-[10px] tracking-[0.2em] uppercase">Premium Studio</Badge>
<h3 className="text-3xl md:text-5xl font-black tracking-tighter leading-none">Maximize Your Winning Odds</h3>
<Badge className="bg-secondary text-white border-none px-4 py-1.5 font-bold text-[10px] tracking-[0.2em] uppercase">Premium Studio</Badge>
<h3 className="text-3xl md:text-5xl font-bold tracking-tighter leading-none">Maximize Your Winning Odds</h3>
<p className="text-sm md:text-lg text-white/70 leading-relaxed font-medium">
Unlock AI-driven historical trend analysis and real-time frequency heatmaps for your next draw.
</p>
<Button className="w-full sm:w-auto bg-white text-primary hover:bg-white/90 font-black text-xs uppercase tracking-[0.2em] shadow-2xl px-12 h-16 rounded-[2rem]">
<Button className="w-full sm:w-auto bg-white text-primary hover:bg-white/90 font-bold text-xs uppercase tracking-[0.2em] shadow-sm px-12 h-16 rounded-lg">
Start Free Trial <Sparkles className="ml-2 w-5 h-5 text-secondary" />
</Button>
</div>
Expand All @@ -138,12 +138,12 @@ export default function DashboardPage() {
{ label: "Data Depth", icon: TrendingUp },
{ label: "Cloud Backup", icon: ShieldCheck },
].map((stat, i) => (stat.value ? (
<div key={i} className="bg-white/10 backdrop-blur-xl p-8 rounded-[2.5rem] border border-white/20 text-center">
<p className="text-3xl font-black mb-1">{stat.value}</p>
<p className="text-[9px] uppercase font-black tracking-widest text-white/50">{stat.label}</p>
<div key={i} className="bg-white/10 p-8 rounded-xl border border-white/20 text-center">
<p className="text-3xl font-bold mb-1">{stat.value}</p>
<p className="text-[9px] uppercase font-bold tracking-widest text-white/50">{stat.label}</p>
</div>
) : (
<div key={i} className="bg-white/5 p-8 rounded-[2.5rem] flex items-center justify-center">
<div key={i} className="bg-white/5 p-8 rounded-xl flex items-center justify-center">
<stat.icon className="w-10 h-10 text-white/20" />
</div>
)))}
Expand All @@ -155,18 +155,18 @@ export default function DashboardPage() {
{/* Improved Analytics Overview */}
<section className="grid gap-6 grid-cols-1 lg:grid-cols-2">
<TrendsChart />
<div className="flex flex-col justify-center p-8 glass-morphism rounded-[2.5rem] border-primary/10 space-y-6">
<div className="p-4 bg-primary/10 rounded-3xl w-fit">
<Zap className="w-8 h-8 text-primary animate-pulse" />
<div className="flex flex-col justify-center p-8 bg-background border border-border rounded-xl border-border space-y-6">
<div className="p-4 bg-muted/50 rounded-xl w-fit">
<Zap className="w-8 h-8 text-primary " />
</div>
<div className="space-y-2">
<h3 className="text-2xl font-black text-primary tracking-tight uppercase">Frequency Intelligence</h3>
<h3 className="text-2xl font-bold text-primary tracking-tight uppercase">Frequency Intelligence</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
Discover which numbers are overdue for a draw using our professional Pattern Heatmap Studio. Analyzed over 365 days of draw data.
</p>
</div>
<Button
className="rounded-2xl bg-primary text-white font-black text-xs tracking-widest uppercase hover:bg-primary/90 shadow-xl shadow-primary/20 h-14 w-full"
className="rounded-lg bg-primary text-white font-bold text-xs tracking-widest uppercase hover:bg-primary/90 shadow-sm h-14 w-full"
onClick={() => window.dispatchEvent(new CustomEvent('open-analytics'))}
>
Open Pattern Studio <ArrowRight className="ml-2 w-4 h-4" />
Expand All @@ -176,12 +176,12 @@ export default function DashboardPage() {

{/* Homepage Contact Form with FAQ (New Layout) */}
<section className="pt-10">
<div className="max-w-5xl mx-auto p-8 md:p-16 rounded-[3.5rem] glass-morphism border-primary/5">
<div className="max-w-5xl mx-auto p-8 md:p-16 rounded-xl bg-background border border-border border-border">
<div className="flex flex-col md:flex-row gap-16">
<div className="md:w-1/2 space-y-10">
<div className="space-y-4">
<Badge variant="secondary" className="px-4 py-1">Help Center</Badge>
<h2 className="text-4xl font-black text-primary tracking-tighter uppercase leading-tight">Professional Support</h2>
<h2 className="text-4xl font-bold text-primary tracking-tighter uppercase leading-tight">Professional Support</h2>
<p className="text-muted-foreground text-sm font-medium">
Have a technical question or need help with a scan? Our team of analysts is ready to assist you.
</p>
Expand All @@ -194,23 +194,23 @@ export default function DashboardPage() {
"Can I track multiple lotto games?",
"Is my data stored securely?"
].map((q, i) => (
<div key={i} className="flex items-center justify-between p-4 bg-primary/5 rounded-2xl cursor-pointer hover:bg-primary/10 transition-all group">
<div key={i} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted/50 transition-all group">
<span className="text-xs font-bold text-primary">{q}</span>
<ArrowRight className="w-3 h-3 text-primary opacity-0 group-hover:opacity-100 transition-all" />
</div>
))}
</div>

<div className="flex items-center gap-4 pt-6 border-t border-dashed">
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary">
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-primary">
<ShieldCheck className="w-4 h-4" /> 256-bit AES
</div>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary">
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-primary">
<MessageSquare className="w-4 h-4" /> Live Response
</div>
</div>
</div>
<div className="md:w-1/2 bg-white dark:bg-white/5 p-8 rounded-[2.5rem] shadow-xl shadow-primary/5 border border-primary/5">
<div className="md:w-1/2 bg-white dark:bg-white/5 p-8 rounded-xl shadow-sm border border-border">
<ContactForm />
</div>
</div>
Expand All @@ -219,10 +219,10 @@ export default function DashboardPage() {

{/* Security Info */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-12 text-muted-foreground/60 py-8 opacity-50">
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em]">
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em]">
<ShieldCheck className="w-4 h-4" /> Secure
</div>
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em]">
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em]">
<TrendingUp className="w-4 h-4" /> Verified
</div>
</div>
Expand Down
Loading