https://github.com/emirhankrt/baykar-frontend-case

Baykar Frontend Case - Lading Page Application
https://github.com/emirhankrt/baykar-frontend-case

Last synced: about 1 month ago
JSON representation

Baykar Frontend Case - Lading Page Application

• Host: GitHub
• URL: https://github.com/emirhankrt/baykar-frontend-case
• Owner: EmirhanKrt
• Created: 2024-08-29T10:50:00.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-01T14:44:41.000Z (4 months ago)
• Last Synced: 2024-10-25T12:56:49.562Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.34 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Baykar Frontend Case - Landing Page Application

In the project directory, use `npm start` script for run the project.

## Technologies

React.js v18.3, TailwindCSS v3.4.10 with PostCSS (v8.4.41) and Autoprefixer (v10.4.20) plugins.

## Key Designs

Design versions are Desktop (1440px viewport width) and Mobile (393px viewport width - iPhone 14) based.

Base sections are

- Header Section

- Hero Section

  - Hero Main Content Container

  - Hero Card Container

- Highlighted Product Section

- Why Join Us Section

- Customer Carousel Section

- Grow Your Collection Section

- Shoes Collected Section

- Footer Section

### Desktop Version

#### Header Section

![desktop-header-section](https://github.com/user-attachments/assets/b2117579-0b01-470a-9f33-165fe6806134)

#### Hero Section

![desktop-hero-section](https://github.com/user-attachments/assets/9480742e-03d0-4109-89ce-6d4a1931ab16)

#### Highlighted Product Section

![desktop-highlighted-product-section](https://github.com/user-attachments/assets/a6d3003b-af58-4b7f-a3aa-f5d94765e1f6)

#### Why Join Us Section

![desktop-why-join-us-section](https://github.com/user-attachments/assets/d9c399a5-6290-4f13-ae9b-30131bf0c277)

#### Customer Carousel Section

User can scroll right / left on the carousel section using buttons.

![desktop-customer-carousel-section](https://github.com/user-attachments/assets/b7469d0b-9fde-466f-b0a2-1dd56d85b013)

#### Grow Your Collection Section

![desktop-grow-your-collection-section](https://github.com/user-attachments/assets/6181cf31-e07f-4bf8-9130-7c0bfd4c89ff)

#### Shoes Collected Section

User can hover green dots and see content. ( Easter Egg On Türkiye :) )

![desktop-shoes-collected-section](https://github.com/user-attachments/assets/dfff139d-30ba-4282-b119-18f489fec32d)

#### Footer Section

![desktop-footer-section](https://github.com/user-attachments/assets/ae288007-e164-4c54-98ef-4618558503e3)

### Mobile Version

#### Header Section

![mobile-header-section](https://github.com/user-attachments/assets/d22aeb47-569b-4b62-a728-70c8e4f6c801)

When user clicks the hamburger menu icon, the drawer opens.

![mobile-header-hamburger-menu-drawer](https://github.com/user-attachments/assets/90d5ec74-63a9-4ad9-9737-1c3ae2e33699)

#### Hero Section

![mobile-hero-section](https://github.com/user-attachments/assets/5e12a7f5-fe92-4b2a-8bf3-985baeddb13f)

#### Highlighted Product Section

![mobile-highlighted-product-section](https://github.com/user-attachments/assets/d774e91a-9341-411e-8f9e-bd4c942d94db)

#### Why Join Us Section

![mobile-why-join-us-section](https://github.com/user-attachments/assets/a2806b1a-8407-463f-bc81-50337248d800)

#### Customer Carousel Section

User can scroll right / left on the carousel section using touchmove.

![mobile-customer-carousel-section](https://github.com/user-attachments/assets/8b81ee6e-4509-4d1a-9db9-596f15619434)

#### Grow Your Collection Section

![mobile-grow-your-collection-section](https://github.com/user-attachments/assets/1a386251-4c3d-4983-8d7c-482e8a873645)

#### Shoes Collected Section

![mobile-shoes-collected-section](https://github.com/user-attachments/assets/46e0e3c3-93c7-4f94-96ae-402c64d2c72a)

#### Footer Section

![mobile-footer-section](https://github.com/user-attachments/assets/33e6e201-deb3-44b4-9035-878a28b71035)

Thank you for reading.