feat: Create Landing Page for IIITBuzz [Task 2] by consoledotaman · Pull Request #20 · p-society/iiitbuzz

consoledotaman · 2025-07-05T15:59:58Z

This PR creates a landing page for unauthorised users with prominent login and signup buttons

Checklist

🚀 Brief introduction to IIITBuzz and its purpose as a community forum for IIIT students.
🌟 Key features/highlights of the platform, such as:
- 💬 Discussion boards
- ❓ Q&A sections
- 📅 Event announcements
- 📚 Study resources
🟧 Prominent call-to-action (CTA) buttons for Sign Up and Log In.
🔗 Footer with links to About, Contact, and relevant policies.
📱 Responsive UI for mobile devices (Collapsed sidebar)

Signed-off-by: ujsquared <ujsquared@gmail.com> Signed-off-by: amanraj <raj.aman4001@gmail.com>

Signed-off-by: amanraj <raj.aman4001@gmail.com>

gemini-code-assist

Summary of Changes

Hello @consoledotaman, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a brand new, visually striking landing page for unauthorized users of the IIITBuzz platform. The primary objective is to create an inviting and informative entry point that showcases the platform's core functionalities and encourages user registration or login. The changes encompass the creation of several new React components for the landing page sections, the implementation of a unique 'neo-brutalism' design with custom animations and fonts, and a significant update to the application's global styling and root layout to seamlessly integrate this new user experience.

Highlights

New Landing Page Implementation: A complete, visually distinct landing page has been introduced for unauthorized users, featuring a hero section, key platform features, and a comprehensive footer.
Modern UI/UX Design: The landing page adopts a 'neo-brutalism' inspired design aesthetic, incorporating pixel fonts, bold borders, and various animations (e.g., glitch, bounce, float, sway) to create an engaging and unique user experience.
Modular Component Structure: The new landing page is built using a set of dedicated React components (Hero, FeaturesPage, Footer, Header) for improved code organization and maintainability.
Updated Theming and Styling: The application's global CSS variables have been significantly revamped with a new color palette (using hex codes instead of oklch), and a dedicated landingpage.css file has been added to encapsulate specific styles and animations for the new landing page.
Core Layout Restructuring: The main application layout in root.tsx has been updated from a grid-based system to a flexbox-based one, accommodating the new landing page structure and removing the previous global header.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a new landing page for the IIITBuzz application. The review identified critical issues with the dark theme configuration and button interactivity, along with high-severity visual bugs due to invalid Tailwind CSS classes. Additionally, there are medium-severity issues related to maintainability and SEO. Addressing these points will significantly improve the landing page.

gemini-code-assist · 2025-07-05T16:03:23Z

apps/web/src/components/LandingPage/hero.tsx

+						<Button
+							size="lg"
+							className="neo-brutal-button bg-foreground text-black hover:bg-primary/90 border-primary text-lg px-8 py-6 ghibli-button"
+						>
+							🚀 JOIN THE BUZZ
+						</Button>
+						<Button
+							size="lg"
+							variant="outline"
+							className="neo-brutal-button bg-secondary border-primary text-primary hover:bg-secondary  hover:text-black text-lg px-8 py-6 ghibli-button"
+						>
+							📖 EXPLORE FIRST
+						</Button>
+					</div>


The main call-to-action buttons "JOIN THE BUZZ" and "EXPLORE FIRST" are not interactive. They should navigate to other pages or trigger an action. Wrap the Button components in a Link component for navigation, or an <a> tag for same-page scrolling. Add import { Link } from 'react-router'; at the top of the file.

<Link to="/signup"> <Button size="lg" className="neo-brutal-button bg-foreground text-black hover:bg-primary/90 border-primary text-lg px-8 py-6 ghibli-button" > 🚀 JOIN THE BUZZ </Button> </Link> <a href="#features"> <Button size="lg" variant="outline" className="neo-brutal-button bg-secondary border-primary text-primary hover:bg-secondary hover:text-black text-lg px-8 py-6 ghibli-button" > 📖 EXPLORE FIRST </Button> </a>

apps/web/src/index.css

apps/web/src/components/LandingPage/features.tsx

gemini-code-assist · 2025-07-05T16:03:24Z

apps/web/src/components/LandingPage/hero.tsx

+			<div className="container mx-auto px-4 text-center relative z-20">
+				<div className="max-w-4xl mx-auto fade-in-up">
+					<div className="flex justify-center mb-8 space-x-4">
+						<div className="w-16 h-16 neo-brutal-card bg-green-200-20 border-green-500 flex items-center justify-center avatar-float">


bg-green-200-20 is not a valid Tailwind CSS class. Use bg-green-500/20 (or similar) for opacity. This also applies to bg-blue-200-20, bg-yellow-200-20, and bg-purple-200-20.

