🚀 Mobile App Landing Page

The ultimate modern landing page template for mobile applications

Built with cutting-edge technologies: Astro, React, TypeScript & Tailwind CSS

Report Bug · Request Feature · View Demo

---

Features

📱 Responsive Design	Perfectly optimized for all devices and screen sizes
🖼️ Device Preview	Interactive toggle between iPhone and iPad screenshots with lightbox
🎨 Modern UI/UX	Clean design with smooth Framer Motion animations
🌗 Theme System	Light/Dark/System theme with persistent storage
🔍 SEO Optimized	Built-in meta tags and semantic HTML structure
📊 User Reviews	Beautiful review cards with star ratings

🚀 Quick Start Guide

📋 Prerequisites

Make sure you have these installed:

• Node.js 20+
• 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

🎉 That's it! Your landing page will be running at http://localhost:4321

☁️ Cloudflare Deployment

This project is optimized for Cloudflare Pages.

1. Connect your repository to Cloudflare Pages.
2. Configure Build Settings:
   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist
3. Compatibility Date: Set to 2025-12-28 or later.
4. Environment Variables: Ensure NODE_VERSION is set to 20 or higher.

---

🎨 Customization Made Easy

Site Configuration src/config/site.ts

export const siteConfig = {
    name: "Your App Name", // Your application name
    description: "Here you can write a brief description of your application. Tell users about its main features and benefits in 1-2 sentences.", // SEO description
    keywords: ["mobile app", "landing page", "astro", "react", "typescript"], // SEO keywords
    logo: {
        src192: "/assets/favicon-192.svg", // Logo 192x192px
        src512: "/assets/favicon-512.svg", // Logo 512x512px
    },
    storeLinks: {
        apple: "#", // App Store link
        google: "#", // Google Play link
    },
    socialLinks, // Imported from socialLinks.ts
} as const;

Features Section src/config/features.ts

import { FiBox, FiStar, FiZap } from "react-icons/fi";
import type { Feature } from "@/types/app";

export const features: Feature[] = [
    {
        title: "Main Feature",
        description: "Describe your main feature here. What makes it special?",
        icon: FiStar,
    },
    {
        title: "Another Feature", 
        description: "What else can your app do? Tell users about it here.",
        icon: FiZap,
    },
    {
        title: "One More Feature",
        description: "Add another key feature of your application here.",
        icon: FiBox,
    },
];

Screenshots Setup src/config/screenshots.ts

Adding Your Screenshots

1. iPhone Screenshots → public/assets/screenshots/iphone/

   • Aspect ratio: 9:16
   • Recommended width: 260px
   • Format: PNG or WEBP

2. iPad Screenshots → public/assets/screenshots/ipad/

   • Aspect ratio: 4:3
   • Recommended width: 360px
   • Format: PNG or WEBP

Update Configuration

import type { Screenshots } from "@/types/app";

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

User Reviews src/config/reviews.ts

import type { Review } from "@/types/app";

export const reviews: Review[] = [
    {
        author: "John Doe",
        rating: 5,
        text: "Amazing app! Really helped me with my daily tasks.",
        avatar: "/assets/avatars/john.jpg", // Optional
    },
    {
        author: "Jane Smith",
        rating: 4,
        text: "Great functionality and beautiful design.",
        // No avatar - will show initials
    },
];

FAQ Section src/config/faqs.ts

import type { FAQ } from "@/types/app";

export const faqs: FAQ[] = [
    {
        question: "How do I get started?",
        answer: "Simply download the app from your preferred store and follow the onboarding process.",
    },
    {
        question: "Is there a free trial?",
        answer: "Yes! We offer a 14-day free trial with full access to all features.",
    },
    {
        question: "Can I cancel anytime?",
        answer: "Absolutely. You can cancel your subscription at any time without penalties.",
    },
];

Social Media Links src/config/socialLinks.ts

import {
    RiInstagramFill,
    RiTelegram2Fill,
    RiTwitterXFill,
} from "react-icons/ri";
import type { SocialLink } from "@/types/app";

export const socialLinks: SocialLink[] = [
    {
        url: "https://instagram.com/yourapp",
        icon: RiInstagramFill,
        label: "Instagram",
    },
    {
        url: "https://t.me/yourapp", 
        icon: RiTelegram2Fill,
        label: "Telegram",
    },
    {
        url: "https://twitter.com/yourapp",
        icon: RiTwitterXFill,
        label: "Twitter",
    },
];

---

📄 Content Pages

🔒 Privacy Policy & Terms

Edit these Markdown files to customize your legal pages:

• Privacy Policy: src/pages/content/privacy.md
• Terms of Service: src/pages/content/terms.md

Both pages support full Markdown syntax and are automatically styled.

---

License

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

---

Made with ❤️ by Bohdan

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