From c87b3847ef19cfb23b42e2172d2fdb658667676a Mon Sep 17 00:00:00 2001
From: xuvi7 <07xuvi@gmail.com>
Date: Mon, 16 Dec 2024 18:47:14 -0500
Subject: [PATCH] refactor: client requested changes

change static information
fix instagram link
remove team component
style news and contact form
---
 app/about/page.tsx                  |  4 +-
 app/contact/page.tsx                | 16 +++----
 app/news/page.module.css            | 22 +++-------
 app/news/page.tsx                   |  6 ++-
 components/Blog/Blog.module.css     | 65 ++++-------------------------
 components/Blog/Blog.tsx            | 11 ++++-
 components/Navbar/Navbar.module.css |  1 +
 components/Navbar/Navbar.tsx        | 28 +++++++------
 components/about/AboutSection.tsx   | 41 +++++++++---------
 9 files changed, 70 insertions(+), 124 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index f2d92a4..ae232d0 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,5 +1,5 @@
 import AboutSection from '@/components/about/AboutSection'
-import Team from "../../components/Team/Team";
+// import Team from "../../components/Team/Team";
 import { Suspense } from 'react';
 
 export default function About() {
@@ -7,7 +7,7 @@ export default function About() {
     <Suspense fallback={<div></div>}>
       <div>
         <AboutSection />
-        <Team />
+        {/* <Team /> */}
       </div>
     </Suspense>
   );
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index f82a7e5..b36d53d 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -79,38 +79,34 @@ export default function Contact() {
       <div className="min-h-screen flex flex-col bg-customBlack items-center text-gray-300 pb-3 pt-6 px-4 justify-center">
         {/* Header Section */}
         <h1 className="text-5xl font-semibold text-white mb-2">Get Involved</h1>
-        <p className="text-center text-gray-400 max-w-xl">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        </p>
-
 
         <div className="bg-neutral-1000 flex items-center justify-center p-5">
           <div className="bg-neutral-900 rounded-3xl shadow-lg p-8 w-full max-w-6xl flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
 
             {/* Contact Information */}
-            <div className="bg-neutral-800 rounded-3xl p-6 text-gray-300 w-full md:w-1/2">
+            <div className="bg-neutral-800 rounded-3xl p-10 text-gray-300 w-full md:w-1/2">
               <h2 className="text-white text-2xl font-semibold mb-4">Contact Information</h2>
               <p className="text-gray-400 mb-6">
-                Feel free to reach out! Below is our phone number, email, and location!
+                Reach out to the Soul Sisters team at:
               </p>
               <div className="space-y-4">
                 <div className="flex items-center space-x-3">
                   <FaPhone className="text-white" />
-                  <span>+1 (123) 456 7890</span>
+                  <span>+1 (647) 403-9110</span>
                 </div>
                 <div className="flex items-center space-x-3 pt-8 pb-8">
                   <FaEnvelope className="text-white" />
-                  <a href="mailto:PLACEHOLDER@PLEASECHANGE@IMPORTANT.COM"><span>awesome@gmail.com</span></a>
+                  <a href="mailto:pshulman@gmail.com"><span>pshulman@gmail.com</span></a>
                 </div>
                 <div className="flex items-center space-x-3">
                   <FaMapMarkerAlt className="text-white" />
-                  <span>NYC, New York</span>
+                  <span>Toronto, CA</span>
                 </div>
               </div>
             </div>
 
             {/* Contact Form */}
-            <form onSubmit={submitHandler} className="bg-neutral-800 rounded-3xl p-6 w-full md:w-1/2 space-y-6">
+            <form onSubmit={submitHandler} className="bg-neutral-800 rounded-3xl p-10 w-full md:w-1/2 space-y-6">
               <div>
                 <label htmlFor="name" className="text-neutral-400">Your name</label>
                 <input id="name" type="text" name="subject" required onBlur={e => setSubject(e.target.value)} className="w-full bg-transparent text-white border-b border-gray-500 focus:outline-none focus:border-gray-300 p-2 mt-1" />
diff --git a/app/news/page.module.css b/app/news/page.module.css
index 27a6f4b..5582ee6 100644
--- a/app/news/page.module.css
+++ b/app/news/page.module.css
@@ -7,17 +7,17 @@
     scroll-snap-type: y mandatory;
     /* padding-left: 10vw;
     padding-right: 10vw; */
-    padding: 6vh 6vw;
+    padding: 6rem;
     /* overflow-x: hidden; */
 }
 
 .newsTitle {
-    font-size: 3.5vw; /* Scales with viewport width for responsiveness */
+    font-size: 3rem; /* Scales with viewport width for responsiveness */
     color: #ffffff;
     /* padding-left: 5vw;  */
-    margin-top: 2vh; /* Adds some space above the title */
     text-align: left;
-    margin-bottom: -2vh;
+    margin-bottom: 40px;
+    margin-left: calc((100% - min(100%, 1280px)) / 2);
 }
 
 /* Ensures posts occupy the full width and center-align in the viewport */
@@ -25,19 +25,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1vh;
+    gap: 24px;
     width: 100%;
 
-}
-
-@media (max-width: 768px) {
-    .newsPage {
-        padding: 2vh 5vw;
-    }
-
-    .newsTitle {
-        font-size: 4vw;
-        margin-bottom: 0;
-    }
-
 }
