Skip to content

Commit 5350104

Browse files
NaFo44NaFo44
committed
Complete refactor in NextJS of the landing page
1 parent 64bdd4f commit 5350104

37 files changed

Lines changed: 9517 additions & 0 deletions

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/app/components/sections/DisclaimerSection.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import Link from "../ui/Link";
4+
5+
export default function HeroSection() {
6+
return (
7+
<section className="mb-[90px]">
8+
<div className="intro-card mx-auto max-w-[800px] text-center">
9+
<h2 className="text-[34px] mb-[25px] font-bold">A Project in Progress</h2>
10+
<p className="text-[19px] text-[var(--color-para)]">
11+
FairPlay is currently under development. You'll be introduced to the user
12+
interface and some features, but please note that the project is still
13+
under development. We thank you for your patience and invite you to
14+
contribute to its development! A "live build" version of Fairplay is also
15+
available at{" "}
16+
17+
<Link href="https://lab.fairplay.video/">lab.fairplay.video</Link>
18+
</p>
19+
</div>
20+
</section>
21+
);
22+
}

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/app/components/sections/FadeInSection.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use client";
2+
import { ReactNode } from "react";
3+
import useFadeInOnScroll from "../../hooks/useFadeInOnScroll";
4+
5+
interface FadeInSectionProps {
6+
children: ReactNode;
7+
className?: string;
8+
}
9+
10+
export default function FadeInSection({ children, className = "" }: FadeInSectionProps) {
11+
const { ref, visible } = useFadeInOnScroll();
12+
13+
return (
14+
<div
15+
ref={ref}
16+
className={`
17+
transition-all duration-1000 ease-out
18+
${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}
19+
${className}
20+
`}
21+
>
22+
{children}
23+
</div>
24+
);
25+
}

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/app/components/sections/FeatureGrid.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
"use client";
2+
3+
import { FaHandHoldingUsd, FaAd, FaUsers, FaCodeBranch, FaLightbulb, FaBalanceScale } from "react-icons/fa";
4+
import FeatureItem from "../ui/FeatureItem";
5+
import Link from "../ui/Link";
6+
7+
interface SectionProps {
8+
className?: string;
9+
}
10+
11+
export default function FeatureGrid({ className = "" }: SectionProps) {
12+
return (
13+
<div className={`grid gap-[40px] text-left ${className}
14+
grid-cols-1
15+
sm:grid-cols-2
16+
lg:grid-cols-3
17+
`}>
18+
<FeatureItem>
19+
<FaHandHoldingUsd className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
20+
<h3 className="text-[24px] mb-[15px]">100% Free. Forever.</h3>
21+
<p>Access an unlimited library of videos with no fees or subscriptions. We are committed to universal access to quality knowledge and entertainment.</p>
22+
</FeatureItem>
23+
24+
<FeatureItem>
25+
<FaAd className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
26+
<h3 className="text-[24px] mb-[15px]">Zero Ads. Zero Interruptions.</h3>
27+
<p>Enjoy your videos in complete serenity. FairPlay is built without any advertising, for total immersion in the content.</p>
28+
</FeatureItem>
29+
30+
<FeatureItem>
31+
<FaUsers className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
32+
<h3 className="text-[24px] mb-[15px]">An Engaged Community.</h3>
33+
<p>Participate in constructive exchanges, comment, annotate, and create. FairPlay is a platform built by and for its users. You join our <Link href="https://discord.gg/6g5cBUVra9" variant="secondary">Discord</Link> community!</p>
34+
</FeatureItem>
35+
36+
<FeatureItem>
37+
<FaCodeBranch className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
38+
<h3 className="text-[24px] mb-[15px]">Open Source & Free API.</h3>
39+
<p>Our code is open to all. Contribute and build on our foundation. The FairPlay ecosystem is transparent and collaborative. Here is our <Link href="https://github.com/orgs/FairPlayTeam/">github</Link></p>
40+
</FeatureItem>
41+
42+
<FeatureItem>
43+
<FaLightbulb className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
44+
<h3 className="text-[24px] mb-[15px]">Relevant & Captivating Content.</h3>
45+
<p>No more misinformation and sensationalism. FairPlay values enlightening documentaries, useful tutorials, inspiring stories, and in-depth entertainment.</p>
46+
</FeatureItem>
47+
48+
<FeatureItem>
49+
<FaBalanceScale className="text-[var(--color-accent)] text-[45px] mb-[20px]" />
50+
<h3 className="text-[24px] mb-[15px]">Fairness and Respect.</h3>
51+
<p>Our moderation focuses on promoting a healthy environment, excluding controversial topics and encouraging respectful discussions.</p>
52+
</FeatureItem>
53+
</div>
54+
);
55+
}

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/app/components/sections/Footer.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa";
5+
6+
interface FooterProps {
7+
variant?: "primary" | "secondary";
8+
}
9+
10+
export default function Footer({ variant = "primary" }: FooterProps) {
11+
return (
12+
<footer className="bg-[var(--color-container)] border-t-1 border-[var(--color-border)] text-[var(--color-text)] text-[15px] px-6 sm:px-10 py-10 text-center">
13+
{variant === "primary" && (
14+
<section className="text-[var(--color-text-footer)] text-[0.95rem] leading-relaxed max-w-[1000px] mx-auto mb-10 px-2 sm:px-0">
15+
<p className="mb-5">
16+
Looking for a{" "}
17+
<strong className="text-[var(--color-text-bold)]">
18+
free streaming platform without ads
19+
</strong>
20+
? FairPlay offers a refreshing alternative to mainstream video
21+
services. Watch high-quality content with no interruptions, no
22+
subscriptions, and no tracking. Our community-driven platform is
23+
open source, ethical, and respects your privacy. Whether you're into{" "}
24+
<strong className="text-[var(--color-text-bold)]">
25+
documentaries, tutorials, or inspiring stories
26+
</strong>
27+
, FairPlay lets you stream without distractions. Discover an{" "}
28+
<strong className="text-[var(--color-text-bold)]">
29+
ad-free alternative to YouTube
30+
</strong>{" "}
31+
– designed for people who care about quality and transparency.
32+
</p>
33+
<p>
34+
FairPlay is built by volunteers, supported by donations, and driven
35+
by a mission:{" "}
36+
<strong className="text-[var(--color-text-bold)]">
37+
redefine streaming with values
38+
</strong>
39+
. Join our growing community and be part of the change. No
40+
algorithms, no autoplay traps – just meaningful videos, handpicked
41+
and fairly moderated. Try FairPlay today and experience the freedom
42+
of{" "}
43+
<strong className="text-[var(--color-text-bold)]">
44+
streaming without compromise
45+
</strong>
46+
.
47+
</p>
48+
</section>
49+
)}
50+
51+
<div className="flex flex-col md:flex-row items-center justify-between gap-6 max-w-[1400px] mx-auto mb-8 text-center md:text-left">
52+
<div className="text-2xl font-bold font-[Montserrat] text-[var(--color-text)]">
53+
FairPlay
54+
</div>
55+
56+
<div className="flex flex-wrap justify-center md:justify-center gap-4 sm:gap-6">
57+
<Link
58+
href="/cgu"
59+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
60+
>
61+
Terms of Use
62+
</Link>
63+
<Link
64+
href="/cgu#privacy-policy"
65+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
66+
>
67+
Privacy Policy
68+
</Link>
69+
<Link
70+
href="/cgu#conduct"
71+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
72+
>
73+
Code of Conduct
74+
</Link>
75+
<Link
76+
href="/cgu#faq"
77+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
78+
>
79+
FAQ
80+
</Link>
81+
</div>
82+
83+
<div className="flex justify-center gap-6 text-[22px]">
84+
<a
85+
href="https://github.com/FairPlayTeam/"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
89+
aria-label="GitHub"
90+
>
91+
<FaGithub />
92+
</a>
93+
<a
94+
href="https://x.com/StreamNew90503"
95+
target="_blank"
96+
rel="noopener noreferrer"
97+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
98+
aria-label="Twitter / X"
99+
>
100+
<FaTwitter />
101+
</a>
102+
<a
103+
href="https://discord.gg/AZBwM6u9Kr"
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
className="text-gray-300 hover:text-[var(--color-text)] transition-colors duration-200"
107+
aria-label="Discord"
108+
>
109+
<FaDiscord />
110+
</a>
111+
</div>
112+
</div>
113+
114+
<p className="border-t border-white/10 text-[var(--color-text-bold)] text-sm pt-5">
115+
© 2025 FairPlay. Powered by the Community.
116+
</p>
117+
</footer>
118+
);
119+
}

