modelec/modelec.club
1
0
Fork 0
mirror of https://github.com/modelec/modelec.club.git synced 2026-01-18 16:37:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated navbar, footer & fonts

Browse Source
This commit is contained in:
TitiLaPierre
2024-10-09 11:25:32 +02:00
parent ddeb13aadb
commit 11c9567aa5
11 changed files with 195 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/App.css
View File

@@ -1,49 +1,3 @@
#root {
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: white;
margin: 0;
}
.navbar {
font-family: 'Arial', sans-serif;
background-color: white;
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
margin: 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em 0;
width: 100%;
}
.navbar-links {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar-logo-img img {
width: 100%;
height: auto;
max-width: 7vw;
}
.navbar-link {
text-decoration: none;
color: black;
font-size: 1.5em;
margin: 0 1em;
}
.logo-container {
display: flex;
justify-content: center; /* Centrer horizontalement */
@@ -318,69 +272,6 @@
margin-left: 20em;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2em 0;
width: 100vw;
}
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
}
.footer-separator {
width: 100vw;
height: 10px;
background-color: black;
}
.footer-content-top {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.footer-content-top img {
width: 100%;
height: auto;
max-width: 20vw;
}
.social-network-small-icon {
fill: black;
color: black;
}
.footer-nav {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 3em;
margin: 2em 0;
}
.footer-nav a {
text-decoration: none;
color: black;
font-size: 1.2em;
}
.footer-credits {
background-color: black;
color: white;
width: 100%;
text-align: center;
}
.partenaires-list-container {
display: flex;
justify-content: center;

35
src/App.tsx
View File

@@ -1,24 +1,31 @@
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import React from 'react';
import './App.css';
import { Navbar } from './layouts/navbar/navbar';
import { Footer } from './layouts/footer/footer';
import Home from './pages/Home';
import NotFound from './pages/404';
import Partenaires from './pages/Partenaires';
import Projets from './pages/Projets';
const App: React.FC = () => {
return (
<Router>
<div className="app">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/partenaires" element={<Partenaires />} />
<Route path="/projets" element={<Projets />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</Router>
);
return (<>
<Navbar activeLink={0} />
<div className="page">
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/partenaires" element={<Partenaires />} />
<Route path="/projets" element={<Projets />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
</div>
<Footer />
</>);
};
export default App;

49
src/components/footer/footer.tsx
View File

@@ -1,49 +0,0 @@
import React from 'react';
import { SocialNetworkSmall } from '../socialnetwork/socialnetwork';
export const Footer: React.FC = () => {
return (
<div className={'footer-container'}>
<footer className={'footer'}>
<div className={'footer-separator'}></div>
<div className={'footer-content'}>
<div className={'footer-content-top'}>
<img src={'/assets/images/logo-full.png'} alt={'Modelec'} />
</div>
<div className={'footer-content-middle'}>
<div className={'social-networks'}>
<SocialNetworkSmall
icon={'https://r2.modelec.club/github-dark.svg'}
link={'https://www.github.com/modelec'}
/>
<SocialNetworkSmall
icon={'https://r2.modelec.club/youtube-dark.svg'}
link={'https://youtube.com/modelec'}
/>
<SocialNetworkSmall
icon={'https://r2.modelec.club/insta-dark.svg'}
link={'https://www.instagram.com/modelec_isen'}
/>
<SocialNetworkSmall
icon={'https://r2.modelec.club/mail.svg'}
link={'mailto:contact@modelec.club'}
/>
</div>
</div>
<div className={'footer-content-bottom'}>
<nav className={'footer-nav'}>
<a href={'/projets'}>Projets</a>
<a href={'/materiels'}>Matériels</a>
<a href={'/photos'}>Photos</a>
<a href={'/partenaires'}>Partenaires</a>
<a href={'/contact'}>Nous contacter</a>
</nav>
</div>
</div>
</footer>
<div className={'footer-credits'}>
<p>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN.</p>
</div>
</div>
);
};

27
src/components/navbar/navbar.tsx
View File

@@ -1,27 +0,0 @@
import { NavbarLink } from '../navbarlink/navbarLink';
export const Navbar = () => {
return (
<>
<nav className={'navbar'}>
<div className={'navbar-container'}>
<div className={'navbar-logo'}>
<a href={'/'} className={'navbar-logo-img'}>
<img
src={'https://r2.modelec.club/logo.png'}
alt={'Modelec Logo'}
/>
</a>
</div>
<div className={'navbar-links'}>
<NavbarLink text={'Projets'} link={'/projets'} />
<NavbarLink text={'Matériels'} link={'/materiels'} />
<NavbarLink text={'Photos'} link={'/photos'} />
<NavbarLink text={'Partenaires'} link={'/partenaires'} />
<NavbarLink text={'Nous contacter'} link={'/contact'} />
</div>
</div>
</nav>
</>
);
};

1
src/fonts.css Normal file
View File

@@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

50
src/layouts/footer/footer.css Normal file
View File

@@ -0,0 +1,50 @@
.footer {
background: var(--black);
display: flex;
flex-direction: column;
padding: 2rem;
gap: 2rem;
}
.footer-logo {
width: 64px;
height: 64px;
border-radius: 15px;
}
.footer-content {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10rem;
}
.footer-part {
display: flex;
flex-direction: column;
gap: 0.5em;
}
.footer-title {
font-size: 1.5em;
color: var(--white);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.5rem 3rem;
max-height: 75px;
flex-wrap: wrap;
}
.footer-link {
color: var(--gray);
text-decoration: none;
}
.footer-credits {
color: var(--white);
font-size: 0.7em;
text-align: center;
}

34
src/layouts/footer/footer.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import './footer.css';
export const Footer: React.FC = () => {
return (
<footer className={'footer'}>
<div className={'footer-content'}>
<img className={'footer-logo'} src={'https://r2.modelec.club/logo.png'} alt={'Modelec'} />
<div className={'footer-part'}>
<h3 className={'footer-title'}>Plan du site</h3>
<div className={'footer-links'}>
<a className={'footer-link'} href={'/'}>Accueil</a>
<a className={'footer-link'} href={'/projets'}>Projets</a>
<a className={'footer-link'} href={'/materiels'}>Matériels</a>
<a className={'footer-link'} href={'/photos'}>Photos</a>
<a className={'footer-link'} href={'/partenaires'}>Partenaires</a>
<a className={'footer-link'} href={'/contact'}>Nous contacter</a>
</div>
</div>
<div className={'footer-part'}>
<h3 className={'footer-title'}>Nos réseaux</h3>
<div className={'footer-links'}>
<a className={'footer-link'} target={'_blank'} href={'https://www.instagram.com/modelec_isen'}>Instagram</a>
<a className={'footer-link'} target={'_blank'} href={'https://youtube.com/modelec'}>Youtube</a>
<a className={'footer-link'} target={'_blank'} href={'https://www.github.com/modelec'}>Github</a>
<a className={'footer-link'} target={'_blank'} href={'mailto:contact@modelec.club'}>Mail</a>
</div>
</div>
</div>
<span className={'footer-credits'}>© 2024 Modelec ISEN Nantes. Site réalisé par AppenISEN.</span>
</footer>
);
};

47
src/layouts/navbar/navbar.css Normal file
View File

@@ -0,0 +1,47 @@
.navbar {
display: flex;
justify-content: space-between;
align-items: stretch;
background-color: white;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 10px 10px rgba(128, 128, 128, 0.1);
padding-inline: 100px;
}
.navbar-logo {
display: flex;
align-items: center;
}
.navbar-logo img {
height: 64px;
}
.navbar-links {
display: flex;
align-items: center;
justify-content: end;
gap: 3em;
}
.navbar-link {
text-decoration: none;
font-size: 1em;
height: 100%;
display: flex;
align-items: center;
font-weight: 400;
position: relative;
&.link_active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--main);
border-radius: 999px;
}
}

33
src/layouts/navbar/navbar.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { NavbarLink } from '../../components/navbarlink/navbarLink';
import './navbar.css';
export const Navbar = ({ activeLink }: { activeLink: number }) => {
const links = [
{ text: 'Projets', link: '/projets' },
{ text: 'Matériels', link: '/materiels' },
{ text: 'Photos', link: '/photos' },
{ text: 'Partenaires', link: '/partenaires' },
{ text: 'Nous contacter', link: '/contact' },
]
return (
<>
<nav className={'navbar'}>
<a href={'/'} className={'navbar-logo'}>
<img
className='navbar-logo-img'
src={'https://r2.modelec.club/logo-full.png'} // TODO: Change to SVG logo / import it from assets
alt={'Modelec Logo'}
/>
</a>
<div className={'navbar-links'}>
{
links.map((link, index) => (
<NavbarLink key={index} text={link.text} link={link.link} isActive={activeLink == index} />
))
}
</div>
</nav>
</>
);
};

4
src/main.tsx
View File

@@ -1,7 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './index.css';
import './fonts.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>

16
src/pages/Home.tsx
View File

@@ -1,18 +1,15 @@
import React from 'react';
import { Navbar } from '../components/navbar/navbar.tsx';
import { MiddleText } from '../components/middletext/middletext.tsx';
import { FromRightCard } from '../components/sidecard/fromrightcard.tsx';
import { SocialNetworks } from '../components/socialnetwork/socialnetwork.tsx';
import { FromLeftCardCarousel } from '../components/sidecard/fromleftcard.tsx';
import { Github, Youtube, Instagram, BookmarkBook } from 'iconoir-react';
import { Box } from '../components/box/box.tsx';
import { SocialNetwork } from '../components/socialnetwork/socialnetwork.tsx';
import { Carousel } from '../components/carousel/carousel.tsx';
import { Team } from '../components/team/team.tsx';
import { Footer } from '../components/footer/footer.tsx';
const Home: React.FC = () => {
return (
<>
<Navbar />
<div className={'logo-container'}>
<div className={'page-banner'}>
<img
src={'https://r2.modelec.club/logo-full.png'}
alt={'Modelec Logo'}
@@ -116,7 +113,6 @@ const Home: React.FC = () => {
]}
/>
</div>
<Footer />
</>
);
};