🚀 Customizable App Landing Page Template

A beautiful, fully customizable landing page template built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion. Perfect for apps, SaaS products, or any digital service.

✨ Features

• 🎨 Centralized Configuration: Change all content from a single file
• 📱 Fully Responsive: Works perfectly on mobile, tablet, and desktop
• ⚡ Next.js 15: Latest features and optimizations
• 🎭 Smooth Animations: Beautiful Framer Motion animations
• 💎 Modern Design: Clean, professional, and conversion-focused
• 🔧 TypeScript: Type-safe configuration and development
• 🎯 SEO Ready: Optimized for search engines
• 🌈 Customizable Theme: Easy color and branding changes

🏗️ Template Sections

• Header: Sticky navigation with CTA button
• Hero: Eye-catching hero section with animated devices
• Experience: Showcase section with parallax scrolling
• Features: Alternating feature showcases
• Testimonials: Animated testimonials carousel
• Pricing: Flexible pricing table
• Call-to-Action: Conversion-focused CTA section
• Footer: Social links and navigation

🚀 Quick Start

1. Clone & Install

git clone <your-repo-url>
cd app-temp
npm install

2. Customize Your Content

Edit /src/config/app-config.ts to customize all text, images, and branding:

export const appConfig = {
  brand: {
    name: 'Your App Name',
    logo: '/your-logo.svg',
    tagline: 'Your amazing tagline',
    description: 'Your app description...',
  },
  // ... customize all sections
};

3. Add Your Images

• Place your images in the /public/ folder
• Update image paths in the config file
• Supported formats: SVG, PNG, JPG, WebP

4. Run Development Server

npm run dev

Open http://localhost:3000 to see your customized template.

📝 Configuration Guide

🎯 One-File Customization

Everything you need to customize is in /src/config/app-config.ts:

// Brand & Logo
brand: {
  name: "TaskMaster Pro",
  logo: "/taskmaster-logo.svg",
  tagline: "Master productivity with AI"
}

// Hero Section
hero: {
  title: "Transform your productivity",
  description: "AI-powered task management...",
  deviceImages: ["/device1.png", "/device2.png"]
}

// Features
features: {
  items: [
    {
      title: "Smart Scheduling",
      description: "AI learns your preferences",
      image: "/feature1.png"
    }
  ]
}

🎨 Theme Customization

Update colors by modifying the Tailwind classes in components or extend the theme configuration.

📱 Responsive Images

The template automatically optimizes images using Next.js Image component for better performance.

🗂️ Project Structure

src/
├── config/
│   └── app-config.ts          # 🎯 Main configuration file
├── components/
│   ├── Header.tsx            # Navigation header
│   ├── Hero.tsx              # Hero section
│   ├── Experience.tsx        # Experience showcase
│   ├── Features.tsx          # Features section
│   ├── Testimonials.tsx      # Customer testimonials
│   ├── Pricing.tsx           # Pricing plans
│   ├── Footer.tsx            # Footer with links
│   └── ui/                   # Reusable UI components
├── app/
│   ├── layout.tsx            # App layout & metadata
│   ├── page.tsx              # Main page composition
│   └── globals.css           # Global styles

🎯 Customization Examples

Rebranding for E-commerce

brand: {
  name: "ShopSmart",
  logo: "/shopsmart-logo.svg",
  tagline: "Smart shopping, smarter savings",
  description: "Discover the best deals with AI-powered recommendations"
}

SaaS Product

brand: {
  name: "DataFlow Pro",
  logo: "/dataflow-logo.svg",
  tagline: "Streamline your data pipeline",
  description: "Process, analyze, and visualize your data in real-time"
}

Mobile App

brand: {
  name: "FitTrack",
  logo: "/fittrack-logo.svg",
  tagline: "Your personal fitness companion",
  description: "Track workouts, monitor progress, achieve your fitness goals"
}

📦 Built With

• Next.js 15 - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Framer Motion - Animations
• Shadcn/ui - UI components

🚀 Deployment

Vercel (Recommended)

npm run build
vercel --prod

Netlify

npm run build
# Upload the `out` folder to Netlify

Traditional Hosting

npm run build
npm run export
# Upload the `out` folder to your server

🎨 Advanced Customization

Adding New Sections

1. Create a new component in /src/components/
2. Add configuration in app-config.ts
3. Import and use in /src/app/page.tsx

Custom Animations

Extend Framer Motion animations in components:

<motion.div
  initial={{ opacity: 0, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.8 }}
>

Theme Colors

Update Tailwind config or modify CSS custom properties for brand colors.

📚 Learn More

• Full Configuration Guide - Detailed customization instructions
• Next.js Documentation
• Tailwind CSS Documentation
• Framer Motion Documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

🙋‍♂️ Support

• 📧 Email: [devadnani26@gmail.com]
• 💬 Issues: GitHub Issues
• 📖 Documentation: Configuration Guide

---

Made with ❤️ for the developer community

⭐ Star this repo if you find it helpful!