R2-D1 Geospatial Platform - Promotional Website

A comprehensive promotional website built with Next.js, Material-UI, and PWA capabilities to showcase the R2-D1 Serverless Geospatial Platform.

Features

• Modern Design: Dark theme with gradient accents and smooth animations
• Fully Responsive: Mobile-first design that works on all devices
• Progressive Web App: Installable with offline support
• Material-UI: Professional UI components with custom theming
• Framer Motion: Smooth scroll animations and transitions
• Performance Charts: Interactive visualizations using Recharts
• TypeScript: Type-safe development

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Open http://localhost:3000

Build for Production

# Create optimized production build
npm run build

# Start production server
npm start

# Or export static site
npm run export

Project Structure

geospatial-promo-site/
├── app/
│   ├── layout.tsx          # Root layout with MUI theme
│   ├── page.tsx            # Main landing page
│   └── theme.ts            # Material-UI theme configuration
├── components/
│   ├── Navigation.tsx      # Responsive navigation bar
│   ├── HeroSection.tsx     # Hero section with CTA
│   ├── FeaturesSection.tsx # Platform features
│   ├── ArchitectureSection.tsx # Three-tier architecture
│   ├── DemoSection.tsx     # Interactive demos
│   ├── UseCasesSection.tsx # Industry use cases
│   ├── PerformanceSection.tsx # Benchmarks & charts
│   ├── GettingStartedSection.tsx # Quick start guide
│   └── Footer.tsx          # Footer with links
├── public/
│   └── manifest.json       # PWA manifest
├── package.json
├── tsconfig.json
├── next.config.js          # Next.js + PWA config
└── README.md

Sections

1. Hero Section

• Eye-catching headline with gradient text
• Key metrics cards (query speed, edge locations, cost)
• Primary and secondary CTAs
• Animated background grid

2. Features Section

• 8 key features with icons and descriptions
• Hover effects with colored shadows
• Responsive grid layout

3. Architecture Section

• Three-tier architecture visualization (Client, Edge, Storage)
• Component breakdowns with chips
• Data flow description
• Animated arrows between layers

4. Demo Section

• 4 interactive code examples:
  • Vector Tile Generation
  • Spatial Analytics
  • OGC API Features
  • Data Pipelines
• Syntax-highlighted code blocks
• Capability tags for each demo

5. Use Cases Section

• 6 industry use cases:
  • Fleet & Logistics
  • Smart Cities
  • Supply Chain
  • Environmental Monitoring
  • Natural Resources
  • Satellite Imagery
• Capability tags and key metrics
• Hover animations

6. Performance Section

• Query performance comparison chart
• Scalability under load visualization
• Cost comparison graph
• Real-world benchmarks

7. Getting Started Section

• 4-step quick start guide
• Code snippets for each step
• Links to documentation
• Multiple CTAs (docs, API, examples)

8. Footer

• Company and product links
• Social media icons
• Legal links
• Technology credits

Customization

Theme Colors

Edit app/theme.ts to customize colors:

palette: {
  primary: { main: '#00D9FF' },    // Cyan
  secondary: { main: '#7C4DFF' },  // Purple
  // ... other colors
}

Content

All content is in the component files. Edit text, descriptions, and data directly in:

• components/HeroSection.tsx - Hero text and metrics
• components/FeaturesSection.tsx - Features list
• components/DemoSection.tsx - Demo examples
• etc.

Navigation

Edit navigation items in components/Navigation.tsx:

const navItems = [
  { label: 'Features', href: '#features' },
  // ... add more items
];

Deployment

Static Export

npm run build

The static site will be in the out/ directory. Deploy to:

• Cloudflare Pages
• Vercel
• Netlify
• GitHub Pages
• Any static hosting

Cloudflare Pages

# Connect to Cloudflare Pages via dashboard or Wrangler
wrangler pages project create geospatial-promo

# Deploy
wrangler pages deploy out

PWA Features

• Installable on mobile and desktop
• Offline support
• Custom app icon
• Splash screen
• Optimized caching

Performance

• Server-side rendering (SSR)
• Automatic code splitting
• Image optimization
• Lazy loading
• Minimal JavaScript bundle

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - See LICENSE file for details

Support

• Documentation: [Link to docs]
• Issues: [GitHub Issues]
• Email: support@example.com

Technologies Used

• Next.js 14: React framework
• Material-UI v5: Component library
• TypeScript: Type safety
• Framer Motion: Animations
• Recharts: Data visualizations
• next-pwa: PWA support
• Emotion: CSS-in-JS

Credits

Built with ❤️ for the R2-D1 Geospatial Platform