🏥 Mindsthetic

A premium, animated aesthetic-clinic website built with Next.js 15, React 19, TypeScript, MUI & Tailwind CSS 4.

SEO-optimized · Fully responsive · Buttery-smooth Framer Motion animations

Getting Started · Tech Stack · Report Bug · Request Feature

---

Mindsthetic is a modern, SEO-optimized aesthetic clinic website built with Next.js 15, React 19, and TypeScript. It pairs a Material UI + Tailwind CSS 4 design system with Framer Motion animations to deliver a fast, fully responsive marketing site for a premium cosmetology and beauty clinic — complete with hero, services, specialists, testimonials, and contact sections.

🚧 Active development. This is a single-page marketing/landing website for an aesthetic cosmetology clinic in Lahore, Pakistan. Content, copy, and assets are tailored to that brand — fork it and swap in your own to use it as a clinic / business landing-page template.

✨ Features

	Feature	Description
⚡	Next.js 15 + Turbopack	App Router with the Turbopack bundler for fast dev and builds
🧩	Component-driven sections	Navigation, Hero, About, Promotions, Services, Specialists, Testimonials, Contact, Footer
🎨	MUI + Tailwind CSS 4	Material UI components themed alongside a utility-first Tailwind layer
🌀	Framer Motion animations	Scroll-triggered reveals and smooth transitions throughout
📱	Fully responsive	Mobile-first layout that scales cleanly to tablet and desktop
🎠	Carousels & sliders	Swiper and React Slick for testimonials and showcase content
🔍	SEO-ready	Metadata helpers, sitemap.xml, robots.txt, and web manifest setup
🖼️	Optimized media	Next.js Image optimization with committed clinic photography
📦	Deploy anywhere	Ships with a Dockerfile and render.yaml out of the box

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 15.5.2 (App Router, Turbopack)
UI Library	React 19.1.0
Language	TypeScript 5 (strict mode)
Components	Material UI 7.3.1 + @mui/icons-material
Styling	Tailwind CSS 4 + Emotion
Animation	Framer Motion 12
Carousels	Swiper 11 · React Slick
Utilities	react-intersection-observer
Deployment	Docker · Render · Vercel-compatible

🚀 Getting Started

Prerequisites

• Node.js >= 18
• npm (project ships with package-lock.json)

Installation

git clone https://github.com/aashir-athar/mindsthetic.git
cd mindsthetic
npm install

Run

npm run dev

Open http://localhost:3000 in your browser to view the site. Edits to files under app/ hot-reload instantly via Turbopack.

📖 Usage

Common scripts (defined in package.json):

npm run dev      # Start the dev server with Turbopack
npm run build    # Production build (Turbopack)
npm run start    # Serve the production build

The landing page is composed in app/components/HomePage.tsx, which assembles the individual section components. To customize the site:

• Sections — edit the files in app/components/ (e.g. HeroSection.tsx, ServicesSection.tsx, ContactSection.tsx).
• Theme & colors — adjust app/theme/theme.ts and app/globals.css.
• SEO metadata — update app/utils/seo.ts, app/layout.tsx, public/sitemap.xml, and public/robots.txt.
• Images — replace assets in public/assets/images/.

Deploy with Docker

A production Dockerfile (Node 18 Alpine, Next.js standalone output) is included:

docker build -t mindsthetic .
docker run -p 3000:3000 mindsthetic

A render.yaml is also provided for deployment to Render. The app is also compatible with Vercel.

📁 Project Structure

mindsthetic/
├── app/
│   ├── components/        # Section components (Hero, Services, Contact, ...)
│   ├── providers/         # ThemeProvider and context
│   ├── theme/             # MUI theme configuration
│   ├── utils/             # SEO helpers
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page entry
├── public/                # Static assets, sitemap, robots, manifest
├── Dockerfile             # Container build
├── render.yaml            # Render deployment config
└── next.config.ts         # Next.js configuration

🗺️ Roadmap

• Responsive single-page marketing site
• Animated sections with Framer Motion
• SEO metadata, sitemap & robots
• Docker + Render deployment configs
• Online appointment booking flow
• Multi-language support
• CMS-driven content

Roadmap items beyond the checked boxes are aspirational and not yet implemented.

🤝 Contributing

Contributions are welcome. For major changes, please open an issue first to discuss what you'd like to change.

1. Fork the repo
2. Create a branch (git checkout -b feat/your-feature)
3. Commit your changes (git commit -m "feat: add your feature")
4. Push and open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for details.

👤 Author

Aashir Athar

_{Built with Next.js, React & TypeScript by aashir-athar · If this project helped you, consider leaving a ⭐}

_{Keywords: next.js website · react 19 · typescript · tailwind css 4 · material ui · framer motion · aesthetic clinic website · responsive landing page · seo-optimized nextjs app · clinic business template}