Skip to content
/ mobile-landing Public template

A sleek and modern mobile landing page for the app, designed for a seamless user experience. Built with responsive design and optimized for performance.

License

Notifications You must be signed in to change notification settings

bohd4nx/mobile-landing

Repository files navigation

Mobile Landing Logo

🚀 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


🎨 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 Screenshotspublic/assets/screenshots/iphone/

    • Aspect ratio: 9:16
    • Recommended width: 260px
    • Format: PNG or WEBP
  2. iPad Screenshotspublic/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 ⭐

About

A sleek and modern mobile landing page for the app, designed for a seamless user experience. Built with responsive design and optimized for performance.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 2

  •  
  •