projects.back_all
Web DevelopmentFull-StackFeatured

Service Landing Template

A modern, responsive landing page template for service-based businesses. Built with Next.js, TypeScript, and Tailwind CSS, featuring internationalization support and shadcn/ui components.

projects.view_WebsiteView Code
projects.approach

Modern landing page with i18n support, component-based architecture, and shadcn/ui components

projects.tech_stack
Next.jsTypeScriptTailwind CSSshadcn/uinext-intlLucide Reactpnpm
projects.keywords
Next.jsTypeScriptTailwind CSSshadcn/uinext-intlLucide ReactResponsive DesignInternationalization
Screenshots3 projects.charts
projects.deep_dive

A modern, responsive landing page template for service-based businesses.

Features

  • ▸Modern UI/UX: Clean, professional design with smooth animations
  • ▸Internationalization: Multi-language support using next-intl
  • ▸Responsive Design: Fully responsive across all devices
  • ▸Component-Based: Modular architecture with reusable components
  • ▸TypeScript: Full type safety for better development experience
  • ▸Tailwind CSS: Utility-first CSS framework for rapid styling
  • ▸shadcn/ui: High-quality, accessible UI components

Tech Stack

  • ▸Framework: Next.js 16.2.6
  • ▸Language: TypeScript 5.7.3
  • ▸Styling: Tailwind CSS 4.3.3
  • ▸UI Components: shadcn/ui
  • ▸Icons: Lucide React
  • ▸Internationalization: next-intl
  • ▸Package Manager: pnpm

Getting Started Prerequisites: Node.js (version 18 or higher), pnpm package manager

Installation:

git clone https://github.com/Othmane-aoubid/service-landing-template.git
cd service-landing-template
pnpm install

Development:

pnpm dev

Open http://localhost:3000 in your browser to see the result.

Project Structure

service-landing-template/
├── app/                    # Next.js app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── not-found.tsx      # 404 page
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── client-wrapper.tsx
│   ├── contact-footer.tsx
│   ├── header.tsx
│   ├── hero.tsx
│   ├── language-switcher.tsx
│   ├── pricing.tsx
│   ├── services.tsx
│   └── why-choose-us.tsx
├── lib/                   # Utility libraries
│   ├── language-context.tsx
│   └── utils.ts
└── public/               # Static assets

Components

  • ▸Header: Navigation bar with language switcher
  • ▸Hero: Hero section with call-to-action
  • ▸Services: Service offerings display
  • ▸Pricing: Pricing plans and packages
  • ▸WhyChooseUs: Features and benefits section
  • ▸ContactFooter: Contact information and footer

Customization

  • ▸Adding Languages: Edit the language configuration in lib/language-context.tsx
  • ▸Modifying Content: Update component content in the respective files under components/
  • ▸Styling: Customize styles using Tailwind CSS classes or modify app/globals.css

License This project is open source and available under the MIT License.

projects.backHire Me