**Introduction to Zara-Clone**
Zara is a ecommerce website, with a simple and advanced UI with a lot of advanced functionality..
**Features of the Project**
- Login and Signup authentication.
- Product Catalogue with Hover Effects and Animation.
- Users can sort and filter products.
- Cart and Payment Gateway.
- OTP-confirmation on Payment.
Tech Stack: HTML || CSS || JavaScript Group-Members:4
**Tech Stacks used in this Projects**
HTML || Java Script || CSS (Youtube Api used to Fetch data )
**Let's visit the Site and explore it's feature**
<tr/>
| Sr.No | Site page | Features | Remarks |
|---|---|---|---|
| 1 | Landing Page | It will show you different page icons on the navbar, like searchbar,login,help and cart etc. it will also show different sections and you can visit them with help of floating ( > floating nav icon) | |
| 2 | SignIn | validation at each input | |
| 3 | Search bar | when you will click on search bar whole header will turn into search bar and you can search the items | |
| 4 | product page | after entering the item name or selecting the item name it will show you the products page, sorting,filtering are available there | |
| 5 | Selected Product display Display | When you click on the product it will take you to the product display page where you can get all details of the product,after adding product to cart ,pop up notification will be there for 3second either to go to cart page or payment page | |
| 6 | cart page | total amout of products and deletion of selected product | |
| 7 | payment page | validation of at each input like card number should be of 16 digit and cvv should be of 3 digits | |
| 8 | OTP page | any random otp will give access to the complete the payment process | |
| 8 | confirmation page | Animated confirmatino page will apear on the page, and also return to home button will appear along with that. | |
**Introduction to Landing Page**
When you will open the landing page,it will show a git related to fashion and there will be different sections. you can visit each section with nav icons and we have done work on women products only so rest will show alert of "product is not available now" , i have already clicked on the menu icon, you can see its look on the below screen shot
**Signup/SignIn Page**
**When user will click on login he/she will be redirected to create account or login page, where you have to create account and login your self, after login you will be redirected to home page , and your name will be reflected on the navbar.
**Search Bar functionality**
when user click on the search bar, he/she will be redirect to search page, where whole header will be turned into search bar and user can enter limited input to search bar (for eg:-dress,top,jeans,blazer etc) user can also search by clicking on the tags mentioned below the navbar
after searching on the search bar it will show the results
**Product Page**
In the product page you will get all your search result and there will be a tag named as filter if you click on it , it will show the sorting features on the basis of colors and price.
**Selected Proudct Display Page**
after clicking on any product on product page, it will redirect you to selected product display page, where you can get all the details of the products. when you will click on add to cart button present in this page , then product will be added to cart and a popup will show weather you want to go to cart or you want to proceed for the payment page.
**Selected Proudct Display Page**
If you click on go to cart then you will be redirected to cart page, where you can see the total price of the products and can also remove any product if you don't want to but it.
when you click on the continue on the cart page, you will be proceed to payment page where you will select card and put all the required details, and after entering the otp you will be get animated confirmation of succesfull order. and return to home button will also appear along with that.
