From 91148a78181bc4dcc15ceb6a32bf11d215b26869 Mon Sep 17 00:00:00 2001
From: OGreeni <omri.green1@gmail.com>
Date: Fri, 17 Nov 2023 19:31:37 -0500
Subject: [PATCH] add landing page content

---
 src/app/components/CollapsibleContent.tsx |  2 +-
 src/app/components/SectionTitle.tsx       | 10 ++++++
 src/app/page.tsx                          | 43 +++++++++++------------
 3 files changed, 32 insertions(+), 23 deletions(-)
 create mode 100644 src/app/components/SectionTitle.tsx

diff --git a/src/app/components/CollapsibleContent.tsx b/src/app/components/CollapsibleContent.tsx
index daff524..a8b8cab 100644
--- 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
new file mode 100644
index 0000000..0e71e11
--- /dev/null
+++ 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
index d769732..a1da43a 100644
--- 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>
   );
 }