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 ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
  2. -
  3. Save and see your changes instantly.
  4. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
+ + + + +
); } 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 ( +
+
+

Social media

+
+ + +
+
+ +
+ + 404@devinci.fr + +
+
+ +
+ ) +} \ 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 */} +
+

+
+ 404 +
+
+
+ Devinci +
+

+ +
+ Paris + +
+
+ {/* BANNER */} +
+
+
+ mascotte 404 devinci + +
+
+ ); +} + +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 ( +
+
+

+ Our team +

+
+ + + Meet the team + +
+
+
+ {members.map((member, index) => ( +
+
+ {member.image ? ( + {member.name} + ) : ( + {member.name} + )} +
+
+ {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: [],