diff --git a/src/assets/contact/arrow-right-icon.svg b/src/assets/contact/arrow-right-icon.svg new file mode 100644 index 00000000..047fbd93 --- /dev/null +++ b/src/assets/contact/arrow-right-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/contact/bird_parts.svg b/src/assets/contact/bird_parts.svg new file mode 100644 index 00000000..c0e0d96f --- /dev/null +++ b/src/assets/contact/bird_parts.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/contact/bottom-border.svg b/src/assets/contact/bottom-border.svg new file mode 100644 index 00000000..361b642e --- /dev/null +++ b/src/assets/contact/bottom-border.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/contact/devpost.svg b/src/assets/contact/devpost.svg new file mode 100644 index 00000000..cbe59650 --- /dev/null +++ b/src/assets/contact/devpost.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/contact/email.svg b/src/assets/contact/email.svg new file mode 100644 index 00000000..863a9d16 --- /dev/null +++ b/src/assets/contact/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/contact/facebook.svg b/src/assets/contact/facebook.svg new file mode 100644 index 00000000..917da1db --- /dev/null +++ b/src/assets/contact/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/contact/hawk.svg b/src/assets/contact/hawk.svg new file mode 100644 index 00000000..1da8e341 --- /dev/null +++ b/src/assets/contact/hawk.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/contact/index.ts b/src/assets/contact/index.ts new file mode 100644 index 00000000..32696c3f --- /dev/null +++ b/src/assets/contact/index.ts @@ -0,0 +1,12 @@ +export { default as GreyBorderTop } from './top-border.svg'; +export { default as GreyBorderBottom } from './bottom-border.svg'; +export { default as MiddleBody } from './middle-body.svg'; +export { default as ArrowRightIcon } from './arrow-right-icon.svg'; +export { default as HawkSVG } from './hawk.svg'; +export { default as BirdPartsSVG } from './bird_parts.svg'; +export { default as EmailSVG } from './email.svg'; +export { default as LinkedInSVG } from './linkedin.svg'; +export { default as InstagramSVG } from './instagram.svg'; +export { default as TwitterSVG } from './twitter.svg'; +export { default as FacebookSVG } from './facebook.svg'; +export { default as DevpostSVG } from './devpost.svg'; \ No newline at end of file diff --git a/src/assets/contact/instagram.svg b/src/assets/contact/instagram.svg new file mode 100644 index 00000000..6db7346b --- /dev/null +++ b/src/assets/contact/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/contact/linkedin.svg b/src/assets/contact/linkedin.svg new file mode 100644 index 00000000..1ea2f31c --- /dev/null +++ b/src/assets/contact/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/contact/middle-body.svg b/src/assets/contact/middle-body.svg new file mode 100644 index 00000000..87217f61 --- /dev/null +++ b/src/assets/contact/middle-body.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/contact/top-border.svg b/src/assets/contact/top-border.svg new file mode 100644 index 00000000..563d2c4f --- /dev/null +++ b/src/assets/contact/top-border.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/contact/twitter.svg b/src/assets/contact/twitter.svg new file mode 100644 index 00000000..85cb578d --- /dev/null +++ b/src/assets/contact/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/index.tsx b/src/components/index.tsx index 34d44f30..8c9e585a 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -15,4 +15,5 @@ export { Menu } from './Navbar/Menu'; 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 { FooterSection } from './sections/Footer.section'; \ No newline at end of file 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!

+
+ + +
+
+ + Email + + + LinkedIn + + + Instagram + + + Twitter + + + Facebook + + + Devpost + +
+
+
+
+ +
+ +
+ ); +}; + +export { ContactSection }; diff --git a/src/index.css b/src/index.css index 33d129ae..7cbb899a 100644 --- a/src/index.css +++ b/src/index.css @@ -35,6 +35,10 @@ body { a { @apply inline-block cursor-pointer text-base lg:text-lg 2xl:text-2xl; } + + button { + @apply w-full rounded-lg border-black bg-[#2B6469] p-4 text-white shadow-[2px_2px_0px_0px_black] hover:bg-[#3F9098]/90 focus:bg-[#3F9098] focus:shadow-none transition-shadow; + } } @layer components { diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx index 43bc9299..4dec48b7 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/Landing.tsx @@ -1,4 +1,4 @@ -import { Navbar, HeroSection, AboutSection, TeamSection, FooterSection } from '@components'; +import { Navbar, HeroSection, AboutSection, TeamSection, ContactSection, FooterSection } from '@components'; const Landing: React.FC = () => { return ( @@ -11,6 +11,7 @@ const Landing: React.FC = () => { + );