diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx
index 25d3370..249f687 100644
--- a/src/sections/Hero/index.tsx
+++ b/src/sections/Hero/index.tsx
@@ -1,8 +1,7 @@
import { FaChevronDown } from 'react-icons/fa6';
import Image from 'next/image';
-import Typewriter from '../../components/typewriter';
+import TypeAnimation from '../../components/type-animation';
import leftside from '../../../public/assets/left_diamonds.svg';
-import rightside from '../../../public/assets/right_diamonds.svg';
import styles from './style.module.css';
import aboutStyles from '../About/style.module.css';
@@ -19,16 +18,17 @@ const Hero: React.FC = () => {
return (
-
+
-
ACM Hack
-
+
+
ACM Hack
+
+ Empowering our community of software engineers.
Developing cool things with
+ code.
+
+
+
-
Learn More
diff --git a/src/sections/Hero/style.module.css b/src/sections/Hero/style.module.css
index 7f9439e..bd2a8a5 100644
--- a/src/sections/Hero/style.module.css
+++ b/src/sections/Hero/style.module.css
@@ -13,8 +13,7 @@
.backdrop {
flex-grow: 1;
display: grid;
- grid-template-columns: 2fr 3fr 1.25fr;
- column-gap: 1rem;
+ grid-template-columns: 1fr 2fr;
align-items: center;
max-width: 100%;
text-align: center;
@@ -22,7 +21,7 @@
/* Landing Card Icons */
-.backdrop_left, .backdrop_right {
+.backdrop_left {
object-fit: contain;
width: 100%;
height: 100%;
@@ -31,15 +30,21 @@
/* Landing Card Text */
.landing_text {
- display: grid;
- grid-template-columns: 1fr;
- grid-template-rows: 1fr 1.25fr;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2em;
position: relative;
}
.landing_title {
- font-weight: 900;
font-size: 5em;
+ font-weight: 600;
+}
+
+.landing_caption {
+ width: 100%;
+ font-size: 2em;
}
/* Landing Card Scroll Down */
@@ -69,57 +74,18 @@
font-size: 10px;
}
.backdrop {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
+ grid-template-columns: minmax(18em, 1fr);
+ grid-template-rows: minmax(0, 0.7fr);
max-width: 95%;
}
-
.backdrop_left {
justify-self: center;
- max-width: 80%;
- max-height: auto;
- }
- .backdrop_right {
- display: none;
- }
- .landing_title{
- margin-bottom: 1rem;
}
.landing_text{
- margin-top: 1rem;
- margin-bottom: 1rem;
- margin-right: 2rem;
- margin-left: 2rem;
+ align-self: start;
}
}
-/* Font size and layout for tablet*/
-
-@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- .backdrop {
- grid-template-columns: 1fr 2fr;
- grid-template-rows: auto;
- max-width: 95%;
- margin: 0 auto;
- padding: 1rem;
- height: auto;
- }
-
- .backdrop_left {
- max-width: 100%;
- height: auto;
- }
-
- .backdrop_right {
- display: none;
- }
-
- .landing_text {
- align-self: center;
- padding: 1rem;
- }
- }
-
/* Dark Mode */
html[class~='dark'] .hero {