-
+
+
{/* banner-holder: banner is out of flow, to prevent banner affect the desired flow, adding a placeholder banner holder when the screen is smaller */}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index f1dae39f..0eadadd1 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -3,15 +3,19 @@
* @component
*
*/
+export { Button } from './Button/Button';
export { NavItems } from './Navbar/NavItems';
export { Navbar } from './Navbar/Navbar';
export { Menu } from './Navbar/Menu';
-
-
/*
*
* @section
*
*/
-export {FAQSection } from './sections/FAQ.section';
-export { FooterSection } from './sections/Footer.section';
\ No newline at end of file
+export { HeroSection } from "./sections/Hero.section"
+export { AboutSection } from './sections/About.section';
+export { TeamSection } from './sections/Team.section';
+export { ContactSection } from './sections/Contact.section';
+export { SponsorSection } from './sections/Sponsor.section';
+export { FooterSection } from './sections/Footer.section';
+export { FAQSection } from './sections/FAQ.section';
\ No newline at end of file
diff --git a/src/components/sections/About.section.tsx b/src/components/sections/About.section.tsx
new file mode 100644
index 00000000..40fd09ed
--- /dev/null
+++ b/src/components/sections/About.section.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import AboutAirBalloon from '../../assets/about/about-air-balloon.svg';
+import AboutSectionDesktop from '../../assets/about/about-section-desktop.svg';
+import AboutSectionMobile from '../../assets/about/about-section-mobile.svg';
+
+const AboutSection: React.FC = () => {
+ const [translateY, setTranslateY] = useState(0);
+
+ const handleScroll = () => {
+ // Control the speed at which the Balloon travels
+ const newTranslateY = window.scrollY * 0.45;
+ setTranslateY(newTranslateY);
+ };
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll);
+
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ return (
+
+ {/* MAIN SVG (Background) */}
+
+
+
+
+ {/* About HawkHacks Content */}
+
+
+ About Hawkhacks
+
+
+
+ HawkHacks came out of a desire to give everyone an equal
+ opportunity to get into tech, whether that be
+ programming, networking, researching, learning, or
+ teaching.
+
+
+ Join hundreds of students across Canada (and across the
+ world) in a 36 hour period of exploration, creativity,
+ and learning!
+
+
+ Remember, you don’t have to be a pro to participate -
+ show up with ten years or ten minutes of experience (oh
+ yeah, and a great attitute too!)
+
+
+
+ {/* Hawk Air Balloon */}
+
+
+ );
+};
+
+export { AboutSection };
diff --git a/src/components/sections/Contact.section.tsx b/src/components/sections/Contact.section.tsx
new file mode 100644
index 00000000..8e6e8656
--- /dev/null
+++ b/src/components/sections/Contact.section.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { GreyBorderTop, GreyBorderBottom, MiddleBody, ArrowRightIcon, HawkSVG, BirdPartsSVG, EmailSVG, LinkedInSVG, InstagramSVG, TwitterSVG, FacebookSVG, DevpostSVG } from '../../assets/contact';
+
+const ContactSection: React.FC = () => {
+ return (
+
+
+ 
+ 
+ 
+
+
+
CONTACT US
+
+ Reach out at hello@hawkhacks.ca for any help or support, and please be sure to join the HawkHacks Discord community!
+
+
+
+
Sign up for our newsletter!
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { ContactSection };
diff --git a/src/components/sections/Hero.section.tsx b/src/components/sections/Hero.section.tsx
new file mode 100644
index 00000000..69d0ac7f
--- /dev/null
+++ b/src/components/sections/Hero.section.tsx
@@ -0,0 +1,40 @@
+import { HeroBackgroundMobile, HeroBackgroundDesktop } from '@assets';
+
+const HeroSection = () => {
+ return (
+
+
+
+
+
+
+
+
+ HawkHacks 2024
+
+
+ Hosted at Wilfrid Laurier University
+
+
+
+
+ April 5th - 7th
+
+
+ In Person
+
+
+
+
+ );
+};
+
+export { HeroSection };
diff --git a/src/components/sections/Sponsor.section.tsx b/src/components/sections/Sponsor.section.tsx
new file mode 100644
index 00000000..20e7f6c6
--- /dev/null
+++ b/src/components/sections/Sponsor.section.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import GreyBorderTop from '../../assets/sponsor/top-border.svg';
+import GreyBorderBottom from '../../assets/sponsor/bottom-border.svg';
+import MiddleBody from '../../assets/sponsor/middle-body.svg';
+import HawkSVG from '../../assets/sponsor/hawk.svg';
+import BirdPartsSVG from '../../assets/sponsor/bird_parts.svg';
+// Sponsor logos
+import VeritasLogo from '../../assets/logos/veritas.png';
+import AssemblyLogo from '../../assets/logos/assembly.png';
+import SocLogo from '../../assets/logos/soc.png';
+import FdmLogo from '../../assets/logos/fdm.png';
+import Echo3dLogo from '../../assets/logos/echo3d.png';
+import LeadingLogo from '../../assets/logos/leadingleaders.png';
+import OllonLogo from '../../assets/logos/ollon.png';
+import OnePasswordLogo from '../../assets/logos/1password.png';
+import RoomiezLogo from '../../assets/logos/roomiez.png';
+import BalsamiqLogo from '../../assets/logos/balsamiq.png';
+import DigitalOceanLogo from '../../assets/logos/digitalocean.png';
+import TaskadeLogo from '../../assets/logos/taskade.png';
+import DclLogo from '../../assets/logos/dcl.png';
+// Partner logos
+import StudentUnionLogo from '../../assets/logos/studentsunion.png';
+import CcubedLogo from '../../assets/logos/ccubed.png';
+import MlhLogo from '../../assets/logos/mlh.png';
+import FossaLogo from '../../assets/logos/fossa.png';
+import LcsLogo from '../../assets/logos/lcs.png';
+const SponsorSection: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export { SponsorSection };
diff --git a/src/components/sections/Team.section.tsx b/src/components/sections/Team.section.tsx
new file mode 100644
index 00000000..63000a86
--- /dev/null
+++ b/src/components/sections/Team.section.tsx
@@ -0,0 +1,223 @@
+interface Member {
+ name: string;
+ title: string;
+ profile: string;
+}
+
+interface MemberProps extends Member {}
+
+interface DepartmentProps {
+ title: string;
+ members: Member[];
+}
+
+const departments = [
+ {
+ title: 'design',
+ members: [
+ {
+ name: 'John Doe John Doe John Doe',
+ title: 'Designer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Jane Smith',
+ title: 'Senior Designer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'John Doe',
+ title: 'Designer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Jane Smith',
+ title: 'Senior Designer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ ],
+ },
+ {
+ title: 'development',
+ members: [
+ {
+ name: 'David Davis',
+ title: 'Software Engineer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Eva Evans',
+ title: 'Frontend Developer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Frank Franklin',
+ title: 'Backend Developer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Grace Gray',
+ title: 'Full Stack Developer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Henry White',
+ title: 'DevOps Engineer',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ ],
+ },
+ {
+ title: 'operation',
+ members: [
+ {
+ name: 'Oliver Black',
+ title: 'Operations Manager',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Patricia Green',
+ title: 'Operations Coordinator',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Quincy Grey',
+ title: 'Logistics Specialist',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Rachel Red',
+ title: 'Facilities Manager',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Samuel Yellow',
+ title: 'IT Support',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ ],
+ },
+ {
+ title: 'logistic',
+ members: [
+ {
+ name: 'Logistic Member 1',
+ title: 'Logistic Specialist',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 2',
+ title: 'Logistic Coordinator',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 3',
+ title: 'Logistic Analyst',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 4',
+ title: 'Logistic Supervisor',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 5',
+ title: 'Logistic Manager',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 3',
+ title: 'Logistic Analyst',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 4',
+ title: 'Logistic Supervisor',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ {
+ name: 'Logistic Member 5',
+ title: 'Logistic Manager',
+ profile: 'https://placehold.co/600x400/png',
+ },
+ ],
+ },
+];
+
+const Member: React.FC
= ({ name, title, profile }) => {
+ return (
+
+ 
+
+
+
+ {name}
+
+
+ {title}
+
+
+
+ {title}
+
+
+ {members.map((member, index) => (
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+ {departments.map((department) => (
+
+ ))}
+
+
+ );
+};
+
+export { TeamSection };
diff --git a/src/index.css b/src/index.css
index 8604fb9a..7cbb899a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -51,3 +51,63 @@ body {
);
}
}
+
+@layer utilities {
+ .grid-auto-xs,
+ .grid-auto-sm,
+ .grid-auto-md,
+ .grid-auto-lg,
+ .grid-auto-xl {
+ display: grid;
+ grid-gap: var(--gap, 1.5rem);
+
+ grid-template-columns: repeat(
+ auto-fill,
+ minmax(min(100%, var(--min)), 1fr)
+ );
+ }
+
+ .grid-auto-xs {
+ --gap: 0.8rem;
+ --min: 8ch;
+ }
+
+ .grid-auto-sm {
+ --gap: 1rem;
+ --min: 10ch;
+ }
+
+ .grid-auto-md {
+ --gap: 1.5rem;
+ --min: 15ch;
+ }
+
+ .grid-auto-lg {
+ --gap: 2rem;
+ --min: 20ch;
+ }
+
+ .grid-auto-xl {
+ --gap: 2.5rem;
+ --min: 25ch;
+ }
+
+ .stacked {
+ display: grid;
+ }
+
+ .stacked > * {
+ grid-column: 1 / -1;
+ grid-row: 1 / -1;
+ }
+
+ .stacked > .media {
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ }
+
+ .place-items-end-center {
+ place-items: end center;
+ }
+}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 2dbd1425..26c08143 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -1,15 +1,22 @@
-import { FooterSection } from '@components';
-import { Navbar } from '@components';
-import { FAQSection } from '@components';
+import { Navbar, HeroSection, AboutSection, TeamSection, FAQSection, ContactSection, SponsorSection, FooterSection } from '@components';
const Landing: React.FC = () => {
return (
-
+ // padding calculation
+ // logo in navbar height = 3.5rem
+ // navbar adds top and bottom padding of 2rem
+ // total top padding = 3.5 + 4 = 7.5rem
+
);
};
-export { Landing };
+export { Landing };
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cac5ae0d..24d1497f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,6 @@
/*
*
- * @page Landing
- *
+ * @page Landing
+ *
*/
-export { Landing } from './Landing';
\ No newline at end of file
+export { Landing } from './Landing';
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 1008e3fe..43eca64a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -23,11 +23,17 @@ export default {
paleViolet: '#BAA3FA',
blueGreen: '#0FA3B1',
cadetBlue: '#0C6975',
- deepMarine: '#2B6469',
slateGray: '#31495C',
copper: '#DE846E',
khakiYellow: '#F0E698',
dimGray: '#4A4F50',
+ tbrand: '#2B6469',
+ 'tbrand-hover': '#3F9098',
+ 'tbrand-mouse-down': '#1D7882',
+ 'tbrand-highlight': '#00CEDB',
+ },
+ translate: {
+ 0.75: '0.1875rem', // value in between of 0.5 and 1 (0.125rem + 0.25) / 2
},
backgroundImage: {
'faq-image': "url('/src/assets/background/faqBackground.png')",
diff --git a/tsconfig.json b/tsconfig.json
index 302e6c9f..7c17b127 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
"module": "ESNext",
"skipLibCheck": true,
- "types": ["node"],
+ "types": ["vitest/globals", "@testing-library/jest-dom"],
"paths": {
"@": ["./src/*"],
"@assets": ["./src/assets/index"],
diff --git a/vite.config.ts b/vite.config.ts
index eabdf827..36a78024 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,16 @@
-/* eslint-disable */
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import * as path from 'path'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import * as path from 'path';
export default defineConfig({
- plugins: [react()],
- resolve: {
- alias: {
- '@': path.resolve(__dirname, './src'),
- '@assets': path.resolve(__dirname, './src/assets'),
- '@components': path.resolve(__dirname, './src/components'),
- '@pages': path.resolve(__dirname, './src/pages'),
- '@utils': path.resolve(__dirname, './src/utils'),
- }
- }
-});
\ No newline at end of file
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ '@assets': path.resolve(__dirname, './src/assets'),
+ '@components': path.resolve(__dirname, './src/components'),
+ '@pages': path.resolve(__dirname, './src/pages'),
+ '@utils': path.resolve(__dirname, './src/utils'),
+ },
+ },
+});