feat: add Add Event button to homepage CTA and refine styling by Kabe-Innovates · Pull Request #474 · FOSSUChennai/Communities

Kabe-Innovates · 2025-12-15T12:56:47Z

This PR adds a new "Add Event" button to the homepage Call-to-Action section, enabling users to navigate directly to the event submission form. It also refines the component's styling for better consistency and visual appeal.

Changes:

Introduced a new "Add Event" link button routing to /add-event
Updated button styles to use consistent 'btn' classes with improved hover and focus effects
Polished gradient background, text contrast, and overall layout

Kabe-Innovates · 2025-12-15T13:06:12Z

Reference Imgs :

Copilot

Pull request overview

This PR adds a new "Add Event" button to the homepage Call-to-Action section and introduces a comprehensive design system refresh with consistent styling utilities. The changes enable users to directly submit events via a form-based workflow while modernizing the visual appearance across all pages.

Key Changes

Added /add-event page with a comprehensive event submission form that generates JSON for GitHub PR contributions
Introduced reusable CSS utility classes (.btn, .surface, .section-title, .badge) in globals.css for design consistency
Refactored component styling to use the new utility classes, improving maintainability and visual consistency

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
`src/components/pages/add-event/AddEventForm.tsx`	New component with form validation, JSON generation, and step-by-step submission instructions
`src/app/add-event/page.tsx`	New page route for the event submission form
`src/components/pages/home/calltoaction.tsx`	Added "Add Event" Link button alongside existing CTA buttons
`src/app/globals.css`	Defined new utility classes for buttons, surfaces, badges, and typography
`src/components/shared/header.tsx`	Applied new utility classes and improved layout spacing
`src/components/shared/footer.tsx`	Updated styling with new utility classes and improved link presentation
`src/components/pages/home/hero.tsx`	Refined spacing, typography, and gradient effects
`src/components/pages/home/events.tsx`	Applied badge and surface utility classes for consistency
`src/components/pages/Communities/Community.tsx`	Updated to use new design system utilities
`src/components/pages/Archive/archive.tsx`	Applied new styling utilities and improved filter/sort UI
`src/components/github-button.tsx`	Simplified styling using utility classes
`src/app/page.tsx`	Cleaned up wrapper structure using new container utility
`src/app/not-found.tsx`	Updated color values to match new design tokens
`src/app/layout.tsx`	Updated body classes for improved layout
`src/app/Communities/page.tsx`	Code formatting improvements
`package-lock.json`	Standard npm peer dependency updates

Comments suppressed due to low confidence (1)

src/components/pages/home/calltoaction.tsx:54

The "Communities" button uses a Next.js Link component pattern (<Link>) for the "Add Event" button on line 43-48, but continues to use router.push() with a regular <button> for the "Communities" button on lines 49-54. For consistency and better Next.js performance benefits (prefetching, faster navigation), both buttons should use the Link component with proper styling rather than mixing Link and router.push patterns.

            <button
              className='btn bg-white/15 px-6 py-3 text-base text-white hover:bg-white/20 focus-visible:ring-white/30'
              onClick={() => router.push('/Communities')}
            >
              Communities
            </button>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-15T13:11:53Z

src/components/pages/add-event/AddEventForm.tsx

+          {logoHostname && logoHostAllowed === false && (
+            <div className='rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900'>
+              The logo host <span className='font-medium'>{logoHostname}</span> might not be allowed
+              by Next.js image settings. If the logo doesn’t show up after merge, a maintainer may
+              need to add the hostname to <span className='font-medium'>next.config.ts</span>.
+            </div>
+          )}


The logo hostname validation checks against ALLOWED_LOGO_HOSTS, but the warning message suggests this is about Next.js image configuration. However, the check doesn't validate whether the hostname is actually in the Next.js config - it only checks against a hardcoded list. This could lead to false positives (showing warnings for hosts that ARE configured) or false negatives (not warning about hosts that AREN'T configured). Consider either removing this check, or fetching the actual Next.js image config to validate against it.

Suggested change

{logoHostname && logoHostAllowed === false && (

<div className='rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900'>

The logo host <span className='font-medium'>{logoHostname}</span> might not be allowed

by Next.js image settings. If the logo doesn’t show up after merge, a maintainer may

need to add the hostname to <span className='font-medium'>next.config.ts</span>.

</div>

)}

Copilot · 2025-12-15T13:11:54Z

src/components/pages/add-event/AddEventForm.tsx

+        <div className='grid h-8 w-8 place-items-center rounded-full bg-green-600 text-sm font-semibold text-white shadow-sm'>
+          {number}
+        </div>
+        {number !== 3 && <div className='mt-2 h-full w-px bg-green-200' />}


The Step component hardcodes number !== 3 to determine whether to show the connector line. This creates a tight coupling between the step logic and the specific number of steps in the implementation. If the number of steps changes in the future, this condition would need manual updating. Consider accepting an isLast prop or deriving this from the parent component to make it more maintainable.

Copilot · 2025-12-15T13:11:54Z

src/components/pages/add-event/AddEventForm.tsx

