[App Name] - Next.js + Tailwind Landing Page Template

A lightweight, easily configurable, and customizable Next.js and Tailwind CSS landing page template. Built to be adaptable, performant, and perfect for any iOS app launch, product showcase, or promotional site.

Features

Next.js app router with TypeScript
Tailwind CSS v3 for flexible styling customization
Smooth transitions powered by Framer Motion
Built-in font optimization with next/font
Automatic image optimization via next/image
Access to 31+ icon packs via React Icons
Near-perfect Lighthouse score
Modular, responsive, and scalable components
Privacy Policy & Contact pages included
Reusable contact information components

Sections

Hero
Partners or Clients Logos
Features
Pricing
Testimonials
FAQ
Statistics
CTA
Blog (with per-post CTA card)
Contact Page
Privacy Policy Page
Terms of Service Page
Footer

Note: This repo carries two parallel variants for some sections (e.g. Hero/mobile-kit/Hero, Footer/mobile-kit/Footer). The active ones (imported in layout.tsx/page.tsx) are the mobile-kit variants — see the comments at the top of those files to switch back to the original variant.

Getting Started

Prerequisites

Before starting, make sure you have the following installed:

Node.js: Version 18 or later
pnpm: Version 8 or later (this repo uses pnpm-lock.yaml; npm/yarn also work but pnpm is recommended)
Code editor: VS Code is recommended.

Steps

Install dependencies: Run pnpm install
Run the development server: pnpm dev
View your project: Open localhost:3000

Other useful commands: pnpm build (production build + type-check), pnpm start (run production build), pnpm lint (ESLint).

Converting This Landing Page for Your App

Follow this comprehensive guide to customize this template for your app. All customization can be done through simple edits to data files - no complex coding required!

Step 1: Update Your App Name

File to edit: /src/data/siteDetails.ts

Replace [App Name] with your actual app name:

const siteUrl = 'https://yourapp.com/'; // Change to your domain

export const siteDetails = {
    siteName: 'YourAppName',        // Change this
    siteUrl: siteUrl,
    metadata: {
        title: 'YourAppName - Your App Tagline',
        description: 'Your app description here',
    },
    language: 'en-us',
    locale: 'en-US',
    siteLogo: `${siteUrl}images/logo.png`, // Auto-generated from siteUrl
    googleAnalyticsId: '', // Add your GA4 ID here
}

Note: The siteLogo is automatically constructed from siteUrl + images/logo.png. Just update siteUrl once and the logo URL updates automatically!

Step 2: Update Contact Information

File to edit: /src/data/footer.ts

Update your contact details:

export const footerDetails = {
    subheading: "Your company tagline or description",
    email: 'contact@yourapp.com',      // Your email
    telephone: '+1 (555) 123-4567',    // Your phone
    socials: {
        twitter: 'https://twitter.com/yourapp',
        facebook: 'https://facebook.com/yourapp',
        linkedin: 'https://linkedin.com/company/yourapp',
        instagram: 'https://instagram.com/yourapp',
        // Uncomment and add others as needed:
        // github: 'https://github.com/yourapp',
        // youtube: 'https://youtube.com/@yourapp',
    }
}

These details will automatically appear in both the footer and contact page.

Step 3: Customize Content

Edit these files in /src/data/ to update your app's content:

File	What to Edit	Description
`heroAlt.ts`	Hero section (active)	Headline, subtitle, rewards badge, screenshots, store links — used by the active `mobile-kit/Hero`
`hero.ts`	Hero section (alt variant)	Used only if you switch back to the original `Hero` component
`benefits.tsx`	Benefits/Features	Your app's key features with icons
`pricing.ts`	Pricing tiers	Your subscription plans
`testimonials.ts`	User reviews	Customer testimonials
`faq.ts`	FAQ questions	Common questions and answers
`stats.tsx`	Statistics	Key metrics (users, downloads, etc.)
`cta.ts`	Call-to-action	Download CTA text and store links (used in the homepage CTA, the `BlogCTACard`, and Header buttons)
`appBanner.ts`	App banner screenshots	Screenshot stack shown in the CTA section
`blogPosts.ts`	Blog content	Blog post list, sections, and table-of-contents data

