diff --git a/app/__tests__/ImageCTACard.test.tsx b/app/__tests__/ImageCTACard.test.tsx index b29caaf..5f1ca2d 100644 --- 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(); - - // 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 index 54f0314..1a3b6d8 100644 --- 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 ( + + ); +}; + +export const ChevronArrowSpan = ({ children, className }: { children: React.ReactNode, className?: string }) => { return ( {children} diff --git a/app/components/ImageCTACard.tsx b/app/components/ImageCTACard.tsx index 5fcfef4..40098d3 100644 --- a/app/components/ImageCTACard.tsx +++ b/app/components/ImageCTACard.tsx @@ -7,8 +7,8 @@ interface ImageCTACardProps { const ImageCTACard = ({ Image, Content, CTA }: ImageCTACardProps) => { return ( -
-
+
+
{Image}
diff --git a/app/globals.css b/app/globals.css index 0e60c8c..21337f3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -20,7 +20,7 @@ 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 { @@ -28,11 +28,11 @@ h5 { } 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 */ + } } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 64f1a5f..ae21ae8 100644 --- 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 (
-

Upcoming Events

+

Events

{ 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

No newsletters available

; } return ( -
-

Latest Newsletter

-
-

{latestNewsletter.title}

-

{latestNewsletter.description}

-

Published on: {new Date(latestNewsletter._createdAt).toLocaleDateString()}

- - - - - +
+

Newsletters

+
+
Through GDSC McMaster University'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.
+
+
{newsletterCount}
+

Monthly newsletters available to read.

+
+
+ + +
View all newsletters
+ +
+
+
+
What?
+

Newsletters covering the latest and greatest in all things tech!

+
+
+
When?
+

The newsletter is delivered once at the beginning of every month.

+
+
+
Why?
+

To keep you up-to-date with the latest and greatest in the industry.

+
+
+
+ {/* Image with gradient overlay */} +
+ Newsletter illustration + {/* Gradient overlay */} +
+ {/* Title/logo centered */} +
+

+ {latestNewsletter.title} +

+
+
+ {/* Content section */} +
+

{latestNewsletter.description}

+ + + Read the newsletter + + +
+
); diff --git a/assets/illustrations/newsletter.svg b/assets/illustrations/newsletter.svg new file mode 100644 index 0000000..5e7cce6 --- /dev/null +++ b/assets/illustrations/newsletter.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index ca4b92e..179d1bd 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -39,6 +39,7 @@ export default { lightGreen: "#CEEAD6", lightGrey: "#F1F3F4", grey: "#9AA0A6", + darkGrey: "#2C2E31", black: "#202124", }, }, @@ -51,6 +52,9 @@ export default { to: { transform: 'translateX(-100%)' }, }, }, + backgroundImage: { + 'newsletter-card-gradient': '', + }, }, }, variants: {