\ No newline at end of file
diff --git a/app/news/page.tsx b/app/news/page.tsx
index 3c4b5b1..c77262f 100644
--- a/app/news/page.tsx
+++ b/app/news/page.tsx
@@ -11,17 +11,21 @@ export default async function NewsPage() {
         .find(query)
         .props("title,metadata");
 
+    console.log(JSON.stringify(response));
+
     return (
         <Suspense fallback={<div></div>}>
             <div className={styles.newsPage}>
                 <h1 className={styles.newsTitle}>News</h1>
                 <div className={styles.newsList}>
-                    {response.objects.map((post: { title: string; metadata: { date: string; image: { url: string; }; content: string; }; }, index: number) => (
+                    {response.objects.map((post: { title: string; metadata: { date: string; image: { url: string; }; video: { url: string; }; "youtube-video": string; content: string; }; }, index: number) => (
                         <Blog
                             key={index}
                             title={post.title}
                             date={post.metadata.date}
                             imageUrl={post.metadata?.image?.url}
+                            videoUrl={post.metadata?.video?.url}
+                            ytUrl={post.metadata?.["youtube-video"]}
                             description={post.metadata.content}
                         />
                     ))}
diff --git a/components/Blog/Blog.module.css b/components/Blog/Blog.module.css
index 6c880c7..18e2b07 100644
--- a/components/Blog/Blog.module.css
+++ b/components/Blog/Blog.module.css
@@ -1,13 +1,13 @@
 /* Blog.module.css */
 
 .blogContainer {
-    width: 100%;
+    width: min(100%, 1280px);
     /* height: 100%; */
     /* min-height: 70vh; */
     /* max-height: 70vh;  */
     /* margin: 5vh; Centering and adding equal top/bottom margins */
-    margin-top: 5vh;
-    margin-bottom: 5vh;
+    margin-top: 20px;
+    margin-bottom: 20px;
     /* margin-left: 5vh;
     margin-right: 5vh; */
     /* border: 2px solid #ddd; */
@@ -17,26 +17,24 @@
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
-    gap: 10% 1.5rem;
     /* padding: 8.4vh 8.3vw; */
-    padding: 10% 12% 15% 12%;
+    padding: 80px clamp(80px, 15%, 160px);
 }
 
 .blogHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 0vh;
-    margin-top: 0vh;
+    margin-bottom: 40px;
 }
 
 .blogTitle {
-    font-size: 2.5vw; /* Scales with viewport width */
+    font-size: 2.4rem; /* Scales with viewport width */
     color: #ffffff;
 }
 
 .blogDate {
-    font-size: 1.625vw; /* Scales with viewport width */
+    font-size: 1.625rem; /* Scales with viewport width */
     color: #ffffff;
 }
 
@@ -66,53 +64,4 @@
 .blogDescription {
     flex-grow: 1;
     overflow-y: auto;
-}
-
-/* Responsive adjustments for small screens */
-@media (max-width: 768px) {
-    .blogContainer {
-        width: 100%;
-        height: 100%;
-        max-height: 100vh; 
-        margin-top: 2vh;
-        margin-bottom: 2vh;
-        border-radius: 20px;
-        background-color: #5a5656;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: 5vh 8vw;
-    }
-    .blogContent {
-        flex-direction: column; /* Stack image and content vertically */
-    }
-
-    .blogImage {
-        width: 36%;
-        aspect-ratio: 1 / 1;
-        max-width: 100%;
-        max-height: 100%;
-        align-items: center;
-    }
-
-    .blogDescription {
-        margin-top: 1vh;
-        font-size: small;
-    }
-
-    .blogHeader {
-        flex-direction: column; /* Stack title and date */
-        align-items: flex-start;
-        gap: 0.5rem;
-    }
-
-    .blogDate {
-        text-align: left; 
-        font-size: 2vw;
-    }
-
-    .blogTitle {
-        font-size: 3.5vw; 
-    }
 }
\ No newline at end of file
diff --git a/components/Blog/Blog.tsx b/components/Blog/Blog.tsx
index a3b6917..9ecb08a 100644
--- a/components/Blog/Blog.tsx
+++ b/components/Blog/Blog.tsx
@@ -4,11 +4,16 @@ import Image from 'next/image';
 interface BlogProps {
     title: string;
     imageUrl: string;
+    videoUrl: string;
+    ytUrl: string;
     description: string;
     date: string;
 }
 
-export default function Blog({ title, imageUrl, description, date }: BlogProps) {
+export default function Blog({ title, imageUrl, videoUrl, ytUrl, description, date }: BlogProps) {
+    const ytRegex = /(?:https?:\/\/)?(?:www.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?:embed\/|v\/|watch\?v=|watch\?list=.*&v=)?((?:\w|-){11})(?:&list=(?:\w+)&?)?/;
+    const matches = ytUrl?.match(ytRegex) || ["no match"];
+    console.log(matches);
     return (
         <div className={styles.blogContainer}>
             <div className={styles.blogHeader}>
@@ -16,7 +21,9 @@ export default function Blog({ title, imageUrl, description, date }: BlogProps)
                 <span className={styles.blogDate}>{date}</span>
             </div>
             <div className={styles.blogContent}>
-                {imageUrl ? <Image width={400} height={400} src={imageUrl} alt={title} className={styles.blogImage} /> : <></>}
+                {imageUrl ? <Image width={400} height={400} src={imageUrl} alt={title} className={styles.blogImage} /> :
+                    videoUrl ? <video width={400} height={400} src={videoUrl} controls className={styles.blogImage} /> :
+                        ytUrl && matches.length > 1 ? <iframe width={400} height={400} src={`https://youtube.com/embed/${matches[1]}`} allow="fullscreen" className={styles.blogImage}></iframe> : <></>}
                 <p className={styles.blogDescription}>{description}</p>
             </div>
         </div>
diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index d83f090..f48f7de 100644
--- a/components/Navbar/Navbar.module.css
+++ b/components/Navbar/Navbar.module.css
@@ -54,6 +54,7 @@ so you could scale with screen area? this goes for both links and logo*/
     height: 2rem;
     margin-bottom: 1rem;
     margin-left: 0.5rem;
+    transition: all 0.3s ease;
 }
 
 .instagram-logo:hover {
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index ebbead5..4f8bd62 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -6,25 +6,27 @@ import styles from "./Navbar.module.css";
 import Image from "next/image";
 
 const routes = [
-  { href: "/about", label: "About" },
-  { href: "/news", label: "News" },
-  { href: "/gallery", label: "Gallery" },
-  { href: "/contact", label: "Contact Us" },
+    { href: "/about", label: "About" },
+    { href: "/news", label: "News" },
+    { href: "/gallery", label: "Gallery" },
+    { href: "/contact", label: "Contact Us" },
 ];
 
 export default function Navbar() {
-  const pathname = usePathname();
-  return (
+    const pathname = usePathname();
+    return (
         <nav className={styles.navbar}>
             <div className={styles["navbar-container"]}>
                 <div className={styles.menu}>
-                        <Image src="/Instagram_Glyph_White.png" 
-                        alt="Instagram Logo" 
-                        className={styles["instagram-logo"]} 
-                        width={100}
-                        height={100}
-                        loading="eager"
+                    <a href="https://www.instagram.com/soul_sisters2025/" target="_blank" rel="noreferrer noopener">
+                        <Image src="/Instagram_Glyph_White.png"
+                            alt="Instagram Logo"
+                            className={styles["instagram-logo"]}
+                            width={100}
+                            height={100}
+                            loading="eager"
                         />
+                    </a>
                     {routes.map((route) => (
                         <Link
                             key={route.href}
@@ -38,7 +40,7 @@ export default function Navbar() {
                 <Link href="/" className={styles["navbar-logo"]}>
                     Soul Sisters
                 </Link>
-                
+
             </div>
         </nav>
     );
diff --git a/components/about/AboutSection.tsx b/components/about/AboutSection.tsx
index 90bd551..d668aba 100644
--- a/components/about/AboutSection.tsx
+++ b/components/about/AboutSection.tsx
@@ -1,34 +1,33 @@
-// import cosmic from "@/lib/cosmicClient";
+import cosmic from "@/lib/cosmicClient";
 import Image from "next/image";
 
-export default function AboutSection() {
-    // const aboutData = await cosmic.objects
-    //     .findOne({
-    //         type: "about-page",
-    //         slug: "about-us",
-    //     })
-    //     .props("title,metadata")
-    //     .depth(1);
+export default async function AboutSection() {
+    const aboutData = await cosmic.objects
+        .findOne({
+            type: "about-page",
+            slug: "about-us",
+        })
+        .props("title,metadata")
+        .depth(1);
 
-    // const { title, metadata } = aboutData?.object || {};
-    // const description = metadata?.["content_of_box"] || "Default description";
-    // const image_url = metadata?.image?.url || "/default-image.jpg";
+    const { metadata } = aboutData?.object;
+    const title = metadata?.["title_of_page"] || "About";
+    const description = metadata?.["content_of_box"] || `Haitian-Canadian sisters Pem and Sonam Almonor Shulman based the script for Soul Sisters on their recent experiences at York University (Canada) and Brown University (USA), respectively.
+    Soul Sisters conveys the dreams and struggles of a generation with biting wit, flair and a passion for social justice.This slyly satiric take on the young immigrant university student coming of age tale will delight and inspire.
+    The sisters are mentored by NAACP Image Award Nominated filmmakers Jeanne Marie - Almonor and John Shulman.`;
+    const image_url = `${metadata?.image?.imgix_url}?q=40&auto=format,compress` || "/images/About.JPG";
     return (
         <div className="min-h-screen w-full flex flex-row items-center">
             {/* Left Section: Heading + Content */}
             <div style={{ margin: "auto", padding: "16px" }}>
                 <div className="flex flex-col max-w-xl">
                     <h2 className="text-4xl text-left mb-4 ml-4 py-16">
-                        {/* {title} */}
-                        About Us
+                        {title}
                     </h2>
                     <section className="bg-neutral-800 p-12 rounded-lg shadow-md">
                         <div className="flex flex-col w-full space-y-4 p-6" style={{ whiteSpace: 'pre-line' }}>
                             <p className="text-gray-200 leading-relaxed text-xl font-extralight">
-                                {/* {description} */}
-                                Haitian-Canadian sisters Pem and Sonam Almonor Shulman based the script for Soul Sisters on their recent experiences at York University (Canada) and Brown University (USA), respectively.
-
-                                Soul Sisters conveys the dreams and struggles of a generation with biting wit, flair and a passion for social justice. This slyly satiric take on the young immigrant university student coming of age tale will delight and inspire. The sisters are mentored by NAACP Image Award Nominated filmmakers Jeanne Marie-Almonor and John Shulman.
+                                {description}
                             </p>
                         </div>
                     </section>
@@ -37,11 +36,11 @@ export default function AboutSection() {
             {/* Right Section: Image (Full Height) */}
             <div className="h-screen justify-self-end">
                 <Image
-                    src="/images/About.JPG"
+                    src={image_url}
                     alt="film-picture"
                     className="object-cover w-full h-full rounded-lg shadow-lg"
-                    width={1536}
-                    height={2304}
+                    width={metadata?.width || 1536}
+                    height={metadata?.height || 2304}
                     loading="eager"
                 />
             </div>