Merge pull request #204 from HackMelbourne/fix/hero-title-removing-tailwind

Fix/hero title removing tailwind

Author: HM-Website

src/features/TitleHero/TitleHero.css

@@ -0,0 +1,75 @@
+.hero-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.hero-bigtext {
+  /* position: relative; */
+  display: flex; 
+  flex-direction: column; 
+  justify-content: flex-end; 
+  flex-basis: auto
+}
+
+.hero-background {
+  z-index: -10;
+  color: transparent;
+  -webkit-text-stroke: 1px #767676;
+  font-weight: 900;
+  font-size: 9rem;
+  white-space: nowrap;
+  line-height: 1;
+  margin-bottom: -100px;
+  /* padding-bottom: 5rem; */
+  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+}
+
+@media (min-width: 768px) {
+  .hero-background {
+    font-size: 16rem; /* md:text-[256px] */
+  }
+}
+
+@media (min-width: 768px) {
+  .hero-content {
+    align-items: center;
+    gap: 1.25rem;
+  }
+}
+
+.hero-title {
+  z-index: 1;
+  font-weight: 900;
+  font-size: 3rem; /* text-5xl */
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  /* position: absolute;
+  bottom: 5.5rem; */
+}
+
+@media (min-width: 768px) {
+  .hero-title {
+    font-size: 4.5rem; /* md:text-7xl */
+  }
+}
+
+@media (min-width: 1024px) {
+  .hero-title {
+    font-size: 6rem; /* lg:text-[96px] */
+  }
+}
+
+.hero-description {
+  max-width: 40%;
+  margin-top: 2rem;
+}
+
+@media (max-width: 767px) {
+  .hero-description {
+    max-width: 100%;
+  }
+}

src/features/TitleHero/TitleHero.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
+import "./TitleHero.css";
 
 interface PageHeader {
   pageTitle: string;
@@ -10,44 +11,39 @@ const TitleHero = ({ pageTitle, pageDescription }: PageHeader) => {
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="grid grid-cols-1 grid-rows-1 items-center md:mt-10 relative overflow-clip">
-      {/* Background */}
-      <div
-        className="col-start-1 row-start-1 absolute -z-10 stroke-width text-9xl font-black md:text-[256px] whitespace-nowrap left-1/2"
-        style={{
-          color: "transparent",
-          WebkitTextStrokeColor: "#767676",
-        }}
-        ref={ref}>
+    <div className="hero-container">
+      <div className="hero-bigtext">
+        {/* Background Text */}
         <motion.div
-          className=" relative -left-1/2"
-          initial={{ opacity: 0, letterSpacing: "20rem", textIndent: "20rem" }}
-          whileInView={{ opacity: 1, letterSpacing: "0px", textIndent: "0px" }}
+          className="hero-background"
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
           transition={{ delay: 0.4, duration: 0.8, ease: "anticipate", type: "tween" }}
-          viewport={{ once: true }}>
+          viewport={{ once: true }}
+        >
           {pageTitle}
         </motion.div>
+
+         {/* Foreground Content */}
+        <motion.div
+          className="hero-title"
+          initial={{ opacity: 0, letterSpacing: "20rem", textIndent: "20rem" }}
+          whileInView={{ opacity: 1, letterSpacing: "0px", textIndent: "0px" }}
+          transition={{ duration: 1.2, ease: "anticipate", type: "tween" }}
+          viewport={{ once: true }}
+        >
+          <h1>{pageTitle}</h1>
+        </motion.div>
       </div>
-      {/* Foreground */}
-      <div className="col-start-1 row-start-1 pt-48 px-8 j">
-        <div className="justify-self-center flex flex-col gap-3 md:items-center md:gap-5">
-          <motion.div
-            className="z-1 text-5xl font-black md:text-7xl lg:text-[96px] md:whitespace-nowrap"
-            initial={{ opacity: 0, letterSpacing: "20rem", textIndent: "20rem" }}
-            whileInView={{ opacity: 1, letterSpacing: "0px", textIndent: "0px" }}
-            transition={{ duration: 1.2, ease: "anticipate", type: "tween" }}
-            viewport={{ once: true }}>
-            <h1>{pageTitle}</h1>
-          </motion.div>
-          <motion.div
-            className="md:w-2/5"
-            initial={{ opacity: 0, y: -40 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 1 }}>
-            <p>{pageDescription}</p>
-          </motion.div>
-        </div>
-      </div>
+
+      <motion.div
+        className="hero-description"
+        initial={{ opacity: 0, y: -40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 1 }}
+      >
+        <p>{pageDescription}</p>
+      </motion.div>
     </div>
   );
 };

src/layouts/Layout.tsx

@@ -144,10 +144,10 @@ const Layout = () => {
 
   return (
     <>
-      <div className="w-screen max-w-full overflow-x-clip">
-        {isShowNavbar ? (
-          <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} pills={nav.pills} />
-        ) : null}
+      {isShowNavbar ? (
+        <Navbar clubname={nav.clubname} logo={nav.logo} pages={nav.pages} links={nav.links} pills={nav.pills} />
+      ) : null}
+      <div className="pt-[100px] w-screen max-w-full overflow-x-clip">
         <Outlet />
         {isShowFooter ? <Footer links={footer.links} icons={footer.icons} /> : null}