i want you to create a next js react app using the atomic structure and written in type script
i want the theme to be retro and to use the color scheme in the image
we are gonna be working on a homepage for an app called "music seeker"
it's an app where you can create your own music playlist and you will get recommendation from people
with similar taste
for now let's keep it simple
the header should have the name of the page a nav bar with 'home' 'music' and 'playlist' and sign in and sign upat the far right
Music Seeker - Retro Music Playlist App
I'll create a Next.js app with TypeScript using the atomic design structure and the retro color palette from your image. Let's build the homepage for "Music Seeker"!
I've created a Next.js app with TypeScript using the atomic design structure (atoms, molecules, organisms, templates, pages) and implemented a retro-themed homepage for "Music Seeker" with the color palette from your image:
- Yellow:
#FFF085 - Light Orange:
#FCB454 - Orange:
#FF9B17 - Coral:
#F16767
Features:
Header with:
- Logo and app name
- Navigation bar (Home, Music, Playlist)
- Sign In and Sign Up buttons
Hero Section with:
- Catchy headline and description
- Call-to-action buttons
- Decorative visual element
- Features Section highlighting the app's benefits
- CTA Section encouraging users to sign up
- Footer with additional links and information
The design uses retro styling with:
- Bold typography
- Bordered elements with drop shadows
- Vibrant colors from your palette
- Playful visual elements
Atomic Structure:
- Atoms: Logo, Button, NavLink (smallest UI components)
- Molecules: NavBar, AuthButtons, FeatureCard (combinations of atoms)
- Organisms: Header, HeroSection, FeaturesSection, CTASection, Footer (complex UI sections)
- Templates: HomePage (page layout)
- Pages: Home (final page with data)