9SAS9E43UVM

package.json

@@ -6,9 +6,16 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@twistezo/react-text-scramble": "^1.0.6",
+    "bootstrap": "^5.1.3",
+    "gsap": "^3.8.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0",
     "react-dom": "^17.0.2",
+    "react-gsap": "^3.2.1",
+    "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,43 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+/* .overlay{
+  position: relative;
+}*/
+/* .App::after{
+  animation: grain 8s steps(10) infinite;
+  background-image: url("../src/img/grain.png");
+  content: "";
+  height: 300%;
+  left: -50%;
+  opacity: 0.3;
+  position: absolute;
+  top: -100%;
+  width: 300%;
+   z-index: -1;  
+} */
+ 
+/* @keyframes grain {
+  0%, 100% { transform: translate(0, 0); }
+   10% { transform: translate(-5%, -10%); }
+   20% { transform: translate(-15%, 5%); }
+   30% { transform: translate(7%, -25%); }
+   40% { transform: translate(-5%, 25%); }
+   50% { transform: translate(-15%, 10%); }
+   60% { transform: translate(15%, 0%); }
+   70% { transform: translate(0%, 15%); }
+   80% { transform: translate(3%, 35%); }
+   90% { transform: translate(-10%, 10%); }
+} */
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+@font-face {
+  font-family: Stalker;
+  src: url('./fonts/AmazS.T.A.L.K.E.R.v.3.0.ttf');
+  font-style: normal;
+  font-weight: normal;
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+ h3, h2,h1{
+  font-family: Stalker;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+/* .h5 {
+  font-family: Stalker;
+  font-size: 2.25rem;
 }
+ */

src/App.js

@@ -1,24 +1,20 @@
-import logo from './logo.svg';
 import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css'
+import Header from './Components/Header';
+import MainContent from './Components/MainContent';
+import Slider from './Components/Slider';
+
 
 function App() {
   return (
+    <>
+    <div className="overlay"/>
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* <Header/> */}
+      <Slider/>
+      <MainContent/>
     </div>
+    </>
   );
 }
 

src/Components/AboutPlace.js

@@ -0,0 +1,64 @@
+import React from "react";
+import styled from "styled-components";
+import {Container} from 'react-bootstrap'
+import TextScramble,{ScrambleTexts} from "@twistezo/react-text-scramble/lib/TextScramble";
+import lab from '../img/place_lab.png'
+
+const scrambleTexts: ScrambleTexts = [
+    'Anomalies',
+    'Anomalies everywhere',
+    'Freedom cannot be stopped',
+    'He looked a normal buddy'
+  ]
+
+
+
+const Styled = styled.div`
+  .jumbo {
+      background: url(${lab}) no-repeat fixed bottom;
+      background-size: cover;
+      color: #FFFFFF;
+      height: 400px;
+      position: relative;
+      z-index: -2;
+  }
+   
+  .overlay{
+      background-color: #fffff;  
+      opacity: 0.4;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+  }
+  
+  .text{
+      padding-top: 10rem; 
+      text-align: center;
+      align-content: center;
+      z-index: 3;
+  }
+  
+`;
+
+
+export default function AboutPlace() {
+
+
+    return(
+        <Styled>
+        <Container fluid className="jumbo">
+            <div className="overlay"></div>    
+            <Container className="text">
+                <h1>About Zone</h1>
+                <TextScramble
+                    texts={scrambleTexts}
+                
+                />
+            </Container>
+            </Container>
+        </Styled>
+    );
+}

src/Components/Footer.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Container,Nav } from "react-bootstrap";
+import styled from "styled-components";
+import {FaTelegram,FaInstagram,FaTwitter,FaTwitch} from 'react-icons/fa'
+import bgpicture from '../img/atp_place.png'
+
+const Styles = styled.div`
+    .author{
+        display: flex;
+        justify-content: center;
+        padding: 1.5rem;
+        font-family: Stalker;
+        font-size: 2rem;
+    }
+    .footer{
+        color: white;
+    
+        background: url(${bgpicture}) 10%;
+    }
+    .nav-link {
+        color: white;
+    }
+`;
+
+export default function Footer(){
+
+    return(
+        <>
+        <Styles>
+        <Container fluid className="footer">
+            <Container className="author">
+                <p>Made by Kurkabein</p>
+                
+            </Container>
+            <Container>
+            <Nav className="justify-content-center links" activeKey="/home">
+                 <Nav.Item>
+                     <Nav.Link><FaTelegram/></Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                     <Nav.Link ><FaInstagram /></Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                    <Nav.Link ><FaTwitter/></Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                <Nav.Link> <FaTwitch/> </Nav.Link>
+                </Nav.Item>
+                </Nav>
+            </Container>
+        </Container>
+        </Styles>
+        </>
+    );
+
+}

