project-react-landing

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #llm #go #golang #machine-learning #docker #macos #windows #awesome #cli #open-source

project-react-landing

(★ 13)

ReactJS course project: landing page (theHam psd template)

project-react-landing 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Project - ReactJS - landing page
It's one-week project of Ignite ReactJS courses block. All dynamic of landing page (theHam psd template) realized at ReactJS + Redux. Bootstrap 3 grid system used to make page responsive.

* Link to result: https://ozadev.github.io/project-react-landing
* Link to psd template: https://github.com/ozadev/project-react-landing/tree/master/task/template.psd
* Link to course material: https://github.com/ozadev/ignite/tree/master/ReactJS

## Задача 
* Создание сайта-портфолио по предоставленному psd макету.

## Общие требования к сайту 
* Корректное отображение сайта на следующих разрешениях экрана: 320px, 687px, 992px, 1200 px 
* Поддержка браузеров: последние версии Chrome, Firefox, Safarі, Opera, MS Edge. 
* Для реализации функционала сайта используйте ReactJS.

## Структура сайта:

### Header 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/000.jpg)

* Меню дожно быть зафиксировано в верхней части экрана, чтобы пользователь мог им всегда воспользоватся. 
* При нажатии на каждый элемент меню страница плавно прокручивается до соответствующего блока на странице.

![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/001.jpg)

* Создайте три слайда с произвольным изображением и текстом.
* Смена слайдов должна присходить с интервалом в 3с. 
* По нажатию стелок навигации, автоматическая смена слайдов должна приостанавливатся, 
  пока пользователь листает слайды вручную. Если в течении 5с пользователь не нажимал на элементы навигации, 
  должна возобновиться автоматическая смена слайдов.

* При нажатии на кнопку Explore Now страница плавно прокручивается до блока портфолио. 
* При нажатии на кнопку Purchase Now страница плавно прокручивается до блока контактов.

* Для реализации плавной прокрутки страницы разрешается использовать сторонние ресурсы(например, https://github.com/fisshy/react-scroll).

### Блок Our Services 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/002.jpg)

* При клике по каждой из иконок сервисов открывается вкладка с изображением(используйте произвольные изображения) и текстом описания сервиса. 
* Используйте маршрутизацию для реализации переключения вкладок.

### Блок About Our Company 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/003.jpg)

* Блок с описанием компании. 
* По умолчанию открыта вкладка Our Skills.

* Когда блок только появился в области видимости страницы, в течении 3 секунд ширина блоков диаграммы изменяется от 0 до значений, указанных в макете. 
* Для создания анимации используйте аддон ReactCSSTransitionGroup. Установка аддона:  
 
```
npm install react-addons-css-transition-group
``` 
* При переключении вкладок отображается соответствующая информация(см. макет).

### Блок портфолио  
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/004.jpg) 
 
* Добавьте произвольные изображения в портфолио. 
* Реализуйте фильтрацию изображений по категориям. 
* При наведении курсора мыши на изображение над ним появляется полупрозрачный слой с информацией о том к какой категории относится данное изображение.

### Блок Our Team 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/005.jpg)

* Добавьте произвольное фото для членов команды. 
* При наведении мыши на иконки ссылок социальных сетей они меняют цвет.

### Блок со статистикой достижений 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/006.jpg)

* Когда блок только появился в видимой области страницы, течении 3 секунд происходит отсчет от 0 до значений, указанных в макете.

### Блок News 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/007.jpg)

* Добавьте произвольные изображения в превью новостей.
* Загрузите описание новостей из JSON-файла(файл data.json в папке project). 
* Изначально после загрузки страницы отображается 8 новостей.

* При нажатии на изображение выполняется переход по пути '/id', где id - id новости. На открывшейся странице отображается дата и текст новости. 
* Маршрутизацию нужно реализовать без перезагрузки страницы.

* При нажатии на кнопку load more на странице должны отображаются следующие 8 новостей из файла data.json.

### Блок Feedback 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/008.jpg)

* Форма с полями Title и Message. Поля обязательны для заполнения. 
* При нажатии на кнопку Add Comment в окно сообщений добавляется панель сообщения, содержащая заголовок и текст сообщения(данные из формы). 
* Данные сообщений сохраняются в массив messages (каждый элемент массива - объект со свойствами id, title, text). 
* При нажатии на икноку удаления в верхнем правом углу панели сообщения, оно удаляется (не только со страницы, но также из массива messages).

* Сохраните данные массива messages в cookies и используйте их для отображения прошлых сообщений при перезагрузке страницы.

* Для решения задачи используйте Webpack и синтаксис ES6.

### Блок контактов 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/009.jpg)

* Добавьте в блок карту с координатами компании(используйте сервис Google maps).

* Форма с полями Name, Email, Message. Валидация формы происходит при нажатии на клавиши. При вводе пользователем некорректных данных в поле ввода под этим полем сразу отображается сообщение об ошибке. Сообщение об ошибке сразу же скрывается, если пользователь ввел корректные данные. 
* В поле Name допускаются только буквы английского алфавита.
* В поле Email допускаются толко буквы английского алфавита, цифры, знак подчеркивание и симвом @. 
* В поле Message допускаются любые символы. Минимальная длина сообщения - 20 символов.

### Footer 
![](https://raw.githubusercontent.com/ozadev/project-react-landing/master/task/images/010.jpg)

* Копирайт и кнопка вверх. 
* При нажатии на кнопку страница плавно прокручивается в начало.

project-react-landing

project-react-landing 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

project-react-landing

project-react-landing 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README