Skip to content

Conversation

@KushPatel-18
Copy link
Collaborator

@KushPatel-18 KushPatel-18 commented Jan 24, 2026

Change Summary

Added embellishments to first two sections of landing page

  • Purple techno border around main picture with clip-path
  • Pixel bomb and sparkles on the corner of the main picture
  • Make 'join our discord' button the outline variant
  • Add the cut out to the first section of the page
  • Replaced bomb image with new image
Screenshot 2026-01-24 at 11 45 46 am

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

  • The pull request title has an issue number
  • The change works by "Smoke testing" or quick testing
  • The change has tests
  • The change has documentation

Related issue

width={600}
height={430}
alt="placeholder"
className="min-w-[360px] rounded-md border-[26px] border-accent [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you need specifically 360px here for min-w and 26px for the border? If so, all g, if not, try using one of the predefined tailwind classes. Also do you still need the rounded-md class here? It can probs be deleted now

return (
<>
<header className="z-100 sticky top-0 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
<header className="sticky top-0 z-10 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this being changed?

width={96}
height={156}
alt="placeholder"
className="absolute bottom-0 left-0 h-auto w-[20%] -translate-x-1/4 -translate-y-4 rounded-md [image-rendering:pixelated]"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is the rounded-md class here?

</section>

<section className="bg-dark_3 py-16">
<section className="-m-8 bg-dark_3 py-16 [clip-path:polygon(0%_0%,20%_0%,calc(20%+32px)_32px,100%_32px,100%_100%,0%_100%)] [overflow:clip]">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the -m-8 here also affects the horizontal margins of the section. Is there a way to only apply this at the top?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add embellishments to the first two sections of the landing page

4 participants