src/Components/Header.js

@@ -0,0 +1,25 @@
+import React from "react";
+import {Navbar, Container} from "react-bootstrap";
+
+
+export default function Header(){
+    
+   
+  
+  return(
+        <>
+            <Navbar>
+            <Container>
+                <Navbar.Brand href="#home">Stalker</Navbar.Brand>
+                <Navbar.Toggle />
+                <Navbar.Collapse className="justify-content-end">
+                <Navbar.Text>
+                    Made by: <a href="#login">Nikita Kyrochka</a>
+                </Navbar.Text>
+                </Navbar.Collapse>
+            </Container>
+            </Navbar>
+        </>
+        
+    );
+}

src/Components/MainContent.js

@@ -0,0 +1,203 @@
+import React from "react";
+import { Container, Row, Col, Card} from "react-bootstrap";
+import styled from "styled-components";
+import monolit from '../img/monolit.jpg'
+import freedom from '../img/freeedom.jpg'
+import clearSky from '../img/clear_sky.jpg'
+import merk from '../img/1.jpg'
+import duty from '../img/2.jpg'
+import loners from '../img/3.jpg'
+import background from '../img/church_place.jpg'
+import textbg from '../img/bgimg.jpg'
+import military from '../img/military_profile.jpeg'
+import bandit from '../img/bandit_profile.jpeg'
+import ecologist from '../img/ecologists_profile.jpg'
+import AboutPlace from "./AboutPlace";
+import TextInfo from "./TextInfo";
+import Footer from "./Footer";
+const Styles = styled.div`
+    
+    .card{
+        border-radius: 4px;
+        width: 18rem;
+    }
+     .card-body{
+        background:transparent;
+    }
+    .card-title {
+        font-family: Stalker;
+        font-size: 2.25rem;
+
+    }
+    .cardStyle {
+        background: url(${background}) no-repeat;
+        padding-top: 2rem; 
+        padding-bottom: 2rem;
+        background-size: cover;
+        width: 100%;
+    }
+
+    .row{
+        padding-left: 6rem;
+        padding-bottom: 2rem;
+    }
+    .textInfo{
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        background: url(${textbg});
+        background-size: cover;
+        color: white;
+        
+    }
+    @media (max-width: 768px) {
+        .row {
+            padding-left: 2rem;
+        }
+        .card{ 
+            width: 13rem;
+        }
+    }
+    @media (max-width: 576px) {
+        .col {
+            padding-bottom: 1rem;
+        }
+        .row {
+            padding-left: 2rem;
+        }
+        .card {
+            width: 18rem;
+        }
+        
+    }
+    
+`;
+
+export default function MainContent(){
+
+    return(
+        <>
+        <Styles>
+        <Container  fluid className="cardStyle">
+            <Row>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={loners} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Loners</Card.Title>
+                            <Card.Text>
+                            Loners are a nomadic semi-unified group of Stalkers who simply live off the Zone in order to earn some coin for their daily lives. 
+                            Loners are neutral toward almost all other factions, but do have complications with the Military, and, to a lesser extent, the Mercenaries, and openly oppose the Bandit faction for their actions against free Stalkers. 
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={duty} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Duty</Card.Title>
+                            <Card.Text>Duty was founded by former military expedition survivors and Stalkers concerned about the looming horrors of the Zone. 
+                                They are one of the largest Stalker clans in the Zone. They have a strict military code (such as no smoking, maintaining one's weapons, etc...) and operate in a military fashion, using ranks like Sergeant, Major, Captain, and General.
+
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={clearSky} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>ClearSky</Card.Title>
+                            <Card.Text>
+                            Clear Sky is the most secretive faction within the Zone. 
+                            The faction was disbanded after losing the majority of their manpower during the events in S.T.A.L.K.E.R.: Clear Sky.
+                            The Clear Sky faction was originally composed of former researchers of the C-Consciousness who broke away from them in order to conduct their own research on how to either destroy or contain the zone.
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+            
+            </Row>
+            <Row>
+            <Col>
+                    <Card>
+                        <Card.Img variant="top" src={merk} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Mercenaires</Card.Title>
+                            <Card.Text>
+                            The Mercenaries are a private military force operating within the Zone. 
+                            They are professional soldiers who will do just about anything in the Zone, ranging from retrieval, assassinations, body-guarding, etc. 
+                            Though, of course, it must be for the right price.
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={monolit} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Monolit</Card.Title>
+                            <Card.Text>This group displays many features of a religious sect. Its members believe in the existence of a complex alien crystal, the Monolith, located somewhere in the center of the Zone. 
+                                Most stalkers treat Monolith adepts with contempt and consider them as lunatics.</Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={freedom} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Freedom</Card.Title>
+                            <Card.Text>
+                            Freedom is a clan of stalkers who fight for free access to the Zone, and their views are somewhat anarchistic, believing nobody can own the Zone and seeing it both as a scientific marvel and as a free life inside the Zone's borders.
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+            </Row>
+            <Row>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={ecologist} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title> Ecologists</Card.Title>
+                            <Card.Text>The Ecologists are Ukrainian scientists sent into the Zone on behalf of the government, but seem to be affiliated with outside organizations. Their main purpose is the study of all aspects of the Zone, using scientific methods to further explain what the Zone is, and its purpose. 
+
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={bandit} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Bandits</Card.Title>
+                            <Card.Text>The Bandits are raiders and marauders of the Zone, ranging from petty thugs and gangsters to organized crime syndicates. Apart from Freedom, which treats them with marginal contempt, everyone hates the Bandits due to their nefarious acts of robbing and exploiting honest Stalkers.
+
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Img variant="top" src={military} style={{height: '400px'}}/>
+                        <Card.Body>
+                            <Card.Title>Military</Card.Title>
+                            <Card.Text>
+                            The Ukrainian military supposedly has the Zone contained in order to prevent the looting of dangerous, radioactive materials and to prevent the unauthorized entering of any individuals. They allegedly enforce this rule with a "Shoot-on-sight" declaration.
+                            </Card.Text>
+                        </Card.Body>
+                    </Card>
+                </Col>
+            
+            </Row>
+        </Container>
+        <AboutPlace/>
+        <Container className="textInfo" fluid>
+            <TextInfo/>
+        </Container>
+        <Footer/>
+        </Styles>
+        </>
+    );
+
+}

src/Components/Slider.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { Carousel} from "react-bootstrap";
+import styled from "styled-components";
+import firstSlide from '../img/wheel_of_high.jpg'
+import secondSlide from '../img/stalker_header_2.jpg'
+import thirdSlide from '../img/stalker_header.jpg'
+
+
+const Styled = styled.div`
+  .carousel-item{
+    height: 600px;
+  }
+  .carousel-caption {
+    font-family: Stalker;
+    font-size: 1.4rem;
+  }
+  @media (min-width: 768px) {
+    .carousel-item{
+      height: 400px;
+    }
+  
+  }
+  @media (max-width: 576px) {
+    .carousel-item {
+      height:100%;
+    } 
+  }
+  
+`;
+
+export default function Slider() {
+
+    return(
+        <>
+        <Styled>
+            <Carousel fade>
+                
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src={firstSlide}
+      alt="First slide"
+    />
+    <Carousel.Caption>
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src={secondSlide}
+      alt="Second slide"
+    />
+
+    <Carousel.Caption>
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+  <Carousel.Item>
+    <img
+      className="d-block w-100"
+      src={thirdSlide}
+      alt="Third slide"
+    />
+
+    <Carousel.Caption>
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </Carousel.Caption>
+  </Carousel.Item>
+</Carousel>
+
+</Styled>
+</>
+    );
+}

src/Components/TextInfo.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import {Row,Col,Container} from 'react-bootstrap'
+import monolit from '../img/monolit.jpg'
+import styled from 'styled-components'
+
+
+const Styles = styled.div`
+    .container{
+        z-index: -1;
+    }
+    
+
+`; 
+
+
+export default function TextInfo(){
+
+
+    return(
+        <Styles>
+        <Container>
+        <Row>
+            <Col md={6}>
+                <img src={monolit} height={500} style={{paddingTop:'6rem'}}/>
+            </Col>
+            <Col md={6} style={{paddingTop:'6rem'}}>
+                <h2>Notice about Zone</h2>
+                <p className="text" text-center>
+                The Zone, no matter how you enter it, is a pain in the ass. 
+                Sometimes it’s full of mutant animals, speaking in strangely familiar tongues. 
+                 there are gravitational anomalies, flinging you and whoever you’re with into the sky like ragdolls. 
+                 Sometimes you stand in the ruins of a factory and head straight in one direction and stumble right back into the ruins you left. 
+                 Sometimes there is a passage so unfriendly to visitors that it is simply called the Meat Grinder; perhaps your Destination, the very reason you entered the Zone, exists on the other side of said Meat Grinder. 
+                 The point of the Zone is that these things are there, these absolutely glorious metaphysical pains in the ass, and that you are dealing with them, step by tremulous step. 
+                 No matter what, there will be others like you—scavengers in search of god knows what. Maybe they, and you, will be called Stalkers.
+                </p>
+            </Col>
+        </Row>
+        </Container>
+        </Styles>
+
+    );
+}