mirror of
https://github.com/arthur-pbty/binouz.git
synced 2026-06-19 21:38:31 +02:00
feat: add authentication and user management features
- Implemented AuthButton component for Discord sign-in and sign-out functionality. - Created CopyButton component for copying server IP addresses. - Developed EventCard and GradeCard components for displaying events and grades. - Added Footer and Navbar components for site navigation and information. - Introduced PurchaseButton for handling grade purchases with Stripe integration. - Created SectionHeader component for consistent section titles. - Implemented session management with SessionProvider for NextAuth. - Set up PostgreSQL database with Docker and Prisma for data management. - Added admin guard functionality to restrict access to certain routes. - Configured NextAuth with Discord provider for user authentication. - Defined Prisma schema for user, admin, grade, event, and purchase models. - Seeded database with initial grades and events data. - Added SVG hero image for the landing page. - Extended NextAuth types to include additional user properties.
This commit is contained in:
Puechberty Arthur
@@ -0,0 +1,104 @@
|
||||
import { getServerSession } from "next-auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import AdminDashboard from "@/components/admin/admin-dashboard";
|
||||
import Footer from "@/components/footer";
|
||||
import Navbar from "@/components/navbar";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type AdminWithUser = {
|
||||
id: string;
|
||||
discordId: string;
|
||||
user: {
|
||||
name?: string | null;
|
||||
email?: string | null;
|
||||
discordUsername?: string | null;
|
||||
} | null;
|
||||
};
|
||||
|
||||
type GradeRecord = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type EventRecord = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
eventDate: Date;
|
||||
};
|
||||
|
||||
export default async function AdminPage() {
|
||||
const session = await getServerSession(authOptions);
|
||||
const discordId = session?.user?.discordId;
|
||||
|
||||
if (!discordId) {
|
||||
redirect("/auth/signin");
|
||||
}
|
||||
|
||||
const envAdmin = process.env.ADMIN_DISCORD_ID;
|
||||
const adminRecord = envAdmin && envAdmin === discordId
|
||||
? null
|
||||
: await db.admin.findUnique({ where: { discordId } });
|
||||
|
||||
if (!adminRecord && (!envAdmin || envAdmin !== discordId)) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
const [grades, events, admins] = await Promise.all([
|
||||
db.grade.findMany({ orderBy: { price: "asc" } }),
|
||||
db.event.findMany({ orderBy: { eventDate: "asc" } }),
|
||||
db.admin.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: { user: true },
|
||||
}),
|
||||
] as const);
|
||||
|
||||
const adminUsers = admins as AdminWithUser[];
|
||||
const gradeRecords = grades as GradeRecord[];
|
||||
const eventRecords = events as EventRecord[];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="mx-auto w-full max-w-6xl flex-1 px-6 py-16">
|
||||
<div className="mb-10">
|
||||
<p className="text-xs uppercase tracking-[0.4em] text-cyan-200/80">
|
||||
Admin panel
|
||||
</p>
|
||||
<h1 className="mt-4 text-3xl font-semibold text-white md:text-4xl">
|
||||
Control center
|
||||
</h1>
|
||||
<p className="mt-3 text-sm text-slate-300">
|
||||
Manage admins, grades, and events for BinouzUHC.
|
||||
</p>
|
||||
</div>
|
||||
<AdminDashboard
|
||||
initialAdmins={adminUsers.map((admin) => ({
|
||||
id: admin.id,
|
||||
discordId: admin.discordId,
|
||||
user: admin.user
|
||||
? {
|
||||
name: admin.user.name,
|
||||
email: admin.user.email,
|
||||
discordUsername: admin.user.discordUsername,
|
||||
}
|
||||
: null,
|
||||
}))}
|
||||
initialGrades={gradeRecords}
|
||||
initialEvents={eventRecords.map((event) => ({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
eventDate: event.eventDate.toISOString(),
|
||||
}))}
|
||||
/>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { NextRequest } from "next/server";
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const { id } = await params;
|
||||
await db.admin.delete({ where: { id } });
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type AdminWithUser = {
|
||||
id: string;
|
||||
discordId: string;
|
||||
user: {
|
||||
name?: string | null;
|
||||
email?: string | null;
|
||||
discordUsername?: string | null;
|
||||
} | null;
|
||||
};
|
||||
|
||||
export async function GET() {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const admins = await db.admin.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: { user: true },
|
||||
});
|
||||
|
||||
const adminUsers = admins as AdminWithUser[];
|
||||
|
||||
return Response.json(
|
||||
adminUsers.map((admin) => ({
|
||||
id: admin.id,
|
||||
discordId: admin.discordId,
|
||||
user: admin.user
|
||||
? {
|
||||
name: admin.user.name,
|
||||
email: admin.user.email,
|
||||
discordUsername: admin.user.discordUsername,
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const body = await request.json();
|
||||
const discordId = body?.discordId?.toString().trim();
|
||||
|
||||
if (!discordId) {
|
||||
return Response.json({ error: "Discord ID required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const user = await db.user.findUnique({ where: { discordId } });
|
||||
if (!user) {
|
||||
return Response.json({ error: "User not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
const admin = await db.admin.upsert({
|
||||
where: { discordId },
|
||||
update: {},
|
||||
create: { discordId, userId: user.id },
|
||||
});
|
||||
|
||||
return Response.json({
|
||||
id: admin.id,
|
||||
discordId: admin.discordId,
|
||||
user: {
|
||||
name: user.name,
|
||||
email: user.email,
|
||||
discordUsername: user.discordUsername,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import type { NextRequest } from "next/server";
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function PATCH(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const { id } = await params;
|
||||
|
||||
const body = await request.json();
|
||||
const title = body?.title?.toString().trim();
|
||||
const description = body?.description?.toString().trim();
|
||||
const eventDateValue = body?.eventDate?.toString();
|
||||
const eventDate = eventDateValue ? new Date(eventDateValue) : null;
|
||||
|
||||
if (!title || !description || !eventDate || Number.isNaN(eventDate.getTime())) {
|
||||
return Response.json({ error: "Invalid payload" }, { status: 400 });
|
||||
}
|
||||
|
||||
const event = await db.event.update({
|
||||
where: { id },
|
||||
data: { title, description, eventDate },
|
||||
});
|
||||
|
||||
return Response.json({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
eventDate: event.eventDate.toISOString(),
|
||||
});
|
||||
}
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const { id } = await params;
|
||||
await db.event.delete({ where: { id } });
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const events = await db.event.findMany({ orderBy: { eventDate: "asc" } });
|
||||
return Response.json(events);
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const body = await request.json();
|
||||
const title = body?.title?.toString().trim();
|
||||
const description = body?.description?.toString().trim();
|
||||
const eventDateValue = body?.eventDate?.toString();
|
||||
const eventDate = eventDateValue ? new Date(eventDateValue) : null;
|
||||
|
||||
if (!title || !description || !eventDate || Number.isNaN(eventDate.getTime())) {
|
||||
return Response.json({ error: "Invalid payload" }, { status: 400 });
|
||||
}
|
||||
|
||||
const event = await db.event.create({
|
||||
data: { title, description, eventDate },
|
||||
});
|
||||
|
||||
return Response.json({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
eventDate: event.eventDate.toISOString(),
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { NextRequest } from "next/server";
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function PATCH(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const { id } = await params;
|
||||
|
||||
const body = await request.json();
|
||||
const name = body?.name?.toString().trim();
|
||||
const price = Number(body?.price);
|
||||
const description = body?.description?.toString().trim();
|
||||
|
||||
if (!name || Number.isNaN(price) || !description) {
|
||||
return Response.json({ error: "Invalid payload" }, { status: 400 });
|
||||
}
|
||||
|
||||
const grade = await db.grade.update({
|
||||
where: { id },
|
||||
data: { name, price, description },
|
||||
});
|
||||
|
||||
return Response.json(grade);
|
||||
}
|
||||
|
||||
export async function DELETE(
|
||||
_request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const { id } = await params;
|
||||
await db.grade.delete({ where: { id } });
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { db } from "@/lib/db";
|
||||
import { requireAdmin } from "@/lib/admin";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const grades = await db.grade.findMany({ orderBy: { price: "asc" } });
|
||||
return Response.json(grades);
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const guard = await requireAdmin();
|
||||
if (!guard.ok) return guard.response;
|
||||
|
||||
const body = await request.json();
|
||||
const name = body?.name?.toString().trim();
|
||||
const price = Number(body?.price);
|
||||
const description = body?.description?.toString().trim();
|
||||
|
||||
if (!name || Number.isNaN(price) || !description) {
|
||||
return Response.json({ error: "Invalid payload" }, { status: 400 });
|
||||
}
|
||||
|
||||
const grade = await db.grade.create({
|
||||
data: { name, price, description },
|
||||
});
|
||||
|
||||
return Response.json(grade);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import NextAuth from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
|
||||
const handler = NextAuth(authOptions);
|
||||
|
||||
export { handler as GET, handler as POST };
|
||||
@@ -0,0 +1,97 @@
|
||||
import Stripe from "stripe";
|
||||
import { db } from "@/lib/db";
|
||||
import { fallbackGrades } from "@/lib/site";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const stripeSecretKey = process.env.STRIPE_SECRET_KEY;
|
||||
const stripe = stripeSecretKey
|
||||
? new Stripe(stripeSecretKey, {
|
||||
apiVersion: "2023-10-16",
|
||||
})
|
||||
: null;
|
||||
|
||||
const minecraftNameRegex = /^[A-Za-z0-9_]{3,16}$/;
|
||||
|
||||
type GradeInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
description: string;
|
||||
};
|
||||
|
||||
const getGradeById = async (gradeId: string): Promise<GradeInfo | null> => {
|
||||
try {
|
||||
const grade = await db.grade.findUnique({ where: { id: gradeId } });
|
||||
if (grade) {
|
||||
return {
|
||||
id: grade.id,
|
||||
name: grade.name,
|
||||
price: grade.price,
|
||||
description: grade.description,
|
||||
};
|
||||
}
|
||||
} catch {
|
||||
// ignore db errors and fall back to static data
|
||||
}
|
||||
|
||||
return fallbackGrades.find((grade) => grade.id === gradeId) ?? null;
|
||||
};
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const body = await request.json().catch(() => ({}));
|
||||
const gradeId = body?.gradeId?.toString();
|
||||
const minecraftUsername = body?.minecraftUsername?.toString().trim();
|
||||
|
||||
if (!gradeId || !minecraftUsername) {
|
||||
return Response.json({ error: "Missing checkout details." }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!minecraftNameRegex.test(minecraftUsername)) {
|
||||
return Response.json(
|
||||
{ error: "Invalid Minecraft username." },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const grade = await getGradeById(gradeId);
|
||||
if (!grade) {
|
||||
return Response.json({ error: "Grade not found." }, { status: 404 });
|
||||
}
|
||||
|
||||
if (!stripe) {
|
||||
return Response.json({ error: "Stripe not configured." }, { status: 500 });
|
||||
}
|
||||
|
||||
const baseUrl = process.env.NEXTAUTH_URL ?? "http://localhost:3000";
|
||||
const session = await stripe.checkout.sessions.create({
|
||||
mode: "payment",
|
||||
payment_method_types: ["card"],
|
||||
success_url: `${baseUrl}/?checkout=success`,
|
||||
cancel_url: `${baseUrl}/?checkout=cancel`,
|
||||
line_items: [
|
||||
{
|
||||
price_data: {
|
||||
currency: "eur",
|
||||
unit_amount: Math.round(grade.price * 100),
|
||||
product_data: {
|
||||
name: grade.name,
|
||||
description: grade.description,
|
||||
},
|
||||
},
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
metadata: {
|
||||
gradeId: grade.id,
|
||||
minecraftUsername,
|
||||
},
|
||||
client_reference_id: minecraftUsername,
|
||||
});
|
||||
|
||||
if (!session.url) {
|
||||
return Response.json({ error: "Stripe session failed." }, { status: 500 });
|
||||
}
|
||||
|
||||
return Response.json({ url: session.url });
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const events = await db.event.findMany({ orderBy: { eventDate: "asc" } });
|
||||
return Response.json(events);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const grades = await db.grade.findMany({ orderBy: { price: "asc" } });
|
||||
return Response.json(grades);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
import { db } from "@/lib/db";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user?.id) {
|
||||
return Response.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const gradeId = body?.gradeId as string | undefined;
|
||||
if (!gradeId) {
|
||||
return Response.json({ error: "Grade id required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const grade = await db.grade.findUnique({ where: { id: gradeId } });
|
||||
if (!grade) {
|
||||
return Response.json({ error: "Grade not found" }, { status: 404 });
|
||||
}
|
||||
|
||||
const purchase = await db.purchase.create({
|
||||
data: {
|
||||
userId: session.user.id,
|
||||
gradeId: grade.id,
|
||||
amount: grade.price,
|
||||
status: "PENDING",
|
||||
},
|
||||
});
|
||||
|
||||
return Response.json({
|
||||
id: purchase.id,
|
||||
status: purchase.status,
|
||||
message: "Mock purchase queued",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import AuthButton from "@/components/auth-button";
|
||||
import Footer from "@/components/footer";
|
||||
import Navbar from "@/components/navbar";
|
||||
|
||||
export default function SignInPage() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="flex flex-1 items-center justify-center px-6 py-16">
|
||||
<div className="w-full max-w-lg rounded-3xl border border-white/10 bg-white/5 p-10 text-center backdrop-blur">
|
||||
<p className="text-xs uppercase tracking-[0.4em] text-cyan-200/80">
|
||||
Auth required
|
||||
</p>
|
||||
<h1 className="mt-4 text-3xl font-semibold text-white">
|
||||
Connect your Discord account
|
||||
</h1>
|
||||
<p className="mt-3 text-sm text-slate-300">
|
||||
Unlock your profile, purchases, and admin access if your Discord ID
|
||||
is whitelisted.
|
||||
</p>
|
||||
<div className="mt-6 flex justify-center">
|
||||
<AuthButton label="Se connecter avec Discord" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+71
-14
@@ -1,26 +1,83 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--bg-950: #05070d;
|
||||
--bg-900: #0b1020;
|
||||
--bg-800: #10172c;
|
||||
--text-100: #e5e7eb;
|
||||
--text-200: #cbd5f5;
|
||||
--accent-500: #7c3aed;
|
||||
--accent-400: #60a5fa;
|
||||
--accent-300: #22d3ee;
|
||||
--glass: rgba(15, 23, 42, 0.6);
|
||||
--glass-border: rgba(148, 163, 184, 0.2);
|
||||
--shadow-strong: 0 30px 80px rgba(2, 6, 23, 0.6);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: var(--bg-950);
|
||||
--color-foreground: var(--text-100);
|
||||
--font-sans: var(--font-display);
|
||||
--font-mono: var(--font-code);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background:
|
||||
radial-gradient(1200px 700px at 20% 10%, rgba(124, 58, 237, 0.25),
|
||||
transparent 60%),
|
||||
radial-gradient(900px 600px at 80% 15%, rgba(96, 165, 250, 0.25),
|
||||
transparent 55%),
|
||||
var(--bg-950);
|
||||
color: var(--text-100);
|
||||
font-family: var(--font-display), "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(124, 58, 237, 0.55);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
+37
-11
@@ -1,33 +1,59 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { JetBrains_Mono, Space_Grotesk } from "next/font/google";
|
||||
import { getServerSession } from "next-auth";
|
||||
import "./globals.css";
|
||||
import SessionProvider from "@/components/session-provider";
|
||||
import { authOptions } from "@/lib/auth";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const displayFont = Space_Grotesk({
|
||||
variable: "--font-display",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const monoFont = JetBrains_Mono({
|
||||
variable: "--font-code",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: {
|
||||
default: "BinouzUHC - UHC PvP",
|
||||
template: "%s | BinouzUHC",
|
||||
},
|
||||
description:
|
||||
"Serveur UHC competitif et immersif. PvP nerveux, events reguliers et communaute engagee.",
|
||||
keywords: ["Minecraft", "UHC", "PvP", "BinouzUHC", "1.8.X"],
|
||||
openGraph: {
|
||||
title: "BinouzUHC - UHC PvP",
|
||||
description:
|
||||
"Rejoignez BinouzUHC pour une experience UHC premium, events reguliers et rewards exclusifs.",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "BinouzUHC - UHC PvP",
|
||||
description:
|
||||
"Serveur UHC competitif et immersif. PvP nerveux, events reguliers et communaute engagee.",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="fr"
|
||||
className={`${displayFont.variable} ${monoFont.variable} h-full scroll-smooth`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="min-h-full bg-slate-950 text-slate-100 antialiased">
|
||||
<SessionProvider session={session}>{children}</SessionProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+154
-58
@@ -1,65 +1,161 @@
|
||||
import Image from "next/image";
|
||||
import EventCard from "@/components/event-card";
|
||||
import Footer from "@/components/footer";
|
||||
import GradeCard from "@/components/grade-card";
|
||||
import Hero from "@/components/hero";
|
||||
import Navbar from "@/components/navbar";
|
||||
import SectionHeader from "@/components/section-header";
|
||||
import { db } from "@/lib/db";
|
||||
import { fallbackEvents, fallbackGrades, siteConfig } from "@/lib/site";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Grade = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type Event = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
eventDate: Date;
|
||||
};
|
||||
|
||||
const getGrades = async (): Promise<Grade[]> => {
|
||||
try {
|
||||
const grades = await db.grade.findMany({ orderBy: { price: "asc" } });
|
||||
return grades.length > 0 ? grades : fallbackGrades;
|
||||
} catch {
|
||||
return fallbackGrades;
|
||||
}
|
||||
};
|
||||
|
||||
const getEvents = async (): Promise<Event[]> => {
|
||||
try {
|
||||
const events = await db.event.findMany({ orderBy: { eventDate: "asc" } });
|
||||
return events.length > 0 ? events : fallbackEvents;
|
||||
} catch {
|
||||
return fallbackEvents;
|
||||
}
|
||||
};
|
||||
|
||||
export default async function Home() {
|
||||
const [grades, events] = await Promise.all([getGrades(), getEvents()]);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="flex-1">
|
||||
<Hero />
|
||||
|
||||
<section id="presentation" className="py-20">
|
||||
<div className="mx-auto w-full max-w-6xl px-6">
|
||||
<SectionHeader
|
||||
eyebrow="Presentation"
|
||||
title="UHC designed for competitive squads"
|
||||
description="Balance, clarity, and tension. BinouzUHC delivers a premium UHC loop with PvP-first tuning."
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
title: "Precision combat",
|
||||
description:
|
||||
"Hits register fast, clean hitboxes, and optimized knockback for UHC duels.",
|
||||
},
|
||||
{
|
||||
title: "Event experience",
|
||||
description:
|
||||
"Weekly tournaments, bracket nights, and events built for squads.",
|
||||
},
|
||||
{
|
||||
title: "Community core",
|
||||
description:
|
||||
"Active moderation, high signal Discord, and competitive rankings.",
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-3xl border border-white/10 bg-white/5 p-6 text-sm text-slate-300 backdrop-blur"
|
||||
>
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-200/80">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="mt-4 text-base text-white">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="grades" className="py-20">
|
||||
<div className="mx-auto w-full max-w-6xl px-6">
|
||||
<SectionHeader
|
||||
eyebrow="Boutique"
|
||||
title="Grades premium"
|
||||
description="Unlock cosmetics, priority access, and competitive advantages."
|
||||
/>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{grades.map((grade) => (
|
||||
<GradeCard key={grade.id} grade={grade} />
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-6 text-xs uppercase tracking-[0.3em] text-slate-500">
|
||||
{siteConfig.shopDisclaimer}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="events" className="py-20">
|
||||
<div className="mx-auto w-full max-w-6xl px-6">
|
||||
<SectionHeader
|
||||
eyebrow="Events"
|
||||
title="Upcoming challenges"
|
||||
description="Competitive formats tailored for UHC players and squad leaders."
|
||||
/>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{events.map((event) => (
|
||||
<EventCard key={event.id} event={event} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="discord" className="py-20">
|
||||
<div className="mx-auto w-full max-w-6xl px-6">
|
||||
<div className="rounded-3xl border border-white/10 bg-linear-to-r from-violet-600/20 via-indigo-500/20 to-cyan-400/20 p-10 text-center backdrop-blur">
|
||||
<p className="text-xs uppercase tracking-[0.4em] text-cyan-200/80">
|
||||
Discord
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-semibold text-white">
|
||||
Join the BinouzUHC squad
|
||||
</h2>
|
||||
<p className="mt-3 text-sm text-slate-300">
|
||||
News, tournaments, and admin contact. Stay synced with the
|
||||
community.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href={siteConfig.discordInviteUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center justify-center rounded-full border border-white/15 bg-white/10 px-6 py-3 text-xs font-semibold uppercase tracking-[0.3em] text-white transition hover:bg-white/20"
|
||||
>
|
||||
Connect Discord
|
||||
</a>
|
||||
<a
|
||||
href="#presentation"
|
||||
className="inline-flex items-center justify-center rounded-full border border-white/15 px-6 py-3 text-xs font-semibold uppercase tracking-[0.3em] text-white/80 transition hover:text-white"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user