diff --git a/package-lock.json b/package-lock.json
index 51e58f1..ff273c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
"name": "website",
"version": "0.1.0",
"dependencies": {
+ "clsx": "^2.1.1",
"next": "14.2.13",
"react": "^18",
- "react-dom": "^18"
+ "react-dom": "^18",
+ "tailwind-merge": "^2.5.2"
},
"devDependencies": {
"@types/node": "^20",
@@ -1153,6 +1155,14 @@
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
+ "node_modules/clsx": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+ "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4443,6 +4453,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/tailwind-merge": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
+ "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/dcastil"
+ }
+ },
"node_modules/tailwindcss": {
"version": "3.4.13",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
diff --git a/package.json b/package.json
index 53800ae..8722fc9 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,20 @@
"lint": "next lint"
},
"dependencies": {
+ "clsx": "^2.1.1",
+ "next": "14.2.13",
"react": "^18",
"react-dom": "^18",
- "next": "14.2.13"
+ "tailwind-merge": "^2.5.2"
},
"devDependencies": {
- "typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
+ "eslint": "^8",
+ "eslint-config-next": "14.2.13",
"postcss": "^8",
"tailwindcss": "^3.4.1",
- "eslint": "^8",
- "eslint-config-next": "14.2.13"
+ "typescript": "^5"
}
-}
+}
diff --git a/public/img/arrow.svg b/public/img/arrow.svg
new file mode 100644
index 0000000..9a6e51a
--- /dev/null
+++ b/public/img/arrow.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/public/img/dino-gray.svg b/public/img/dino-gray.svg
new file mode 100644
index 0000000..dc857e6
--- /dev/null
+++ b/public/img/dino-gray.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/public/img/dino.svg b/public/img/dino.svg
new file mode 100644
index 0000000..11b3b42
--- /dev/null
+++ b/public/img/dino.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/public/img/matteo.jpg b/public/img/matteo.jpg
new file mode 100644
index 0000000..bcfaecb
Binary files /dev/null and b/public/img/matteo.jpg differ
diff --git a/public/img/michel.png b/public/img/michel.png
new file mode 100644
index 0000000..284850b
Binary files /dev/null and b/public/img/michel.png differ
diff --git a/public/img/nicolas.jpg b/public/img/nicolas.jpg
new file mode 100644
index 0000000..d153ef4
Binary files /dev/null and b/public/img/nicolas.jpg differ
diff --git a/src/app/font.ts b/src/app/font.ts
new file mode 100644
index 0000000..58543b8
--- /dev/null
+++ b/src/app/font.ts
@@ -0,0 +1,7 @@
+import { Gasoek_One, Montserrat } from "next/font/google";
+
+export const montserrat = Montserrat({ subsets: ['latin'] })
+export const gasoekOne = Gasoek_One({
+ subsets: ['latin'],
+ weight: "400"
+})
\ No newline at end of file
diff --git a/src/app/fonts/GeistMonoVF.woff b/src/app/fonts/GeistMonoVF.woff
deleted file mode 100644
index f2ae185..0000000
Binary files a/src/app/fonts/GeistMonoVF.woff and /dev/null differ
diff --git a/src/app/fonts/GeistVF.woff b/src/app/fonts/GeistVF.woff
deleted file mode 100644
index 1b62daa..0000000
Binary files a/src/app/fonts/GeistVF.woff and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 13d40b8..46cc781 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,26 +2,14 @@
@tailwind components;
@tailwind utilities;
-:root {
- --background: #ffffff;
- --foreground: #171717;
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
- .text-balance {
- text-wrap: balance;
- }
+html, body {
+ background-color: #070707;
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a36cde0..6e71356 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,21 +1,11 @@
import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { montserrat } from "./font";
import "./globals.css";
-const geistSans = localFont({
- src: "./fonts/GeistVF.woff",
- variable: "--font-geist-sans",
- weight: "100 900",
-});
-const geistMono = localFont({
- src: "./fonts/GeistMonoVF.woff",
- variable: "--font-geist-mono",
- weight: "100 900",
-});
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "404 Devinci",
+ description: "Website of the 404 Devinci association.",
};
export default function RootLayout({
@@ -26,7 +16,7 @@ export default function RootLayout({
return (
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fe62d1..d8ce8ee 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,101 +1,19 @@
-import Image from "next/image";
+import AboutSection from "@/components/sections/about";
+import FaqSection from "@/components/sections/faq";
+import Footer from "@/components/sections/footer";
+import Header from "@/components/sections/header";
+import ProjectsSection from "@/components/sections/projects";
+import TeamSection from "@/components/sections/team";
export default function Home() {
return (
-
-
-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx
-
- .
-
- Save and see your changes instantly.
-
-
-
-
-
+
);
}
diff --git a/src/components/arrow.tsx b/src/components/arrow.tsx
new file mode 100644
index 0000000..43a4e81
--- /dev/null
+++ b/src/components/arrow.tsx
@@ -0,0 +1,37 @@
+import cn from "@/utils/function";
+
+interface ArrowProps {
+ color?: 50 | 900;
+ rotate?: boolean;
+}
+
+
+
+const Arrow = ({ color, rotate }: ArrowProps) => {
+
+ const hexaColor = color === 50
+ ? '#f9fafb'
+ : '#111827';
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Arrow;
\ No newline at end of file
diff --git a/src/components/content.tsx b/src/components/content.tsx
new file mode 100644
index 0000000..c9a5dd8
--- /dev/null
+++ b/src/components/content.tsx
@@ -0,0 +1,79 @@
+import { gasoekOne } from "@/app/font"
+import cn from "@/utils/function"
+import Arrow from "./arrow"
+
+export default function Content() {
+ return (
+
+
+
+
+ )
+}
+
+
+const BottomFooter = () => {
+ return (
+
+
+ 404 Devinci
+
+
+
+
2024 © All Rights Reserved
+
Legal notices
+
+
+ )
+}
+
+const Nav = () => {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/sections/about.tsx b/src/components/sections/about.tsx
new file mode 100644
index 0000000..05924ed
--- /dev/null
+++ b/src/components/sections/about.tsx
@@ -0,0 +1,35 @@
+import { gasoekOne } from "@/app/font";
+import cn from "@/utils/function";
+
+const AboutSection = () => {
+ return (
+
+
+
+ Who we are
+
+
+
+ 404 Devinci is an association focused on web development and UI/UX
+ design. We're also interested in emerging technologies such as AI
+ and IoT. Our aim is to bring together students who are passionate
+ about the digital world and create innovative projects together.
+
+
+ We work on the creation of web sites and applications, both in-house
+ and in collaboration with our partners. We are also involved in
+ communication activities and organize various events related to our
+ field.
+
+
+
+
+
+ );
+};
+
+export default AboutSection;
diff --git a/src/components/sections/faq.tsx b/src/components/sections/faq.tsx
new file mode 100644
index 0000000..8754b21
--- /dev/null
+++ b/src/components/sections/faq.tsx
@@ -0,0 +1,79 @@
+import { gasoekOne } from "@/app/font";
+import cn from "@/utils/function";
+
+const faqData = {
+ "fr": [
+ {
+ question: "Qui peut rejoindre l'association 404 Devinci ?",
+ answer:
+ "Que tu sois débutant ou expert, si tu es étudiant au pôle universitaire Léonard de Vinci, tu peux nous rejoindre !",
+ },
+ {
+ question:
+ "Dois-je avoir des compétences en coding pour rejoindre l'association ?",
+ answer:
+ "Non ! Nous recrutons des designers UX/UI, des chargés de communication, et bien sûr des développeurs. Si tu es passionné par le web, tu es le bienvenu !",
+ },
+ {
+ question: "Y a-t-il des frais pour devenir membre de la 404 Devinci ?",
+ answer:
+ "Non, l'adhésion à l'association est gratuite. Notre objectif est de créer un groupe accessible à tous pour travailler sur des projets concrets et améliorer nos skills.",
+ },
+ {
+ question: "Quels sont les avantages à rejoindre la 404 Devinci ?",
+ answer:
+ "En nous rejoingnant, tu auras l'opportunité de travailler sur des projets concrets, d'améliorer tes compétences techniques, et de rencontrer d'autres passionnés du développement web. Tu pourras également enrichir ton CV avec des expériences pratiques.",
+ },
+ ],
+ "en": [
+ {
+ question: "Who can join the 404 Devinci association?",
+ answer:
+ "Whether you're a beginner or an expert, if you're a student at the Léonard de Vinci university campus, you can join us!",
+ },
+ {
+ question:
+ "Do I need coding skills to join the association?",
+ answer:
+ "No! We recruit UX/UI designers, communication officers, and of course, developers. If you're passionate about the web, you're welcome!",
+ },
+ {
+ question: "Are there any fees to become a member of 404 Devinci?",
+ answer:
+ "No, membership is free. Our goal is to create an accessible group for everyone to work on real projects and improve our skills.",
+ },
+ {
+ question: "What are the benefits of joining 404 Devinci?",
+ answer:
+ "By joining us, you'll have the opportunity to work on real projects, improve your technical skills, and meet other web development enthusiasts. You can also enhance your CV with practical experience.",
+ },
+ ]
+};
+
+
+const FaqSection = () => {
+ return (
+
+
+ questions &
+ answers
+
+
+ {faqData.en.map(({ question, answer }, index) => (
+
+
{question}
+
{answer}
+
+ ))}
+
+
+ );
+};
+
+export default FaqSection;
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
new file mode 100644
index 0000000..5317fa8
--- /dev/null
+++ b/src/components/sections/footer.tsx
@@ -0,0 +1,16 @@
+import Content from "../content";
+
+const Footer = () => {
+ return (
+
+ );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
new file mode 100644
index 0000000..f3cbff4
--- /dev/null
+++ b/src/components/sections/header.tsx
@@ -0,0 +1,46 @@
+import { gasoekOne } from "@/app/font";
+import Image from "next/image";
+import Timer from "../timer";
+
+const Header = () => {
+ return (
+
+ {/* HEADING */}
+
+
+
+
+ Devinci
+
+
+
+
+ Paris
+
+
+
+ {/* BANNER */}
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx
new file mode 100644
index 0000000..a2c0ee2
--- /dev/null
+++ b/src/components/sections/projects.tsx
@@ -0,0 +1,41 @@
+import { gasoekOne } from "@/app/font";
+import cn from "@/utils/function";
+
+const projects = [
+ {
+ "name": "Pixel War",
+ "date": "2023-2024",
+ },
+ {
+ "name": "Hacker's Journey",
+ "date": "2023-2024",
+ },
+]
+
+const ProjectsSection = () => {
+ return (
+
+
+ What we made
+
+
+ {projects.map((project, index) => (
+
+
{project.name}
+
{project.date}
+
+ ))}
+
+
+ );
+}
+
+export default ProjectsSection;
\ No newline at end of file
diff --git a/src/components/sections/team.tsx b/src/components/sections/team.tsx
new file mode 100644
index 0000000..086209e
--- /dev/null
+++ b/src/components/sections/team.tsx
@@ -0,0 +1,78 @@
+import { gasoekOne } from "@/app/font";
+import cn from "@/utils/function";
+import Image from "next/image";
+import Arrow from "../arrow";
+
+const members = [
+ {
+ "name": "Nicolas",
+ "position": "President・Fullstack Developer",
+ "image": "nicolas.jpg",
+ },
+ {
+ "name": "Mattéo",
+ "position": "Secretary・Fullstack Developer",
+ "image": "matteo.jpg",
+ },
+ {
+ "name": "Michel",
+ "position": "Treasurer・Fullstack Developer",
+ "image": "michel.png",
+ },
+]
+
+const TeamSection = () => {
+ return (
+
+
+
+ {members.map((member, index) => (
+
+
+ {member.image ? (
+
+ ) : (
+
+ )}
+
+
+ {member.name}
+ {member.position}
+
+
+ ))}
+
+
+ );
+}
+
+export default TeamSection;
\ No newline at end of file
diff --git a/src/components/timer.tsx b/src/components/timer.tsx
new file mode 100644
index 0000000..7a41b99
--- /dev/null
+++ b/src/components/timer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { getDate } from "@/utils/function";
+import { useEffect, useState } from "react";
+
+const Timer = () => {
+
+ const [time, setTime] = useState(getDate());
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ const interval = setInterval(() => {
+ setTime(getDate());
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ if (!mounted) return;
+
+ return (
+
{time}
+ );
+}
+
+export default Timer;
\ No newline at end of file
diff --git a/src/utils/function.ts b/src/utils/function.ts
new file mode 100644
index 0000000..6376233
--- /dev/null
+++ b/src/utils/function.ts
@@ -0,0 +1,14 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+const cn = (...inputs: ClassValue[]) => {
+ return twMerge(clsx(inputs));
+};
+
+export default cn;
+
+
+export function getDate() {
+ const date = new Date()
+ return `${date.getHours()}:${date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()}:${date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()}`
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..7124b3a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,9 @@ const config: Config = {
background: "var(--background)",
foreground: "var(--foreground)",
},
+ transitionTimingFunction: {
+ "custom-ease": "cubic-bezier(.58,.01,.95,.35)",
+ }
},
},
plugins: [],