Skip to content

Commit 11682b9

Browse files
ri1ongithubri1ongithub
authored
Merge pull request #2 from AxenoDev/main
2 parents 5d841dd + 7f545d9 commit 11682b9

File tree

6 files changed

+207
-69
lines changed

6 files changed

+207
-69
lines changed

‎app/globals.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,34 @@
133133
background-position: calc(100% + var(--shiny-width)) 0;
134134
}
135135
}
136+
137+
.heart-icon {
138+
transition: transform 0.3s ease, fill 0.3s ease;
139+
}
140+
141+
.group:hover .heart-icon {
142+
animation: heart-bounce 0.8s ease forwards;
143+
}
144+
145+
@keyframes heart-bounce {
146+
0% {
147+
transform: scale(1) rotate(0deg);
148+
fill: none;
149+
}
150+
25% {
151+
transform: scale(1.2) rotate(15deg);
152+
fill: #e63946;
153+
color: #e63946;
154+
}
155+
50% {
156+
transform: scale(0.9) rotate(-15deg);
157+
}
158+
75% {
159+
transform: scale(1.1) rotate(5deg);
160+
}
161+
100% {
162+
transform: scale(1) rotate(0deg);
163+
color: #e63946;
164+
fill: #e63946;
165+
}
166+
}

‎app/layout.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ const geistMono = Geist_Mono({
1717
export const metadata: Metadata = {
1818
title: "OpenMC",
1919
description: "Serveur Minecraft Open-Source",
20+
icons: {
21+
icon: "./branding/logoomc.png",
22+
shortcut: "./branding/logoomc.png",
23+
apple: "./branding/logoomc.png",
24+
},
2025
};
2126

2227
export default function RootLayout({
@@ -29,7 +34,7 @@ export default function RootLayout({
2934
<body
3035
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
3136
>
32-
<main className="max-w-screen-2xl mx-auto">
37+
<main className="max-w-full mx-auto">
3338
<ThemeProvider
3439
attribute="class"
3540
defaultTheme="system"

‎components/home/header.tsx‎

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import Image from "next/image";
22
import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text";
33
import { cn } from "@/lib/utils";
4-
import { ArrowRightIcon, Heart } from "lucide-react";
4+
import { ArrowRightIcon } from "lucide-react";
55
import Link from "next/link";
66
import { DotPattern } from "@/components/magicui/dot-pattern";
77
import { Button } from "@/components/ui/button";
8+
89
export default function Header() {
910
return (
10-
<div className="relative">
11+
<div className="relative px-4 sm:px-6 lg:px-8">
1112
<DotPattern
1213
className={cn(
1314
"absolute inset-0 -z-10 [mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
1415
)}
1516
/>
16-
<section id="header" className="flex flex-col items-center justify-center gap-8 py-24 md:py-32 lg:py-40">
17-
<div>
17+
<section id="header" className="flex flex-col items-center justify-center gap-8 pt-32 lg:pt-40 pb-20 sm:pb-28 md:pb-32">
18+
<div className="w-full max-w-4xl">
1819
<div className="z-10 flex items-center justify-center mb-2">
1920
<div
2021
className={cn(
@@ -29,67 +30,73 @@ export default function Header() {
2930
</Link>
3031
</div>
3132
</div>
32-
<div className="text-center">
33-
<h1 className="scroll-m-20 text-4xl max-w-3xl mx-auto text-dark font-extrabold tracking-tight lg:text-6xl">
33+
<div className="text-center px-2">
34+
<h1 className="text-3xl sm:text-4xl lg:text-6xl font-extrabold tracking-tight text-dark max-w-3xl mx-auto">
3435
Votre Serveur Minecraft Open-Source
3536
</h1>
36-
<p className="leading-7 max-w-xl mx-auto [&:not(:first-child)]:mt-6 tracking-tight">
37+
<p className="mt-4 leading-7 text-base sm:text-lg max-w-xl mx-auto tracking-tight text-muted-foreground">
3738
OpenMC est un projet communautaire open-source dédié à la création d&apos;un serveur Minecraft innovant et collaboratif.
3839
</p>
39-
<div className="m-4 gap-2 flex items-center justify-center">
40-
<Button className="group">
40+
<div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center items-center">
41+
<Button className="group w-full sm:w-auto">
4142
Rejoindre le Serveur
4243
<ArrowRightIcon
4344
className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
4445
size={16}
4546
aria-hidden="true"
4647
/>
4748
</Button>
48-
<Button variant="secondary" className="group" asChild>
49-
<Link href="https://github.com/ServerOpenMC/" target="_blank">
49+
<Button variant="secondary" className="group w-full sm:w-auto" asChild>
50+
<Link href="https://github.com/ServerOpenMC/" target="_blank" className="flex items-center">
5051
Contribuer
51-
<Heart
52-
className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
53-
size={16}
54-
aria-hidden="true"
55-
/>
52+
<svg
53+
xmlns="http://www.w3.org/2000/svg"
54+
width="24"
55+
height="24"
56+
viewBox="0 0 24 24"
57+
fill="none"
58+
stroke="currentColor"
59+
strokeWidth="2"
60+
strokeLinecap="round"
61+
strokeLinejoin="round"
62+
className="ml-1 opacity-60 transition-transform heart-icon"
63+
>
64+
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
65+
</svg>
5666
</Link>
5767
</Button>
5868
</div>
5969
</div>
6070
</div>
61-
<div className="mt-8 relative">
71+
72+
<div className="mt-10 w-full max-w-5xl relative rounded-4xl overflow-hidden">
6273
<Image
6374
src={`./placeholder/homepage.webp`}
6475
alt="Placeholder"
6576
width={1280}
66-
height={50}
77+
height={720}
6778
quality={100}
68-
className="rounded-4xl"
79+
className="w-full h-auto rounded-4xl object-cover"
6980
/>
70-
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-background rounded-4xl pointer-events-none"></div>
81+
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-background pointer-events-none" />
7182
</div>
72-
<section className="flex flex-col items-center justify-center py-16">
73-
<h2 className="text-2xl font-bold tracking-tight text-center lg:text-4xl">
83+
84+
<section className="flex flex-col items-center justify-center py-16 w-full px-4">
85+
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-center">
7486
Quelques Chiffres Clés
7587
</h2>
76-
<div className="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-4">
77-
<div className="text-center">
78-
<p className="text-4xl font-extrabold text-primary">34+</p>
79-
<p className="text-sm font-medium text-muted-foreground">Contributeurs</p>
80-
</div>
81-
<div className="text-center">
82-
<p className="text-4xl font-extrabold text-primary">7+</p>
83-
<p className="text-sm font-medium text-muted-foreground">Répertoires</p>
84-
</div>
85-
<div className="text-center">
86-
<p className="text-4xl font-extrabold text-primary">1M+</p>
87-
<p className="text-sm font-medium text-muted-foreground">Téléchargements</p>
88-
</div>
89-
<div className="text-center">
90-
<p className="text-4xl font-extrabold text-primary">99%</p>
91-
<p className="text-sm font-medium text-muted-foreground">Satisfaction</p>
92-
</div>
88+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-10 w-full max-w-5xl">
89+
{[
90+
{ number: "34+", label: "Contributeurs" },
91+
{ number: "7+", label: "Répertoires" },
92+
{ number: "1M+", label: "Téléchargements" },
93+
{ number: "99%", label: "Satisfaction" },
94+
].map((item, i) => (
95+
<div key={i} className="text-center">
96+
<p className="text-4xl font-extrabold text-primary">{item.number}</p>
97+
<p className="text-sm font-medium text-muted-foreground">{item.label}</p>
98+
</div>
99+
))}
93100
</div>
94101
</section>
95102
</section>

‎components/navigation/navbar.tsx‎

Lines changed: 124 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,137 @@
1+
"use client";
2+
13
import Image from "next/image";
24
import Link from "next/link";
35
import { Button } from "../ui/button";
46
import { ArrowRightIcon } from "lucide-react"
57
import { NAVBAR_LINKS } from "@/config";
8+
import { useEffect, useState } from "react";
69

710
export default function Navbar() {
11+
12+
const [isScrolled, setIsScrolled] = useState(false);
13+
const [menuOpen, setMenuOpen] = useState(false);
14+
15+
useEffect(() => {
16+
const handleScroll = () => setIsScrolled(window.scrollY > 20);
17+
window.addEventListener("scroll", handleScroll);
18+
return () => window.removeEventListener("scroll", handleScroll);
19+
}, [])
20+
21+
useEffect(() => {
22+
const handleResize = () => {
23+
if (window.innerWidth >= 768) setMenuOpen(false);
24+
};
25+
26+
window.addEventListener("resize", handleResize);
27+
return () => window.removeEventListener("resize", handleResize);
28+
}, []);
29+
30+
useEffect(() => {
31+
if (menuOpen) document.body.style.overflow = "hidden";
32+
else document.body.style.overflow = "";
33+
return () => { document.body.style.overflow = ""; };
34+
}, [menuOpen]);
35+
836
return (
9-
<div className="p-4 bg-primary/70 dark:bg-primary/10 text-white flex items-center rounded-2xl mt-4">
10-
<div>
11-
<Link href="/">
12-
<Image src={`./branding/logo.webp`} alt="Logo" width={200} height={50} />
13-
</Link>
14-
</div>
15-
<div className="flex-grow flex justify-center">
16-
{NAVBAR_LINKS.map((link) => (
17-
<Button
18-
key={link.href}
19-
variant="link"
20-
size="lg"
21-
className="text-white"
22-
asChild
23-
>
24-
<Link href={link.href} target={link.external ? "_blank" : undefined}>
25-
{link.label}
26-
</Link>
37+
<div className="flex justify-center w-full h-full">
38+
<div
39+
className={`fixed top-0 z-50 p-4 bg-primary/70 dark:bg-primary/10 text-white flex items-center justify-between
40+
transition-all duration-500 ease-[cubic-bezier(4,0,2,1)] will-change-transform
41+
${isScrolled || menuOpen
42+
? `w-full backdrop-blur-2xl scale-100 translate-y-0 rounded-none ${menuOpen ? "" : "shadow-lg"}`
43+
: "max-w-screen-2xl w-full rounded-2xl mt-4 scale-95 translate-y-2 shadow-none"
44+
}`}
45+
>
46+
<div className="flex items-center gap-4">
47+
<Link href="/">
48+
<Image src={`./branding/logo.webp`} alt="Logo" width={200} height={50} />
49+
</Link>
50+
</div>
51+
<div className="hidden md:flex flex-grow justify-center gap-4 items-center">
52+
{NAVBAR_LINKS.map((link) => (
53+
<div
54+
key={link.href}
55+
className="text-white px-2 py-0.5 rounded-md hover:bg-black/40 border border-transparent hover:border-white/10 relative group transition-all duration-300 ease-in-out"
56+
>
57+
<Link
58+
href={link.href}
59+
target={link.external ? "_blank" : undefined}
60+
className="transition-all duration-300 ease-in-out group-hover:py-1 block py-0.5"
61+
>
62+
{link.label}
63+
</Link>
64+
</div>
65+
))}
66+
</div>
67+
<div className="hidden md:flex">
68+
<Button className="group">
69+
Rejoindre le Serveur
70+
<ArrowRightIcon
71+
className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
72+
size={16}
73+
/>
2774
</Button>
28-
))}
29-
</div>
30-
<div>
31-
<Button className="group">
32-
Rejoindre le Serveur
33-
<ArrowRightIcon
34-
className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
35-
size={16}
36-
aria-hidden="true"
37-
/>
38-
</Button>
75+
</div>
76+
77+
<div className="md:hidden flex items-center">
78+
<button
79+
onClick={() => setMenuOpen(!menuOpen)}
80+
className="text-white focus:outline-none relative h-6 w-6"
81+
aria-label="Toggle Menu"
82+
>
83+
<div className="absolute inset-0 flex flex-col justify-center items-center">
84+
<span className={`block bg-white h-0.5 w-5 transition-all duration-300 ease-in-out ${menuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
85+
<span className={`block bg-white h-0.5 w-5 my-1 transition-all duration-300 ${menuOpen ? 'opacity-0' : 'opacity-100'}`}></span>
86+
<span className={`block bg-white h-0.5 w-5 transition-all duration-300 ease-in-out ${menuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
87+
</div>
88+
</button>
89+
</div>
3990
</div>
91+
92+
{menuOpen ? (
93+
<div
94+
className="fixed inset-0 bg-black/40 z-40 backdrop-blur-md transition-all duration-300 opacity-100"
95+
onClick={() => setMenuOpen(false)}
96+
>
97+
<div
98+
className="fixed top-20 left-0 right-0 z-50 bg-primary/70 dark:bg-primary/10 backdrop-blur-2xl p-6 md:hidden transition-all duration-300 opacity-100 transform translate-y-0"
99+
onClick={(e) => e.stopPropagation()}
100+
>
101+
<nav className="flex flex-col gap-4 max-w-md mx-auto">
102+
{NAVBAR_LINKS.map((link) => (
103+
<Link
104+
key={link.href}
105+
href={link.href}
106+
target={link.external ? "_blank" : undefined}
107+
className="text-white py-3 px-5 rounded-lg active:bg-black/30 focus:bg-black/40
108+
transition-all duration-200 font-medium border border-white/10
109+
active:border-white/20 active:scale-[1.02]"
110+
onClick={() => setMenuOpen(false)}
111+
>
112+
{link.label}
113+
</Link>
114+
))}
115+
116+
<div className="h-px w-full bg-white/10 my-2" />
117+
118+
<Button
119+
className="w-full group py-6 text-base mt-2 bg-white/10 active:bg-white/20
120+
border border-white/20 active:border-white/30 transition-all duration-300"
121+
onClick={() => setMenuOpen(false)}
122+
>
123+
Rejoindre le Serveur
124+
<ArrowRightIcon
125+
className="-me-1 ml-2 opacity-60 transition-transform group-active:translate-x-1"
126+
size={18}
127+
/>
128+
</Button>
129+
</nav>
130+
</div>
131+
</div>
132+
) : (
133+
<div className="fixed inset-0 bg-black/40 z-40 transition-all duration-300 opacity-0 pointer-events-none"></div>
134+
)}
40135
</div>
41136
);
42137
}

‎public/branding/logoomc.png‎

4.43 KB
Loading

‎public/placeholder/background_omc.png‎

1.33 MB
Loading

0 commit comments

Comments
 (0)