New club landing page#368
Conversation
|
@pall3n is attempting to deploy a commit to the squirrellabs Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughWalkthroughThe changes introduce a comprehensive update to the Peanut Protocol application, featuring new React components like Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PeanutClub
participant FAQ
participant Features
participant Hero
User->>PeanutClub: Navigate to Club Page
PeanutClub->>Hero: Render Hero Section
PeanutClub->>Features: Render Features Section
PeanutClub->>FAQ: Render FAQs Section
PeanutClub->>Mike: Render Character Mike
PeanutClub->>Story: Render User Stories
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range, codebase verification and nitpick comments (1)
src/styles/globals.css (1)
97-101: LGTM! But consider removing the commented-out@applydirective.The
.testimonialclass is correctly implemented. However, if the@applydirective is not needed, consider removing it to keep the code clean.Apply this diff to remove the commented-out
@applydirective:- /* @apply bg-white rounded-3xl shadow-lg border-2 border-n-1 ring-2 ring-white; */
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (23)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlsrc/assets/illustrations/claim-chains-badge.svgis excluded by!**/*.svgsrc/assets/illustrations/diagonal-lines.svgis excluded by!**/*.svgsrc/assets/illustrations/easy.svgis excluded by!**/*.svgsrc/assets/illustrations/eyes.svgis excluded by!**/*.svgsrc/assets/illustrations/good-idea.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-bag.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-snap.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-thumbs.svgis excluded by!**/*.svgsrc/assets/illustrations/hand-token.svgis excluded by!**/*.svgsrc/assets/illustrations/hey-dude.svgis excluded by!**/*.svgsrc/assets/illustrations/new.svgis excluded by!**/*.svgsrc/assets/illustrations/peace-fingers.svgis excluded by!**/*.svgsrc/assets/illustrations/peanuts-bg.svgis excluded by!**/*.svgsrc/assets/illustrations/smile-finder.svgis excluded by!**/*.svgsrc/assets/illustrations/smile-high.svgis excluded by!**/*.svgsrc/assets/illustrations/smile-pink.svgis excluded by!**/*.svgsrc/assets/illustrations/smile-side.svgis excluded by!**/*.svgsrc/assets/illustrations/smile-stars.svgis excluded by!**/*.svgsrc/assets/illustrations/star-blue.svgis excluded by!**/*.svgsrc/assets/illustrations/star.svgis excluded by!**/*.svgsrc/assets/illustrations/stop-sign.svgis excluded by!**/*.svgsrc/assets/illustrations/vibes.svgis excluded by!**/*.svg
Files selected for processing (17)
- package.json (1 hunks)
- src/app/club/page.tsx (1 hunks)
- src/app/layout.tsx (2 hunks)
- src/assets/illustrations/index.ts (1 hunks)
- src/assets/index.ts (1 hunks)
- src/components/Club/faq.tsx (1 hunks)
- src/components/Club/features.tsx (1 hunks)
- src/components/Club/hero.tsx (1 hunks)
- src/components/Club/index.ts (1 hunks)
- src/components/Club/landing.tsx (1 hunks)
- src/components/Club/mike.tsx (1 hunks)
- src/components/Club/story.tsx (1 hunks)
- src/components/Global/ClubLayout/index.tsx (1 hunks)
- src/components/Global/Footer/index.tsx (1 hunks)
- src/components/Global/Header/index.tsx (12 hunks)
- src/styles/globals.css (1 hunks)
- tailwind.config.js (6 hunks)
Files skipped from review due to trivial changes (3)
- package.json
- src/assets/illustrations/index.ts
- src/components/Club/index.ts
Additional context used
Biome
src/components/Global/Header/index.tsx
[error] 299-299: Don't use 'Boolean' as a type.
Use lowercase primitives for consistency.
Safe fix: Use 'boolean' instead(lint/complexity/noBannedTypes)
Additional comments not posted (34)
src/assets/index.ts (1)
10-10: LGTM! But verify the existence and correctness of the./illustrationsmodule.The new export statement is correctly added. Ensure that the
./illustrationsmodule exists and is correctly implemented.Run the following script to verify the existence of the
./illustrationsmodule:Verification successful
The
illustrationsmodule is correctly implemented and ready for use.The
index.tsfile in theillustrationsdirectory exports multiple SVG files, confirming the module's correctness. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the `./illustrations` module. # Test: Check if the `illustrations` directory or file exists. fd illustrationsLength of output: 44
Script:
#!/bin/bash # Description: List the contents of the `illustrations` directory to verify exportable entities. # List all files in the `illustrations` directory. fd . src/assets/illustrations --type fLength of output: 935
Script:
#!/bin/bash # Description: Display the contents of the `index.ts` file in the `illustrations` directory. # Show the contents of `index.ts`. cat src/assets/illustrations/index.tsLength of output: 1252
src/app/layout.tsx (3)
2-2: LGTM!The import statement for the new font is correct.
15-20: LGTM!The configuration of the
Londrina_Solidfont is correct.
25-25: LGTM!The application of the new font to the body element is correct.
src/components/Club/hero.tsx (3)
1-3: LGTM!The import statements are correct.
5-11: LGTM!The
HeroPropstype definition is correct.
13-45: LGTM!The
Herofunction is correctly implemented and follows best practices for React components.src/components/Global/Footer/index.tsx (2)
7-9: LGTM!The
FooterPropstype definition is correct.
11-43: LGTM!The
Footerfunction is correctly implemented and follows best practices for React components. The conditional application of class names based on thenewLayoutprop is a good approach to enhance the component's flexibility.src/components/Global/ClubLayout/index.tsx (3)
1-8: LGTM!The import statements are correctly organized and necessary for the component.
9-13: LGTM!The
LayoutPropstype definition is correctly implemented and necessary for the component.
15-20: LGTM!The
robotofont configuration is correctly implemented and necessary for the component.src/styles/globals.css (3)
103-113: LGTM!The
.testimonial:afterpseudo-element is correctly implemented and enhances the visual appeal of the.testimonialclass.
115-126: LGTM!The
.testimonial:beforepseudo-element is correctly implemented and enhances the visual appeal of the.testimonialclass.
128-147: LGTM!The
.testimonial-0:before,.testimonial-1:before,.testimonial-2:before, and.testimonial-3:beforepseudo-elements are correctly implemented and enhance the visual appeal of the.testimonialclass.src/components/Club/story.tsx (3)
1-3: LGTM!The import statements are correctly organized and necessary for the component.
5-14: LGTM!The
StoryPropstype definition is correctly implemented and necessary for the component.
16-80: LGTM!The
Storycomponent is correctly implemented and follows best practices.src/components/Club/faq.tsx (3)
1-7: LGTM!The import statements are correct and necessary for the component.
9-22: LGTM!The type definition is clear and correctly defines the expected props for the component.
24-112: Suggestions for improvement.The component is well-structured and correctly implements the FAQ functionality. However, consider the following improvements:
- Simplify the
setFaqfunction using an arrow function.- Initialize the
openFaqstate withnullinstead of-1for better readability.- Use a more descriptive
data-cal-linkvalue for thecalModallink.Apply this diff to implement the improvements:
export function FAQs({ heading, questions, marquee = { visible: false } }: FAQsProps) { - const [openFaq, setOpenFaq] = useState(-1) + const [openFaq, setOpenFaq] = useState<number | null>(null) - const setFaq = function (index: number) { - setOpenFaq(openFaq === index ? -1 : index) + const setFaq = (index: number) => { + setOpenFaq(openFaq === index ? null : index) } return ( <Box className="bg-gold-3 overflow-x-hidden" style={{ backgroundImage: `url(${assets.PeanutsBG.src})`, backgroundSize: '10rem auto', backgroundRepeat: 'repeat', }} > <Box className="relative px-6 py-20 md:px-8 md:py-36"> <img src={assets.StarBlue.src} className="absolute bottom-[3%] left-[7%] w-14 rotate-2 lg:bottom-[4%] lg:left-[10%] xl:bottom-[10%] xl:left-[15%]" /> <Box className="duration-400 relative relative mx-auto max-w-3xl rounded-md border-2 border-n-1 bg-white px-2 py-6 shadow ring-2 ring-white transition-transform hover:rotate-0 md:-rotate-2 md:p-14"> <img src={assets.SmilePink.src} className="rotate- absolute -right-16 -top-16 w-28" /> <img src={assets.EyesEmoiji.src} className="rotate- absolute -right-16 bottom-12 w-28 xl:-right-20 xl:w-32" /> <h2 className="font-display border-violet-3 bg-violet-3 absolute -left-6 -top-8 rounded-full border-2 px-5 py-3 text-[1.5rem] font-bold uppercase text-white shadow ring-2 ring-white md:text-[2rem]" > {heading} </h2> <Stack spacing={1}> {questions.map((faq, index) => ( <Box key={index} className={`px-4 py-4 text-lg font-semibold md:text-xl`}> <Flex justify="space-between" className=" cursor-pointer" onClick={() => setFaq(index)}> <div className="text-violet-3 uppercase leading-6">{faq.question}</div> <div className="grow-1 ml-6"> <Icon name={openFaq === index ? 'minus-circle' : 'plus-circle'} className="fill-violet-3 h-6 w-6 md:h-8 md:w-8" /> </div> </Flex> {openFaq == index && ( <p className="mt-1 leading-6 text-n-1"> {faq.answer} {faq.calModal && ( <a - data-cal-link="kkonrad+hugo0/15min?duration=30" + data-cal-link="your-descriptive-link-value" data-cal-config='{"layout":"month_view"}' className=" underline" > Let's talk! </a> )} {faq.redirectUrl && ( <a href={faq.redirectUrl} target="_blank" className="text-black underline"> {faq.redirectText} </a> )} </p> )} </Box> ))} </Stack> </Box> </Box> {marquee.visible && ( <Box borderY={'2px solid'} borderColor={'white'} className="shadow"> <MarqueeWrapper backgroundColor="bg-cyan-8" direction="left" className="border-y-2 border-n-1 py-2"> <div className="font-display mx-2 text-lg uppercase not-italic md:text-xl"> {marquee.message} </div> <div className="mx-2"> <img src={assets.SmileFinder.src} className="h-auto w-8" /> </div> </MarqueeWrapper> </Box> )} </Box> ) }src/app/club/page.tsx (3)
1-5: LGTM!The import statements are correct and necessary for the component.
6-20: LGTM!The metadata object is correctly defined and provides necessary information for the page.
21-167: Suggestions for improvement.The component is well-structured and correctly implements the landing page functionality. However, consider the following improvements:
- Move the
metadataobject inside thePeanutClubfunction for better encapsulation.- Address the
TODOcomment for theSBF_PERSONimage.Apply this diff to implement the improvements:
-export const metadata: Metadata = { - title: 'Peanut Protocol', - description: 'Text Tokens', - metadataBase: new URL('https://peanut.to'), - icons: { - icon: '/logo-favicon.png', - }, - openGraph: { - images: [ - { - url: '/metadata-img.png', - }, - ], - }, -} +export default function PeanutClub() { + const metadata: Metadata = { + title: 'Peanut Protocol', + description: 'Text Tokens', + metadataBase: new URL('https://peanut.to'), + icons: { + icon: '/logo-favicon.png', + }, + openGraph: { + images: [ + { + url: '/metadata-img.png', + }, + ], + }, + } const hero = { heading: 'Peanut club', marquee: { visible: true, message: 'Peanut Frens', }, } const story = { stories: [ { copy: 'Mike wanted to pay his fren for dinner, but didn’t have their wallet address handy. He spent ages searching through messages, trying to find it. Finally, he found something that looked right, but in his rush, he fat thumbed the address. The tokens went to a complete stranger. Now, Mike’s out of money, and Tom’s still waiting to get paid. Talk about a headache!', }, { copy: 'On the other side of discord. Sarah needed to pay her fren back for concert tickets, but didn’t have his wallet address. No worries! She quickly created a Peanut link, loaded it with ETH on mainnet, and sent it over to Jake. Jake got the link, and withdrew it as usdc on base directly to his wallet. No stress, no mistakes— Boom—done!', }, ], foot: 'Dont be Mike. send a PEANUT link.', marquee: { visible: true, message: 'Peanut Frens', }, } const features = { sections: [ { heading: 'Send tokens, like a pro.', testimonials: [ { imageSrc: assets.DEREK_PERSON.src, altText: 'picture of chad', comment: 'How did this not exist before?! Great UX!', name: 'Derek Rein', detail: 'WalletConnect', detailRedirectUrl: 'https://walletconnect.com/', bgColorClass: 'bg-white', }, { imageSrc: assets.SHARUK_PERSON.src, altText: 'eco man', comment: 'Peanut allows us to elegantly solve the cold start problem!', name: 'shahrukh Rao', detail: 'Eco', detailRedirectUrl: 'https://eco.org/?ref=com', bgColorClass: 'bg-white', }, { imageSrc: assets.KOFIME_PERSON.src, altText: 'kofi', comment: 'Very buttery experience!', name: 'Kofi.me', detail: 'Kofi.me', detailRedirectUrl: 'https://www.kofime.xyz/', bgColorClass: 'bg-white', }, { - imageSrc: assets.SBF_PERSON.src, // TODO: replace with actual image@ + imageSrc: assets.SBF_PERSON.src, // TODO: replace with actual image altText: 'picture of pixel art SBF', comment: 'I have a peanut allergy. Help!', name: 'CEx CEO', detail: 'Probably FTX', bgColorClass: 'bg-white', }, ], }, { heading: 'Send tokens, without the Complexity.', list: [ 'Multiple tokens, one link', 'Withdraw funds', 'No more fat thumbing', 'No more searching for addresses', ], }, ], marquee: { visible: true, message: 'Peanut Frens', }, } const faqs = { heading: 'FAQs', questions: [ { question: 'How can I try?', answer: 'Check out our dapp or any of the projects that already integrated Peanut.', }, { question: 'What are the trust assumptions?', answer: 'Peanut Protocol is non-custodial, permissionless and decentralised. Read more ', redirectUrl: 'https://docs.peanut.to/overview/what-are-links/trust-assumptions', redirectText: 'here.', }, { question: 'What happens if I want to cancel or if I lose the link?', answer: 'The only thing you need is the transaction hash! To see how, click ', redirectUrl: 'https://peanut.to/refund', redirectText: 'here.', }, { question: 'What are the fees?', answer: 'On our dapp, we sponsor gasless claiming and sending on L2s. Integrators can choose to sponsor the transactions. We do not have a fee on the protocol for same-chain transactions, see ', redirectUrl: 'https://docs.peanut.to/overview/pricing', redirectText: 'here.', }, { question: 'I need help!', answer: 'Sure! Let us know at hello@peanut.to or on ', redirectUrl: 'https://discord.gg/uWFQdJHZ6j', redirectText: 'discord.', }, { question: 'Are you audited?', answer: 'Yes! ', redirectUrl: 'https://docs.peanut.to/other/security-audit', redirectText: 'See our docs for more', }, { question: 'I want this for our app! How long does it take to integrate?', answer: 'Our record integration took 2 hours, but it depends on your stack. ', calModal: true, redirectText: 'Lets talk!', }, ], marquee: { visible: true, message: 'Peanut Frens', }, } const mike = { lines: ['Peanut', "Don't be Mike", ' Send a PEANUT link'], } return ( <Layout newLayout={true} className="!mx-0 w-full !px-0 !pt-0 "> <Hero heading={hero.heading} marquee={hero.marquee} /> <Story stories={story.stories} foot={story.foot} marquee={story.marquee} /> <Features sections={features.sections} marquee={features.marquee} /> <FAQs heading={faqs.heading} questions={faqs.questions} marquee={faqs.marquee} /> <Mike lines={mike.lines} /> </Layout> ) }src/components/Club/features.tsx (1)
1-3: LGTM!The import statements are correct and necessary for the component.
src/components/Global/Header/index.tsx (4)
28-30: LGTM!The type declaration for
HeaderPropsis correct.
46-46: LGTM!The
Headerfunction signature update is correct.
Line range hint
157-265: LGTM!The class name updates in
MenuLinksare correct.
277-293: LGTM!The class name updates in
SocialLinksare correct.tailwind.config.js (5)
45-57: LGTM!The new color definitions are correct.
128-128: LGTM!The new font family entry is correct.
133-135: LGTM!The new font size entries are correct.
239-242: LGTM!The new button style
.btn-ghostis correct.
263-266: LGTM!The updated padding values for
.btn-mediumand.btn-largeare correct.
| export function Landing() { | ||
| return ( | ||
| <div className="flex w-full flex-col items-center justify-center overflow-x-hidden dark:bg-black"> | ||
| <h1>Club Landing</h1> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Improve accessibility, semantic HTML, and maintainability.
- Accessibility: Provide a more descriptive heading.
- Semantic HTML: Consider using a more appropriate HTML element for the container, such as
<main>or<section>. - Maintainability: Add comments or more descriptive class names.
Example improvements:
export function Landing() {
return (
- <div className="flex w-full flex-col items-center justify-center overflow-x-hidden dark:bg-black">
- <h1>Club Landing</h1>
- </div>
+ <main className="flex w-full flex-col items-center justify-center overflow-x-hidden dark:bg-black">
+ <h1>Welcome to the Club Landing Page</h1>
+ </main>
)
}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.
| export function Landing() { | |
| return ( | |
| <div className="flex w-full flex-col items-center justify-center overflow-x-hidden dark:bg-black"> | |
| <h1>Club Landing</h1> | |
| </div> | |
| ) | |
| } | |
| export function Landing() { | |
| return ( | |
| <main className="flex w-full flex-col items-center justify-center overflow-x-hidden dark:bg-black"> | |
| <h1>Welcome to the Club Landing Page</h1> | |
| </main> | |
| ) | |
| } |
| 'use client' | ||
|
|
||
| import { Stack } from '@chakra-ui/react' | ||
| import * as assets from '@/assets' | ||
| import { AutoTextSize } from 'auto-text-size' | ||
|
|
||
| type MikeProps = { | ||
| lines: Array<string> | ||
| } | ||
|
|
||
| export function Mike({ lines }: MikeProps) { | ||
| return ( | ||
| <Stack className="relative overflow-x-hidden px-6 py-40 md:px-8 md:py-36"> | ||
| <img src={assets.Star.src} className="absolute left-0 top-[12%] w-14 md:left-[4%] lg:left-[10%]" /> | ||
| <img | ||
| src={assets.SmileSide.src} | ||
| className="absolute right-4 top-[14%] w-30 -rotate-[15deg] md:right-[4%] lg:right-[12%]" | ||
| /> | ||
| <img | ||
| src={assets.SmileStars.src} | ||
| className="absolute -right-8 top-[4%] w-32 rotate-2 md:right-[1%] lg:right-[9%]" | ||
| /> | ||
|
|
||
| {lines.map((line, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`font-display text-violet-3 relative z-10 mx-auto w-4/5 max-w-4xl text-center uppercase leading-[0.825]`} | ||
| > | ||
| <AutoTextSize maxFontSizePx={400}>{line}</AutoTextSize> | ||
| </div> | ||
| ))} | ||
| </Stack> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Improve accessibility, performance, and maintainability.
- Accessibility: Add alt attributes to images.
- Performance: Consider optimizing the image loading, e.g., using
loading="lazy". - Maintainability: Add comments or more descriptive class names.
Example improvements:
import { Stack } from '@chakra-ui/react'
import * as assets from '@/assets'
import { AutoTextSize } from 'auto-text-size'
type MikeProps = {
lines: Array<string>
}
export function Mike({ lines }: MikeProps) {
return (
<Stack className="relative overflow-x-hidden px-6 py-40 md:px-8 md:py-36">
- <img src={assets.Star.src} className="absolute left-0 top-[12%] w-14 md:left-[4%] lg:left-[10%]" />
+ <img src={assets.Star.src} alt="Star" className="absolute left-0 top-[12%] w-14 md:left-[4%] lg:left-[10%]" loading="lazy" />
<img
- src={assets.SmileSide.src}
+ src={assets.SmileSide.src}
+ alt="Smile Side"
className="absolute right-4 top-[14%] w-30 -rotate-[15deg] md:right-[4%] lg:right-[12%]"
+ loading="lazy"
/>
<img
src={assets.SmileStars.src}
+ alt="Smile Stars"
className="absolute -right-8 top-[4%] w-32 rotate-2 md:right-[1%] lg:right-[9%]"
+ loading="lazy"
/>
{lines.map((line, index) => (
<div
key={index}
className={`font-display text-violet-3 relative z-10 mx-auto w-4/5 max-w-4xl text-center uppercase leading-[0.825]`}
>
<AutoTextSize maxFontSizePx={400}>{line}</AutoTextSize>
</div>
))}
</Stack>
)
}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.
| 'use client' | |
| import { Stack } from '@chakra-ui/react' | |
| import * as assets from '@/assets' | |
| import { AutoTextSize } from 'auto-text-size' | |
| type MikeProps = { | |
| lines: Array<string> | |
| } | |
| export function Mike({ lines }: MikeProps) { | |
| return ( | |
| <Stack className="relative overflow-x-hidden px-6 py-40 md:px-8 md:py-36"> | |
| <img src={assets.Star.src} className="absolute left-0 top-[12%] w-14 md:left-[4%] lg:left-[10%]" /> | |
| <img | |
| src={assets.SmileSide.src} | |
| className="absolute right-4 top-[14%] w-30 -rotate-[15deg] md:right-[4%] lg:right-[12%]" | |
| /> | |
| <img | |
| src={assets.SmileStars.src} | |
| className="absolute -right-8 top-[4%] w-32 rotate-2 md:right-[1%] lg:right-[9%]" | |
| /> | |
| {lines.map((line, index) => ( | |
| <div | |
| key={index} | |
| className={`font-display text-violet-3 relative z-10 mx-auto w-4/5 max-w-4xl text-center uppercase leading-[0.825]`} | |
| > | |
| <AutoTextSize maxFontSizePx={400}>{line}</AutoTextSize> | |
| </div> | |
| ))} | |
| </Stack> | |
| ) | |
| } | |
| 'use client' | |
| import { Stack } from '@chakra-ui/react' | |
| import * as assets from '@/assets' | |
| import { AutoTextSize } from 'auto-text-size' | |
| type MikeProps = { | |
| lines: Array<string> | |
| } | |
| export function Mike({ lines }: MikeProps) { | |
| return ( | |
| <Stack className="relative overflow-x-hidden px-6 py-40 md:px-8 md:py-36"> | |
| <img src={assets.Star.src} alt="Star" className="absolute left-0 top-[12%] w-14 md:left-[4%] lg:left-[10%]" loading="lazy" /> | |
| <img | |
| src={assets.SmileSide.src} | |
| alt="Smile Side" | |
| className="absolute right-4 top-[14%] w-30 -rotate-[15deg] md:right-[4%] lg:right-[12%]" | |
| loading="lazy" | |
| /> | |
| <img | |
| src={assets.SmileStars.src} | |
| alt="Smile Stars" | |
| className="absolute -right-8 top-[4%] w-32 rotate-2 md:right-[1%] lg:right-[9%]" | |
| loading="lazy" | |
| /> | |
| {lines.map((line, index) => ( | |
| <div | |
| key={index} | |
| className={`font-display text-violet-3 relative z-10 mx-auto w-4/5 max-w-4xl text-center uppercase leading-[0.825]`} | |
| > | |
| <AutoTextSize maxFontSizePx={400}>{line}</AutoTextSize> | |
| </div> | |
| ))} | |
| </Stack> | |
| ) | |
| } |
| const Layout = ({ children, className, newLayout = false }: LayoutProps) => { | ||
| const [isReady, setIsReady] = useState(false) | ||
| const [showModal, setShowModal] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| setIsReady(true) | ||
| }, []) | ||
|
|
||
| return ( | ||
| isReady && ( | ||
| <> | ||
| <style jsx global>{` | ||
| html { | ||
| font-family: ${roboto.style.fontFamily}; | ||
| } | ||
| `}</style> | ||
| <div className="bg-violet-9 relative"> | ||
| <div className="flex min-h-screen flex-col "> | ||
| <Header newLayout={newLayout} /> | ||
| <div className="flex grow justify-center"> | ||
| <div | ||
| className={`4xl:max-w-full flex grow flex-col justify-center pb-2 pt-6 sm:mx-auto sm:px-16 md:px-5 lg:px-6 2xl:px-8 ${className}`} | ||
| style={{ flexGrow: 1 }} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| <Footer newLayout={newLayout} /> | ||
| <Modal | ||
| visible={showModal} | ||
| onClose={() => { | ||
| setShowModal(false) | ||
| }} | ||
| classNameWrapperDiv="px-5 pb-7 pt-8" | ||
| classButtonClose="hidden" | ||
| className="z-50" | ||
| > | ||
| <Widget | ||
| id="lTEp058W" | ||
| style={{ width: '100%', height: '400px' }} | ||
| className="center-xy items-center self-center" | ||
| onSubmit={() => { | ||
| setShowModal(false) | ||
| }} | ||
| /> | ||
| </Modal>{' '} | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| ) | ||
| } |
There was a problem hiding this comment.
LGTM! But consider improving the modal's visibility state management.
The Layout component is correctly implemented and uses Tailwind CSS for styling. However, consider using a more descriptive state name for the modal's visibility, such as isModalVisible, to improve readability.
Apply this diff to improve the modal's visibility state management:
- const [showModal, setShowModal] = useState(false)
+ const [isModalVisible, setIsModalVisible] = useState(false)
- <Modal visible={showModal} onClose={() => setShowModal(false)} ... >
+ <Modal visible={isModalVisible} onClose={() => setIsModalVisible(false)} ... >
- <Widget ... onSubmit={() => setShowModal(false)} />
+ <Widget ... onSubmit={() => setIsModalVisible(false)} />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.
| const Layout = ({ children, className, newLayout = false }: LayoutProps) => { | |
| const [isReady, setIsReady] = useState(false) | |
| const [showModal, setShowModal] = useState(false) | |
| useEffect(() => { | |
| setIsReady(true) | |
| }, []) | |
| return ( | |
| isReady && ( | |
| <> | |
| <style jsx global>{` | |
| html { | |
| font-family: ${roboto.style.fontFamily}; | |
| } | |
| `}</style> | |
| <div className="bg-violet-9 relative"> | |
| <div className="flex min-h-screen flex-col "> | |
| <Header newLayout={newLayout} /> | |
| <div className="flex grow justify-center"> | |
| <div | |
| className={`4xl:max-w-full flex grow flex-col justify-center pb-2 pt-6 sm:mx-auto sm:px-16 md:px-5 lg:px-6 2xl:px-8 ${className}`} | |
| style={{ flexGrow: 1 }} | |
| > | |
| {children} | |
| </div> | |
| </div> | |
| <Footer newLayout={newLayout} /> | |
| <Modal | |
| visible={showModal} | |
| onClose={() => { | |
| setShowModal(false) | |
| }} | |
| classNameWrapperDiv="px-5 pb-7 pt-8" | |
| classButtonClose="hidden" | |
| className="z-50" | |
| > | |
| <Widget | |
| id="lTEp058W" | |
| style={{ width: '100%', height: '400px' }} | |
| className="center-xy items-center self-center" | |
| onSubmit={() => { | |
| setShowModal(false) | |
| }} | |
| /> | |
| </Modal>{' '} | |
| </div> | |
| </div> | |
| </> | |
| ) | |
| ) | |
| } | |
| const Layout = ({ children, className, newLayout = false }: LayoutProps) => { | |
| const [isReady, setIsReady] = useState(false) | |
| const [isModalVisible, setIsModalVisible] = useState(false) | |
| useEffect(() => { | |
| setIsReady(true) | |
| }, []) | |
| return ( | |
| isReady && ( | |
| <> | |
| <style jsx global>{` | |
| html { | |
| font-family: ${roboto.style.fontFamily}; | |
| } | |
| `}</style> | |
| <div className="bg-violet-9 relative"> | |
| <div className="flex min-h-screen flex-col "> | |
| <Header newLayout={newLayout} /> | |
| <div className="flex grow justify-center"> | |
| <div | |
| className={`4xl:max-w-full flex grow flex-col justify-center pb-2 pt-6 sm:mx-auto sm:px-16 md:px-5 lg:px-6 2xl:px-8 ${className}`} | |
| style={{ flexGrow: 1 }} | |
| > | |
| {children} | |
| </div> | |
| </div> | |
| <Footer newLayout={newLayout} /> | |
| <Modal | |
| visible={isModalVisible} | |
| onClose={() => { | |
| setIsModalVisible(false) | |
| }} | |
| classNameWrapperDiv="px-5 pb-7 pt-8" | |
| classButtonClose="hidden" | |
| className="z-50" | |
| > | |
| <Widget | |
| id="lTEp058W" | |
| style={{ width: '100%', height: '400px' }} | |
| className="center-xy items-center self-center" | |
| onSubmit={() => { | |
| setIsModalVisible(false) | |
| }} | |
| /> | |
| </Modal>{' '} | |
| </div> | |
| </div> | |
| </> | |
| ) | |
| ) | |
| } |
| const NavBarContainer = ({ children, newLayout, ...props }: { children: React.ReactNode; newLayout: Boolean }) => { | ||
| const themeBG = newLayout ? 'transparent' : 'black' | ||
| const themeColor = newLayout ? 'black' : 'white' | ||
|
|
||
| return ( | ||
| <Flex | ||
| as="nav" | ||
| align="center" | ||
| justify="space-between" | ||
| wrap="wrap" | ||
| w="100%" | ||
| bg={{ base: 'black', md: 'black' }} | ||
| color={{ base: 'white', md: 'white' }} | ||
| bg={{ base: themeBG, md: themeBG }} | ||
| color={{ base: themeColor, md: themeColor }} | ||
| {...props} | ||
| className="text-h6" | ||
| className="font-black" |
There was a problem hiding this comment.
Change Boolean to boolean.
The type for newLayout should be boolean instead of Boolean for consistency with TypeScript conventions.
Apply this diff to fix the type:
-const NavBarContainer = ({ children, newLayout, ...props }: { children: React.ReactNode; newLayout: Boolean }) => {
+const NavBarContainer = ({ children, newLayout, ...props }: { children: React.ReactNode; newLayout: boolean }) => {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.
| const NavBarContainer = ({ children, newLayout, ...props }: { children: React.ReactNode; newLayout: Boolean }) => { | |
| const themeBG = newLayout ? 'transparent' : 'black' | |
| const themeColor = newLayout ? 'black' : 'white' | |
| return ( | |
| <Flex | |
| as="nav" | |
| align="center" | |
| justify="space-between" | |
| wrap="wrap" | |
| w="100%" | |
| bg={{ base: 'black', md: 'black' }} | |
| color={{ base: 'white', md: 'white' }} | |
| bg={{ base: themeBG, md: themeBG }} | |
| color={{ base: themeColor, md: themeColor }} | |
| {...props} | |
| className="text-h6" | |
| className="font-black" | |
| const NavBarContainer = ({ children, newLayout, ...props }: { children: React.ReactNode; newLayout: boolean }) => { | |
| const themeBG = newLayout ? 'transparent' : 'black' | |
| const themeColor = newLayout ? 'black' : 'white' | |
| return ( | |
| <Flex | |
| as="nav" | |
| align="center" | |
| justify="space-between" | |
| wrap="wrap" | |
| w="100%" | |
| bg={{ base: themeBG, md: themeBG }} | |
| color={{ base: themeColor, md: themeColor }} | |
| {...props} | |
| className="font-black" |
Tools
Biome
[error] 299-299: Don't use 'Boolean' as a type.
Use lowercase primitives for consistency.
Safe fix: Use 'boolean' instead(lint/complexity/noBannedTypes)
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (8)
- package.json (2 hunks)
- src/components/Club/faq.tsx (1 hunks)
- src/components/Club/features.tsx (1 hunks)
- src/components/Club/hero.tsx (1 hunks)
- src/components/Club/imageAssets.tsx (1 hunks)
- src/components/Club/mike.tsx (1 hunks)
- src/components/Club/story.tsx (1 hunks)
- src/styles/globals.css (1 hunks)
Files skipped from review as they are similar to previous changes (7)
- package.json
- src/components/Club/faq.tsx
- src/components/Club/features.tsx
- src/components/Club/hero.tsx
- src/components/Club/mike.tsx
- src/components/Club/story.tsx
- src/styles/globals.css
Additional comments not posted (4)
src/components/Club/imageAssets.tsx (4)
36-88: Verify assets and class names. Addaltattributes for accessibility.
- Ensure that the assets being used (e.g.,
assets.StopSign.src,assets.Star.src) are correctly imported and exist.- Verify that the class names used (e.g.,
absolute -left-[52%] -top-4 w-40 -rotate-3 md:-left-[28%]) are valid Tailwind CSS classes.- Consider adding
altattributes to the images for accessibility.Example:
<motion.img initial={{ scale: 1.2, rotate: 5, translateY: 10 }} whileInView={{ scale: 1, rotate: 0, translateY: 0 }} whileHover={{ rotate: 4 }} transition={{ type: 'spring', damping: 10 }} src={assets.StopSign.src} className="absolute -left-[52%] -top-4 w-40 -rotate-3 md:-left-[28%]" + alt="Stop Sign" />Run the following script to verify the assets:
Verification successful
Assets and class names verified. Add
altattributes for accessibility.
- The assets used in the
StoryImagesfunction are correctly imported and exist in the codebase.- The Tailwind CSS class names are valid.
- Consider adding
altattributes to the images for accessibility.Example:
<motion.img initial={{ scale: 1.2, rotate: 5, translateY: 10 }} whileInView={{ scale: 1, rotate: 0, translateY: 0 }} whileHover={{ rotate: 4 }} transition={{ type: 'spring', damping: 10 }} src={assets.StopSign.src} className="absolute -left-[52%] -top-4 w-40 -rotate-3 md:-left-[28%]" + alt="Stop Sign" />Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Test: Search for the asset imports. Expect: Only valid asset imports. rg --type tsx 'assets\..*\.src'Length of output: 61
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Find all .tsx files and search for asset imports. fd -e tsx -x rg 'assets\..*\.src' {} # Verify the validity of Tailwind CSS classes by checking for common patterns. rg 'className="[^"]+"' -o --no-filename | sed 's/className="//;s/"//' | tr ' ' '\n' | sort | uniq -c | sort -nrLength of output: 15233
107-194: Verify assets and class names. Addaltattributes for accessibility.
- Ensure that the assets being used (e.g.,
assets.SmileHigh.src,assets.HandSnap.src) are correctly imported and exist.- Verify that the class names used (e.g.,
absolute -left-10 -top-6 w-30 md:-top-16 md:left-[1%] lg:left-[14%] xl:left-[20%]) are valid Tailwind CSS classes.- Consider adding
altattributes to the images for accessibility.Example:
<motion.img initial={{ opacity: 0, translateY: 18, translateX: -5 }} whileInView={{ opacity: 1, translateY: 0, translateX: 0 }} whileHover={{ scale: 1.15, translateY: -1, translateX: -2, rotate: 3 }} transition={{ type: 'spring', damping: 6 }} src={assets.SmileHigh.src} className="absolute -left-10 -top-6 w-30 md:-top-16 md:left-[1%] lg:left-[14%] xl:left-[20%]" + alt="Smile High" />Run the following script to verify the assets:
Verification successful
Assets and class names verified. Add
altattributes for accessibility.
- The assets used in the
FeaturesImagescomponent are correctly imported and exist in the codebase.- The Tailwind CSS classes used appear to be valid.
- Consider adding
altattributes to the images for accessibility.Example:
<motion.img initial={{ opacity: 0, translateY: 18, translateX: -5 }} whileInView={{ opacity: 1, translateY: 0, translateX: 0 }} whileHover={{ scale: 1.15, translateY: -1, translateX: -2, rotate: 3 }} transition={{ type: 'spring', damping: 6 }} src={assets.SmileHigh.src} className="absolute -left-10 -top-6 w-30 md:-top-16 md:left-[1%] lg:left-[14%] xl:left-[20%]" + alt="Smile High" />Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Test: Search for the asset imports. Expect: Only valid asset imports. rg --type tsx 'assets\..*\.src'Length of output: 61
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Test: Search for the asset imports. Expect: Only valid asset imports. rg 'assets\..*\.src'Length of output: 6558
Script:
#!/bin/bash # Description: Verify that the Tailwind CSS classes used are valid. # Test: Search for class names in the file and verify against Tailwind CSS documentation. rg --only-matching --no-filename 'className="[^"]+"' | sed 's/className="//;s/"//' | tr ' ' '\n' | sort | uniqLength of output: 6155
1-31: Verify assets and class names. Addaltattributes for accessibility.
- Ensure that the assets being used (e.g.,
assets.Star.src,assets.HandToken.src) are correctly imported and exist.- Verify that the class names used (e.g.,
absolute left-[16%] top-[20%] w-12 lg:top-[28%]) are valid Tailwind CSS classes.- Consider adding
altattributes to the images for accessibility.Example:
<motion.img initial={{ opacity: 0, translateY: 20, translateX: 5 }} whileInView={{ opacity: 1, translateY: 0, translateX: 0 }} whileHover={{ scale: 1.1, translateY: 2, translateX: 1, rotate: 2 }} transition={{ type: 'spring', damping: 5 }} src={assets.Star.src} className="absolute left-[16%] top-[20%] w-12 lg:top-[28%]" + alt="Star" />Run the following script to verify the assets:
Verification successful
Assets are correctly imported. Add
altattributes for accessibility.The assets
StarandHandTokenare correctly imported and exist in the@/assetsmodule. Ensure that the Tailwind CSS class names are valid, and consider addingaltattributes to the images for better accessibility.
Assets:
StarandHandTokenare confirmed to be correctly imported fromsrc/assets/illustrations/index.ts.Accessibility:
- Add
altattributes to the images to improve accessibility.Example:
<motion.img initial={{ opacity: 0, translateY: 20, translateX: 5 }} whileInView={{ opacity: 1, translateY: 0, translateX: 0 }} whileHover={{ scale: 1.1, translateY: 2, translateX: 1, rotate: 2 }} transition={{ type: 'spring', damping: 5 }} src={assets.Star.src} className="absolute left-[16%] top-[20%] w-12 lg:top-[28%]" + alt="Star" />Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Test: Search for the asset imports. Expect: Only valid asset imports. rg --type tsx 'assets\..*\.src'Length of output: 61
Script:
#!/bin/bash # Description: Verify that the assets being used are correctly imported and exist. # Test: Search for the asset imports across all files. rg 'assets\..*\.src'Length of output: 6558
Script:
#!/bin/bash # Description: Verify the existence of `Star` and `HandToken` in the `@/assets` module. # Test: Search for the declarations of `Star` and `HandToken` in the assets module. rg 'export.*(Star|HandToken)' $(fd assets)Length of output: 441
93-105: Verify asset and class names.
- Ensure that the asset being used (e.g.,
assets.ClaimChainsBadge.src) is correctly imported and exists.- Verify that the class names used (e.g.,
mx-auto w-80 -rotate-6 md:mt-8) are valid Tailwind CSS classes.Run the following script to verify the asset:
Verification successful
Asset and Class Names Verified
The asset
ClaimChainsBadgeis correctly imported and exists in the codebase. The Tailwind CSS class names used in theFeaturesBadgeImagecomponent are valid. No issues were found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the asset being used is correctly imported and exists. # Test: Search for the asset import. Expect: Only valid asset import. rg --type tsx 'assets\.ClaimChainsBadge\.src'Length of output: 75
Script:
#!/bin/bash # Description: Verify that the asset being used is correctly imported and exists. # Test: Search for the asset import across all files. Expect: Only valid asset import. rg 'assets\.ClaimChainsBadge\.src'Length of output: 118
Script:
#!/bin/bash # Description: Verify the import statement for assets in the file to ensure ClaimChainsBadge is correctly imported. # Test: Search for the import statement of assets in the specified file. rg 'import .*assets' src/components/Club/imageAssets.tsxLength of output: 93
Script:
#!/bin/bash # Description: Verify the existence of ClaimChainsBadge in the assets module. # Test: Search for ClaimChainsBadge in the assets module. rg 'ClaimChainsBadge' $(fd 'assets' | grep -v 'node_modules')Length of output: 293
Script:
#!/bin/bash # Description: Verify the validity of Tailwind CSS class names used in the FeaturesBadgeImage component. # Test: List the Tailwind CSS class names used in the component. echo "mx-auto w-80 -rotate-6 md:mt-8" | tr ' ' '\n' | sort | uniqLength of output: 98
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- src/components/Club/faq.tsx (1 hunks)
- src/components/Club/features.tsx (1 hunks)
- src/components/Club/mike.tsx (1 hunks)
- src/components/Club/story.tsx (1 hunks)
- src/styles/globals.css (1 hunks)
Files skipped from review as they are similar to previous changes (5)
- src/components/Club/faq.tsx
- src/components/Club/features.tsx
- src/components/Club/mike.tsx
- src/components/Club/story.tsx
- src/styles/globals.css
2 participants
Creation of new landing page at /club with components for each section and props to manage content.
Summary by CodeRabbit
New Features
Enhancements
Styling Improvements