From 39834f2602277b90cce6241d538af3c4497085ed Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 10 Oct 2024 23:09:57 -0400 Subject: [PATCH 1/6] basic layour and carousel --- app/components/ChevronArrow.tsx | 15 ++++++-- app/components/GradientCard.tsx | 10 ++++++ app/globals.css | 12 +++++++ app/page.tsx | 62 +++++++++++++++++++++++++-------- tailwind.config.ts | 3 ++ 5 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 app/components/GradientCard.tsx 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/GradientCard.tsx b/app/components/GradientCard.tsx new file mode 100644 index 0000000..709c2c5 --- /dev/null +++ b/app/components/GradientCard.tsx @@ -0,0 +1,10 @@ + +const GradientCard = ({ children }: { children: React.ReactNode}) => { + return ( +
+ {children} +
+ ); +}; + +export default GradientCard; diff --git a/app/globals.css b/app/globals.css index 0e60c8c..a67fcf8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 2f1d99b..73e92bf 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 { ChevronArrowButton, ChevronArrowSpan } from "@/app/components/ChevronArrow"; import { MdHandyman, MdForum, MdCode, MdGroup } from "react-icons/md"; +import GradientCard from "./components/GradientCard"; const HeroSection = () => (
@@ -89,7 +90,7 @@ const EventsSection = async () => { return (
-

Upcoming Events

+

Events

{ upcomingEvents.map((event: Event) => { const { icon, color } = eventTypeStyles[event.type] || { icon: null, color: 'google-blue' }; @@ -150,18 +151,51 @@ const NewslettersSection = async () => { } return ( -
-

Latest Newsletter

-
-

{latestNewsletter.title}

-

{latestNewsletter.description}

-

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

- - - - - - +
+

Newsletters

+
+
+

+ GDSC at McMaster University's newsletter is a monthly publication + that highlights the latest news and updates in the tech industry. +

+

+ Read the latest newsletter to stay up-to-date with the latest trends + and developments in the tech industry. The newsletter is published + to our website and sent to subscribers via email. +

+ + + View all newsletters + + +
+
); diff --git a/tailwind.config.ts b/tailwind.config.ts index ca4b92e..7fc2e1a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -51,6 +51,9 @@ export default { to: { transform: 'translateX(-100%)' }, }, }, + backgroundImage: { + 'newsletter-card-gradient': 'radial-gradient(at 9.016090630316054% 23.69609324243742%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 1) 0%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 0) 100%), radial-gradient(at 61.12928306290213% 45.67635897386859%, hsla(0, 84.35754189944133%, 35.09803921568628%, 1) 0%, hsla(0, 84.35754189944133%, 35.09803921568628%, 0) 100%), radial-gradient(at 17.976018793646475% 71.92427310490037%, hsla(141.81818181818184, 77.19298245614036%, 22.352941176470587%, 1) 0%, hsla(141.81818181818184, 77.19298245614036%, 22.352941176470587%, 0) 100%), radial-gradient(at 48.178180041925245% 14.825659179108186%, hsla(44.69635627530365, 96.8627450980392%, 50%, 1) 0%, hsla(44.69635627530365, 96.8627450980392%, 50%, 0) 100%), radial-gradient(at 46.96613899942032% 92.88640904679764%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 1) 0%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 0) 100%)', + }, }, }, variants: { From da547eff9484ac2818fe44d6143f1b54baa8e54f Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 10 Oct 2024 23:23:05 -0400 Subject: [PATCH 2/6] replaced carousel with basic card --- app/components/GradientCard.tsx | 2 +- app/page.tsx | 33 ++++++++------------------------- 2 files changed, 9 insertions(+), 26 deletions(-) diff --git a/app/components/GradientCard.tsx b/app/components/GradientCard.tsx index 709c2c5..bae0265 100644 --- a/app/components/GradientCard.tsx +++ b/app/components/GradientCard.tsx @@ -1,7 +1,7 @@ const GradientCard = ({ children }: { children: React.ReactNode}) => { return ( -
+
{children}
); diff --git a/app/page.tsx b/app/page.tsx index 73e92bf..bbb1feb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -170,31 +170,14 @@ const NewslettersSection = async () => {
-
From eb579c97837eefc4ff335c2324bb73d815c3a371 Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 10 Oct 2024 23:23:25 -0400 Subject: [PATCH 3/6] removing unused components --- app/components/GradientCard.tsx | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 app/components/GradientCard.tsx diff --git a/app/components/GradientCard.tsx b/app/components/GradientCard.tsx deleted file mode 100644 index bae0265..0000000 --- a/app/components/GradientCard.tsx +++ /dev/null @@ -1,10 +0,0 @@ - -const GradientCard = ({ children }: { children: React.ReactNode}) => { - return ( -
- {children} -
- ); -}; - -export default GradientCard; From 9b33c824911948dde29eb7816ca5dd89d52ceaa2 Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 24 Oct 2024 13:41:24 -0400 Subject: [PATCH 4/6] section in a decent state --- app/components/ImageCTACard.tsx | 4 +- app/globals.css | 4 +- app/page.tsx | 64 +++++++++++++++++++---------- assets/illustrations/newsletter.svg | 35 ++++++++++++++++ tailwind.config.ts | 3 +- 5 files changed, 84 insertions(+), 26 deletions(-) create mode 100644 assets/illustrations/newsletter.svg 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 a67fcf8..1cfdbac 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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-grey 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 { diff --git a/app/page.tsx b/app/page.tsx index bbb1feb..7a0bdb3 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,7 +11,7 @@ import Image from "next/image"; import Tag from "@/app/components/Tag"; import { ChevronArrowButton, ChevronArrowSpan } from "@/app/components/ChevronArrow"; import { MdHandyman, MdForum, MdCode, MdGroup } from "react-icons/md"; -import GradientCard from "./components/GradientCard"; +import newsletter from "@/assets/illustrations/newsletter.svg"; const HeroSection = () => (
@@ -153,31 +153,53 @@ const NewslettersSection = async () => { return (

Newsletters

-
+
-

- GDSC at McMaster University's newsletter is a monthly publication - that highlights the latest news and updates in the tech industry. -

-

- Read the latest newsletter to stay up-to-date with the latest trends - and developments in the tech industry. The newsletter is published - to our website and sent to subscribers via email. -

- - +
+
What?
+

GDSC McMaster U presents a newsletter covering all things tech, from the latest frameworks, to news, and much more!

+
+
+
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!

+
+ + View all newsletters
-
-

{latestNewsletter.title}

-

{latestNewsletter.description}

- - - Read the full story - - +
+ {/* 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 7fc2e1a..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", }, }, @@ -52,7 +53,7 @@ export default { }, }, backgroundImage: { - 'newsletter-card-gradient': 'radial-gradient(at 9.016090630316054% 23.69609324243742%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 1) 0%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 0) 100%), radial-gradient(at 61.12928306290213% 45.67635897386859%, hsla(0, 84.35754189944133%, 35.09803921568628%, 1) 0%, hsla(0, 84.35754189944133%, 35.09803921568628%, 0) 100%), radial-gradient(at 17.976018793646475% 71.92427310490037%, hsla(141.81818181818184, 77.19298245614036%, 22.352941176470587%, 1) 0%, hsla(141.81818181818184, 77.19298245614036%, 22.352941176470587%, 0) 100%), radial-gradient(at 48.178180041925245% 14.825659179108186%, hsla(44.69635627530365, 96.8627450980392%, 50%, 1) 0%, hsla(44.69635627530365, 96.8627450980392%, 50%, 0) 100%), radial-gradient(at 46.96613899942032% 92.88640904679764%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 1) 0%, hsla(216.9230769230769, 75.66137566137566%, 37.05882352941177%, 0) 100%)', + 'newsletter-card-gradient': '', }, }, }, From be542c060c1d9607f457e3c506b784ed4c3ad057 Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 24 Oct 2024 14:15:53 -0400 Subject: [PATCH 5/6] light and dark mode support --- app/globals.css | 4 ++-- app/page.tsx | 55 +++++++++++++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/app/globals.css b/app/globals.css index 1cfdbac..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,7 +28,7 @@ h5 { } h6 { - @apply text-base sm:text-lg lg:text-xl font-medium text-google-grey dark:text-google-lightGrey; + @apply text-base sm:text-lg lg:text-xl font-medium text-google-darkGrey dark:text-google-lightGrey; } p { diff --git a/app/page.tsx b/app/page.tsx index 7a0bdb3..a7c235b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -10,7 +10,7 @@ import ImageCTACard from "@/app/components/ImageCTACard"; import Image from "next/image"; import Tag from "@/app/components/Tag"; import { ChevronArrowButton, ChevronArrowSpan } from "@/app/components/ChevronArrow"; -import { MdHandyman, MdForum, MdCode, MdGroup } from "react-icons/md"; +import { MdHandyman, MdForum, MdCode, MdGroup, MdArticle, MdCalendarToday, MdLightbulb } from "react-icons/md"; import newsletter from "@/assets/illustrations/newsletter.svg"; const HeroSection = () => ( @@ -146,32 +146,43 @@ const NewslettersSection = async () => { }` ); + const newsletterCount = await client.fetch( + `count(*[_type == "newsletter"])` + ); + if (!latestNewsletter) { return

No newsletters available

; } return ( -
-

Newsletters

-
-
-
-
What?
-

GDSC McMaster U presents a newsletter covering all things tech, from the latest frameworks, to news, and much more!

-
-
-
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!

+
+

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 - - +
+ + +
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 */} @@ -195,7 +206,7 @@ const NewslettersSection = async () => {

{latestNewsletter.description}

- + Read the newsletter From 7896dfa0ac5956a8f6d2ff773a52e89a14cd7229 Mon Sep 17 00:00:00 2001 From: Aidan Froggatt Date: Thu, 24 Oct 2024 14:20:02 -0400 Subject: [PATCH 6/6] fixing tests --- app/__tests__/ImageCTACard.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) 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'); - }); });