Example - Editing the active Hero Section (/src/data/heroAlt.ts):

export const heroAltDetails = {
    rewards: ["#1 App of the year"],
    headline: "Your App Headline Here",
    headlineMark: [3, 6],   // word range to highlight in the headline
    subtitle: "Your compelling subtitle that explains what your app does",
    usersDescription: "Loved by 50,000+ users worldwide",
    screenshots: ["/screenshots/app1.webp", "/screenshots/app2.webp", "/screenshots/app3.webp"],
    googlePlayLink: "https://play.google.com",
    appStoreLink: "https://apps.apple.com",
}

Step 4: Update Navigation & Pages

Navigation: /src/data/menuItems.ts

The template includes Features, Blog, and Contact links. Customize as needed:

export const menuItems: IMenuItem[] = [
    { text: "Features", url: "/#features" },
    { text: "Pricing", url: "/#pricing" },      // Add back if needed
    { text: "Blog", url: "/blog" },
    { text: "Contact", url: "/contact" },
]

Important: Links that point to a homepage section (an id such as #features, #pricing, #testimonials, #cta) must use the /#section-id form (leading slash), not a bare #section-id. This makes Next.js navigate to the homepage and scroll to the section even when the user is on another page (blog, contact, etc.). Bare #section-id only works while already on the homepage.

Privacy Policy: Edit /src/app/privacy/page.tsx to add your specific privacy details.

Contact Page: The contact page displays your contact information (email, phone, socials) from footer.ts. No form included.

Step 5: Replace Images

All images are located in /public/images/. Replace these files with your own:

Image File	Dimensions (Recommended)	Where It's Used	What to Replace
`hero-mockup.webp`	600x1200px	Hero section center	Your app screenshot or mockup
`hero-chart.webp`	400x300px	Hero section (optional)	Supporting visual/feature
`hero-transactions.webp`	400x300px	Hero section (optional)	Supporting visual/feature
`mockup-1.webp`	600x1200px	Benefits section	Feature showcase mockup #1
`mockup-2.webp`	600x1200px	Benefits section	Feature showcase mockup #2
`testimonial-1.webp`	200x200px	Testimonials	User avatar #1
`testimonial-2.webp`	200x200px	Testimonials	User avatar #2
`testimonial-3.webp`	200x200px	Testimonials	User avatar #3
`logo.png`	512x512px	Metadata/OG tags	Your app logo
`og-image.jpg`	1200x630px	Social media sharing	Open Graph preview image
`twitter-image.jpg`	1200x600px	Twitter sharing	Twitter card image

Important Notes:

Keep the same filenames OR update the references in the data files
Use WebP format for best performance (convert using Squoosh)
Optimize images before uploading to reduce bundle size

Example: To change the hero mockup:

Create your app mockup (600x1200px recommended)
Convert to WebP format
Replace /public/images/hero-mockup.webp with your image

OR rename your file and update /src/data/hero.ts:

centerImageSrc: '/images/your-custom-name.webp'

Step 6: Customize Colors & Styling

File to edit: /src/app/globals.css

Update the CSS variables to match your brand:

:root {
    --primary: #FED835;        /* Your primary brand color */
    --secondary: #304fff;      /* Your secondary color */
    --background: #FAFAFA;     /* Background color */
    --foreground: #1C1C1C;     /* Text color */
    --foreground-accent: #6B6B6B; /* Muted text color */

    /* Dark mode variants */
    --dark-background: #1C1C1C;
    --dark-foreground: #FAFAFA;
}

Fonts: The template uses Manrope (headings) and Source Sans 3 (body). To change fonts, edit /src/app/layout.tsx.

Step 7: Update App Store Links

File to edit: /src/data/cta.ts

Add your actual App Store and Google Play URLs:

export const ctaDetails = {
    heading: 'Join Over 1 Million Users To Transform Your Finances',
    subheading: 'Your journey starts here. Download [App Name] today!',
    appStoreUrl: 'https://apps.apple.com/app/your-app-id',     // Your App Store link
    googlePlayUrl: 'https://play.google.com/store/apps/details?id=com.yourapp' // Your Play Store link
}

These links are used in the CTA section download buttons.

Step 8: SEO & Metadata

Update metadata for better SEO in /src/data/siteDetails.ts:

metadata: {
    title: 'YourApp - One Sentence Description',
    description: 'A compelling description of your app (150-160 characters for best SEO)',
}

Add Open Graph images:

Create og-image.jpg (1200x630px) and place in /public/images/
Create twitter-image.jpg (1200x600px) and place in /public/images/

Step 9: Add Analytics (Optional)

The template ships with three optional analytics integrations wired up in /src/app/layout.tsx, each a no-op until configured:

Google Analytics — add your ID in /src/data/siteDetails.ts:

googleAnalyticsId: 'G-XXXXXXXXXX', // Your GA4 Measurement ID

Umami — set environment variables (see .env.example):

NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id
NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://cloud.umami.is/script.js   # or your self-hosted script URL

Vercel Analytics — already mounted via @vercel/analytics; just enable Web Analytics for your project in the Vercel dashboard.

File Structure Reference

mobile-app-landing-kit/
├── public/
│   ├── images/              # Mockups, avatars, OG/Twitter images, logo
│   └── screenshots/         # Hero/CTA screenshot stack
├── src/
│   ├── app/
│   │   ├── page.tsx         # Home page (assembles all sections)
│   │   ├── layout.tsx       # Root layout (fonts, metadata, analytics)
│   │   ├── globals.css      # Colors & global styles
│   │   ├── blog/
│   │   │   ├── page.tsx     # Blog index
│   │   │   └── [slug]/page.tsx  # Blog post template (+ BlogCTACard)
│   │   ├── contact/page.tsx
│   │   ├── privacy/page.tsx
│   │   └── terms/page.tsx
│   ├── components/          # Reusable React components
│   │   ├── Header.tsx       # Navigation (uses /#section anchors)
│   │   ├── Footer.tsx       # Original footer variant (not active)
│   │   ├── Hero.tsx         # Original hero variant (not active)
│   │   ├── BlogCTACard.tsx  # CTA card appended to every blog post
│   │   ├── ContactInfo.tsx  # Reusable contact component
│   │   ├── Benefits/, Pricing/   # Multi-file section components
│   │   ├── mobile-kit/      # ACTIVE Hero/Footer variants + iPhone frame, app banner, TOC
│   │   └── ...
│   └── data/                # ALL CONTENT GOES HERE
│       ├── siteDetails.ts   # App name, URL, metadata, GA id
│       ├── menuItems.ts     # Navigation links (use /#section for anchors)
│       ├── footer.ts        # Footer & contact info
│       ├── hero.ts          # Hero data (original variant)
│       ├── heroAlt.ts       # Hero data (ACTIVE mobile-kit variant)
│       ├── benefits.tsx     # Features/benefits
│       ├── pricing.ts       # Pricing tiers
│       ├── testimonials.ts  # User reviews
│       ├── faq.ts           # FAQ items
│       ├── stats.tsx        # Statistics
│       ├── cta.ts           # Call-to-action (home CTA, BlogCTACard, header buttons)
│       ├── appBanner.ts     # CTA screenshot stack
│       └── blogPosts.ts     # Blog posts & sections

Common Customization Tasks

Adding a New Section

Create component in /src/components/YourSection.tsx
Import and add to /src/app/page.tsx
Create data file in /src/data/yourSection.ts

Removing a Section

Open /src/app/page.tsx
Remove or comment out the component (e.g., <Pricing />)

Changing Icon

Icons use React Icons. To change:

Browse available icons at react-icons.github.io

Import in your data file:

import { FiCheckCircle } from 'react-icons/fi';

Use in your data:
```
icon: <FiCheckCircle size={26} />
```

Deploying on Vercel

The fastest way to deploy is on Vercel:

Click the "Deploy with Vercel" button at the top
Connect your GitHub repository
Vercel will automatically detect Next.js and deploy
Your site is live in under 60 seconds!

For other deployment options, check the Next.js deployment docs.

Troubleshooting

Images not loading?

Ensure images are in /public/images/
Check file paths in data files (should be /images/filename.webp)
Clear cache and restart dev server

Changes not appearing?

Restart the dev server (pnpm dev)
Clear browser cache (Cmd/Ctrl + Shift + R)
Check for TypeScript errors in terminal

Build errors?

Run pnpm build to see detailed errors
Check all imports are correct
Ensure all data files export properly

Contributing

This is an open-source project, and we welcome contributions! If you have ideas for new components, designs, layouts, or optimizations, please join us.

How to Contribute

Fork the Repository: Clone it locally.
Create a New Branch: For example, feature/new-section or fix/style-issue.
Develop and Test: Make sure your changes work and don't break existing functionality.
Submit a Pull Request: Open a PR with a clear description of your changes.

Ideas for Contributions

New component sections (team, comparison table, case studies)
Additional page variants (agency, eCommerce, portfolio)
Additional themes (dark mode toggle)
Documentation updates, tutorials, or guides

Community and Support

Join our community discussions on GitHub to share ideas, ask questions, or suggest improvements. Let's build something amazing together!

License

This project is open-source and available under the MIT License. Feel free to use, modify, and distribute it for personal or commercial projects.

Need a Starter Repo kit for ios App?

Get the repo here

Credits

Template by Nexi Launch
UI Design by Youthmind
Built with Next.js and Tailwind CSS

Name		Name	Last commit message	Last commit date
.github		.github
public		public
src		src
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
dev.log		dev.log
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Navigation Menu

Repository files navigation

[App Name] - Next.js + Tailwind Landing Page Template

Features

Sections

Getting Started

Prerequisites

Steps

Converting This Landing Page for Your App

Step 1: Update Your App Name

Step 2: Update Contact Information

Step 3: Customize Content

Step 4: Update Navigation & Pages

Step 5: Replace Images

Step 6: Customize Colors & Styling

Step 7: Update App Store Links

Step 8: SEO & Metadata

Step 9: Add Analytics (Optional)

File Structure Reference

Common Customization Tasks

Adding a New Section

Removing a Section

Changing Icon

Deploying on Vercel

Troubleshooting

Images not loading?

Changes not appearing?

Build errors?

Contributing

How to Contribute

Ideas for Contributions

Community and Support

License

Need a Starter Repo kit for ios App?

Credits

About

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

[App Name] - Next.js + Tailwind Landing Page Template

Features

Sections

Getting Started

Prerequisites

Steps

Converting This Landing Page for Your App

Step 1: Update Your App Name

Step 2: Update Contact Information

Step 3: Customize Content

Step 4: Update Navigation & Pages

Step 5: Replace Images

Step 6: Customize Colors & Styling

Step 7: Update App Store Links

Step 8: SEO & Metadata

Step 9: Add Analytics (Optional)

File Structure Reference

Common Customization Tasks

Adding a New Section

Removing a Section

Changing Icon

Deploying on Vercel

Troubleshooting

Images not loading?

Changes not appearing?

Build errors?

Contributing

How to Contribute

Ideas for Contributions

Community and Support

License

Need a Starter Repo kit for ios App?

Credits

About

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages