diff --git a/public/assets/heist_jewel_display.svg b/public/assets/heist_jewel_display.svg new file mode 100644 index 0000000..b534dd9 --- /dev/null +++ b/public/assets/heist_jewel_display.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/heist_peekers.svg b/public/assets/heist_peekers.svg new file mode 100644 index 0000000..69e22ed --- /dev/null +++ b/public/assets/heist_peekers.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/heistscene.svg b/public/assets/heistscene.svg deleted file mode 100644 index 2c28a51..0000000 --- a/public/assets/heistscene.svg +++ /dev/null @@ -1,214 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/Carousel/style.module.scss b/src/components/Carousel/style.module.scss index 8056048..695e8cf 100644 --- a/src/components/Carousel/style.module.scss +++ b/src/components/Carousel/style.module.scss @@ -25,6 +25,10 @@ } } + &:hover .carousel { + animation-play-state: paused; + } + &::before { content: ''; position: absolute; diff --git a/src/components/LandingImage/index.tsx b/src/components/LandingImage/index.tsx deleted file mode 100644 index 5d5e331..0000000 --- a/src/components/LandingImage/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import HeistScene from '../../../public/assets/heistscene.svg'; -import styles from './style.module.scss'; - -const LandingImage = () => { - return ( -
- -
- ); -}; - -export default LandingImage; diff --git a/src/components/LandingImage/style.module.scss b/src/components/LandingImage/style.module.scss deleted file mode 100644 index db2b4f8..0000000 --- a/src/components/LandingImage/style.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '../../styles/vars.scss' as vars; - -.container { - display: flex; - justify-content: center; - height: 100%; - width: max-content; - margin-right: calc(-1 * vars.$side-padding); - position: relative; - flex-grow: 1; - align-self: flex-start; - - svg { - height: 100%; - max-height: min(1000px, 100vh); - } - - @media screen and (max-width: vars.$breakpoint-lg) { - width: 100%; - position: relative; - margin-right: 0; - right: 0; - top: 0; - flex-grow: 1; - } -} diff --git a/src/components/LandingText/index.tsx b/src/components/LandingText/index.tsx index ccc9a2f..77c64d4 100644 --- a/src/components/LandingText/index.tsx +++ b/src/components/LandingText/index.tsx @@ -2,12 +2,22 @@ import Typography from '@/components/Typography'; import Link from 'next/link'; import styles from './style.module.scss'; -const LandingText = () => { +interface LandingTextProps { + className?: string; +} + +const LandingText = ({ className = '' }: LandingTextProps) => { return ( -
- +
+ April 5–6, 2025 • hosted by ACM at UC San Diego + + April 5–6, 2025 + + Hosted by ACM at UC San Diego + + DiamondHacks diff --git a/src/components/LandingText/style.module.scss b/src/components/LandingText/style.module.scss index d7ff9ef..248b21c 100644 --- a/src/components/LandingText/style.module.scss +++ b/src/components/LandingText/style.module.scss @@ -9,9 +9,19 @@ align-self: flex-start; margin-top: 10%; - .subheading { - @media screen and (max-width: vars.$breakpoint-md) { - font-size: 1rem !important; + .subheadingMobile { + display: none; + font-size: 1rem !important; + line-height: 1.5rem !important; + flex-direction: column; + } + @media screen and (max-width: vars.$breakpoint-md) { + .subheadingDesktop { + display: none; + } + + .subheadingMobile { + display: flex; } } diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx index 4f2ab09..e537ec9 100644 --- a/src/sections/Hero/index.tsx +++ b/src/sections/Hero/index.tsx @@ -1,12 +1,24 @@ import LandingText from '@/components/LandingText'; -import LandingImage from '@/components/LandingImage'; +import HeistPeekers from '../../../public/assets/heist_peekers.svg'; +import HeistJewelDisplay from '../../../public/assets/heist_jewel_display.svg'; import styles from './style.module.scss'; const Hero = () => { return (
- - +
+ +
+ +
+ +
); }; diff --git a/src/sections/Hero/style.module.scss b/src/sections/Hero/style.module.scss index c2ebff3..7daaa4d 100644 --- a/src/sections/Hero/style.module.scss +++ b/src/sections/Hero/style.module.scss @@ -1,16 +1,84 @@ @use '../../styles/vars.scss' as vars; .container { - display: flex; - flex-direction: row; + display: grid; + grid-template-areas: + 'text peekers' + 'text display'; + grid-template-columns: auto 1fr; align-items: flex-start; - max-height: min(1000px, 100vh); - justify-content: center; + padding: 0 vars.$side-padding; + margin: 0 calc(vars.$side-padding * -1); + overflow: hidden; + margin-bottom: -35rem; + + @media screen and (max-width: vars.$breakpoint-md) { + padding: 0 vars.$side-padding-mobile; + margin: 0 calc(vars.$side-padding-mobile * -1); + } + + .text { + grid-area: text; + max-height: min(60rem, 100vh); + margin-top: 10rem; + } @media screen and (max-width: vars.$breakpoint-lg) { + display: flex; flex-direction: column; - justify-content: center; + align-items: center; gap: 4rem; - max-height: unset; + margin-bottom: -30rem; + + .text { + max-height: unset; + margin-top: 0; + } + } + + .imageWrapper { + justify-self: center; + width: 100%; + + .image { + pointer-events: none; + } + } + + .peekersWrapper { + $peekersImageWidth: 916; + $peekHoleWidth: 571; + $peekHoleHeight: 155; + + grid-area: peekers; + max-width: calc($peekHoleWidth * 1px); + aspect-ratio: $peekHoleWidth / $peekHoleHeight; + margin-bottom: 5rem; + position: relative; + + .peekers { + position: absolute; + top: 0; + left: -30rem; + right: -30rem; + margin: 0 auto; + width: calc($peekersImageWidth / $peekHoleWidth * 100%); + } + } + + .displayWrapper { + $displayImageWidth: 788; + $pillarWidth: 430; + + grid-area: display; + max-width: calc($pillarWidth * 1px); + display: flex; + justify-content: center; + + .display { + flex: none; + width: calc($displayImageWidth / $pillarWidth * 100%); + margin-top: -60%; + } } }