Shopify Course Landing Page (Next.js + TS)

🛍️ MHT Shopify Course : Landing Page

A premium, high‑performance landing page built for a Shopify course, designed to be modern, fast, and highly customizable.

This project is ideal for:

• 👉Course creators

• 👉SaaS / Shopify educators

• 👉Developers looking for a clean Next.js + Tailwind 4 + shadcn/ui starter

---

✨ Tech Stack

• 👉Next.js : App Router

• 👉Tailwind CSS v4 : Modern utility‑first styling

• 👉shadcn/ui : Accessible & elegant UI components

• 👉TypeScript : Type safety

• 👉tw-animate-css : Smooth UI animations

• 👉MIT License : Free to use, modify, and distribute

---

📁 Project Structure

.
├── app/                # Next.js App Router
├── components/         # UI & layout components
├── lib/                # Utilities & helpers
├── public/             # Static assets
├── styles/             # Global CSS (Tailwind 4 + theme tokens)
├── tailwind.config.ts  # Tailwind configuration
├── package.json
└── README.md

---

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/MHTech229/mht-shopify-course.git
cd mht-shopify-course

2️⃣ Install dependencies

npm install

3️⃣ Run the development server

npm run dev

Open your browser at:
👉 http://localhost:3000

---

🎨 Styling & Design System

This project uses Tailwind CSS v4 with a custom design system:

• 👉CSS variables for colors, radius, gradients, shadows

• 👉Green / Shopify‑inspired theme

• 👉Glassmorphism cards

• 👉Gradient buttons & glow effects

Global styles are located in:

styles/globals.css

You can easily customize:

• 👉Brand colors

• 👉Gradients

• 👉Shadows

• 👉Typography

---

🧩 shadcn/ui

shadcn/ui components are fully compatible with Tailwind 4 and follow best practices:

• 👉Accessible by default

• 👉Easy to extend

• 👉Perfect for SaaS & landing pages

To add a new component:

npx shadcn@latest add button

---

📦 Build for Production

npm run build
npm start

---

📄 License

This project is licensed under the MIT License.

You are free to:

• 👉Use it commercially

• 👉Modify it

• 👉Distribute it

See the LICENSE file for more information.

---

👨‍💻 Author

MEHINTO Charbel

• 👉GitHub: https://github.com/MHTech229

• 👉Web Developer : Next.js • Tailwind • NestJS

---

⭐ Support

If you find this project useful:

• 👉Give it a ⭐ on GitHub

• 👉Share it with others

Happy coding 🚀