mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add HeroSection component

Browse Source
This commit is contained in:
Mathéo GUILBERT
2026-04-15 10:59:05 +02:00
parent 59973de815
commit e77fb4a1f2
7 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/layout.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-[11px] antialiased`}> <html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-2.75 overflow-auto antialiased`}>
<body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown"> <body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown">
<Header /> <Header />
{children} {children}
app/[locale]/page.tsx
+7 -5
View File
@@ -1,7 +1,9 @@
import HeroSection from "@/components/sections/HeroSection";
export default function Home() { export default function Home() {
return ( return (
<main className="min-h-screen bg-brand-beige text-brand-black flex items-center justify-center"> <main className=" bg-brand-beige text-brand-black flex items-center justify-center">
<h1 className="font-serif text-6xl">Hello World</h1> <HeroSection />
</main> </main>
); );
} }
components/layout/Header.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export default function Header() { export default function Header() {
return ( return (
<header className="bg-brand-brown text-brand-beige w-full py-6 px-10 flex justify-between items-center rounded-[10px]"> <header className="bg-brand-brown text-brand-beige py-6 px-10 flex justify-between items-center rounded-[10px] fixed left-2.75 right-2.75 z-50">
<div className="font-serif text-2xl font-light">M. Guilbert</div> <div className="font-serif text-2xl font-light">M. Guilbert</div>
<nav> <nav>
<ul className="flex gap-8 font-sans text-base font-light"> <ul className="flex gap-8 font-sans text-base font-light">
components/sections/HeroSection.tsx
+26
View File
@@ -0,0 +1,26 @@
import { FiChevronsDown } from "react-icons/fi";
export default function HeroSection() {
return (
<section className="w-full h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col items-center justify-center relative">
{/* Title + image container */}
<div className="flex flex-row justify-between items-center w-2/3 gap-2.5">
{/* Rotating texts */}
<div className="flex flex-col">
<p className="text-2xl font-sans">Ensemble nous allons...</p>
<h1 className="text-[64px] font-serif">Construire une solution qui répond à votre problème.</h1>
</div>
{/* Image */}
<img className="rounded-[10px]" src="/images/pofile.png" alt="Image of me" />
</div>
{/* Call to scroll */}
<div className="flex flex-row justify-center items-center gap-2.5 absolute bottom-6">
<FiChevronsDown />
<p className="text-base font-sans">Voir mes travaux</p>
<FiChevronsDown />
</div>
</section>
);
}
package-lock.json
Generated
+11 -1
View File
@@ -10,7 +10,8 @@
"dependencies": { "dependencies": {
"next": "16.2.3", "next": "16.2.3",
"react": "19.2.4", "react": "19.2.4",
"react-dom": "19.2.4" "react-dom": "19.2.4",
"react-icons": "^5.6.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
@@ -5429,6 +5430,15 @@
"react": "^19.2.4" "react": "^19.2.4"
} }
}, },
"node_modules/react-icons": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
"integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
package.json
+2 -1
View File
@@ -11,7 +11,8 @@
"dependencies": { "dependencies": {
"next": "16.2.3", "next": "16.2.3",
"react": "19.2.4", "react": "19.2.4",
"react-dom": "19.2.4" "react-dom": "19.2.4",
"react-icons": "^5.6.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
public/images/pofile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB