Landing page redesign#108
Closed
AshishDev-16 wants to merge 2 commits into
Closed
Conversation
Redesign the GSoC Organizations Guide landing page with a clean,
premium white-themed SaaS aesthetic while strictly preserving all
original open-source data, content, and image assets.
Components updated:
- hero-component: center-aligned layout with rotating blue animated
keyword text ('Better', 'Smarter', etc.), solid underline accent,
and centered subtitle
- value-blocks: unified ZigZag alternating grid layout replacing four
separate stacked blocks; preserves all original .webp images and copy
- testimonials: multi-card white carousel with star ratings and clean
card borders; fix Chinese character typo in className
- latest-articles: minimalist white card grid with hover effects and
blue 'Read more' links
- faq: two-column sticky layout (heading left, accordion right) to
reduce vertical scroll footprint
- waitlist-cta: high-impact full-width blue CTA block with email
capture form and radiant glow blobs
- Footer: lightweight zinc/white template integrating cleanly after
the blue CTA section
- trending-orgs-client: replace Embla carousel with dual-track Framer
Motion infinite marquee; row 1 scrolls left, row 2 scrolls right;
cards feature blue hover glow, float animation, and edge gradient fades
No data mutations: all FAQ entries, testimonials, article metadata,
org slugs, and image URLs remain untouched.
Remove MoveRight, Sparkles (lucide-react) and Heading, Text (@/components/ui) which were imported but never referenced in hero-component.tsx. Resolves no-unused-vars warnings introduced during the landing page redesign.
|
@AshishDev-16 is attempting to deploy a commit to the Ketan's Personal Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Homepage & Value Blocks Consolidation app/page.tsx, components/value-blocks.tsx |
Replaced four separate value-block component imports and exports (OrganizationsBlock, PreviousEditionsBlock, TechStackBlock, AnalyticsBlock) with a single ValueBlocks component that renders features dynamically via .map(). Refactored static layouts into unified image handling with next/image, added dynamic link routing, and restructured section styling with new container classes. |
Hero & CTA Section Updates components/hero-component.tsx, components/waitlist-cta.tsx |
Upgraded hero component with framer-motion animations (animated pill badge, entrance animations for heading/paragraph), replaced MoveRight icon with ArrowRight, added gradient background blob elements, and introduced new CTA button structure. Redesigned waitlist CTA by removing Section wrapper, adding gradient-overlay backgrounds, and updating form styling with translucent containers. |
Layout & Structure Refactoring components/Footer.tsx, components/faq.tsx |
Replaced Section wrapper with native HTML elements (<footer>, <section>), restructured footer navigation from grid divs to semantic <h4>/<ul>/<li> lists with updated link styling, and reworked FAQ layout with custom Tailwind classes. Updated typography rendering and adjusted spacing/padding throughout both components. |
Content Display & Carousel Enhancements components/latest-articles.tsx, components/testimonials.tsx, components/trending-orgs-client.tsx |
Redesigned article cards with image overlays, hover effects, and per-article routing (/blog/${article.slug}). Upgraded testimonials with 5-star rating display, Heading/Text typography, and changed carousel timing from setTimeout to setInterval. Replaced trending organizations carousel with dual-row infinite marquee animation using framer-motion and added new OrgCard subcomponent with image/fallback rendering. |
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
- PR
#71: Also modifiescomponents/Footer.tsxwith markup and styling updates including dark-mode class changes and social-links restructuring. - PR
#57: Modifiescomponents/hero-component.tsxwith layout and animation enhancements to theHeroComponent. - PR
#76: Modifiesapp/page.tsxandcomponents/value-blocks.tsxwith the same component consolidation and refactoring approach.
Poem
🐰 A rabbit's ode to the grand redesign:
With framer-motion spins and marquee glides so fine,
Footer tags now semantic, hero animations divine,
Value blocks collapse to one, carousels transform,
Star ratings twinkle bright in testimonial form,
The homepage hops renewed, dark and light in perfect rhyme! ✨
🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title 'Landing page redesign' is concise and accurately reflects the primary change—a comprehensive redesign of the landing page UI. It is clear, specific, and directly related to the main changeset. |
| Description check | ✅ Passed | The PR description comprehensively addresses all template requirements: the Overview section summarizes the redesign and data preservation; a detailed Components Updated table explains each change; Testing covers local verification, linting, type-checking, and build results; and the Checklist confirms all four items are completed. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
Owner
|
@AshishDev-16 can we have an ss of the wepage? will be easier for ui changes, and then i can deploy it in dev env and check. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
components/value-blocks.tsx (1)
88-88: Remove unnecessary comment.This comment restates the obvious and doesn't add value. As per coding guidelines, avoid comments that restate what the code does.
🧹 Remove comment
- {/* Optional: We can keep the link if desired, or skip it. Retaining for a premium look. */} <div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/value-blocks.tsx` at line 88, Remove the redundant JSX comment ("Optional: We can keep the link if desired, or skip it. Retaining for a premium look.") in components/value-blocks.tsx; locate the comment inside the ValueBlocks (or ValueBlock) JSX render and delete that comment node so the code is cleaner and follows the guideline to avoid comments that restate the obvious.components/testimonials.tsx (1)
72-88: Auto-advance interval is recreated on every slide change.The
useEffectdepends oncurrent, so every time the carousel advances, the interval is cleared and recreated. This works but is inefficient—the interval callback could use a ref to always access the latestcurrentvalue instead.♻️ Optional: Use ref for stable interval
+"use client"; + +import { useEffect, useState, useRef } from "react"; ... export function Testimonials() { const [api, setApi] = useState<CarouselApi>(); const [current, setCurrent] = useState(0); + const currentRef = useRef(current); + + useEffect(() => { + currentRef.current = current; + }, [current]); useEffect(() => { if (!api) { return; } const timer = setInterval(() => { if (api.selectedScrollSnap() + 1 === api.scrollSnapList().length) { api.scrollTo(0); setCurrent(0); } else { api.scrollNext(); - setCurrent(current + 1); + setCurrent(currentRef.current + 1); } }, 4000); return () => clearInterval(timer); - }, [api, current]); + }, [api]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/testimonials.tsx` around lines 72 - 88, The effect recreates the interval on every `current` change; change it to a stable interval by removing `current` from the dependency array of the `useEffect` that creates `timer` and have the interval callback read the latest slide index from a ref. Add a `currentRef` (via `useRef`) and update `currentRef.current` whenever `setCurrent` is called (or in a small `useEffect` that syncs `current` to the ref), then inside the `setInterval` callback use `api` and `currentRef.current` to decide whether to `api.scrollNext()` / `api.scrollTo(0)` and call `setCurrent(...)`; keep clearing the interval in the effect cleanup as before.components/hero-component.tsx (1)
78-80: Remove commented-out code.The commented underline div should be removed if it's not being used. Dead code creates confusion about intent.
🧹 Remove commented code
))} - {/* Dynamic width underline based on parent block */} - {/* <div className="absolute bottom-1 left-0 right-0 h-1.5 bg-[`#3b82f6`] dark:bg-blue-500" /> */} </span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/hero-component.tsx` around lines 78 - 80, Remove the dead commented underline div inside the Hero component's JSX (the commented line containing <div className="absolute bottom-1 left-0 right-0 h-1.5 bg-[`#3b82f6`] dark:bg-blue-500" />) so the markup under the closing </span> is clean; locate the commented block in components/hero-component.tsx within the Hero (or similar) JSX and delete the commented lines and surrounding comment markers to avoid leftover dead code.components/trending-orgs-client.tsx (1)
48-53: Trim the narrating comments in this component.Most of these comments just label the JSX or repeat what the next line already says. I’d keep the non-obvious note about tripling the arrays for the seamless loop and drop the rest.
As per coding guidelines:
**/*.{ts,tsx,js,jsx}: Do NOT add comments that restate the obvious or explain what the code does if clear. ONLY add comments for non-obvious decisions, workarounds, edge cases, and architectural reasoningAlso applies to: 59-65, 70-85, 100-100
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/trending-orgs-client.tsx` around lines 48 - 53, Remove redundant narrating comments in the TrendingOrgs component: delete comments that merely restate JSX or obvious behavior (e.g., labels for rows or directions) around the component header and the blocks referenced (the comment groups near lines 59-65, 70-85, and 100), and keep only the non-obvious explanatory comment that documents why we triple the org arrays to create a seamless looping marquee (retain that single comment next to the array-tripling logic in the TrendingOrgs component). Ensure references in the code (component name TrendingOrgs, the array-tripling variable/logic) remain clear and that no other explanatory comments that merely repeat code are left behind.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/hero-component.tsx`:
- Around line 40-50: The pill badge (the motion.div containing the "Read our
launch article" text and the ArrowRight icon) currently looks clickable but is a
static div; either wrap that element in a real interactive component (e.g., a
Link or anchor) pointing to the launch article URL so the ArrowRight and
affordance are accurate, or remove the ArrowRight icon and any
cursor/pseudo-interactive styles to avoid misleading users; update the JSX
around motion.div (and the ArrowRight usage) accordingly and ensure
accessibility attributes (role/aria-label) are added if you make it a non-anchor
interactive element.
In `@components/latest-articles.tsx`:
- Around line 72-75: The Link in latest-articles.tsx uses
href={`/blog/${article.slug}`} (Link, article.slug) but you haven't implemented
a dynamic blog page to handle those slugs; either add a dynamic blog page
component that exports generateStaticParams (to enumerate article slugs) and
generateMetadata (to set per-article metadata) and a page component that renders
the article by slug, or change the Link target in latest-articles.tsx to a
non-dynamic route (e.g., /blog) until the dynamic route is implemented so links
do not 404.
In `@components/trending-orgs-client.tsx`:
- Around line 89-92: The marquee currently always animates via the motion.div
animate/transition props (see motion.div with animate={{ x: [...] }} and
transition={{ ... }}), so add a reduced-motion fallback: use framer-motion's
useReducedMotion() (or a CSS `@media` (prefers-reduced-motion: reduce)
alternative) and, when reduced motion is requested, remove the
animate/transition (or set animate to a static x: "0%") so the track remains
static; additionally pause the animation on hover/focus by applying
whileHover/whileFocus to stop movement (or conditionally disable those when
reduced motion is true). Apply the same change to the other marquee block
referenced (the second motion.div around lines 104-107).
- Around line 25-27: The outer container's hover shadow contains a hardcoded
RGBA (shadow-[0_12px_40px_rgba(59,130,246,0.15)]) which violates the token-only
rule; replace that literal with a semantic utility or CSS variable backed by the
shared design tokens (e.g., change the class on the div containing
"group-hover:shadow-[0_12px_40px_rgba(59,130,246,0.15)]" to a token-based class
like "group-hover:shadow-glow" or
"group-hover:shadow-[var(--token-shadow-glow)]" and ensure the corresponding
--token-shadow-glow is defined in the shared tokens/styles so theme changes
propagate).
- Around line 12-46: Replace the one-off OrgCard with the shared
OrganizationCard component: remove the OrgCard function and reuse
OrganizationCard (the component currently in organization-card.tsx) by importing
it and passing org and index props, and add/consume a compact variant prop
(e.g., variant="compact" or size="sm") on OrganizationCard to apply the smaller
layout (w-28/h-28, hover effects, rounded-2xl, image fallback, lazy loading,
etc.) instead of duplicating markup; update OrganizationCard to accept and
handle that variant (adjust classes for container, image/span, and hover glow)
so the marquee uses the compact style while other lists keep the default.
---
Nitpick comments:
In `@components/hero-component.tsx`:
- Around line 78-80: Remove the dead commented underline div inside the Hero
component's JSX (the commented line containing <div className="absolute bottom-1
left-0 right-0 h-1.5 bg-[`#3b82f6`] dark:bg-blue-500" />) so the markup under the
closing </span> is clean; locate the commented block in
components/hero-component.tsx within the Hero (or similar) JSX and delete the
commented lines and surrounding comment markers to avoid leftover dead code.
In `@components/testimonials.tsx`:
- Around line 72-88: The effect recreates the interval on every `current`
change; change it to a stable interval by removing `current` from the dependency
array of the `useEffect` that creates `timer` and have the interval callback
read the latest slide index from a ref. Add a `currentRef` (via `useRef`) and
update `currentRef.current` whenever `setCurrent` is called (or in a small
`useEffect` that syncs `current` to the ref), then inside the `setInterval`
callback use `api` and `currentRef.current` to decide whether to
`api.scrollNext()` / `api.scrollTo(0)` and call `setCurrent(...)`; keep clearing
the interval in the effect cleanup as before.
In `@components/trending-orgs-client.tsx`:
- Around line 48-53: Remove redundant narrating comments in the TrendingOrgs
component: delete comments that merely restate JSX or obvious behavior (e.g.,
labels for rows or directions) around the component header and the blocks
referenced (the comment groups near lines 59-65, 70-85, and 100), and keep only
the non-obvious explanatory comment that documents why we triple the org arrays
to create a seamless looping marquee (retain that single comment next to the
array-tripling logic in the TrendingOrgs component). Ensure references in the
code (component name TrendingOrgs, the array-tripling variable/logic) remain
clear and that no other explanatory comments that merely repeat code are left
behind.
In `@components/value-blocks.tsx`:
- Line 88: Remove the redundant JSX comment ("Optional: We can keep the link if
desired, or skip it. Retaining for a premium look.") in
components/value-blocks.tsx; locate the comment inside the ValueBlocks (or
ValueBlock) JSX render and delete that comment node so the code is cleaner and
follows the guideline to avoid comments that restate the obvious.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8a235021-0abd-4655-90e1-618e79856b12
📒 Files selected for processing (9)
app/page.tsxcomponents/Footer.tsxcomponents/faq.tsxcomponents/hero-component.tsxcomponents/latest-articles.tsxcomponents/testimonials.tsxcomponents/trending-orgs-client.tsxcomponents/value-blocks.tsxcomponents/waitlist-cta.tsx
Comment on lines
+40
to
+50
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, ease: "easeOut" }} | ||
| className="mb-8" | ||
| > | ||
| <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900"> | ||
| <span>Read our launch article</span> | ||
| <ArrowRight className="w-4 h-4" /> | ||
| </div> | ||
| </motion.div> |
There was a problem hiding this comment.
Pill badge appears clickable but isn't interactive.
The badge displays "Read our launch article" with an ArrowRight icon, which signals to users that it's a clickable link. However, it's just a static <div>. Either wrap it in a <Link> to the actual article or remove the arrow icon to avoid misleading affordance.
🔗 Suggested fix: Make it a link or remove arrow
Option A: Make it a link
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
className="mb-8"
>
- <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900">
+ <Link href="/blog" className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
<span>Read our launch article</span>
<ArrowRight className="w-4 h-4" />
- </div>
+ </Link>
</motion.div>Option B: Remove the arrow if not linking
- <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900">
- <span>Read our launch article</span>
- <ArrowRight className="w-4 h-4" />
+ <div className="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900">
+ <span>Coming Soon</span>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5, ease: "easeOut" }} | |
| className="mb-8" | |
| > | |
| <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900"> | |
| <span>Read our launch article</span> | |
| <ArrowRight className="w-4 h-4" /> | |
| </div> | |
| </motion.div> | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5, ease: "easeOut" }} | |
| className="mb-8" | |
| > | |
| <Link href="/blog" className="inline-flex items-center gap-2 rounded-full bg-blue-50 dark:bg-blue-950/50 px-4 py-1.5 text-sm font-semibold text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-900 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors"> | |
| <span>Read our launch article</span> | |
| <ArrowRight className="w-4 h-4" /> | |
| </Link> | |
| </motion.div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/hero-component.tsx` around lines 40 - 50, The pill badge (the
motion.div containing the "Read our launch article" text and the ArrowRight
icon) currently looks clickable but is a static div; either wrap that element in
a real interactive component (e.g., a Link or anchor) pointing to the launch
article URL so the ArrowRight and affordance are accurate, or remove the
ArrowRight icon and any cursor/pseudo-interactive styles to avoid misleading
users; update the JSX around motion.div (and the ArrowRight usage) accordingly
and ensure accessibility attributes (role/aria-label) are added if you make it a
non-anchor interactive element.
Comment on lines
72
to
+75
| <Link | ||
| key={article.id} | ||
| href="/blog" | ||
| className="flex flex-col gap-2 hover:opacity-75 cursor-pointer transition-opacity" | ||
| href={`/blog/${article.slug}`} | ||
| className="group flex flex-col h-full bg-zinc-50 dark:bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-200/50 dark:border-zinc-800 hover:border-blue-200 dark:hover:border-blue-900/50 hover:shadow-lg hover:shadow-blue-900/5 transition-all duration-300" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if a dynamic blog route exists for article slugs
# Search for any [slug] dynamic route under app/blog
fd -t f 'page.tsx' app/blog --exec echo "Found: {}"
# Check directory structure under app/blog
find app/blog -type f -name "*.tsx" 2>/dev/null || echo "No files found"
# Look for any dynamic route pattern
rg -l '\[slug\]' app/blog 2>/dev/null || echo "No dynamic slug route found"Repository: ketankauntia/gsoc-orgs
Length of output: 136
🏁 Script executed:
#!/bin/bash
# Check the content of app/blog/page.tsx to see if it's truly static
echo "=== app/blog/page.tsx content ==="
cat app/blog/page.tsx
echo ""
echo "=== components/latest-articles.tsx lines 70-80 ==="
sed -n '70,80p' components/latest-articles.tsxRepository: ketankauntia/gsoc-orgs
Length of output: 3490
Create dynamic blog route or update article links.
The component links to /blog/${article.slug} but no dynamic route handler exists at app/blog/[slug]/page.tsx. Users will encounter a broken link or fall back to the static "Coming Soon" page. Either implement the dynamic route with generateStaticParams and generateMetadata, or change links to /blog until individual article pages are ready.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/latest-articles.tsx` around lines 72 - 75, The Link in
latest-articles.tsx uses href={`/blog/${article.slug}`} (Link, article.slug) but
you haven't implemented a dynamic blog page to handle those slugs; either add a
dynamic blog page component that exports generateStaticParams (to enumerate
article slugs) and generateMetadata (to set per-article metadata) and a page
component that renders the article by slug, or change the Link target in
latest-articles.tsx to a non-dynamic route (e.g., /blog) until the dynamic route
is implemented so links do not 404.
Comment on lines
+12
to
+46
| interface OrgCardProps { | ||
| org: FeaturedOrg; | ||
| index: number; | ||
| } | ||
|
|
||
| function OrgCard({ org, index }: OrgCardProps) { | ||
| return ( | ||
| <a | ||
| href={`/organizations/${org.slug}`} | ||
| key={`${org.id}-${index}`} | ||
| className="group shrink-0" | ||
| aria-label={`View ${org.name} details`} | ||
| > | ||
| <div className="relative flex w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 shadow-sm items-center justify-center p-4 transition-all duration-300 group-hover:shadow-[0_12px_40px_rgba(59,130,246,0.15)] group-hover:-translate-y-1.5 group-hover:border-blue-200 dark:group-hover:border-blue-900"> | ||
| {/* Subtle hover glow bg */} | ||
| <div className="absolute inset-0 rounded-2xl bg-blue-50 dark:bg-blue-950/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> | ||
| {org.img_r2_url ? ( | ||
| <Image | ||
| src={org.img_r2_url} | ||
| alt={org.name} | ||
| width={100} | ||
| height={100} | ||
| className="relative z-10 w-full h-full object-contain transition-all duration-300 group-hover:scale-110" | ||
| unoptimized={true} | ||
| loading="lazy" | ||
| /> | ||
| ) : ( | ||
| <span className="relative z-10 text-3xl md:text-4xl font-extrabold text-zinc-300 dark:text-zinc-700 transition-colors group-hover:text-blue-500"> | ||
| {org.name.charAt(0)} | ||
| </span> | ||
| )} | ||
| </div> | ||
| </a> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Extend OrganizationCard instead of introducing OrgCard.
This forks organization-listing markup/behavior into a second component, which will drift from components/organization-card.tsx over time. If the marquee needs a smaller presentation, please add a compact variant or adapt the shared selector instead of maintaining a one-off card here.
As per coding guidelines: **/?(app|components)/**/*.{tsx,ts}: Reuse the existing OrganizationCard component for all organization listings
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/trending-orgs-client.tsx` around lines 12 - 46, Replace the
one-off OrgCard with the shared OrganizationCard component: remove the OrgCard
function and reuse OrganizationCard (the component currently in
organization-card.tsx) by importing it and passing org and index props, and
add/consume a compact variant prop (e.g., variant="compact" or size="sm") on
OrganizationCard to apply the smaller layout (w-28/h-28, hover effects,
rounded-2xl, image fallback, lazy loading, etc.) instead of duplicating markup;
update OrganizationCard to accept and handle that variant (adjust classes for
container, image/span, and hover glow) so the marquee uses the compact style
while other lists keep the default.
Comment on lines
+25
to
+27
| <div className="relative flex w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 shadow-sm items-center justify-center p-4 transition-all duration-300 group-hover:shadow-[0_12px_40px_rgba(59,130,246,0.15)] group-hover:-translate-y-1.5 group-hover:border-blue-200 dark:group-hover:border-blue-900"> | ||
| {/* Subtle hover glow bg */} | ||
| <div className="absolute inset-0 rounded-2xl bg-blue-50 dark:bg-blue-950/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace the one-off RGBA glow with a shared token.
shadow-[0_12px_40px_rgba(59,130,246,0.15)] hardcodes a blue outside the design system, so theme/token changes will miss this component. Please switch this to an existing semantic shadow utility or a CSS variable backed by the shared tokens.
As per coding guidelines: **/*.{tsx,ts,css,scss}: Use ONLY existing color tokens and design variables, do NOT hardcode colors, do NOT introduce new colors without explicit instruction
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/trending-orgs-client.tsx` around lines 25 - 27, The outer
container's hover shadow contains a hardcoded RGBA
(shadow-[0_12px_40px_rgba(59,130,246,0.15)]) which violates the token-only rule;
replace that literal with a semantic utility or CSS variable backed by the
shared design tokens (e.g., change the class on the div containing
"group-hover:shadow-[0_12px_40px_rgba(59,130,246,0.15)]" to a token-based class
like "group-hover:shadow-glow" or
"group-hover:shadow-[var(--token-shadow-glow)]" and ensure the corresponding
--token-shadow-glow is defined in the shared tokens/styles so theme changes
propagate).
Comment on lines
+89
to
+92
| <motion.div | ||
| className="flex gap-5 md:gap-7 w-max pr-5 md:pr-7" | ||
| animate={{ x: ["0%", "-33.333333%"] }} | ||
| transition={{ ease: "linear", duration: 45, repeat: Infinity }} |
There was a problem hiding this comment.
Add a reduced-motion fallback for the marquee.
Both tracks loop forever with no static path for users who opt out of motion. Since the moving elements are also links, please disable the animation under prefers-reduced-motion (and ideally pause it on hover/focus as well).
Also applies to: 104-107
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/trending-orgs-client.tsx` around lines 89 - 92, The marquee
currently always animates via the motion.div animate/transition props (see
motion.div with animate={{ x: [...] }} and transition={{ ... }}), so add a
reduced-motion fallback: use framer-motion's useReducedMotion() (or a CSS `@media`
(prefers-reduced-motion: reduce) alternative) and, when reduced motion is
requested, remove the animate/transition (or set animate to a static x: "0%") so
the track remains static; additionally pause the animation on hover/focus by
applying whileHover/whileFocus to stop movement (or conditionally disable those
when reduced motion is true). Apply the same change to the other marquee block
referenced (the second motion.div around lines 104-107).
Author
|
Hey @ketankauntia 👋, here are the screenshots from the local dev server 
Happy to address any feedback once you test it in the dev env! 🙌 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
|
@AshishDev-16 thank you for taking the initiative to contribute. But, tbh, what i can see is just some ai output code. nothing else. You have not used the styling theme that we follow in the project ( the teal shade we are using. ) and it is very obvious because of the blue shade that is on the ui is by ai. Incase you want to contribute meaningfully, please have a plan, explore the repo, understand the repo using ai and then start to work. it's just that. Closing the pr, feel free to raise a new one if you can contribute to any other issue. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Redesigns the GSoC Organizations Guide landing page with a clean, premium white-themed SaaS aesthetic (zinc/blue palette) inspired by modern developer tooling sites (Vercel, Linear, Stripe). All original open-source data, content, image assets, and routing logic are strictly preserved — this is a pure UI/UX layer change.
Components Updated
hero-componentvalue-blocks.webpimages and copy preservedtestimonialsclassNamelatest-articlesfaqwaitlist-ctaFootertrending-orgs-clientSummary
loading="lazy"andobject-containon org logosclassNametypo (text-锌-50→text-zinc-50) intestimonials.tsxTesting
pnpm dev— all sections render correctly at desktop and mobile viewportspnpm lint— passes with 0 errors (ESLint auto-fix applied via lint-staged)pnpm type-check— passes with 0 type errorspnpm build— all 9 modified files compiled successfully; no new build errors introducedChecklist
Summary by CodeRabbit
Release Notes