Now I have a good understanding of the current Ship or Die website. Let me generate design inspiration for the redesign and then build it.
Now I have all the context I need. Let me create a modern, bold redesign of the Ship or Die landing page with a dark theme, dramatic typography, and premium feel.
Now let me create all the components for the landing page:
Let me verify the redesign in the browser:
The hero section looks great! Let me scroll down to verify all the other sections rendered correctly:
I can see the problem section and the "How it Works" steps are rendering. Let me scroll down more to check the remaining sections:
The testimonials section looks great! Let me continue scrolling to check the pricing and FAQ:
I see it looks like we're looking at the background section. Let me click on "Pricing" in the nav to check that section:
The pricing section looks great! Let me check the FAQ section too:
The FAQ accordion is working beautifully. Now let me check the mobile responsiveness:
The mobile view looks great! Let me test the mobile menu:
The mobile menu is working perfectly with smooth animations. Let me reset the viewport and close the browser:
I've completely redesigned the Ship or Die landing page. Here's what I created:
Design System:
- Dark navy/black background with amber/gold primary accents and red accent color for "DIE"
- Custom color palette that captures the pirate theme while feeling modern and premium
- Clean typography with Inter font for body and Space Grotesk for display elements
Sections Built:
- Header - Sticky navigation with skull logo, nav links, and CTA button with mobile hamburger menu
- Hero - Bold typography with animated glow effect, badge showing active pirates, and dual CTA buttons
- Problem Section - Animated text that reveals the pain points of not shipping
- How It Works - 3-step process cards with icons, descriptions, and feature lists
- Founders Section - Profile cards for Marc Lou and Jack Friks with social links
- Testimonials - Grid of tweet-style cards with engagement metrics
- Pricing - Centered pricing card with scarcity indicators and feature list
- FAQ - Accordion-style FAQ with smooth animations
- Footer - Final CTA section with links
Features:
- Fully responsive (mobile-first design with hamburger menu)
- Smooth Framer Motion animations throughout
- Scroll-based reveal animations
- Interactive FAQ accordion
- Hover states and transitions
- Proper semantic HTML and accessibility