dashboard tweaks
This commit is contained in:
parent
8ac8e7a635
commit
380a0e6d1c
1 changed files with 27 additions and 69 deletions
|
|
@ -1,6 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowRight,
|
||||
|
|
@ -14,25 +13,19 @@ import {
|
|||
Video,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
// If you have shadcn/ui Card/Button/Badge already, keep these.
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
/**
|
||||
* App Dashboard: Support CTA
|
||||
* -------------------------------------------------
|
||||
* This page is the first thing signed‑in users see. It makes a heartfelt,
|
||||
* transparent pitch for community funding to keep Laser Everything + MakeArmy
|
||||
* free and ad‑independent.
|
||||
*
|
||||
* Quick wiring:
|
||||
* - If you have live funding data, replace the GOAL and CURRENT below or
|
||||
* fetch dynamically in a useEffect.
|
||||
* App Dashboard: Support CTA (simplified hero, no progress meter)
|
||||
* ---------------------------------------------------------------
|
||||
* - Strips gradient background and complex card in the hero.
|
||||
* - Removes goal/progress UI entirely.
|
||||
* - Keeps the rest of the page (support cards, philosophy, free ways) intact.
|
||||
*/
|
||||
const GOAL = 5000; // monthly goal in USD (adjust as needed)
|
||||
const CURRENT = 0; // replace with live value if available
|
||||
|
||||
const perks = [
|
||||
{ icon: <ShieldCheck className="h-5 w-5" />, text: "No ads. No sponsors. No affiliates." },
|
||||
|
|
@ -86,50 +79,21 @@ const adVsCommunity = {
|
|||
};
|
||||
|
||||
export default function Page() {
|
||||
const pct = Math.max(0, Math.min(100, Math.round((CURRENT / GOAL) * 100)));
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100dvh-4rem)] w-full">
|
||||
{/* Hero */}
|
||||
<section className="relative isolate overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900" />
|
||||
<div className="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Badge variant="secondary" className="mb-4">
|
||||
Community‑Funded • Ad‑Free • Open Resources
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
|
||||
Keep Laser Everything & MakeArmy <span className="text-teal-300">free</span> for everyone
|
||||
{/* Hero (clean + minimal to match site) */}
|
||||
<section className="mx-auto w-full max-w-6xl px-6 py-14 sm:py-16">
|
||||
<div className="text-center">
|
||||
<Badge variant="secondary" className="mb-4">Community‑Funded • Ad‑Free • Open Resources</Badge>
|
||||
<h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
|
||||
Keep Laser Everything & MakeArmy free for everyone
|
||||
</h1>
|
||||
<p className="mx-auto mt-4 max-w-3xl text-balance text-base text-slate-200 sm:text-lg">
|
||||
<p className="mx-auto mt-3 max-w-3xl text-balance text-sm text-muted-foreground sm:text-base">
|
||||
The videos, tools, and docs you use today exist because previous supporters paid it forward.
|
||||
If we hit our monthly goal together, we can stay independent—no ads, no sponsors, no affiliate strings.
|
||||
We want to stay independent—no ads, no sponsors, no affiliate strings—and that only works if we fund it together.
|
||||
</p>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="mx-auto mt-8 max-w-xl rounded-2xl bg-white/5 p-6 shadow-lg ring-1 ring-white/10 backdrop-blur">
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-300">This month’s goal</p>
|
||||
<p className="text-2xl font-semibold text-white">${GOAL.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-slate-300">Funded</p>
|
||||
<p className="text-2xl font-semibold text-teal-300">{pct}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={pct} className="mt-3 h-3" />
|
||||
<p className="mt-3 text-xs text-slate-300">
|
||||
Live totals coming soon. Your support directly underwrites hosting, development, and production.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick CTA */}
|
||||
{/* Slim CTA row */}
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
|
||||
<Button asChild size="lg" className="rounded-2xl">
|
||||
<Link href="https://masters.lasereverything.net" target="_blank" rel="noopener noreferrer">
|
||||
|
|
@ -141,35 +105,28 @@ export default function Page() {
|
|||
Back on Patreon
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="rounded-2xl border-white/30 text-white hover:bg-white/10">
|
||||
<Button asChild variant="outline" size="lg" className="rounded-2xl">
|
||||
<Link href="https://ko-fi.com/lasereverything" target="_blank" rel="noopener noreferrer">
|
||||
Tip on Ko‑Fi
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Trust perks */}
|
||||
<ul className="mx-auto mt-6 grid max-w-2xl grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
{/* Trust perks (subtle, inline to keep rhythm) */}
|
||||
<ul className="mx-auto mt-5 grid max-w-2xl grid-cols-1 gap-2 sm:grid-cols-3">
|
||||
{perks.map((p, i) => (
|
||||
<li key={i} className="flex items-center justify-center gap-2 text-slate-200">
|
||||
<li key={i} className="flex items-center justify-center gap-2 text-muted-foreground">
|
||||
{p.icon}
|
||||
<span className="text-sm">{p.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Support Options */}
|
||||
<section className="mx-auto -mt-8 max-w-6xl px-6 pb-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8"
|
||||
>
|
||||
<section className="mx-auto -mt-2 max-w-6xl px-6 pb-12">
|
||||
<div className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">How you can help—pick what fits</h2>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
|
|
@ -253,6 +210,9 @@ export default function Page() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="my-10 h-px w-full bg-border" />
|
||||
|
||||
{/* Other ways */}
|
||||
<div className="mt-10">
|
||||
<h3 className="text-center text-xl font-semibold">No budget? No problem—here’s how to help for free</h3>
|
||||
|
|
@ -272,16 +232,14 @@ export default function Page() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-10" />
|
||||
|
||||
{/* Closing statement */}
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<div className="mx-auto mt-10 max-w-3xl text-center">
|
||||
<p className="text-balance text-sm text-muted-foreground">
|
||||
Laser Everything exists because makers before you chose to keep the ladder down. If we each do a small part—
|
||||
<span className="font-medium text-foreground"> we never need a paywall</span>.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue