Skip to content

Commit

Permalink
Merge pull request #35 from razafindratsiza/hero-section-cover
Browse files Browse the repository at this point in the history 
Hero section cover
  • Loading branch information
@Ntsoa2112
Ntsoa2112 authored May 30, 2024
2 parents 85e1156 + 2fc88db commit 21ce8de
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 52 deletions.
13 changes: 8 additions & 5 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,20 @@ import Comptetion from './page/Comptetion'
import Conferences from './page/Conferences'
import Stande from './page/Stande'
import Statistiques from './page/Statistiques'
import About from './scenes/About'
import Home from './scenes/Home'
import './styles/App.css'

import CountDownDay from './scenes/CountDownDay'
import OrganizersPartners from './scenes/OrganizersPartners'
import Stat from './scenes/Stat'

import Challenges from './scenes/Challenges'
import CountDownDay from './scenes/CountDownDay'
import Footer from './scenes/Footer'
import GetTicket from './scenes/GetTicket'
import Home from './scenes/Home'
import OrganizersPartners from './scenes/OrganizersPartners'
import Photos from './scenes/Photos'
import Questions from './scenes/Questions'
import Stat from './scenes/Stat'
import './styles/App.css'
import About from './scenes/About'

const App = () => {
const WNL = new Date("June 22, 2024").getTime();
Expand Down
Binary file added src/assets/images/qr_code.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Drop.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Drop() {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center gap-x-1.5 font-DMMono text-white ">
<Menu.Button className="inline-flex w-full justify-center gap-x-1.5 font-DMMono text-white hidden sm:flex">
Activités
<ChevronDownIcon className="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
</Menu.Button>
Expand Down
65 changes: 38 additions & 27 deletions src/components/nav.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { useEffect, useState } from "react";
import Logo from '../ressources/logos_linux-tux.svg';
import Drop from './Drop';
import NavItem from './NavItem';

import Logo from '../ressources/logos_linux-tux.svg'
import Drop from './Drop'
import NavItem from './NavItem'
import React, { useState, useEffect } from "react";

const Nav = () => {
const [navSize, setnavSize] = useState("10rem");
const [navColor, setnavColor] = useState("transparent");
Expand All @@ -10,34 +12,43 @@ const Nav = () => {
window.scrollY > 10 ? setnavSize("5rem") : setnavSize("10rem");
};
useEffect(() => {
window.addEventListener("scroll", listenScrollEvent);
return () => {
window.removeEventListener("scroll", listenScrollEvent);
};
window.addEventListener("scroll", listenScrollEvent);
return () => {
window.removeEventListener("scroll", listenScrollEvent);
};
}, []);
return (
<header className="flex fixed w-full top-0 left-0 z-50 px-5 items-center justify-between py-5" style={{
backgroundColor: navColor,
height: navSize,
transition: "all 1s"
}}>
return <header className="flex fixed w-full top-0 left-0 z-50 px-5 items-center justify-between py-5" style={{
backgroundColor: navColor,
height: navSize,
transition: "all 1s"
}}>
<div>
<div className="flex items-center justify-between">
<div className="mr-3">
<img src={Logo} />
<div className="flex items-center justify-between">
<div className="mr-3">
<img src={Logo} />

</div>
<div className="hidden h-6 text-3xl text-white text-center Kontes-Compressed sm:block">Why not <span className='color-yellow-sea'>Linux</span></div>
</div>
<div className="hidden h-6 text-3xl text-white text-center Kontes-Compressed sm:block">Why not <span className='color-yellow-sea'>Linux</span></div>
</div>
{/* <div className="hidden h-6 text-3xl text-white text-center Kontes-Compressed sm:block">Why not <span className='color-yellow-sea'>Linux</span></div> */}
</div>

<div className='flex items-center space-x-6 leading-5 sm:space-x-10'>
<NavItem>À propos</NavItem>
<Drop/>
<NavItem>Archive</NavItem>
<NavItem>FaQ</NavItem>
<button type="button" className="text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 me-2 mb-2">inscription</button>
<NavItem>À propos</NavItem>
<Drop />
<NavItem>Archive</NavItem>
<NavItem>FaQ</NavItem>
<button className="lg:hidden flex flex-col ml-4">
<span className="w-6 h-1 bg-white mb-1">
</span>
<span className="w-6 h-1 bg-white mb-1">
</span>
<span className="w-6 h-1 bg-white mb-1">
</span>
</button>
<button type="button" className="text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 me-2 mb-2">inscription</button>
</div>
</header>
);

</header>

}
export default Nav
36 changes: 36 additions & 0 deletions src/page/Hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@

import ButtonFill from "../components/ButtonFill";
import Vector from '../assets/images/Vector.png'
import QR from '../assets/images/qr_code.png'
const Hero = () => {
return (
<div className="grid mt-4 max-w-[1600px] mx-auto px-4 py-8 mx-auto items-center lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 h-full">
<div className="contents">
<div className='mr-auto place-self-center lg:col-span-7 '>
<ButtonFill content="22 Juin 2024" />
<div className="backtitle">
<h1 class="max-w-2xl mb-4 text-[38px] md:text-[78px] Kontes-Compressed-Bold font-extrabold tracking-tight leading-none xl:text-7xl text-white">Empowering Communities</h1>
<h1 className='Kontes-Compressed-Bold text-[38px] md:text-[78px] text-white pl-3 md:pl-0'>Through <span className="color-raven">Open Source</span></h1>
</div>
<p className="max-w-2xl mb-6 font-light text-white lg:mb-8 md:text-lg lg:text-xl ">Explorez le pouvoir transformateur de Linux. Rejoignez-nous pour découvrir son potentiel illimité lors de cet événement incontournable..</p>
<div className=' bg-white rounded-md items-center justify-center inline-flex items-center justify-center px-5 py-3 mr-3'>
<button className='text-dark capitalize mr-6 font-DMMono'>Obtenir un billet</button>
<img className='object-contain' src={Vector} alt="" />
</div>

<div className=' border border-raven rounded-md items-center justify-center inline-flex items-end justify-center px-5 py-3 '>
<button className='text-white capitalize mr-6 font-DMMono'>devenir sponsor</button>
<img className='object-contain' src={Vector} alt="" />
</div>
</div>

<div class="hidden lg:mt-0 lg:col-span-5 lg:inline-flex items-end justify-end ">
<img src={QR} alt="qr" width={200} />
</div>
</div>

</div>
);
}

export default Hero;
24 changes: 5 additions & 19 deletions src/scenes/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,12 @@
import Nav from "../components/nav";
import ButtonFill from "../components/ButtonFill";
import Hero from "../page/Hero";
const Home = () => {
return (
<div className="top-section">
<div className="mx-6">
<div className='max-w-[1700px] mx-auto '>
<div className="flex flex-col justify-between">
<Nav />
<div className="mx-auto max-w-7xl ">
<div className='pt-6 mt-6 '>
<ButtonFill content="22 Juin 2024" />
<div className="backtitle">
<h2 className='Kontes-Compressed-Bold text-[38px] md:text-[78px] text-white pl-3 md:pl-0'>Empowering Communities</h2>
<h2 className='Kontes-Compressed-Bold text-[38px] md:text-[78px] text-white pl-3 md:pl-0'>Through <span className="color-raven">Open Source</span></h2>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
<main className="top-section dark:bg-gray-800 bg-white relative overflow-hidden h-screen">
<Nav />
<Hero />
</main>
);
}

Expand Down

0 comments on commit 21ce8de

Please sign in to comment.