Mobile App Landing Page

A modern, responsive landing page template for mobile applications

Built with Astro, React, and Tailwind CSS for optimal performance and developer experience

---

✨ Features

📱 Responsive Design	Perfectly optimized for all devices and screen sizes
🖼️ Device Preview	Interactive toggle between iPhone and iPad screenshots
🎨 Modern UI/UX	Clean design with smooth Framer Motion animations
📝 Markdown Support	Easy editing of Privacy Policy and Terms of Service
🔍 SEO Optimized	Built-in meta tags and semantic HTML structure
⚡ Lightning Fast	Astro's island architecture for optimal performance
🌗 Dark Mode	Beautiful dark theme by default
♿ Accessible	WCAG compliant with proper ARIA labels

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/bohd4nx/mobile-landing.git
cd mobile-landing

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🎨 Customization Guide

1. App Information

Edit src/config/appInfo.ts:

export const appInfo = {
  title: "Your App Name",
  description: "Your app description",
  logo: {
    type: "image", // or "iframe" for animated logos
    src: "path/to/logo.png"
  },
  storeLinks: {
    apple: "https://apps.apple.com/...",
    google: "https://play.google.com/..."
  }
};

2. Features Section

Edit src/config/features.ts:

import { FiStar } from "react-icons/fi";

export const features = [
  {
    title: "Amazing Feature",
    description: "Description of your feature",
    icon: FiStar
  }
  // Add more features...
];

3. Screenshots

1. Add screenshots to:

   • public/screenshots/iphone/ (9:16 aspect ratio)
   • public/screenshots/ipad/ (4:3 aspect ratio)

2. Update src/config/screenshots.ts:

export const screenshots = {
  iphone: ["screenshots/iphone/1.png", "screenshots/iphone/2.png"],
  ipad: ["screenshots/ipad/1.png", "screenshots/ipad/2.png"]
};

4. Styling

The project uses Tailwind CSS. Customize the theme in tailwind.config.cjs:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#your-color",
        // Add custom colors
      }
    }
  }
};

🐛 Troubleshooting

Common Issues

Screenshots not displaying

• Ensure images are in the correct folders (public/screenshots/iphone/ or public/screenshots/ipad/)
• Check file paths in src/config/screenshots.ts
• Verify image file extensions match the configuration

Build errors

• Clear the cache: rm -rf .astro node_modules
• Reinstall dependencies: npm install
• Ensure Node.js version is 18 or higher

Styling issues

• Run npm run dev to ensure Tailwind CSS is processing
• Check for conflicting CSS classes
• Verify Tailwind configuration

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Astro
• Icons by React Icons
• Animations by Framer Motion

---

Made with ❤️ by Bohdan

_{If you found this project helpful, please consider giving it a ⭐}