add landing page content

Hack4ImpactRutgers · Nov 18, 2023 · 91148a7 · 91148a7
1 parent b582590
commit 91148a7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/src/app/components/CollapsibleContent.tsx b/src/app/components/CollapsibleContent.tsx
@@ -29,7 +29,7 @@ export default function CollapsibleContent(props: CollapsibleContentProps) {
       <div
         // TODO: fix this transition.
         className={`duration-500 overflow-hidden transition-all ${
-          isCollapsed ? "h-0" : "h-auto"
+          isCollapsed && "hidden"
         }`}
       >
         {props.content}

diff --git a/src/app/components/SectionTitle.tsx b/src/app/components/SectionTitle.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+
+interface SectionTitleProps {
+  text: string;
+}
+
+export default function SectionTitle(props: SectionTitleProps) {
+  const { text } = props;
+  return <p className="text-primary text-5xl font-bold">{text}</p>;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,29 +4,28 @@ import Image from "next/image";
 import CollapsibleContent from "@/app/components/CollapsibleContent";
 import LoginButton from "@/app/components/LoginButton";
 import { useState } from "react";
+import SectionTitle from "@/app/components/SectionTitle";
 
-// TODO: add HTML semantic elements
+// TODO: add HTML semantic elements.
 export default function Home() {
-  const [tmp, setTmp] = useState(false);
-
   return (
-    <>
+    <div className="flex flex-col gap-14 leading-10">
       <section className="h-[515px] w-full relative">
         <Image
           src="/images/animals.jpeg"
           fill
           alt="animals"
-          objectFit="cover"
+          style={{ objectFit: "cover" }}
         />
         <div className="shadow-xl z-10 absolute h-[515px] right-0 w-[60%] flex items-center justify-end p-10 bg-gradient-to-l from-[#222524] to-transparent">
-          <div className="text-white text-5xl font-bold">
+          <div className="text-white text-5xl font-bold text-center">
             Help Animals Get Meals
           </div>
         </div>
       </section>
-      <section>
-        <div className="text-primary text-5xl font-bold text-center">
-          Mission statement
+      <section className="p-10">
+        <div className="text-center">
+          <SectionTitle text="Mission statement" />
         </div>
         <p className="text-center">
           “Assisting low-income people in becoming independent and
@@ -35,18 +34,16 @@ export default function Home() {
           programming and strong community partnerships.”
         </p>
       </section>
-      <section className="bg-secondary h-[459px]">
+      <section className="bg-secondary h-[459px] p-10">
         <div className="text-white text-5xl font-bold text-center">
           We Provide
         </div>
         {/* TODO: add icons */}
       </section>
-      <section className="flex justify-between">
+      <section className="flex justify-between p-10">
         <div className="flex flex-col justify-center">
-          <div className="text-5xl text-primary font-bold">
-            Volunteers Change Lives
-          </div>
-          <p className="text-2xl">
+          <SectionTitle text={"Volunteers Change Lives"} />
+          <p className="text-2xl leading-10">
             It is simple to volunteer with us in a role that is <br /> right for
             you.
           </p>
@@ -56,23 +53,23 @@ export default function Home() {
             src="/images/food-aid.jpeg"
             alt="food aid"
             fill
-            objectFit="cover"
+            style={{ objectFit: "cover" }}
           />
         </div>
       </section>
-      <section className="h-[388px] bg-tertiary">
+      <section className="h-[388px] bg-tertiary p-10">
         <div className="text-4xl text-primary font-bold">
           Joining Us Is Easy
         </div>
-        <p className="text-xl">
+        <p className="text-xl leading-10">
           Receive the pet products and <br /> support you need right from your
           <br />
           door step.
         </p>
         {/* TODO: add icons */}
       </section>
-      <section>
-        Eligibility
+      <section className="pv-10 flex gap-5 flex-col">
+        <SectionTitle text="Eligibility" />
         <CollapsibleContent
           title="Congregate Meals"
           content="Persons must be 60 years of age or older, or the spouse (regardless of age) or an eligible client. Disabled persons under 60, who lives with an eligible client, or lives in within the housing authority we serve, may come to the site with the client and eat."
@@ -88,7 +85,9 @@ export default function Home() {
       </section>
 
       {/* TODO: Instagram API support. */}
-      <section>Connect with CCA on Instagram</section>
-    </>
+      <section className="p-10">
+        <SectionTitle text="Connect with CCA on Instagram" />
+      </section>
+    </div>
   );
 }