‎OneDrive - Conseil Régional des Pays de La Loire - Direction des Lycées/Bureau/Frontend_NextJS/landingpage_nextjs/app/components/sections/HeroImage.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import Image from "next/image";
5+
6+
export default function HeroImage() {
7+
const [animate, setAnimate] = useState(false);
8+
9+
useEffect(() => {
10+
const timer = setTimeout(() => setAnimate(true), 100);
11+
return () => clearTimeout(timer);
12+
}, []);
13+
14+
return (
15+
<div
16+
className={`hero-image flex justify-center items-center py-12 transition-all duration-1000 ${
17+
animate ? "animate-heroImageEntrance" : "opacity-0 translate-y-[70px] scale-90"
18+
}`}
19+
>
20+
<div className="video-card-container [perspective:1000px]">
21+
<div
22+
className="video-card-3d-effect
23+
bg-[var(--color-background)]
24+
rounded-[15px]
25+
shadow-[0_25px_50px_rgba(0,0,0,0.2)]
26+
transform rotate-x-[10deg] rotate-y-[-40deg] rotate-[5deg]
27+
[transform-style:preserve-3d]
28+
transition-transform duration-300 ease-in-out
29+
"
30+
>
31+
<div className="video-card relative bg-[var(--color-background)] rounded-[20px] w-[380px] z-[1]">
32+
<div className="video-player-placeholder bg-[var(--color-background)] h-[220px] w-full rounded-[20px]">
33+
<Image
34+
src="https://tilbgoymzrpnhzlqsvgj.supabase.co/storage/v1/object/public/thumbnails/1756208153103_demoThumbnail.png"
35+
alt="Video thumbnail"
36+
width={380}
37+
height={220}
38+
className="video-thumbnail rounded-[20px] shadow-[0_15px_30px_rgba(0,0,0,0.1)] transform translate-x-[-20px] [transform-origin:center_center] [backface-visibility:hidden] max-w-full h-auto"
39+
/>
40+
</div>
41+
42+
<div className="video-info p-[15px_20px]">
43+
<h3 className="video-title text-[var(--color-text)] text-[1.2em] font-bold leading-[1.7] mb-[8px] mt-0">
44+
The Obviously True Theorem No One Can Prove
45+
</h3>
46+
<p className="video-rating text-[var(--color-text-para)] text-[0.9em] mb-[10px]">
47+
4.5 / 5
48+
</p>
49+
<div className="video-tags flex gap-[8px]">
50+
<span className="tag bg-[var(--gray-700)] rounded-full text-[var(--color-text)] text-[0.8em] px-[10px] py-[5px] lowercase">
51+
math
52+
</span>
53+
<span className="tag bg-[var(--gray-700)] rounded-full text-[var(--color-text)] text-[0.8em] px-[10px] py-[5px] lowercase">
54+
theorem
55+
</span>
56+
<span className="tag bg-[var(--gray-700)] rounded-full text-[var(--color-text)] text-[0.8em] px-[10px] py-[5px] lowercase">
57+
puzzle
58+
</span>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
);
66+
}

0 commit comments

Comments
 (0)