Merge pull request #25 from hicsail/fix/landing-page

fix: landing page sizing and layout
hicsail · May 8, 2024 · 4e2b04e · 4e2b04e
2 parents fa65fa8 + 5077b1e
commit 4e2b04e
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 41 deletions.
diff --git a/src/components/BlueGraphic.tsx b/src/components/BlueGraphic.tsx
@@ -1,14 +1,14 @@
 export default function () {
   return (
-    <div className="flex flex-col md:flex-row justify-center items-center max-w-7xl mx-auto">
-      <div className="w-full md:w-1/2 mb-4 md:mb-0">
-        <img src="/blue-info.svg" className="w-2/3 md:w-auto mx-auto" />
+    <div className="flex flex-col justify-center items-center max-w-7xl mx-auto">
+      <div className="md:h-[15rem] mb-4 md:mb-0 content-center">
+        <img src="/blue-info.svg" className="w-2/3 md:w-3/4 mx-auto" />
       </div>
-      <div className="text-[#101066] font-semibold text-center md:text-left md:pl-16">
-        <h1 className="text-6xl md:text-[100px] leading-tight tracking-tighter mb-2 md:mb-0">
+      <div className="font-sans text-[#101066] font-semibold text-center">
+        <h1 className="text-6xl md:text-7xl leading-tight tracking-tighter mb-2 md:mb-0">
           4 in 10
         </h1>
-        <p className="text-xl md:text-[22px] leading-tight ">
+        <p className="text-xl md:text-2xl leading-tight ">
           high school students felt
           <br />
           persistently sad or hopeless

diff --git a/src/components/CenterDescriptionCard.tsx b/src/components/CenterDescriptionCard.tsx
@@ -9,11 +9,11 @@ export default function CenterDescriptionCard({
 }: ResourceCardProps) {
   return (
     <div>
-      <IonCard className="bg-gradient-to-t from-[#FB4B45] to-[#FC8D3D] rounded-[12px] md:w-[22rem] w-[18rem] h-[24rem]">
+      <IonCard className="bg-gradient-to-t from-[#FB4B45] to-[#FC8D3D] rounded-[12px] w-[18rem] h-[20rem]">
         <IonCardContent className="align-middle py-8 px-6">
           <IonCardSubtitle
             style={{
-              fontSize: 20,
+              fontSize: 16,
               color: "#fff",
               fontWeight: "bold",
               textAlign: "center",

diff --git a/src/components/CenterDescriptionCards.tsx b/src/components/CenterDescriptionCards.tsx
@@ -2,7 +2,7 @@ import CenterDescriptionCard from "./CenterDescriptionCard";
 
 export default function CenterDescriptionCards() {
   return (
-    <div className="flex md:flex-row md:flex-wrap flex-col max-w-7xl items-center mt-8 mx-auto md:gap-4 px-8 z-[1] justify-center">
+    <div className="flex md:flex-row md:flex-wrap flex-col max-w-7xl items-center mt-8 mx-auto gap-4 md:gap-14 px-8 z-[1] justify-center">
       <CenterDescriptionCard description="Create educational content approved by mental health licensed clinicians and teens" />
       <CenterDescriptionCard description="Build community partnerships to support youth through mental health programs and training" />
       <CenterDescriptionCard description="Partner with researchers to design youth mental health programs targetting needs of diverse youth" />

diff --git a/src/components/HelpInfographics.tsx b/src/components/HelpInfographics.tsx
@@ -4,16 +4,10 @@ import RedGraphic from "./RedGraphic";
 
 export default function HelpInfographics() {
   return (
-    <div className="mt-28 mx-8">
-      <div className="w-full mb-36">
-        <BlueGraphic />
-      </div>
-      <div className="w-full mb-36">
-        <PinkGraphic />
-      </div>
-      <div className="w-full mb-36">
-        <RedGraphic />
-      </div>
+    <div className="flex flex-col md:flex-row w-full max-w-7xl px-8 my-28 mx-auto gap-16">
+      <BlueGraphic />
+      <PinkGraphic />
+      <RedGraphic />
     </div>
   );
 }
diff --git a/src/components/PinkGraphic.tsx b/src/components/PinkGraphic.tsx
@@ -1,14 +1,14 @@
 export default function PinkGraphic() {
   return (
-    <div className="flex flex-col md:flex-row justify-center items-center max-w-7xl mx-auto">
-      <div className="w-full md:w-1/2 mb-4 md:mb-0">
-        <img src="/purple-info.svg" className="w-2/3 md:w-auto mx-auto" />
+    <div className="flex flex-col justify-center items-center max-w-7xl mx-auto">
+      <div className="md:h-[15rem] mb-4 md:mb-0 content-center">
+        <img src="/purple-info.svg" className="w-2/3 md:w-3/4 mx-auto" />
       </div>
-      <div className="text-[#101066] font-semibold text-center md:text-left md:pl-16">
-        <h1 className="text-6xl md:text-[100px] leading-tight tracking-tighter mb-2 md:mb-0">
+      <div className="font-sans text-[#101066] font-semibold text-center">
+        <h1 className="text-6xl md:text-7xl leading-tight tracking-tighter mb-2 md:mb-0">
           1 in 5
         </h1>
-        <p className="text-xl md:text-[22px] tracking-tight leading-tight">
+        <p className="text-xl md:text-2xl tracking-tight leading-tight">
           high school students seriously
           <br />
           considered attempting suicide

diff --git a/src/components/RedGraphic.tsx b/src/components/RedGraphic.tsx
@@ -1,14 +1,14 @@
 export default function RedGraphic() {
   return (
-    <div className="flex flex-col md:flex-row justify-center items-center max-w-7xl mx-auto">
-      <div className="w-full md:w-1/2 mb-4 md:mb-0">
-        <img src="/pie-graphic.svg" className="w-1/2 md:w-auto mx-auto" />
+    <div className="flex flex-col justify-center items-center max-w-7xl mx-auto">
+      <div className="md:h-[15rem] mb-4 md:mb-0 content-center">
+        <img src="/pie-graphic.svg" className="w-2/3 md:w-3/4 mx-auto" />
       </div>
-      <div className="text-[#101066] font-semibold text-center md:text-left md:pl-16">
-        <h1 className="text-6xl md:text-[100px] leading-tight tracking-tighter mb-2 md:mb-0">
+      <div className="font-sans text-[#101066] font-semibold text-center">
+        <h1 className="text-6xl md:text-7xl leading-tight tracking-tighter mb-2 md:mb-0">
           1 / 3
         </h1>
-        <p className="text-xl md:text-[22px] tracking-tight leading-tight">
+        <p className="text-xl md:text-2xl tracking-tight leading-tight">
           of higher schoolers have
           <br />
           experienced poor mental health

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -21,10 +21,10 @@ const Index: React.FC = () => {
         <div className="relative max-w-5xl mx-auto my-16">
           <img className="w-full h-auto" alt="Vector" src="vector.svg" />
           <div className="absolute w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <h1 className="[font-family:'Montserrat-Bold',Helvetica] font-bold text-[#101066] text-[calc(5vw)] lg:text-[56px] text-center">
-              TEENS NEED
+            <h1 className="font-sans text-[#101066] text-[calc(4vw)] lg:text-[42px] text-center font-[600] tracking-wide">
+              Teens need
               <br />
-              MENTAL HEALTH SUPPORT
+              mental health support
             </h1>
           </div>
         </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,13 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
+    fontFamily: {
+      sans: ["Montserrat", "sans-serif"],
+    },
     extend: {},
   },
   plugins: [],
-}
-
-
+};