├── app
├── favicon.ico
├── about
│ └── page.tsx
├── layout.tsx
├── globals.css
├── layout-backup.tsx
├── menu
│ └── page.tsx
├── contact
│ └── page.tsx
└── page.tsx
├── postcss.config.mjs
├── public
├── cofe.jpeg
├── vercel.svg
├── window.svg
├── file.svg
├── globe.svg
└── next.svg
├── components
├── Navbar.tsx
├── Header
│ ├── Logo.tsx
│ ├── CTAButton.tsx
│ ├── index.tsx
│ └── Navigation.tsx
├── Common
│ └── Button.tsx
├── Footer.tsx
├── Menu
│ └── MenuSection.tsx
└── Reservation
│ └── ReservationSection.tsx
├── .hintrc
├── next.config.ts
├── eslint.config.mjs
├── package.json
├── .gitignore
├── tsconfig.json
└── README.md
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YALDAKHOSHPEY/COFFEE-SHOP-WEBSITE/HEAD/app/favicon.ico
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | '@tailwindcss/postcss': {},
4 | },
5 | };
--------------------------------------------------------------------------------
/public/cofe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YALDAKHOSHPEY/COFFEE-SHOP-WEBSITE/HEAD/public/cofe.jpeg
--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 |
3 | export default function Navbar() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "development"
4 | ],
5 | "hints": {
6 | "no-inline-styles": "off",
7 | "axe/forms": "off"
8 | }
9 | }
--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 |
3 | const nextConfig: NextConfig = {
4 | /* config options here */
5 | };
6 |
7 | export default nextConfig;
8 |
--------------------------------------------------------------------------------
/components/Header/Logo.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | export default function Logo() {
4 | return (
5 |
6 | Coffee Haven
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/Header/CTAButton.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | export default function CTAButton() {
4 | return (
5 |
9 | رزرو میز
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import Logo from './Logo';
2 | import Navigation from './Navigation';
3 | import CTAButton from './CTAButton';
4 |
5 | export default function Header() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig, globalIgnores } from "eslint/config";
2 | import nextVitals from "eslint-config-next/core-web-vitals";
3 | import nextTs from "eslint-config-next/typescript";
4 |
5 | const eslintConfig = defineConfig([
6 | ...nextVitals,
7 | ...nextTs,
8 | // Override default ignores of eslint-config-next.
9 | globalIgnores([
10 | // Default ignores of eslint-config-next:
11 | ".next/**",
12 | "out/**",
13 | "build/**",
14 | "next-env.d.ts",
15 | ]),
16 | ]);
17 |
18 | export default eslintConfig;
19 |
--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
1 | export default function About() {
2 | return (
3 |
4 |
About Us
5 |
6 |
Coffee Haven opened in 2020 with a passion for great coffee.
7 |
We source our beans from local roasters and bake everything in-house.
8 |
Come visit us at 123 Coffee Street!
9 |
10 |
11 | );
12 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "coffee-shop-website",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "eslint"
10 | },
11 | "dependencies": {
12 | "next": "16.0.1",
13 | "react": "19.2.0",
14 | "react-dom": "19.2.0"
15 | },
16 | "devDependencies": {
17 | "@tailwindcss/postcss": "^4.1.16",
18 | "@types/node": "^20",
19 | "@types/react": "^19",
20 | "@types/react-dom": "^19",
21 | "eslint": "^9",
22 | "eslint-config-next": "16.0.1",
23 | "tailwindcss": "^4",
24 | "typescript": "^5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 |
13 | # testing
14 | /coverage
15 |
16 | # next.js
17 | /.next/
18 | /out/
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | node_modules/
43 | .next/
44 | .env*
45 | *.log
46 | .DS_Store
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "react-jsx",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | ".next/types/**/*.ts",
30 | ".next/dev/types/**/*.ts",
31 | "**/*.mts"
32 | ],
33 | "exclude": ["node_modules"]
34 | }
35 |
--------------------------------------------------------------------------------
/components/Common/Button.tsx:
--------------------------------------------------------------------------------
1 | export function Button({ children, href, onClick, variant = 'primary', className = '' }: {
2 | children: React.ReactNode;
3 | href?: string;
4 | onClick?: () => void;
5 | variant?: 'primary' | 'secondary';
6 | className?: string;
7 | }) {
8 | const baseClasses = 'px-6 py-3 rounded-lg font-semibold transition-colors';
9 | const variants = {
10 | primary: 'bg-yellow-600 hover:bg-yellow-700 text-white',
11 | secondary: 'border-2 border-white hover:bg-white hover:text-gray-900 text-white'
12 | };
13 |
14 | const classes = ${baseClasses} ;
15 |
16 | if (href) {
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 | return (
25 |
26 | {children}
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/components/Header/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | export default function Navigation() {
4 | return (
5 |
6 |
7 |
8 | خانه
9 |
10 |
11 |
12 |
13 | منو
14 |
15 |
16 |
17 |
18 | درباره ما
19 |
20 |
21 |
22 |
23 | تماس
24 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import './globals.css';
2 | import Navbar from '../components/Navbar';
3 | import Footer from '../components/Footer';
4 | import type { Metadata } from 'next';
5 |
6 | export const metadata: Metadata = {
7 | title: 'Coffee Haven | کافیشاپ لوکس',
8 | description: 'طعم طلایی و آرامش یاقوتی',
9 | };
10 |
11 | export default function RootLayout({ children }: { children: React.ReactNode }) {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | {children}
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | /* فونت فارسی */
2 | @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
3 |
4 | @import "tailwindcss";
5 |
6 | body {
7 | font-family: 'Vazirmatn', 'Inter', system-ui, sans-serif;
8 | background: #fdfcfb;
9 | color: #3f2a1f;
10 | margin: 0;
11 | line-height: 1.7;
12 | scroll-behavior: smooth;
13 | }
14 |
15 | /* کلاس برای فونت انگلیسی */
16 | .font-playfair {
17 | font-family: 'Playfair Display', serif;
18 | }
19 |
20 | /* انیمیشنهای جدید */
21 | @keyframes fadeInUp {
22 | from {
23 | opacity: 0;
24 | transform: translateY(30px);
25 | }
26 | to {
27 | opacity: 1;
28 | transform: translateY(0);
29 | }
30 | }
31 |
32 | .animate-fadeInUp {
33 | animation: fadeInUp 0.8s ease-out;
34 | }
35 |
36 | /* هورور effects */
37 | .hover-lift {
38 | transition: transform 0.3s ease;
39 | }
40 |
41 | .hover-lift:hover {
42 | transform: translateY(-5px);
43 | }
44 |
45 | /* Glass morphism */
46 | .glass-effect {
47 | background: rgba(255, 255, 255, 0.1);
48 | backdrop-filter: blur(10px);
49 | border: 1px solid rgba(255, 255, 255, 0.2);
50 | }
51 |
--------------------------------------------------------------------------------
/app/layout-backup.tsx:
--------------------------------------------------------------------------------
1 | import './globals.css';
2 | import Navbar from '../components/Navbar';
3 | import type { Metadata } from 'next';
4 |
5 | export const metadata: Metadata = {
6 | title: 'Coffee Haven | لوکس کافیشاپ',
7 | description: 'طعم طلایی و آرامش یاقوتی',
8 | };
9 |
10 | export default function RootLayout({ children }: { children: React.React.Node }) {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
Coffee Haven
22 |
طعم لوکس در هر فنجان
23 |
© 2025 | 123 Brew Street
24 |
25 |
26 |
27 |
28 | );
29 | }
--------------------------------------------------------------------------------
/app/menu/page.tsx:
--------------------------------------------------------------------------------
1 | export default function Menu() {
2 | const menuItems = [
3 | { category: 'Coffee', items: [{ name: 'Espresso', price: '$3' }, { name: 'Latte', price: '$4.5' }, { name: 'Cappuccino', price: '$4' }] },
4 | { category: 'Tea', items: [{ name: 'Green Tea', price: '$2.5' }, { name: 'Black Tea', price: '$2' }] },
5 | { category: 'Pastries', items: [{ name: 'Croissant', price: '$3' }, { name: 'Muffin', price: '$2.5' }] },
6 | ];
7 |
8 | return (
9 |
10 |
Our Menu
11 | {menuItems.map((cat) => (
12 |
13 |
{cat.category}
14 |
15 | {cat.items.map((item) => (
16 |
17 | {item.name}
18 | {item.price}
19 |
20 | ))}
21 |
22 |
23 | ))}
24 |
25 | );
26 | }
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client'; // برای interactive بودن فرم
2 |
3 | import { FormEvent } from 'react';
4 |
5 | export default function Contact() {
6 | const handleSubmit = (e: FormEvent) => {
7 | e.preventDefault();
8 | alert('Message sent! (This is a demo)');
9 | };
10 |
11 | return (
12 |
13 |
Contact Us
14 |
29 |
30 | );
31 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | export default function Footer() {
2 | return (
3 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/components/Menu/MenuSection.tsx:
--------------------------------------------------------------------------------
1 | export default function MenuSection() {
2 | const menuItems = [
3 | {
4 | name: 'اسپرسو',
5 | description: 'قهوه خالص و غلیظ',
6 | price: ',',
7 | image: '/espresso.jpg'
8 | },
9 | {
10 | name: 'لاته',
11 | description: 'اسپرسو با شیر بخارپز',
12 | price: ',',
13 | image: '/latte.jpg'
14 | },
15 | {
16 | name: 'کاپوچینو',
17 | description: 'تعادل کامل اسپرسو و شیر',
18 | price: ',',
19 | image: '/cappuccino.jpg'
20 | },
21 | {
22 | name: 'موکا',
23 | description: 'ترکیب قهوه و شکلات',
24 | price: ',',
25 | image: '/mocha.jpg'
26 | }
27 | ];
28 |
29 | return (
30 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import MenuSection from '../components/Menu/MenuSection';
3 | import ReservationSection from '../components/Reservation/ReservationSection';
4 |
5 | export default function Home() {
6 | return (
7 |
8 | {/* Hero Section */}
9 |
10 |
11 |
12 |
13 | به Coffee Haven خوش آمدید
14 |
15 |
16 | مکانی دنج برای بهترین قهوه و شیرینیها
17 |
18 |
19 |
23 | مشاهده منو
24 |
25 |
29 | رزرو میز
30 |
31 |
32 |
33 |
34 |
35 | {/* Features Section */}
36 |
37 |
38 |
39 | چرا ما را انتخاب میکنید
40 |
41 |
42 |
43 |
44 |
45 |
46 |
قهوه تازه
47 |
دانههای برشته شده روزانه برای بهترین طعم
48 |
49 |
50 |
51 |
52 |
53 |
محیطی دنج
54 |
استراحت کنید و با دوستانتان لذت ببرید
55 |
56 |
57 |
58 |
59 |
60 |
شیرینیهای خوشمزه
61 |
تازه پخته شده هر صبح
62 |
63 |
64 |
65 |
66 |
67 | {/* Menu Section */}
68 |
69 |
70 | {/* Reservation Section */}
71 |
72 |
73 | {/* CTA Section */}
74 |
75 |
76 |
77 | آماده تجربهای فوقالعاده هستید
78 |
79 |
80 | همین امروز به ما بپیوندید و طعم قهوه واقعی را کشف کنید
81 |
82 |
86 | همین حالا رزرو کنید
87 |
88 |
89 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/components/Reservation/ReservationSection.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 |
5 | export default function ReservationSection() {
6 | const [formData, setFormData] = useState({
7 | name: '',
8 | email: '',
9 | phone: '',
10 | date: '',
11 | time: '',
12 | guests: '2'
13 | });
14 |
15 | const handleSubmit = (e: React.FormEvent) => {
16 | e.preventDefault();
17 | alert('رزرو شما با موفقیت ثبت شد! با شما تماس میگیریم.');
18 | };
19 |
20 | const handleChange = (e: React.ChangeEvent) => {
21 | setFormData({
22 | ...formData,
23 | [e.target.name]: e.target.value
24 | });
25 | };
26 |
27 | return (
28 |
29 |
30 |
رزرو میز
31 |
میز خود را از قبل رزرو کنید
32 |
33 |
34 |
115 |
116 |
120 | رزرو میز
121 |
122 |
123 |
124 |
125 | );
126 | }
127 |
--------------------------------------------------------------------------------