The ultimate modern landing page template for mobile applications
Built with cutting-edge technologies: Astro, React, TypeScript & Tailwind CSS
| 📱 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 |
Make sure you have these installed:
- Node.js 20+
- npm, yarn, or pnpm
# 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
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
-
iPhone Screenshots →
public/assets/screenshots/iphone/- Aspect ratio:
9:16 - Recommended width:
260px - Format: PNG or WEBP
- Aspect ratio:
-
iPad Screenshots →
public/assets/screenshots/ipad/- Aspect ratio:
4:3 - Recommended width:
360px - Format: PNG or WEBP
- Aspect ratio:
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",
},
];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.
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 ⭐