Skip to content

Commit 6a726b2

Browse files
Bubomirageorginikolov7
Bubomira
and
georginikolov7
authored
1154 Navigation and Landing sections (#1218)
* init * created navigation and landing section * fixed colors * added elements to mobile nav and rigth flame to mobile landing * mobile landing fixed * Fix visual glitch --------- Co-authored-by: Georgi Nikolov <gnnikoll@gmail.com>
1 parent 3493881 commit 6a726b2

File tree

8 files changed

+213
-7
lines changed

8 files changed

+213
-7
lines changed

‎services/web/package-lock.json‎

Lines changed: 20 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎services/web/public/hackLanding8.0/leftFlame.webp‎

38.3 KB
Loading

‎services/web/public/hackLanding8.0/rightFlame.webp‎

29.6 KB
Loading

‎services/web/src/website/HackathonPage8.0/HackathonPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FAQSection } from './FAQSection/FAQSection';
44
import { FooterSection } from './FooterSection/FooterSection';
55
import { GradingSection } from './GradingSection/GradingSection';
66
import { JourneySection } from './JourneySection/JourneySection';
7-
import { LandingSection } from './LandingSection/LandingSection';
7+
import LandingSection from './LandingSection/LandingSection';
88
import { MentorsAndJudgesSection } from './MentorsAndJudgesSection/MentorsAndJudgesSection';
99
import { MissionSection } from './MissionSection/MissionSection';
1010
import { NavigationSection } from './NavigationSection/NavigationSection';
@@ -14,7 +14,7 @@ import { SponsorsSection } from './SponsorsSection/SponsorsSection';
1414

