A modern Persian coffee shop landing page built with HTML, Tailwind CSS & JavaScript
CoffeeShop is a modern Persian RTL coffee shop website focused on combining a polished visual interface with practical front-end interactions.
The project was designed around a clean, responsive and premium coffee-shop experience, with support for both light and dark themes.
The interface includes:
- Persian RTL layout
- Responsive navigation
- Coffee product presentation
- Product categories
- Shopping cart drawer
- Mobile navigation
- Dark / Light mode
- Blog section
- Coffee club section
- Services section
- Contact section
- Responsive hero section
- Swiper-based sliders
- Custom Persian typography
DESIGN · RESPONSIVENESS · INTERACTION · FRONT-END ENGINEERING
- Modern coffee-shop aesthetic
- RTL-first interface
- Glass / translucent header treatment
- Rounded UI elements
- Custom background imagery
- Consistent spacing system
- Responsive typography
- Custom Persian fonts
The project supports:
LIGHT MODE
↓
DARK MODE
↓
localStorage
↓
Theme Persistence
The theme can be switched manually and is persisted using localStorage.
The initial theme also considers the user's system preference through:
prefers-color-schemeThe project includes an interactive cart drawer with:
Cart Button
↓
Open Cart
↓
Overlay
↓
Cart Panel
↓
Close / Overlay Click
The cart interface is implemented as a front-end interaction layer.
Desktop and mobile navigation use different layouts.
DESKTOP
Navigation
├── Logo
├── Menu
├── Theme
└── Cart
MOBILE
Menu Button
↓
Side Navigation
↓
Overlay
The homepage contains multiple content-driven sections:
Hero
↓
Categories
↓
Popular Products
↓
Services
↓
Coffee Club
↓
Blog
↓
Contact
↓
Footer
The project follows a lightweight front-end architecture based on native HTML, Tailwind utility classes and vanilla JavaScript.
COFFEESHOP
│
┌──────────────┼──────────────┐
│ │ │
HTML Tailwind JavaScript
│ │ │
Structure Styling Interaction
│ │ │
└──────────────┼──────────────┘
│
Browser UI
The project intentionally keeps the architecture simple and dependency-light.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic page structure |
| Tailwind CSS v4 | Utility-first styling |
| JavaScript ES6+ | Interactive UI behavior |
| Swiper | Sliders & carousels |
| CSS | Custom layers, fonts & additional styling |
| SVG | Icons and interface graphics |
| localStorage | Theme persistence |
The project uses two custom Persian font families:
Dana
├── Regular
├── Medium
└── DemiBold
Morabba
├── Light
├── Medium
└── Bold
This combination provides separate typography roles for:
BODY TEXT
↓
DANA
HEADINGS / DISPLAY
↓
MORABBA
The project also uses a custom icon system based on inline SVG symbols.
Theme initialization happens before the main interface renders:
Browser
│
├── localStorage.theme
│
└── prefers-color-scheme
│
▼
Theme Decision
│
┌─────┴─────┐
▼ ▼
LIGHT DARK
User theme changes are stored locally:
localStorage.theme = "dark";This allows the selected theme to persist between visits.
The main interactive behaviors are handled inside:
scripts/
└── app.js
Toggle Button
↓
Check Current Theme
↓
Add / Remove .dark
↓
Update localStorage
Menu Button
↓
Open Navigation
↓
Show Overlay
↓
Navigation Panel
↓
Close
Cart Button
↓
Open Cart
↓
Show Overlay
↓
Cart Panel
↓
Close
Submenu Button
↓
Toggle Submenu
↓
Rotate Arrow
↓
Update Active State
CoffeeShop/
│
├── index.html
│
├── styles/
│ ├── app.css
│ └── swiper-bundle.min.css
│
├── scripts/
│ ├── app.js
│ └── swiper-bundle.min.js
│
├── fonts/
│ ├── Dana/
│ │ └── woff2/
│ │
│ └── Morabba/
│ └── woff2/
│
├── images/
│ ├── CoffeeShop-Files/
│ │ ├── blogs/
│ │ ├── categories/
│ │ ├── club/
│ │ ├── products/
│ │ └── svgs/
│ │
│ ├── app-logo.png
│ ├── body-bg.png
│ ├── category-left.jpg
│ ├── category-right.jpg
│ ├── fav-icon.png
│ ├── headerBgDesktop.webp
│ └── headerBgMobile.webp
│
└── README.md
The website is organized around a complete coffee-shop landing experience.
COFFEESHOP
│
├── HEADER
│ ├── Logo
│ ├── Navigation
│ ├── Theme Toggle
│ └── Cart
│
├── HERO
│ └── Main Introduction
│
├── CATEGORIES
│ └── Coffee Categories
│
├── PRODUCTS
│ └── Coffee Products
│
├── SERVICES
│ ├── Coffee
│ ├── Delivery
│ ├── Support
│ └── Additional Services
│
├── COFFEE CLUB
│ ├── Activity
│ ├── Discovery
│ └── Rewards
│
├── BLOG
│ └── Coffee Articles
│
├── CONTACT
│ ├── Phone
│ ├── Email
│ ├── Location
│ └── Social Media
│
└── FOOTER
The interface is designed for multiple screen sizes.
┌───────────────────────────────┐
│ DESKTOP │
│ │
│ Full Navigation + Content │
│ │
└───────────────────────────────┘
↓
┌─────────────────────┐
│ TABLET │
│ │
│ Adaptive Layout │
│ │
└─────────────────────┘
↓
┌─────────────────┐
│ MOBILE │
│ │
│ Drawer Menu │
│ Compact UI │
│ │
└─────────────────┘
Responsive behavior is implemented primarily through Tailwind CSS utilities.
The project integrates Swiper for interactive carousel experiences.
Swiper is used to create smooth, responsive content sliders while keeping the implementation optimized for touch and different viewport sizes.
Swiper
│
├── Responsive Slides
├── Touch Interaction
├── Product Content
└── Section Carousels
Instead of relying entirely on external icon libraries, the project contains a reusable SVG symbol system.
Examples include:
shopping-cart
moon
sun
user
bars-3
shopping-bag
heart
star
map-pin
envelope
phone
instagram
telegram
chevron-down
chevron-left
arrow-left
This allows icons to be reused directly inside the HTML interface.
The project focuses on keeping the interface lightweight while maintaining a rich visual experience.
- Local assets
- Local font files
- SVG-based icons
- CSS utility architecture
- Minimal JavaScript interaction layer
- Responsive image assets
- Separate desktop/mobile hero backgrounds
- Reusable UI patterns
- Browser-native
localStorage
The project avoids introducing a heavy JavaScript framework for a relatively focused landing-page experience.
DESIGN
↓
HTML STRUCTURE
↓
TAILWIND STYLING
↓
RESPONSIVE LAYOUT
↓
JAVASCRIPT INTERACTIONS
↓
THEME SYSTEM
↓
SLIDERS
↓
POLISH
↓
DEPLOYMENT
The project was built with an emphasis on understanding the underlying front-end technologies rather than hiding the implementation behind a framework.
Clone the repository:
git clone https://github.com/yosuf-dev/CoffeeShop.gitMove into the project:
cd CoffeeShopBecause the project is a static front-end application, it can be opened directly in a browser or served through a local development server.
For the best development experience, use a local server such as VS Code Live Server.
CoffeeShop
https://yosuf-dev.github.io/CoffeeShop/
https://github.com/yosuf-dev/CoffeeShop
Building CoffeeShop helped strengthen several practical front-end skills:
HTML
│
├── RTL Structure
├── Semantic Sections
└── SVG Integration
CSS / Tailwind
│
├── Responsive Design
├── Utility Classes
├── Dark Mode
├── Layout Systems
└── Custom Typography
JavaScript
│
├── DOM Manipulation
├── Event Listeners
├── UI State
├── localStorage
└── Interactive Drawers
UI Engineering
│
├── Responsive Navigation
├── Cart Interface
├── Sliders
└── Component-like UI Patterns
Potential future improvements:
[ ] Product detail pages
[ ] Functional shopping cart
[ ] Quantity management
[ ] Product filtering
[ ] Search system
[ ] Authentication
[ ] Backend integration
[ ] Online ordering
[ ] Payment integration
[ ] Admin dashboard
[ ] Product management
[ ] Real database
The current project is primarily a front-end experience, making these possible next steps for turning it into a complete e-commerce platform.
Don't just build interfaces. Understand how they work.
CoffeeShop was built as a practical front-end project to combine:
DESIGN
+
RESPONSIVE ENGINEERING
+
INTERACTION
+
TYPOGRAPHY
+
USER EXPERIENCE
The goal is not simply to make a page that looks good.
The goal is to understand the engineering behind a polished interface.
STATUS: COMPLETED
TYPE:
Modern Coffee Shop Website
DIRECTION:
Front-End Development
LAYOUT:
RTL / Persian
RESPONSIVE:
YES
DARK MODE:
YES
INTERACTIVE UI:
YES
DEPLOYMENT:
GitHub Pages
