# BeRRRy HQ ## About This App A marketing website showcasing Strawberry Computer's vision for AI-native, adaptive computing ## Specification # Berrry Computer (πŸ“πŸ“πŸ“) - Marketing Website Create a modern, playful, and visually stunning marketing website for Berrry Computer that showcases their vision of AI-native computing. The site should feel fresh, innovative, and slightly whimsical while communicating serious technological ambition. **App Type: React Web App** - Best suited for this content-rich, multi-section marketing site with smooth scrolling, animations, and interactive elements. ## Design Philosophy - **Berrry Aesthetic**: Vibrant gradient colors (strawberry reds, pinks, purples, blues, oranges) inspired by the logo - **Modern & Playful**: Clean layouts with delightful micro-interactions and smooth animations - **Three R's Emphasis**: "BeRRRy" branding throughout - make those R's count! - **AI-Native Feel**: Subtle animations and effects that suggest intelligence and adaptability ## Header/Hero Section ### Logo Treatment - Use the provided colorful gradient flower logo - Process it with Nanobanana API to create subtle variations or effects (glow, depth, animated petals) - Display prominently at top with "BeRRRy Computer" (emphasize the three R's with bold or color treatment) - Tagline beneath: "Your computer should adapt to you, not the other way around" ### Hero Content - Large, attention-grabbing headline: "Computing That Conforms to You" - Subheadline: "We're reimagining what a computer means now that AI is widely available, fast, and cheap" - Animated gradient background with subtle strawberry/berry theme - CTA buttons: "Try Berrry.app" (primary) and "Read the Vision" (secondary) ## Main Content Sections ### 1. Vision Section Three column layout showcasing: - **Truly Personal** - Icon of adaptive interface, description - **Infinitely Customizable** - Natural language configuration visual - **Deeply Intelligent** - AI learning graphic Each card should have: - Gradient border matching logo colors - Hover effects (lift, glow, subtle animation) - Icon or illustration at top - Bold heading and concise description ### 2. Problems We're Solving Interactive accordion or card-flip layout: - Health Over Engagement - Integrated Daily Tasks - Better App Flow - People-Centered Messaging - Real User Control Each problem card expands to show more detail. Use contrasting colors and icons to differentiate each issue. ### 3. Master Plan Roadmap Visual timeline/roadmap showing progression: - **v0: Berrry.app** [Delivered] - Badge with checkmark - **v1: SpeakBuild** [In Progress] - Pulsing/animated indicator - **v2: AI Assistant** [Future] - Subtle outline - **v3: AI-Native Phone** [Future] - Subtle outline Each version should be a clickable card that expands to show details. Use progress indicators and visual connections between versions. ### 4. Open Source Projects GitHub-style cards for each project: - **unpkg.ai** - Module generation icon - **Vibe Compiler** - Compiler/build icon - **SpeakBuild** - Mobile/voice icon Each card links to GitHub repo, shows tech stack badges, and includes one-line description. ### 5. Philosophy Section Large quote section with animated text: > "I tell my computer what I want in natural language, and it either does it or teaches itself how. The system remembers my preferences and adapts to my specific way of working." Background: Subtle animated gradient or particle effect suggesting AI intelligence ### 6. Try It Now Section Prominent CTA to Berrry.app: - Screenshot or demo of the app in action - "Turn tweets into apps in ~4 minutes" - Live counter of apps generated (can be animated/estimated) - Twitter/Reddit mention instructions with visual examples ## UI Elements & Components ### Navigation - Sticky header with logo and nav links - Smooth scroll to sections - Mobile hamburger menu with slide-out drawer - BeRRRy branding always visible ### Interactive Elements - Parallax scrolling effects - Cards that tilt/lift on hover - Gradient transitions between sections - Animated icons and illustrations - Smooth fade-in animations as sections enter viewport ### Typography - Modern sans-serif font (Inter, Space Grotesk, or similar) - "BeRRRy" always with emphasis on the R's (bold, color, or size) - Large headings with gradient text effects - Clear hierarchy with generous spacing ### Color Palette Extract from logo and expand: - **Primary**: Vibrant pink/magenta (#FF1493, #FF69B4) - **Secondary**: Orange/coral (#FF6347, #FF8C00) - **Accent**: Cyan/blue (#00CED1, #1E90FF) - **Tertiary**: Purple (#9370DB, #8A2BE2) - **Background**: Deep navy/dark (#0A0A1F, #1A1A2E) with gradient overlays - **Text**: White/light gray for contrast ### Gradients - Use multi-color gradients inspired by the logo - Animated gradient backgrounds that slowly shift - Gradient text for headings - Gradient borders on cards ## Footer - Links to social media (Twitter @BerrryComputer, GitHub) - "Built with Berrry.app" - link to the app - Copyright: "Β© 2025 Strawberry Computer" - Contact/feedback links - Newsletter signup (optional) - Whimsical tagline: "Three R's for a reason πŸ“" ## Functionality ### Animations - Scroll-triggered fade-ins and slide-ups - Logo petals that subtly rotate or pulse - Gradient backgrounds that animate - Number counters that animate up - Hover effects on all interactive elements ### Responsive Design - Mobile-first approach - Breakpoints: mobile (< 640px), tablet (640-1024px), desktop (> 1024px) - Hamburger menu on mobile - Stacked cards on mobile, grid on desktop - Optimized touch targets for mobile ### Image Generation Use Nanobanana API to: - Process the logo with effects (glow, depth, variations) - Generate hero background imagery - Create section divider graphics - Generate complementary illustrations for each section ### Easter Eggs - Clicking the logo makes petals spin - Konami code reveals "berry mode" with extra animations - Hidden strawberry emojis scattered throughout - Hover on "RRR" reveals tooltip: "Yes, three R's. We like berries." ## Technical Implementation - React with hooks for state management - Framer Motion or React Spring for animations - Intersection Observer for scroll-triggered effects - Tailwind CSS for styling with custom gradient utilities - LocalStorage to remember user preferences (dark mode toggle, etc.) - Responsive images with lazy loading ## Tone & Voice - Playful but professional - Confident about the vision - Self-aware humor about the three R's - Emphasizes user empowerment and control - Balances whimsy with serious technical ambition - "We're building the future of computing, and having fun doing it" The website should feel like a delightful experience that makes visitors want to try Berrry.app immediately while understanding the deeper vision of Strawberry Computer. It's not just a marketing siteβ€”it's a demonstration of the design philosophy: adaptive, intelligent, and delightfully personal. ## About Berrry Berrry transforms your social media content into interactive web applications. Share a Twitter/X post or Reddit comment, and our AI creates a custom web app hosted at your own subdomain. **Visit**: https://berrry.app Transform your social media ideas into real web applications today.