<div className="w-16 h-16 neo-brutal-card bg-green-500/20 border-green-500 flex items-center justify-center avatar-float">

apps/web/src/components/LandingPage/hero.tsx

gemini-code-assist · 2025-07-05T16:03:24Z

apps/web/src/assets/landingpage.css

+	text-shadow:
+		2px 2px 0 var(--primary),
+		-2px -2px 0 var(--secondary, #333333),
+		2px -2px 0 #ffffff,
+		-2px 2px 0 #42f545;


The ghibli-title class uses hardcoded colors (#ffffff and #42f545) in its text-shadow. This prevents the component from adapting to different themes and reduces maintainability. Replace these with CSS variables from your theme, such as var(--background) and var(--secondary).

text-shadow: 2px 2px 0 var(--primary), -2px -2px 0 var(--secondary, #333333), 2px -2px 0 var(--background), -2px 2px 0 var(--secondary);

apps/web/src/components/LandingPage/footer.tsx

gemini-code-assist · 2025-07-05T16:03:24Z

apps/web/src/routes/_index.tsx

-}
-
-export default function Home() {
+export default function HomePage() {


Missing metadata for page title and description, which is important for SEO and user experience. Add a meta function to provide these details.

Suggested change

export default function HomePage() {

import type { Route } from "./+types/_index";

export function meta(_: Route.MetaArgs) {

return [

{ title: "IIITBuzz | Connect, Learn, Win" },

{

name: "description",

content:

"The ultimate community platform for IIIT students. Connect, collaborate, and conquer your academic journey.",

},

];

}

Yeah, but not so important as will be used internally.

neoandmatrix · 2025-07-06T10:52:05Z

apps/web/src/assets/landingpage.css

Please move it to style folder. It maintains consistency.

assets/styles ?

Either that but my preferred is src/styles/landingpage.css

ujsquared · 2025-07-06T16:36:47Z

can we try to get this merged soon? time's ticking away we gotta start working on the main forum CRUD.

neoandmatrix · 2025-07-06T17:02:17Z

can we try to get this merged soon? time's ticking away we gotta start working on the main forum CRUD.

Yeah, let me review this tonight. @consoledotaman please try to make this final according to all the suggestions.

Thanks

neoandmatrix

Amazing PR, all looks good to me. Just few minor suggestions after that let's complete this.
The designs and styles look very good. Amazing work.

neoandmatrix · 2025-07-06T17:31:43Z

apps/web/src/components/LandingPage/features.tsx

+
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
+					{featuresPage.map((feature, index) => (
+						<Card


To these cards should we add a url that like takes to a dummy route like /upcomming where page just displays comming-soon type text as just initially we will be developing discussion boards only so rest of the appearing non interactive is bit dull imho.

WDYT @ujsquared @iamanishx

agreed. implemented ig.

neoandmatrix · 2025-07-06T17:37:05Z

apps/web/src/routes/_index.tsx

-}
-
-export default function Home() {
+export default function HomePage() {


Yeah, but not so important as will be used internally.

Signed-off-by: amanraj <raj.aman4001@gmail.com>

consoledotaman · 2025-07-07T06:07:29Z

can we try to get this merged soon? time's ticking away we gotta start working on the main forum CRUD.

made the required changes.

neoandmatrix

LGTM, amazing work @consoledotaman .

iamanishx · 2025-07-07T06:26:54Z

yelllowww!!!!
and the area in the first two image can be improved

iamanishx · 2025-07-07T06:28:24Z

@neoandmatrix @ujsquared on selecting dark we have white bg and on selecting light we have yellowwwww

ujsquared · 2025-07-07T06:51:12Z

@neoandmatrix @ujsquared on selecting dark we have white bg and on selecting light we have yellowwwww

~~this is something to do with useTheme hook not recognizing the theme properly.~~ Nevermind.
@consoledotaman are you working on this?

iamanishx · 2025-07-07T06:54:32Z

@neoandmatrix @ujsquared on selecting dark we have white bg and on selecting light we have yellowwwww

this is something to do with useTheme hook not recognizing the theme properly. @consoledotaman are you working on this?

actually it is recognizing read the index.css u will get to know

consoledotaman · 2025-07-07T06:57:17Z

this is something to do with useTheme hook not recognizing the theme properly. @consoledotaman are you working on this?

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

ujsquared · 2025-07-07T06:58:34Z

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

han toh put your white black theme as light theme, @burgerphilic18 will quickly port that with a dark theme.

iamanishx · 2025-07-07T06:58:57Z

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

you kept yellow and white btw

iamanishx · 2025-07-07T06:59:12Z

@consoledotaman why docker in gitignore ?

consoledotaman · 2025-07-07T06:59:12Z

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

han toh put your white black theme as light theme, @burgerphilic18 will quickly port that with a dark theme.

OK, just need to change the colors in index.css

ujsquared · 2025-07-07T07:00:29Z

actually it is recognizing read the index.css u will get to know

yup. my bad

consoledotaman · 2025-07-07T07:03:28Z

@consoledotaman why docker in gitignore ?

i didn't add that ...

Signed-off-by: amanraj <raj.aman4001@gmail.com>

ujsquared · 2025-07-07T07:08:00Z

i didn't add that ...

that the LLM did it.

consoledotaman · 2025-07-07T07:08:00Z

switched the dark theme to light , didn't do any color changes for the dark theme its yellow now.

consoledotaman · 2025-07-07T07:09:46Z

i didn't add that ...

that the LLM did it.

it was there when i forked it😭 ,i only added the .DS_Store

ujsquared · 2025-07-07T07:10:49Z

it was there when i forked it😭 ,i only added the .DS_Store

yes, don't fold under pressure. good.

iamanishx · 2025-07-07T07:11:00Z

it was there when i forked it😭 ,i only added the .DS_Store

its in ur PR

consoledotaman · 2025-07-07T07:12:56Z

it was there when i forked it😭 ,i only added the .DS_Store

its in ur PR

okay removing it.

Signed-off-by: amanraj <raj.aman4001@gmail.com>

apps/web/src/index.css

.gitignore

iamanishx · 2025-07-07T07:18:00Z

@consoledotaman nice works 🚀

consoledotaman added 4 commits July 5, 2025 16:26

Created Landing Page

1fcd62a

feat: Create Landing Page.

8452e17

Signed-off-by: ujsquared <ujsquared@gmail.com> Signed-off-by: amanraj <raj.aman4001@gmail.com>

fix: fix broken feature links and remove navbar

c27754c

Signed-off-by: amanraj <raj.aman4001@gmail.com>

fix: add missing key prop to features list rendering

b790f54

gemini-code-assist bot reviewed Jul 5, 2025

View reviewed changes

ujsquared mentioned this pull request Jul 6, 2025

feat: create landing page [TASK 2] [ARCHIVED] #19

Draft

neoandmatrix requested changes Jul 6, 2025

View reviewed changes

neoandmatrix reviewed Jul 6, 2025

View reviewed changes

consoledotaman added 2 commits July 7, 2025 11:26

Merge branch 'p-society:main' into newlandingpage

caf14d1

fix: minor change comingsoon.tsx

bf1cf18

Signed-off-by: amanraj <raj.aman4001@gmail.com>

neoandmatrix approved these changes Jul 7, 2025

View reviewed changes

fix: switch color for light & dark themes

fbc1a1a

Signed-off-by: amanraj <raj.aman4001@gmail.com>

ujsquared approved these changes Jul 7, 2025

View reviewed changes

fix: remove Docker from .gitignore

ef1f76b

Signed-off-by: amanraj <raj.aman4001@gmail.com>

iamanishx approved these changes Jul 7, 2025

View reviewed changes

apps/web/src/index.css Show resolved Hide resolved

apps/web/src/index.css Show resolved Hide resolved

.gitignore Outdated Show resolved Hide resolved

iamanishx merged commit b391259 into p-society:main Jul 7, 2025
1 of 2 checks passed

-export default function HomePage() {
+import type { Route } from "./+types/_index";
+export function meta(_: Route.MetaArgs) {
+	return [
+		{ title: "IIITBuzz | Connect, Learn, Win" },
+		{
+			name: "description",
+			content:
+				"The ultimate community platform for IIIT students. Connect, collaborate, and conquer your academic journey.",
+		},
+	];
+}

Conversation

consoledotaman commented Jul 5, 2025

This PR creates a landing page for unauthorised users with prominent login and signup buttons

Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Jul 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Jul 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Jul 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gemini-code-assist bot Jul 5, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ujsquared commented Jul 6, 2025

Uh oh!

neoandmatrix commented Jul 6, 2025

Uh oh!

neoandmatrix left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

consoledotaman commented Jul 7, 2025

Uh oh!

neoandmatrix left a comment

Choose a reason for hiding this comment

Uh oh!

iamanishx commented Jul 7, 2025

Uh oh!

iamanishx commented Jul 7, 2025

Uh oh!

ujsquared commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iamanishx commented Jul 7, 2025

Uh oh!

consoledotaman commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

Uh oh!

ujsquared commented Jul 7, 2025

Uh oh!

iamanishx commented Jul 7, 2025

bhaiya you said keep it black & white for now so i made the default like that , didn't do any changes for the light theme.

Uh oh!

iamanishx commented Jul 7, 2025

ujsquared commented Jul 7, 2025 •

edited

Loading

consoledotaman commented Jul 7, 2025 •

edited

Loading

ujsquared commented Jul 7, 2025 •

edited

Loading

consoledotaman commented Jul 7, 2025 •

edited

Loading

ujsquared commented Jul 7, 2025 •

edited

Loading