Merge pull request #9 from DSC-McMaster-U/feature/MB-29-newsletter-se…

…ction Feature/mb 29 newsletter section
DSC-McMaster-U · Oct 24, 2024 · c569359 · c569359
2 parents d5d2c3c + 8145dfe
commit c569359
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 32 deletions.
diff --git a/app/__tests__/ImageCTACard.test.tsx b/app/__tests__/ImageCTACard.test.tsx
@@ -20,15 +20,4 @@ describe('ImageCTACard', () => {
         // Check if the CTA button is in the document
         expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
     });
-
-    test('applies the correct classes for hover effect', () => {
-        const { container } = render(<ImageCTACard Image={mockImage} Content={mockContent} CTA={mockCTA} />);
-
-        // Ensure the component is rendered with the correct initial classes
-        expect(container.firstChild).toHaveClass('relative group w-full h-[32rem] bg-white dark:bg-google-grey dark:bg-opacity-10 rounded-md overflow-hidden shadow-lg p-1');
-
-        // Simulate hover state
-        const card = container.firstChild;
-        expect(card).toHaveClass('group');
-    });
 });
diff --git a/app/components/ChevronArrow.tsx b/app/components/ChevronArrow.tsx
@@ -1,10 +1,21 @@
 import "@/styles/ChevronArrow.css";
 import "@/styles/ChevronArrow.css";
 
