feat: add background video

TeamHSE · Jun 23, 2024 · 7961af0 · 7961af0
1 parent 22ec687
commit 7961af0
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 43 deletions.
diff --git a/frontend/public/athlete.mp4 b/frontend/public/athlete.mp4
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -115,10 +115,6 @@ a {
     background: #f8f9fa;
 }
 
-.cta-section {
-    background: #007bff;
-}
-
 .footer {
     background: #343a40;
     color: #ffffff;

diff --git a/frontend/src/components/welcome/Authors.tsx b/frontend/src/components/welcome/Authors.tsx
@@ -4,7 +4,7 @@ const AuthorsSection = () => {
   return (
     <>
       <div className="text-center mb-5">
-        <h2 className="py-5">Авторы</h2>
+        <h2 className="py-5 text-white">Авторы</h2>
       </div>
       <div className="container pb-5">
         <div className="row pb-5">

diff --git a/frontend/src/components/welcome/Features.tsx b/frontend/src/components/welcome/Features.tsx
@@ -1,33 +1,50 @@
+// components/FeaturesSection.js
 import React from "react";
+import { Card, Container, Row, Col } from "react-bootstrap";
 
 const FeaturesSection = () => {
   return (
     <div className="features py-5 landing-section">
-      <div className="container">
-        <div className="row text-center">
-          <div className="col-md-4 w-50">
-            <h3 className={ "my-4 pb-4" }>Тренировочные курсы</h3>
-            <p>Наши тренировочные курсы охватывают широкий спектр спортивных дисциплин и уровней подготовки. Вы найдете
-               курсы по бегу, силовым тренировкам, йоге, плаванию и многим другим видам спорта.<br /><br />Каждый курс
-               разработан
-               опытными тренерами, которые делятся своими знаниями и практическим опытом, помогая вам достичь ваших
-               целей.<br /><br />Независимо от того, являетесь ли вы начинающим или опытным спортсменом, вы найдете
-               что-то
-               подходящее для себя, чтобы улучшить свои навыки и повысить уровень физической подготовки.</p>
-          </div>
-          <div className="col-md-4 w-50">
-            <h3 className={ "my-4 pb-4" }>Публикация собственных курсов</h3>
-            <p>Наша платформа предоставляет уникальную возможность делиться своими знаниями и опытом с
-               другими.<br /><br />Вы
-               можете создать и опубликовать собственные тренировочные курсы, которые будут доступны для всех
-               пользователей.<br /><br />Делитесь своими уникальными методиками и программами тренировок, помогайте
-               другим
-               достигать успехов в спорте и становитесь частью нашего сообщества тренеров. Благодаря нашей удобной
-               системе публикации, ваш курс легко найдут те, кому он будет полезен, и вы сможете получить обратную связь
-               от благодарных пользователей.</p>
-          </div>
-        </div>
-      </div>
+      <Container>
+        <Row className="text-center">
+          <Col md={ 6 } className="d-flex align-items-stretch mb-4">
+            <Card className="flex-fill">
+              <Card.Body>
+                <Card.Title className="my-4 pb-4">Тренировочные курсы</Card.Title>
+                <Card.Text>
+                  Наши тренировочные курсы охватывают широкий спектр спортивных дисциплин и уровней подготовки.
+                  Вы найдете курсы по бегу, силовым тренировкам, йоге, плаванию и многим другим видам спорта.
+                  <br /><br />
+                  Каждый курс разработан опытными тренерами, которые делятся своими знаниями и практическим опытом,
+                  помогая вам достичь ваших целей.
+                  <br /><br />
+                  Независимо от того, являетесь ли вы начинающим или опытным спортсменом, вы найдете что-то
+                  подходящее для себя, чтобы улучшить свои навыки и повысить уровень физической подготовки.
+                </Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+          <Col md={ 6 } className="d-flex align-items-stretch mb-4">
+            <Card className="flex-fill">
+              <Card.Body>
+                <Card.Title className="my-4 pb-4">Публикация собственных курсов</Card.Title>
+                <Card.Text>
+                  Наша платформа предоставляет уникальную возможность делиться своими знаниями и опытом с другими.
+                  <br /><br />
+                  Вы можете создать и опубликовать собственные тренировочные курсы, которые будут доступны для всех
+                  пользователей.
+                  <br /><br />
+                  Делитесь своими уникальными методиками и программами тренировок, помогайте другим достигать успехов в
+                  спорте
+                  и становитесь частью нашего сообщества тренеров. Благодаря нашей удобной системе публикации,
+                  ваш курс легко найдут те, кому он будет полезен, и вы сможете получить обратную связь от благодарных
+                  пользователей.
+                </Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+        </Row>
+      </Container>
     </div>
   );
 };

diff --git a/frontend/src/components/welcome/Hero.tsx b/frontend/src/components/welcome/Hero.tsx
@@ -1,22 +1,26 @@
 import React from "react";
 import { Button, Col, Container, Row } from "react-bootstrap";
 import { DASHBOARD_PAGE } from "@/constants/pages-url.constants";
+import VideoBackground from "@/components/welcome/VideoBackground";
 
 const HeroSection = () => {
   return (
-    <div className="hero-section text-center text-white bg-dark landing-section">
-      <Container>
-        <Row>
-          <Col>
-            <h1 className="py-5">Добро пожаловать!</h1>
-            <p className="lead py-4">Курсы от тренеров любого уровня с возможностью<br />саморазвития и
-                                     публикации <b>собственных</b> курсов <b>бесплатно</b>!</p>
-            <Button href={ DASHBOARD_PAGE } variant="primary" size="lg">Начнем!</Button>
-          </Col>
-        </Row>
-      </Container>
-    </div>
-  );
+    <>
+      <VideoBackground />
+      <div className="hero-section text-center text-white bg-opacity-0 landing-section"
+           style={ { position: "relative", zIndex: 1 } }>
+        <Container>
+          <Row>
+            <Col>
+              <h1 className="py-5">Добро пожаловать!</h1>
+              <p className="lead py-4">Курсы от тренеров любого уровня с возможностью<br />саморазвития и
+                                       публикации <b>собственных</b> курсов <b>бесплатно</b>!</p>
+              <Button href={ DASHBOARD_PAGE } variant="primary" size="lg">Начнем!</Button>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </>);
 };
 
 export default HeroSection;
diff --git a/frontend/src/components/welcome/VideoBackground.module.css b/frontend/src/components/welcome/VideoBackground.module.css
@@ -0,0 +1,29 @@
+/* components/welcome/VideoBackground.module.css */
+.videoContainer {
+    position: fixed; /* Use fixed to ensure it covers the viewport */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh; /* Full viewport height */
+    overflow: hidden;
+    z-index: -1; /* Ensure the video is behind other content */
+}
+
+.video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
+}
diff --git a/frontend/src/components/welcome/VideoBackground.tsx b/frontend/src/components/welcome/VideoBackground.tsx
@@ -0,0 +1,15 @@
+import styles from './VideoBackground.module.css';
+
+const VideoBackground = () => {
+  return (
+    <div className={styles.videoContainer}>
+      <video autoPlay loop muted className={styles.video}>
+        <source src="/athlete.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      <div className={styles.overlay}></div>
+    </div>
+  );
+};
+
+export default VideoBackground;