Restaurant Website Template

This template provides a fresh & modern UI for a restaurant website. With a focus on responsiveness, performance, and ease of use, it ensures an unforgettable online experience for your customers.

If you find this template helpful, please give it a ⭐. Thank you!

Demo

Link to website: https://tokyo-treasures.pages.dev

Design

The UI was designed in Figma. Check it out and grab your own copy: https://www.figma.com/design/HoPdh5o6sjGMkdP9dRhJbU/Tokyo-Treasures/duplicate

Features

🌐 Responsive Design

The website adapts seamlessly to all screen sizes, from mobile devices to large desktops, ensuring a great user experience across all devices.

📈 SEO Friendly

The template is optimized for search engines, helping your restaurant rank higher in search results and attract more visitors.

⚡ Fast Performance

Built with performance in mind, this template uses optimized code and assets to ensure quick load times, providing a smooth browsing experience for users.

🚀 Automatic Deployment

Easily & quickly deploy the website with minimal configuration.

📊 Analytics Integration

Monitor website traffic and user behavior via Google Analytics 4 to gather valuable insights and optimize the customer experience.

🎨 Animations

Engage visitors with smooth & meaningful animations that enhance the visual appeal of your website without sacrificing performance. These animations respect prefers-reduced-motion settings.

♿ Accessibility

The template is designed with accessibility in mind, ensuring that all users, including those with disabilities, can navigate the site with ease.

🍪 Cookie Consent

Comes with a cookie consent banner to comply with GDPR and other privacy regulations, allowing users to opt in or out of tracking cookies.

Pages

Landing

Privacy Policy

Terms of Service

404

Technologies

Tailwind CSS

Shadcn

Gatsby 5

GitHub Actions

Google Analytics 4

ESLint

TypeScript

License

Distributed under the MIT License. See LICENSE.txt for more information.

Getting Started

To run locally:

1. Clone the Repository:

   git clone https://github.com/Chandra-Panta-Chhetri/tokyo-treasures.git

2. Install dependencies:

   cd tokyo-treasures
   npm install

3. Start:

   npm start

Deployment

To setup automatic for master branch:

1. Create an account at Cloudflare Pages.

2. Go to the API Tokens page.

3. Click the 'Create Token' button.

4. Select 'Create Custom Token'.

5. Fill in the Permissions section as follows to ensure you have the necessary permissions to deploy via a GitHub Workflow.

   Category	Item	Type
   Account	Cloudflare Pages	Edit
   User	Memberships	Read
   User	User Details	Read

6. Fill in the remaining details (token name, account resources). The token name can be anything. For the account resources, ensure to include the email used to sign up.

7. Click the 'Continue to summary' button.

8. Click the 'Create Token' button.

9. Copy the token and save it somewhere - it will be needed soon.

10. Create a new Actions secret in GitHub.

11. Set the name of the secret to CLOUDFLARE_API_TOKEN & and paste the token from earlier.

12. Update project_name env (line 7) in .github/workflows/prod-deploy.yml to anything. This name is used by Cloudflare Pages to create a subdomain, so it must not contain spaces.

13. Update SITE_URL in .env.prod by replacing 'tokyo-treasures' with the project name. For example, if your project name is 'restaurant', 'SITE_URL' would be "https://restaurant.pages.dev".

Google Analytics

To setup:

1. Create an account at Google Analytics.
2. Complete steps 1-4.
3. For step 5 (Data collection), select Web as the platform.
4. For the Website URL, copy the SITE_URL from .env.prod, excluding the 'https://'.
5. Close the 'Set up a Google tag' popup.
6. Click on the Web Data Stream we just set up and copy the Measurement ID.
7. Paste the measurement id into GATSBY_GOOGLE_ANALYTICS_ID in .env.prod.

Note: Google Analytics only loads when the website is deployed. To test locally, remove the isProd check in src/components/google-tag-manager.tsx.