Skip to content

Commit

Permalink
Refactor image imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@aidantrabs
aidantrabs committed Mar 14, 2024
1 parent 5419771 commit fcd1d9a
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 76 deletions.
12 changes: 0 additions & 12 deletions src/assets/contact/index.ts
View file

This file was deleted.

121 changes: 120 additions & 1 deletion src/assets/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@

/*
*
* Hero Section SVGs
*
*/
export { HeroBackgroundMobile } from './hero/bg-mobile-svg';
export { HeroBackgroundDesktop } from './hero/bg-desktop-svg';

/*
*
* Social Icons SVGs
*
*/
import {
MailIcon,
LinkedInIcon,
Expand All @@ -19,3 +28,113 @@ export {
FacebookIcon,
DevpostIcon,
};

/*
*
* About Section SVGs
*
*/
import AboutAirBalloon from './about/about-air-balloon.svg';
import AboutSectionDesktop from './about/about-section-desktop.svg';
import AboutSectionMobile from './about/about-section-mobile.svg';

export {
AboutAirBalloon,
AboutSectionDesktop,
AboutSectionMobile
};

/*
*
* Contact Section SVGs
*
*/
import ArrowRightIcon from './contact/arrow-right-icon.svg';
import BirdParts from './contact/bird_parts.svg';
import BottomBorder from './contact/bottom-border.svg';
import DevPost from './contact/devpost.svg';
import Email from './contact/email.svg';
import Facebook from './contact/facebook.svg';
import Hawk from './contact/hawk.svg';
import Instagram from './contact/instagram.svg';
import LinkedIn from './contact/linkedin.svg';
import MiddleBody from './contact/middle-body.svg';
import TopBorder from './contact/top-border.svg';
import Twitter from './contact/twitter.svg';

export {
ArrowRightIcon,
BirdParts,
BottomBorder,
DevPost,
Email,
Facebook,
Hawk,
Instagram,
LinkedIn,
MiddleBody,
TopBorder,
Twitter,
};

/*
*
* Sponsor & Partner logos PNGs
*
*/
import OnePassword from './logos/1password.png';
import Assembly from './logos/assembly.png';
import Balsamiq from './logos/balsamiq.png';
import CCubed from './logos/ccubed.png';
import DCL from './logos/dcl.png';
import DigitalOcean from './logos/digitalocean.png';
import Echo3D from './logos/echo3d.png';
import FDM from './logos/fdm.png';
import FOSSA from './logos/fossa.png';
import LCS from './logos/lcs.png';
import LeadingLeaders from './logos/leadingleaders.png';
import MLH from './logos/mlh.png';
import Ollon from './logos/ollon.png';
import Roomiez from './logos/roomiez.png';
import SOC from './logos/soc.png';
import StudentsUnion from './logos/studentsunion.png';
import Taskade from './logos/taskade.png';
import Veritas from './logos/veritas.png';

export {
OnePassword,
Assembly,
Balsamiq,
CCubed,
DCL,
DigitalOcean,
Echo3D,
FDM,
FOSSA,
LCS,
LeadingLeaders,
MLH,
Ollon,
Roomiez,
SOC,
StudentsUnion,
Taskade,
Veritas,
};

/*
*
* Team SVGs
*
*/
import Clouds from './team/clouds.svg';
import MeetTheTeamBalloon from './team/meet-the-team-balloon-banner.svg';
import MeetTheTeamBuildingLeft from './team/meet-the-team-building-left.svg';
import MeetTheTeamBuildingRight from './team/meet-the-team-building-right.svg';

export {
Clouds,
MeetTheTeamBalloon,
MeetTheTeamBuildingLeft,
MeetTheTeamBuildingRight,
};
5 changes: 3 additions & 2 deletions src/components/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
/*
*
* @component
* @components
*
*/
export { Button } from './Button/Button';
export { NavItems } from './Navbar/NavItems';
export { Navbar } from './Navbar/Navbar';
export { Menu } from './Navbar/Menu';

/*
*
* @section
* @sections
*
*/
export { HeroSection } from "./sections/Hero.section"
Expand Down
4 changes: 1 addition & 3 deletions src/components/sections/About.section.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
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';
import { AboutAirBalloon, AboutSectionDesktop, AboutSectionMobile } from '@assets';

const AboutSection: React.FC = () => {
const [translateY, setTranslateY] = useState(0);
Expand Down
22 changes: 11 additions & 11 deletions src/components/sections/Contact.section.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import { GreyBorderTop, GreyBorderBottom, MiddleBody, ArrowRightIcon, HawkSVG, BirdPartsSVG, EmailSVG, LinkedInSVG, InstagramSVG, TwitterSVG, FacebookSVG, DevpostSVG } from '../../assets/contact';
import { TopBorder, BottomBorder, MiddleBody, ArrowRightIcon, Hawk, BirdParts, Email, LinkedIn, Instagram, Twitter, Facebook, DevPost } from '@assets';

const ContactSection: React.FC = () => {
return (
<section className="contact-section relative z-10">

<img src={GreyBorderTop} className="w-full z-0" />
<img src={HawkSVG} className="absolute right-0 top-0 transform -translate-y-1/4 scale-100 -z-10" />
<img src={BirdPartsSVG} className="absolute right-0 top-0 transform -translate-y-[42.5%] translate-x-[1%] scale-100 z-50 lg:-translate-x-[5%]" />
<img src={TopBorder} className="w-full z-0" />
<img src={Hawk} className="absolute right-0 top-0 transform -translate-y-1/4 scale-100 -z-10" />
<img src={BirdParts} className="absolute right-0 top-0 transform -translate-y-[42.5%] translate-x-[1%] scale-100 z-50 lg:-translate-x-[5%]" />
<div className="absolute xs:text-center xs:ml-16 inset-x-0 mx-auto max-w-4xl px-5 pt-4 sm:pt-8 md:pt-12 lg:pt-32 xl:pt-48 z-10">
<div className="contact-info text-center sm:text-left sm:mt-5 md:mt-8 lg:mt-0 mb-2 sm:mb-4 md:mb-6 lg:mb-12 text-left">
<h2 className="font-raleway text-2xl sm:text-4xl md:text-5xl lg:text-8xl font-extrabold leading-tight tracking-wider text-[#32848C] md:leading-tight lg:leading-[7.3125rem]">CONTACT US</h2>
Expand All @@ -32,30 +32,30 @@ const ContactSection: React.FC = () => {
</div>
<div className="flex space-x-3 sm:space-x-4 md:space-x-6 ml-1 mt-3 sm:mt-2 md:mt-3 lg:justify-start">
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" className="w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={EmailSVG} alt="Email" />
<img src={Email} alt="Email" />
</a>
<a href="https://www.linkedin.com/company/hawkhacks/" target="_blank" rel="noopener noreferrer" className="w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={LinkedInSVG} alt="LinkedIn" />
<img src={LinkedIn} alt="LinkedIn" />
</a>
<a href="https://www.instagram.com/wluhawkhacks/" target="_blank" rel="noopener noreferrer" className="w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={InstagramSVG} alt="Instagram" />
<img src={Instagram} alt="Instagram" />
</a>
<a href="https://twitter.com/wluhawkhacks" target="_blank" rel="noopener noreferrer" className="w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={TwitterSVG} alt="Twitter" />
<img src={Twitter} alt="Twitter" />
</a>
<a href="https://www.facebook.com/Hawkhacks/" target="_blank" rel="noopener noreferrer" className="w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={FacebookSVG} alt="Facebook" />
<img src={Facebook} alt="Facebook" />
</a>
<a href="https://hawkhacks.devpost.com/" target="_blank" rel="noopener noreferrer" className="mt-0.5 w-6 sm:w-8 md:w-10 h-6 sm:h-8 md:h-10">
<img src={DevpostSVG} alt="Devpost" />
<img src={DevPost} alt="Devpost" />
</a>
</div>
</div>
</div>
<div className="relative w-full h-[300px] sm:h-[350px] md:h-[400px] lg:h-[700px] z-0">
<img src={MiddleBody} className="w-full h-full object-cover" />
</div>
<img src={GreyBorderBottom} className="w-full z-0" />
<img src={BottomBorder} className="w-full z-0" />
</section>
);
};
Expand Down
72 changes: 25 additions & 47 deletions src/components/sections/Sponsor.section.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,14 @@
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';
import { TopBorder, BottomBorder, MiddleBody, Hawk, BirdParts} from '@assets';
import { Veritas, Assembly, SOC, FDM, Echo3D, LeadingLeaders, Ollon, OnePassword, Roomiez, Balsamiq, DigitalOcean, Taskade, DCL } from '@assets';
import { StudentsUnion, CCubed, MLH, FOSSA, LCS } from '@assets';

const SponsorSection: React.FC = () => {
return (
<section id="sponsors-section" className="sponsor-section relative z-20">
<img src={GreyBorderTop} alt="Top Border" className="w-full z-10" />
<img src={HawkSVG} alt="Bird" className="absolute left-0 top-0 transform -translate-y-1/4 scale-x-[-1] scale-100 z-[-1]" />
<img src={BirdPartsSVG} alt="Bird Parts" className="absolute left-0 top-0 transform -translate-y-[42.5%] -translate-x-[1%] scale-x-[-1] scale-100 z-50 lg:translate-x-[5%]" />
<img src={TopBorder} alt="Top Border" className="w-full z-10" />
<img src={Hawk} alt="Bird" className="absolute left-0 top-0 transform -translate-y-1/4 scale-x-[-1] scale-100 z-[-1]" />
<img src={BirdParts} alt="Bird Parts" className="absolute left-0 top-0 transform -translate-y-[42.5%] -translate-x-[1%] scale-x-[-1] scale-100 z-50 lg:translate-x-[5%]" />
<div className="relative">
<img src={MiddleBody} alt="Middle Body" className="w-full object-cover h-[1200px] sm:h-[1400px] md:h-[1300px] lg:h-[1200px] z-10" />
<div className="absolute top-0 left-0 right-0 bottom-0 flex flex-col items-center space-y-6 sm:space-y-12 pt-[200px]">
Expand All @@ -41,66 +19,66 @@ const SponsorSection: React.FC = () => {
</div>
<div className="flex justify-center items-center sm:space-x-16 space-x-4 px-4">
<div className="h-14 sm:h-15 flex justify-center items-center">
<img src={VeritasLogo} alt="Veritas" className="max-h-full" />
<img src={Veritas} alt="Veritas" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={AssemblyLogo} alt="Assembly" className="max-h-full" />
<img src={Assembly} alt="Assembly" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={SocLogo} alt="Soc" className="max-h-full" />
<img src={SOC} alt="Soc" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={FdmLogo} alt="FDM" className="max-h-full" />
<img src={FDM} alt="FDM" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={Echo3dLogo} alt="Echo3D" className="max-h-full" />
<img src={Echo3D} alt="Echo3D" className="max-h-full" />
</div>
</div>
<div className="flex justify-center items-center space-x-6 px-4">
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={LeadingLogo} alt="Leading" className="max-h-full" />
<img src={LeadingLeaders} alt="Leading" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={OllonLogo} alt="Ollon" className="max-h-full" />
<img src={Ollon} alt="Ollon" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={OnePasswordLogo} alt="1Password" className="max-h-full" />
<img src={OnePassword} alt="1Password" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={RoomiezLogo} alt="Roomiez" className="max-h-full" />
<img src={Roomiez} alt="Roomiez" className="max-h-full" />
</div>
<div className="h-12 sm:h-15 flex justify-center items-center">
<img src={BalsamiqLogo} alt="Balsamiq" className="max-h-full" />
<img src={Balsamiq} alt="Balsamiq" className="max-h-full" />
</div>
</div>
<div className="flex justify-center items-center space-x-6 px-4">
<div className="h-13 sm:h-16 flex justify-center items-center">
<img src={DigitalOceanLogo} alt="DigitalOcean" className="max-h-full" />
<img src={DigitalOcean} alt="DigitalOcean" className="max-h-full" />
</div>
<div className="h-13 sm:h-16 flex justify-center items-center">
<img src={TaskadeLogo} alt="Taskade" className="max-h-full" />
<img src={Taskade} alt="Taskade" className="max-h-full" />
</div>
</div>
<div className="flex justify-center items-center px-8">
<div className="h-28 sm:h-32 flex justify-center items-center">
<img src={DclLogo} alt="DCL" className="max-h-full" />
<img src={DCL} alt="DCL" className="max-h-full" />
</div>
</div>
<div className="mt-20" id="partners-section">
<div className="text-center font-raleway font-black text-[50px] leading-[117px] tracking-widest text-[#404040] drop-shadow-lg mt-36 sm:text-[80px] vs:text-[60px]">
PARTNERS
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 justify-items-center items-center mt-8 gap-y-4 gap-x-10">
<img src={StudentUnionLogo} alt="Student Union" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={CcubedLogo} alt="Ccubed" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={MlhLogo} alt="MLH" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={FossaLogo} alt="Fossa" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={LcsLogo} alt="LCS" className="h-16 sm:h-18 md:h-21 lg:h-24 xl:h-24 col-span-2 md:col-span-1 justify-self-center" />
<img src={StudentsUnion} alt="Student Union" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={CCubed} alt="Ccubed" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={MLH} alt="MLH" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={FOSSA} alt="Fossa" className="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32" />
<img src={LCS} alt="LCS" className="h-16 sm:h-18 md:h-21 lg:h-24 xl:h-24 col-span-2 md:col-span-1 justify-self-center" />
</div>
</div>
</div>
</div>
<img src={GreyBorderBottom} alt="Bottom Border" className="w-full z-10" />
<img src={BottomBorder} alt="Bottom Border" className="w-full z-10" />
</section>
);
};
Expand Down

0 comments on commit fcd1d9a

Please sign in to comment.