1515
export const HackathonPage = () => {
1616
return (
17-
<div className="bg-[#000a12]">
17+
<div className="bg-[rgba(255,253,245,1)]">
1818
<Helmet>
1919
<title>Hackathon 8.0</title>
2020
<link rel="icon" href="/faviconHack.ico" />

‎services/web/src/website/HackathonPage8.0/LandingSection/LandingSection.tsx‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1-
export const LandingSection = () => {
2-
return <></>;
3-
};
1+
import { useEffect, useState } from 'react';
2+
3+
export default function LandingSection() {
4+
const [fadeIn, setFadeIn] = useState(false);
5+
useEffect(() => {
6+
const timer = setTimeout(() => {
7+
setFadeIn(true);
8+
}, 400);
9+
10+
return () => clearTimeout(timer);
11+
}, []);
12+
13+
return (
14+
<div
15+
className={`bg-[rgba(255,253,245,1)] h-[90vh] transform transition-all duration-1000 ease-in-out ${fadeIn ? 'opacity-100' : 'opacity-0'}`}
16+
>
17+
<img
18+
src="/hackLanding8.0/leftFlame.webp"
19+
alt=""
20+
className="absolute pointer-events-none block bottom-[0] h-[55rem] top-[-7rem] z-0"
21+
/>
22+
<img
23+
src="/hackLanding8.0/rightFlame.webp"
24+
alt=""
25+
className="absolute pointer-events-none top-[10rem] xs:top-[0] block h-[45rem] right-[0] z-0"
26+
/>
27+
28+
<div className="h-full flex justify-center items-center">
29+
<div className="font-orbitron z-10">
30+
<div className="flex flex-col items-center justify-center text-center gap-1">
31+
<p className="text-sm xs:text-lg md:text-3xl tracking-[0.3em] font-semibold text-[rgb(49,46,46)] transform-gpu">
32+
THE HUB&apos;S
33+
</p>
34+
<h1 className="text-6xl bg-clip-text text-transparent bg-[radial-gradient(circle_at_50%_0%,_#FBC42C_0.1%,_#F6741C_50%,_#D91313_100%)] font-extrabold drop-shadow-md md:text-8xl transform-gpu">
35+
HACK
36+
</h1>
37+
<div className="flex flex-col sm:flex-row sm:gap-5 ">
38+
<h2 className="text-6xl bg-clip-text text-transparent bg-[radial-gradient(circle_at_70%_0%,_#F6741C_0.1%,_#D91313_60%,_#AA1616_100%)] font-extrabold drop-shadow-md md:text-8xl transform-gpu">
39+
AUBG
40+
</h2>
41+
<h2 className="text-6xl bg-clip-text text-transparent bg-[radial-gradient(circle_at_0%_0%,_#D91313_60%,_#AA1616_70%)] font-extrabold drop-shadow-md md:text-8xl transform-gpu">
42+
8.0
43+
</h2>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
);
50+
}

‎services/web/src/website/HackathonPage8.0/NavigationSection/DesktopNavigation.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useEffect, useState } from 'react';
2+
3+
export const DesktopNavigationComponent = () => {
4+
const NAV_ITEM_A = 'text-[rgba(255,253,245,1)] text-xs font-thin font-orbitron';
5+
const NAV_ITEM_A_EFFECT =
6+
'hover:text-[rgba(255,253,245,1)] relative after:content-[""] after:absolute after:w-full after:scale-x-0 after:h-[2px] after:bottom-[-4px] after:left-0 after:bg-[rgba(255,253,245,1)] after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left';
7+
const [fadeIn, setFadeIn] = useState(false);
8+
useEffect(() => {
9+
const timer = setTimeout(() => {
10+
setFadeIn(true);
11+
}, 400);
12+
13+
return () => clearTimeout(timer);
14+
}, []);
15+
16+
return (
17+
<div className="p-4">
18+
<div
19+
className={`rounded-2xl px-6 bg-[rgba(28,26,25,0.9)] border-gray-600 py-2 sticky top-0 z-[100] transform transition-all duration-1000 ease-in-out ${fadeIn ? 'opacity-100' : 'opacity-0'}`}
20+
>
21+
<div className="w-full flex flex-row justify-center items-center py-3">
22+
<div className="flex flex-row w-[85%] gap-8">
23+
<a href="#about" className={`${NAV_ITEM_A} ${NAV_ITEM_A_EFFECT}`}>
24+
ABOUT
25+
</a>
26+
<a href="#schedule" className={`${NAV_ITEM_A} ${NAV_ITEM_A_EFFECT}`}>
27+
SCHEDULE
28+
</a>
29+
<a href="#journey" className={`${NAV_ITEM_A} ${NAV_ITEM_A_EFFECT}`}>
30+
JOURNEY
31+
</a>
32+
<a href="#grading-criteria" className={`${NAV_ITEM_A} ${NAV_ITEM_A_EFFECT}`}>
33+
GRADING CRITERIA
34+
</a>
35+
<a href="#faq" className={`${NAV_ITEM_A} ${NAV_ITEM_A_EFFECT}`}>
36+
FAQ
37+
</a>
38+
</div>
39+
<div>
40+
<a href="/hackathon/registration" className={`${NAV_ITEM_A} text-center hover:text-white`}>
41+
PARTICIPATE NOW
42+
</a>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
);
48+
};

‎services/web/src/website/HackathonPage8.0/NavigationSection/MobileNavigation.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import hamburgerMenuIcon from '../../MainPage/Navigation/images/hamburger_menu.svg';
2+
import logo from '../../MainPage/Navigation/images/hublogo.webp';
3+
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
4+
import { useEffect, useState } from 'react';
5+
6+
export const MobileNavigationComponent = () => {
7+
const NAV_ITEM_A = 'text-black hover:text-black font-orbitron';
8+
const NAV_ITEM = 'text-[18pt] text-left leading-[1.5em] my-4';
9+
const [isOpen, setIsOpen] = useState(false);
10+
const [fadeIn, setFadeIn] = useState(false);
11+
useEffect(() => {
12+
const timer = setTimeout(() => {
13+
setFadeIn(true);
14+
}, 400);
15+
16+
return () => clearTimeout(timer);
17+
}, []);
18+
19+
return (
20+
<nav
21+
className={`sticky h-[10vh] top-0 z-[50] bg-[rgba(28,26,25,0.9)] transform transition-all duration-1000 ease-in-out ${fadeIn ? 'opacity-100' : 'opacity-0'}`}
22+
aria-label="Mobile Navigation"
23+
>
24+
<div className="flex px-2 justify-around items-center h-full">
25+
<a href="/">
26+
<img src={logo} className="h-[50px]" />
27+
</a>
28+
<h2 className="text-[rgba(255,253,245,1)] font-medium text-2xl mr-[10px]">The Hub</h2>
29+
<div className="h-[50px]">
30+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
31+
<SheetTitle />
32+
<SheetDescription />
33+
<SheetTrigger className="h-[50px]">
34+
<img src={hamburgerMenuIcon} onClick={() => setIsOpen(true)} />
35+
</SheetTrigger>
36+
<SheetContent
37+
className="bg-[rgba(255,253,245,1)]"
38+
onCloseAutoFocus={(event) => event.preventDefault()}
39+
>
40+
<div className={NAV_ITEM}>
41+
<a href="#about" className={NAV_ITEM_A} onClick={() => setIsOpen(false)}>
42+
ABOUT
43+
</a>
44+
</div>
45+
<div className={NAV_ITEM}>
46+
<a href="#schedule" className={NAV_ITEM_A} onClick={() => setIsOpen(false)}>
47+
SCHEDULE
48+
</a>
49+
</div>
50+
<div className={NAV_ITEM}>
51+
<a href="#grading-criteria" className={NAV_ITEM_A} onClick={() => setIsOpen(false)}>
52+
GRADING CRITERIA
53+
</a>
54+
</div>
55+
<div className={NAV_ITEM}>
56+
<a href="#faq" className={NAV_ITEM_A} onClick={() => setIsOpen(false)}>
57+
FAQ
58+
</a>
59+
</div>
60+
<div className={`${NAV_ITEM}`}>
61+
<a
62+
className="text-[rgb(170,22,22)] font-orbitron hover:text-[rgb(170,22,22)]"
63+
href="/hackathon/registration"
64+
>
65+
PARTICIPATE NOW
66+
</a>
67+
</div>
68+
</SheetContent>
69+
</Sheet>
70+
</div>
71+
</div>
72+
</nav>
73+
);
74+
};

‎services/web/src/website/HackathonPage8.0/NavigationSection/NavigationSection.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
import { useState, useEffect, Fragment } from 'react';
2+
import { DesktopNavigationComponent } from './DesktopNavigation.tsx';
3+
import { MobileNavigationComponent } from './MobileNavigation.tsx';
4+
15
export const NavigationSection = () => {
2-
return <></>;
6+
const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 768);
7+
8+
useEffect(() => {
9+
const handleResize = () => {
10+
setIsDesktop(window.innerWidth >= 768);
11+
};
12+
13+
window.addEventListener('resize', handleResize);
14+
15+
return () => {
16+
window.removeEventListener('resize', handleResize);
17+
};
18+
}, []);
19+
20+
return <Fragment>{isDesktop ? <DesktopNavigationComponent /> : <MobileNavigationComponent />}</Fragment>;
321
};

0 commit comments

Comments
 (0)