Skip to content

Commit 13f0b31

Browse files
dtsivkovskidtsivkovski
authored
Merge pull request #33 from PantherHacks/orange-details
[added + fixed] More website details and fixes to accessibility
2 parents ab4de42 + 157b2c1 commit 13f0b31

22 files changed

+404
-25
lines changed

‎app/(main)/_components/faqs-section.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const FaqsSection = () => {
44
return (
55
<div id="faqs" className="flex flex-col items-center justify-center w-full py-40">
66
<h2 className="font-TangoSansBold text-6xl text-primary pb-10">FAQs</h2>
7-
<p className="m-4">Got questions? We got answers.</p>
8-
<div className="w-1/2">
7+
<p className="">Got questions? We got answers.</p>
8+
<div className="px-10 w-full md:w-1/2">
99
<Accordion type="single" collapsible className="w-full">
1010
<AccordionItem value="item-1">
1111
<AccordionTrigger>What is your name?</AccordionTrigger>

‎app/(main)/_components/heading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const Heading = () => {
5050

5151
<ParallaxBannerLayer speed={20}>
5252
<div className="absolute w-full flex justify-center items-center text-center top-[26rem] z-50">
53-
<h1 className="font-TangoSansBold text-3xl sm:text-6xl lg:text-7xl xl:text-8xl text-[#befcfd] max-w-[calc(100vw-4rem)]">
53+
<h1 className="font-TangoSansBold text-3xl sm:text-6xl lg:text-7xl xl:text-8xl text-[#befcfd] max-w-[calc(100vw-4rem)] drop-shadow-lg">
5454
PANTHERHACKS {hackathonDateInfo.year}
5555
</h1>
5656
</div>

‎app/(main)/_components/main-content.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import Image from "next/image";
34
import { ParallaxProvider } from "react-scroll-parallax";
45

56
import Heading from "@/app/(main)/_components/heading";
@@ -17,6 +18,14 @@ const MainContent = () => {
1718
</ParallaxProvider>
1819
</div>
1920
<MobileHeading />
21+
<Image
22+
src="/images/main-background/main-header-transition.svg"
23+
width={100}
24+
height={100}
25+
alt=""
26+
aria-hidden
27+
className="w-[100%] -translate-y-1"
28+
/>
2029
<AboutSection />
2130
<TracksSection />
2231
<FaqsSection />

‎app/(main)/_components/mobileheading.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const MobileHeading = () => {
1111
className="flex flex-col flex-1 items-center justify-center w-full pt-44"
1212
style={{ background: "linear-gradient(#195B7B 0%, #4DC9CC 50%, #BEFCFD 100%)" }}
1313
>
14-
<h1 className="flex flex-wrap font-TangoSansBold pantherhacks-title text-5xl sm:text-6xl text-[#befcfd] w-full px-4 sm:px-16">
14+
<h1 className="flex flex-wrap font-TangoSansBold pantherhacks-title text-5xl sm:text-6xl text-[#befcfd] w-full px-4 sm:px-16 drop-shadow-lg">
1515
PANTHERHACKS {hackathonDateInfo.year}
1616
</h1>
1717
<Image
@@ -20,6 +20,7 @@ const MobileHeading = () => {
2020
alt="Keck Center"
2121
width={0}
2222
height={0}
23+
draggable={false}
2324
unoptimized
2425
/>
2526
</div>

‎app/(main)/_components/track.tsx

+18-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@ import "./track.css";
44

55
interface ITrackProps {
66
name: string;
7-
imageSrc: string;
87
}
98

10-
const Track: React.FC<ITrackProps> = ({ name, imageSrc }) => {
9+
const Track: React.FC<ITrackProps> = ({ name }) => {
1110
return (
12-
<div className="flex flex-col items-center space-y-4 md:hover:scale-105 transition-transform duration-300 md:cursor-pointer">
13-
<Image src={imageSrc} width={300} height={300} alt={`${name} Track`} className="track-image" />
11+
<div className="flex flex-col items-center space-y-4 md:hover:scale-105 transition-transform duration-300">
12+
<Image
13+
src={`/images/tracks/${name.toLowerCase()}.svg`}
14+
width={300}
15+
height={300}
16+
alt={`${name} Track`}
17+
className="track-image select-none hidden md:block"
18+
draggable={false}
19+
/>
20+
<Image
21+
src={`/images/tracks/${name.toLowerCase()}-mobile.svg`}
22+
width={300}
23+
height={300}
24+
alt={`${name} Track`}
25+
className="track-image select-none block md:hidden"
26+
draggable={false}
27+
/>
1428
<p className="font-TangoSansBold text-[#FC8332] text-3xl text-center">{name}</p>
1529
</div>
1630
);

‎app/(main)/_components/tracks-section.tsx

+40-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,49 @@
1+
import Image from "next/image";
2+
13
import Track from "./track";
24

35
const TracksSection = () => {
46
return (
5-
<div id="tracks" className="flex flex-col items-center justify-center w-full py-40">
7+
<div id="tracks" className="flex flex-col items-center justify-center w-full py-40 relative overflow-x-clip">
8+
<Image
9+
src="/images/oranges/orange-branch-1.svg"
10+
alt="An orange branch."
11+
width={100}
12+
height={100}
13+
className="hidden md:block w-96 h-96 absolute -left-2 top-0 -translate-y-1/2 select-none"
14+
draggable={false}
15+
/>
16+
<Image
17+
src="/images/oranges/orange-branch-mobile-divider.svg"
18+
alt="An orange branch divider."
19+
width={100}
20+
height={100}
21+
className="block md:hidden w-80 h-80 sm:w-96 sm:h-96 absolute top-0 -translate-y-1/2 select-none"
22+
draggable={false}
23+
/>
624
<h2 className="font-TangoSansBold text-6xl text-[#EE5000] pb-10">Tracks</h2>
7-
<div className="md:grid md:grid-cols-2 md:gap-16">
8-
<Track name="AI" imageSrc="/tracks/ai.svg" />
9-
<Track name="Cybersecurity" imageSrc="/tracks/cybersecurity.svg" />
10-
<Track name="Healthcare" imageSrc="/tracks/healthcare.svg" />
11-
<Track name="Sustainability" imageSrc="/tracks/sustainability.svg" />
25+
<div className="md:grid md:grid-cols-2 space-y-16 md:space-y-0 md:gap-16">
26+
<Track name="AI" />
27+
<Track name="Cybersecurity" />
28+
<Track name="Healthcare" />
29+
<Track name="Sustainability" />
1230
</div>
31+
<Image
32+
src="/images/oranges/orange-branch-2.svg"
33+
alt="An orange branch."
34+
width={100}
35+
height={100}
36+
className="hidden md:block w-96 h-96 absolute -right-2 bottom-0 translate-y-1/2 select-none"
37+
draggable={false}
38+
/>
39+
<Image
40+
src="/images/oranges/orange-branch-mobile-divider.svg"
41+
alt="An orange branch divider."
42+
width={100}
43+
height={100}
44+
className="block md:hidden w-80 h-80 sm:w-96 sm:h-96 absolute bottom-0 translate-y-1/2 select-none"
45+
draggable={false}
46+
/>
1347
</div>
1448
);
1549
};

‎components/footer/footer.tsx

+24-3
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,34 @@ const Footer = () => {
2020
<p className="text-white text-center pt-2">Made with ❤️ by the PantherHacks Team</p>
2121
<div className="flex flex-row justify-center items-center space-x-1" aria-label="Social Links">
2222
<FooterSocialLink href={gitHubLink} aria-label="PantherHacks GitHub">
23-
<Image src="/icons/github.svg" alt="GitHub Icon" width={24} height={24} className="filter invert" />
23+
<Image
24+
src="/icons/github.svg"
25+
alt="GitHub Icon"
26+
width={24}
27+
height={24}
28+
className="filter invert select-none"
29+
draggable={false}
30+
/>
2431
</FooterSocialLink>
2532
<FooterSocialLink href={discordLink} aria-label="PantherHacks Discord">
26-
<Image src="/icons/discord.svg" alt="Discord Icon" width={24} height={24} className="filter invert" />
33+
<Image
34+
src="/icons/discord.svg"
35+
alt="Discord Icon"
36+
width={24}
37+
height={24}
38+
className="filter invert select-none"
39+
draggable={false}
40+
/>
2741
</FooterSocialLink>
2842
<FooterSocialLink href={instagramLink} aria-label="PantherHacks Instagram">
29-
<Image src="/icons/instagram.svg" alt="Instagram Icon" width={24} height={24} className="filter invert" />
43+
<Image
44+
src="/icons/instagram.svg"
45+
alt="Instagram Icon"
46+
width={24}
47+
height={24}
48+
className="filter invert select-none"
49+
draggable={false}
50+
/>
3051
</FooterSocialLink>
3152
<FooterSocialLink href={contactEmail} aria-label="Chapman Computer Science Club Email">
3253
<Mail className="w-[24px] h-[24px] filter invert" />

‎components/navbar.tsx

+16-7
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ const Navbar = () => {
4646
alt="Panther Hacks Logo"
4747
width={50}
4848
height={50}
49-
className="transition-transform duration-300 ease-in-out transform group-hover:scale-105"
49+
className="transition-transform duration-300 ease-in-out transform group-hover:scale-105 select-none"
50+
draggable={false}
5051
/>
5152
</NavLink>
5253
</div>
@@ -73,7 +74,8 @@ const Navbar = () => {
7374
alt="GitHub Icon"
7475
width={24}
7576
height={24}
76-
className="filter invert h-[70px]"
77+
className="filter invert h-[70px] select-none"
78+
draggable={false}
7779
/>
7880
</NavLink>
7981
<NavLink
@@ -88,7 +90,8 @@ const Navbar = () => {
8890
alt="Discord Icon"
8991
width={24}
9092
height={24}
91-
className="filter invert h-[70px]"
93+
className="filter invert h-[70px] select-none"
94+
draggable={false}
9295
/>
9396
</NavLink>
9497
<NavLink
@@ -104,7 +107,8 @@ const Navbar = () => {
104107
alt="Discord Icon"
105108
width={24}
106109
height={24}
107-
className="filter invert h-[70px]"
110+
className="filter invert h-[70px] select-none"
111+
draggable={false}
108112
/>
109113
</NavLink>
110114
</div>
@@ -123,6 +127,8 @@ const Navbar = () => {
123127
alt="Panther Hacks Logo"
124128
width={50}
125129
height={50}
130+
className="select-none"
131+
draggable={false}
126132
/>
127133
</NavLink>
128134
<Button
@@ -177,7 +183,8 @@ const Navbar = () => {
177183
alt="GitHub Icon"
178184
width={24}
179185
height={24}
180-
className="filter invert h-[70px]"
186+
className="filter invert h-[70px] select-none"
187+
draggable={false}
181188
/>
182189
</NavLink>
183190
<NavLink
@@ -193,7 +200,8 @@ const Navbar = () => {
193200
alt="Discord Icon"
194201
width={24}
195202
height={24}
196-
className="filter invert h-[70px]"
203+
className="filter invert h-[70px] select-none"
204+
draggable={false}
197205
/>
198206
</NavLink>
199207
<NavLink
@@ -209,7 +217,8 @@ const Navbar = () => {
209217
alt="Instagram Icon"
210218
width={24}
211219
height={24}
212-
className="filter invert h-[70px]"
220+
className="filter invert h-[70px] select-none"
221+
draggable={false}
213222
/>
214223
</NavLink>
215224
</div>

‎components/ui/NavLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export interface NavLinkProps
3333

3434
export function NavLink({ href, children, variant, className, ...props }: NavLinkProps) {
3535
return (
36-
<Link href={href} className={cn(navLinkVariants({ variant }), className)} {...props}>
36+
<Link href={href} className={cn("select-none", navLinkVariants({ variant }), className)} {...props}>
3737
{children}
3838
</Link>
3939
);

‎public/images/main-background/main-header-transition-test.svg

+3
Loading

‎public/images/main-background/main-header-transition.svg

+8
Loading

0 commit comments

Comments
 (0)