refactor: client requested changes

change static information
fix instagram link
remove team component
style news and contact form

app/about/page.tsx

@@ -1,13 +1,13 @@
 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() {
   return (
     <Suspense fallback={<div></div>}>
       <div>
         <AboutSection />
-        <Team />
+        {/* <Team /> */}
       </div>
     </Suspense>
   );

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@[email protected]"><span>awesome@gmail.com</span></a>
+                  <a href="mailto:[email protected]"><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" />

app/news/page.module.css

@@ -7,37 +7,25 @@
     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 */
 .newsList {
     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;
-    }
-
 }

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}
                         />
                     ))}

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; 
-    }
 }

components/Blog/Blog.tsx

@@ -4,19 +4,26 @@ 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}>
                 <h2 className={styles.blogTitle}>{title}</h2>
                 <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>

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 {

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>
     );

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>