Skip to content

README.md

Latest commit

 

History

History
145 lines (108 loc) · 5.1 KB

README.md

File metadata and controls

145 lines (108 loc) · 5.1 KB
Raw

Soapbox Marketing Website

A modern, beautiful marketing website for Soapbox - showcasing tools to build your own projects and Nostr clients built with Soapbox tools.

🚀 Features

Design & User Experience

  • Modern Design: Clean, professional design with Soapbox brand colors (Azure blue theme)
  • Responsive: Fully responsive design that works on all devices
  • Typography: Beautiful typography using Inter Variable and Outfit Variable fonts
  • Smooth Animations: Hover effects and transitions throughout
  • Mobile Navigation: Collapsible mobile menu with smooth interactions

Content Structure

  • Homepage: Hero section, tools overview, showcase preview, and company values
  • Tools Page: Detailed showcase of all Soapbox tools with features and benefits
  • Showcase Page: Real platforms built with Soapbox tools, organized by category

Key Sections

1. Tools to Build Your Project

  • Ditto: Community Platform Builder - Build decentralized communities on Nostr
  • MKStack: Platform Framework - Create custom social platforms and applications
  • Stacks: AI Project Templates - Share and discover AI project templates
  • Nostrbook: Documentation Registry - Comprehensive Nostr documentation
  • Nostrnips.com: NIP Explorer - Explore Nostr Improvement Proposals
  • Nostrify: Development Framework - TypeScript framework for Nostr development

2. Nostr Clients Built with Soapbox Tools

Featured Platforms:

  • Ditto.pub: Flagship community platform (5,000+ users, 50,000+ posts)
  • Henhouse.social: Women-focused Nostr community (1,200+ members)

MKStack Platforms:

  • Bookstr: Decentralized platform for book lovers
  • Blobbi: Creative platform for artists and designers
  • GeoCache Network: Modern geocaching platform

Community Platforms:

  • Cobrafuma.com: Brazilian Portuguese-language community
  • TechNostr: Developer and tech enthusiast community
  • ArtistsNostr: Creative community for artists

Success Metrics

  • 15+ Active Platforms
  • 25,000+ Total Users
  • 500,000+ Posts Created
  • 99.9% Uptime

🛠️ Technology Stack

  • React 18.x: Modern React with hooks and concurrent features
  • TypeScript: Type-safe development
  • Tailwind CSS: Utility-first CSS framework with custom Soapbox theme
  • Vite: Fast build tool and development server
  • shadcn/ui: Beautiful, accessible UI components
  • React Router: Client-side routing
  • Lucide React: Beautiful icons

🎨 Design System

Colors

  • Primary (Azure): hsl(207 90% 42%) - Soapbox brand blue
  • Gradients: Azure to blue, violet to purple, emerald to teal
  • Supporting Colors: Violet, emerald, orange, pink for different tools/categories

Typography

  • Display Font: Outfit Variable - Used for headings and brand elements
  • Body Font: Inter Variable - Used for body text and UI elements

Components

  • Cards: Hover effects with shadow and border color changes
  • Buttons: Primary (Azure), Secondary, and Outline variants
  • Navigation: Sticky header with mobile-responsive menu
  • Footer: Comprehensive links and company information

📱 Responsive Design

  • Mobile-First: Designed for mobile devices first
  • Breakpoints: Responsive design for all screen sizes
  • Touch-Friendly: Large touch targets for mobile users
  • Performance: Optimized images and efficient CSS

🌟 Key Features Highlighted

1. Tools Emphasis

  • Comprehensive tool showcase with detailed feature lists
  • Visual icons and color coding for each tool
  • Clear value propositions and use cases
  • Call-to-action buttons for each tool

2. Client Showcase

  • Real-world examples of platforms built with Soapbox tools
  • Success metrics and user statistics
  • Visual categorization (Community, Creative, Technical, etc.)
  • Direct links to live platforms

3. Company Values

  • Always Open Source: Complete transparency and control
  • Decentralized by Design: Data sovereignty and independence
  • Production Ready: Battle-tested tools powering real platforms

🚀 Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

📄 Pages

  • / - Homepage with overview and hero section
  • /tools - Detailed tools showcase
  • /showcase - Client platforms and success stories

🔗 Navigation

The website features a consistent navigation structure:

  • Home: Overview and introduction
  • Tools: Detailed tool information
  • Showcase: Real platform examples
  • Get Started: Call-to-action throughout

📈 Performance

  • Fast Loading: Optimized bundle size and efficient code splitting
  • SEO Ready: Proper meta tags and semantic HTML
  • Accessibility: WCAG compliant with proper ARIA labels
  • Modern Standards: Built with latest web standards and best practices

Built by builders, for builders. 🛠️

This marketing website effectively showcases Soapbox as a comprehensive toolkit for building decentralized platforms and communities, with real-world examples demonstrating the power and flexibility of the tools.