-export const ChevronArrowSpan = ({ children }: { children: React.ReactNode }) => {
+export const ChevronArrowButton = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+    return (
+        <button 
+            className={`${className} flex flex-row justify-between items-center button-arrow gap-x-1 px-4 py-1 rounded-full backdrop-blur`}
+        >
+            {children}
+            <ChevronArrow/>
+        </button>
+    );
+};
+
+export const ChevronArrowSpan = ({ children, className }: { children: React.ReactNode, className?: string }) => {
     return (
         <span 
-            className={`flex flex-row justify-between items-center button-arrow text-neutral-light gap-x-1 rounded-full backdrop-blur`}
+            className={`${className} flex flex-row items-center button-arrow gap-x-1 rounded-full backdrop-blur`}
         >
             {children}
             <ChevronArrow/>

diff --git a/app/components/ImageCTACard.tsx b/app/components/ImageCTACard.tsx
@@ -7,8 +7,8 @@ interface ImageCTACardProps {
 
 const ImageCTACard = ({ Image, Content, CTA }: ImageCTACardProps) => {
     return (
-        <div className="relative group w-full h-[32rem] bg-white dark:bg-google-grey dark:bg-opacity-10 rounded-md overflow-hidden shadow-lg p-1">
-            <div className="relative h-72 overflow-hidden rounded-md transition-all duration-200 ease-in-out hover-none:h-64 group-hover:h-64 bg-google-lightGrey dark:bg-google-black">
+        <div className="relative group w-full h-96 md:h-[32rem] bg-white dark:bg-google-grey dark:bg-opacity-10 rounded-md overflow-hidden shadow-lg p-1">
+            <div className="relative h-72 overflow-hidden rounded-md transition-all duration-200 ease-in-out hover-none:h-44 group-hover:h-64 bg-google-lightGrey dark:bg-google-black">
                 {Image}
             </div>
             <div className="p-4 flex flex-col gap-y-2">

diff --git a/app/globals.css b/app/globals.css
@@ -20,19 +20,19 @@ h3 {
 }
 
 h4 {
-  @apply text-2xl sm:text-3xl lg:text-4xl font-bold;
+  @apply text-2xl sm:text-3xl lg:text-4xl font-bold text-google-darkGrey dark:text-google-lightGrey;
 }
 
 h5 {
   @apply text-xl sm:text-2xl lg:text-3xl font-bold;
 }
 
 h6 {
-  @apply text-lg sm:text-xl lg:text-2xl font-bold;
+  @apply text-base sm:text-lg lg:text-xl font-medium text-google-darkGrey dark:text-google-lightGrey;
 }
 
 p {
-  @apply text-base sm:text-lg lg:text-xl;
+  @apply text-sm sm:text-base lg:text-lg dark:text-google-lightGrey text-google-grey;
 }
 
 main {
@@ -46,4 +46,16 @@ section {
 header {
   @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
   @apply py-2 sm:py-4 lg:py-6;
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -9,8 +9,9 @@ import { Event } from "@/types/sanity";
 import ImageCTACard from "@/app/components/ImageCTACard";
 import Image from "next/image";
 import Tag from "@/app/components/Tag";
-import { ChevronArrowSpan } from "@/app/components/ChevronArrow";
-import { MdHandyman, MdForum, MdCode, MdGroup } from "react-icons/md";
+import { ChevronArrowButton, ChevronArrowSpan } from "@/app/components/ChevronArrow";
+import { MdHandyman, MdForum, MdCode, MdGroup, MdArticle, MdCalendarToday, MdLightbulb } from "react-icons/md";
+import newsletter from "@/assets/illustrations/newsletter.svg";
 
 
 const HeroSection = () => (
@@ -90,7 +91,7 @@ const EventsSection = async () => {
 
   return (
     <section id="events" className="flex flex-col gap-y-8">
-      <h2>Upcoming Events</h2>
+      <h2>Events</h2>
       <div id="event-cards" className="grid md:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-8">
         { upcomingEvents.map((event: Event) => {
           const { icon, color } = eventTypeStyles[event.type] || { icon: null, color: 'google-blue' };
@@ -146,23 +147,72 @@ const NewslettersSection = async () => {
     }`
   );
 
+  const newsletterCount = await client.fetch(
+    `count(*[_type == "newsletter"])`
+  );
+
   if (!latestNewsletter) {
     return <p>No newsletters available</p>;
   }
 
   return (
-    <section id="newsletters">
-      <h2>Latest Newsletter</h2>
-      <div>
-        <h3>{latestNewsletter.title}</h3>
-        <p>{latestNewsletter.description}</p>
-        <p>Published on: {new Date(latestNewsletter._createdAt).toLocaleDateString()}</p>
-        <Link href={`/newsletters/${latestNewsletter.slug.current}`}>
-          <button>Read Latest Newsletter</button>
-        </Link>
-        <Link href="/newsletters">
-          <button>View All Newsletters</button>
+      <section id="newsletters" className="flex flex-col gap-y-8">
+        <h2>Newsletters</h2>
+        <div className="flex flex-col md:flex-row md:gap-x-8 md:gap-y-0 gap-y-8 md:items-center">
+          <h6 className="md:w-4/5 dark:text-google-lightGrey text-google-grey">Through GDSC McMaster University&apos;s monthly newsletter, stay updated on the latest tech news, events, and innovations. Featuring industry trends, club highlights, and upcoming activities, the newsletter connects members to valuable insights and opportunities in the tech world.</h6>
+          <div className="md:w-1/5 flex flex-col gap-y-2">
+            <h5>{newsletterCount}</h5>
+            <p className="text-sm"><span className="text-google-darkGrey dark:text-google-lightGrey">Monthly newsletters</span> available to read.</p>
+          </div>
+        </div>
+        <Link href="/newsletters" className="w-fit">
+          <ChevronArrowSpan className="hover:text-google-grey duration-200 transition-colors">
+            <h6>View all newsletters</h6>
+          </ChevronArrowSpan>
         </Link>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+          <div className="flex flex-col gap-y-6">
+            <div className="flex flex-col gap-y-2">
+              <h6 className="flex flex-row items-center gap-x-1"><MdArticle/>What?</h6>
+              <p>Newsletters covering the latest and greatest in all things tech!</p>
+            </div>
+            <div className="flex flex-col gap-y-2">
+              <h6 className="flex flex-row items-center gap-x-1"><MdCalendarToday/>When?</h6>
+              <p>The newsletter is delivered once at the beginning of every month.</p>
+            </div>
+            <div className="flex flex-col gap-y-2">
+              <h6 className="flex flex-row items-center gap-x-1"><MdLightbulb/>Why?</h6>
+              <p>To keep you up-to-date with the latest and greatest in the industry.</p>
+            </div>
+        </div>
+        <div className="relative flex flex-col w-full h-auto shadow-lg rounded-md overflow-hidden">
+          {/* Image with gradient overlay */}
+          <div className="relative h-52">
+            <Image
+              src={newsletter}
+              alt="Newsletter illustration"
+              fill
+              className="object-cover object-top"
+            />
+            {/* Gradient overlay */}
+            <div className="absolute inset-0 bg-gradient-to-t from-white dark:from-google-darkGrey to-transparent" />
+            {/* Title/logo centered */}
+            <div className="absolute inset-0 flex justify-center items-center">
+              <h4 className="text-center">
+                {latestNewsletter.title}
+              </h4>
+            </div>
+          </div>
+          {/* Content section */}
+          <div className="bg-white dark:bg-google-darkGrey px-6 pb-8 flex flex-col gap-y-6">
+            <p>{latestNewsletter.description}</p>
+            <Link href={`newsletters/${latestNewsletter.slug.current}`} className="w-fit">
+              <ChevronArrowButton className="bg-google-darkGrey hover:bg-google-grey transition-colors duration-200 text-google-lightGrey dark:bg-google-lightGrey dark:text-black">
+                Read the newsletter
+              </ChevronArrowButton>
+            </Link>
+          </div>
+        </div>
       </div>
     </section>
   );