Zhuzhuna vine landing page

Table of Contents

• Prerequisites
• Tech Stack
• Interaction
• Screenshot
• Links
• Getting Started
• Deployment
• Structure
• Author

Prerequisites

• npm: Node Package Manager for JavaScript
• Vite: Frontend build tool for modern web development
• Javascript: Scripting language for dynamic web development.

Tech Stack

• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• React JS: A powerful JavaScript library for building fast, interactive, and reusable user interfaces
• Framer Motion: React animation library for smooth, high-performance UI transitions
• EmailJS: Service that lets you send emails directly from client-side apps without server code

Interaction

Users are able to:

• View the optimal layout of the landing page across different screen sizes, ensuring a responsive design.
• Toggle between light and dark modes to enhance user experience based on preference.
• Change the language of the page dynamically, with automatic detection to show Georgian if the user is in Georgia; otherwise, display in English.
• Fill out forms and send messages directly from the app to an email address.
• Receive notifications upon form submission to confirm successful submission.
• See hover effects and interactive elements throughout the page for an engaging user interface.
• Keep track of any changes and user interactions, even after refreshing the browser.

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Getting Started

1. First of all you need to clone app repository from github:

git clone https://github.com/DavitDvalashvili/zhuzhuna-wine.git

2. Next step requires install all the dependencies.

npm install

3. To see project in action

npm run dev

Deployment

Before every deployment you need to create build file.

npm run build

after this you can use this file to deploy project on server.

Structure

├── public/
│ ├── index.html
│ ├── images/
│ │ └── [image files]
├── src/
│ ├── assets/
│ │ └── fonts.css
│ ├── components/
│ │ ├── Button.jsx
│ │ ├── header/
│ │ │ ├── Navbar.jsx
│ │ │ ├── ThemeSwitcher.jsx
│ │ │ └── LanguageSwitcher.jsx
│ ├── layout/
│ │ ├── Footer.jsx
│ │ └── Header.jsx
│ ├── animations/
│ │ └── animationVariants.jsx
│ ├── sections/
│ │ ├── About.jsx
│ │ ├── News.jsx
│ │ ├── Bottle.jsx
│ │ ├── Cocktails.jsx
│ │ └── Contact.jsx
│ ├── context/
│ │ └── LanguageContext.jsx
│ ├── hooks/
│ │ ├── useAnimateOnScroll.jsx
│ │ ├── useCountry.jsx
│ │ └── useWindowWidth.jsx
│ ├── context/
│ ├── main.jsx
│ ├── App.jsx
│ ├── Index.css
├── README.md

Author

• Github profile - Add your name here
• Linkedin profile - Add your name here
• Email - @your_username

The Zhuzhuna Vine landing page is created for internship purposes, and the copyright of the project design is owned by LineDevLTD