+          <button
+            className='btn btn-primary'
+            onClick={() => {
+              markAllTouched();
+              if (!isFormValid) return;
+              copyJson();
+            }}
+          >
+            {copyStatus === 'copied'
+              ? 'Copied!'
+              : copyStatus === 'failed'
+                ? 'Copy failed'
+                : 'Copy JSON'}
+          </button>
+
+          <button
+            className='btn btn-secondary'
+            onClick={() => {
+              markAllTouched();
+              if (!isFormValid) return;
+              downloadJson();
+            }}


The markAllTouched function is called before checking isFormValid in both button click handlers. This means if users click the buttons with invalid fields, all fields will be marked as touched (showing all errors), but the action won't proceed. While this is functional, it might be better UX to either show a toast/message explaining why the action didn't proceed, or to ensure the validation errors are clearly visible when all fields are marked touched.

Copilot · 2025-12-15T13:11:54Z

src/components/pages/home/calltoaction.tsx

+              className='btn bg-white/15 px-6 py-3 text-base text-white hover:bg-white/20 focus-visible:ring-white/30'
+            >
+              Add Event
+            </Link>
            <button
-              className='rounded-lg border border-white/50 bg-transparent px-6 py-3 text-base font-medium text-white transition-all duration-300 hover:scale-105 hover:bg-white/20 focus:ring focus:ring-white/30 active:scale-95'
+              className='btn bg-white/15 px-6 py-3 text-base text-white hover:bg-white/20 focus-visible:ring-white/30'


The 'focus-visible' pseudo-class is used in the .btn utility class, but the CallToAction buttons on lines 45 and 50 use 'focus-visible:ring-white/30' which overrides the default green ring. While this is intentional for the specific visual context (white text on green background), it's inconsistent with the base .btn class definition. Consider creating a .btn-inverse or similar variant in globals.css for buttons on colored backgrounds to maintain consistency.

Copilot · 2025-12-15T13:11:55Z

src/components/pages/home/calltoaction.tsx

 'use client';
 import React from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';


Since the Link component is already imported and used for the "Add Event" button, the useRouter import on line 4 is now only used for the "Communities" button. This adds unnecessary client-side JavaScript and complexity. Consider replacing the router.push pattern with Link for the Communities button to eliminate the need for useRouter entirely.

Copilot · 2025-12-15T13:11:55Z

src/components/shared/header.tsx

+            className='btn btn-ghost'
+            target='_blank'
+            aria-label='Subscribe to RSS feed (opens in a new tab)'
+            title='RSS feed'


The RSS link has both aria-label and title attributes with similar but not identical content. The aria-label says "Subscribe to RSS feed (opens in a new tab)" while the title says "RSS feed". For better accessibility, these should be consistent. Consider using just the aria-label (which is read by screen readers) or ensure both convey the same complete information, particularly the fact that it opens in a new tab.

Suggested change

title='RSS feed'

title='Subscribe to RSS feed (opens in a new tab)'

Copilot · 2025-12-15T13:11:55Z

src/components/pages/add-event/AddEventForm.tsx

+              onBlur={onBlur('eventDescription')}
+              placeholder='Brief description of the event...'
+              error={touched.eventDescription ? errors.eventDescription : undefined}
+              helper={`${Math.min(form.eventDescription.length, 999)}/200`}


The character counter displays up to 999 characters (Math.min(form.eventDescription.length, 999)), but the validation only allows 200 characters. This inconsistency could confuse users. The counter should either cap at 200 to match the validation limit, or use the actual length without capping.

Suggested change

helper={`${Math.min(form.eventDescription.length, 999)}/200`}

helper={`${Math.min(form.eventDescription.length, 200)}/200`}

Sarveshmrao · 2025-12-24T13:15:52Z

@Kabe-Innovates amazing PR.
TT was created to consolidate tech events happening across TN, at the same time encouraging people towards open source contribution.
I understand that this makes contributing easier by generating the JSON. But adds unwanted complexity to the website.
As of now, I feel it is kinda not required.

@JustinBenito and @nammahari your views please.

Kabe-Innovates · 2025-12-26T11:16:56Z

Closing this in favor of PR #479

Copilot AI review requested due to automatic review settings December 15, 2025 12:56

Copilot started reviewing on behalf of Kabe-Innovates December 15, 2025 13:06 View session

Copilot AI reviewed Dec 15, 2025

View reviewed changes

Kabe-Innovates closed this Dec 26, 2025

Kabe-Innovates force-pushed the main branch from edc64c4 to a7a1650 Compare December 26, 2025 09:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: add Add Event button to homepage CTA and refine styling#474

feat: add Add Event button to homepage CTA and refine styling#474
Kabe-Innovates wants to merge 0 commit intoFOSSUChennai:mainfrom
Kabe-Innovates:main

Kabe-Innovates commented Dec 15, 2025

Uh oh!

Kabe-Innovates commented Dec 15, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Copilot AI Dec 15, 2025

Uh oh!

Sarveshmrao commented Dec 24, 2025

Uh oh!

Kabe-Innovates commented Dec 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	title='RSS feed'
	title='Subscribe to RSS feed (opens in a new tab)'

	helper={`${Math.min(form.eventDescription.length, 999)}/200`}
	helper={`${Math.min(form.eventDescription.length, 200)}/200`}

Comments

Conversation

Kabe-Innovates commented Dec 15, 2025

Uh oh!

Kabe-Innovates commented Dec 15, 2025

Reference Imgs :

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Sarveshmrao commented Dec 24, 2025

Uh oh!

Kabe-Innovates commented Dec 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants