ALL PAGES - LANDING PAGE
LANDINGPAGE.JSX
import React, { useEffect, useRef, useState } from "react";
import "../styles/App.css";
import { Link } from "react-router-dom";
import { TypeAnimation } from "react-type-animation";
import AOS from "aos";
import "aos/dist/aos.css";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import { IconButton } from "@mui/material";
import Footer from "./Footer";
export default function LandingPage() {
const [menu, setMenu] = useState(false);
const [toggle, setToggle] = useState(false);
const handleToggle = () => {
setToggle((prev) => !prev);
};
useEffect(() => {
const handleResize = () => {
setMenu(window.innerWidth <= 768);
if (window.innerWidth > 768) setToggle(false);
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
useEffect(() => {
AOS.init({
duration: 1000,
once: false,
});
}, []);
return (
<>
<nav className="nav">
<div className="navHeader">
<img
src="/Logo.png"
style={{ height: "3rem", width: "3rem", borderRadius: "10px" }}
/>
<h2
style={{
fontFamily: "Audiowide",
color: "white",
fontSize: "2rem",
}}
>
Troop
</h2>
</div>
{menu ? (
<>
<IconButton onClick={handleToggle} style={{ marginRight: "3rem" }}>
<MenuOutlinedIcon
style={{ fontSize: "3rem", color: "whitesmoke" }}
/>
</IconButton>
{toggle ? (
<div className="navLinks">
<Link to="/guest">Join as Guest</Link>
<Link to="/auth">Register</Link>
<Link to="/auth">Login</Link>
</div>
) : (
<></>
)}
</>
) : (
<div className="navLinks">
<Link to="/guest">Join as Guest</Link>
<Link to="/auth">Register</Link>
<Link to="/auth">Login</Link>
</div>
)}
</nav>
<div className="scrollContainer">
<section className="slide">
<div className="hero" data-aos="zoom-in-up">
<div
className="text"
data-aos="fade-left"
data-aos-delay="300"
>
<h2
style={{
fontFamily: "Audiowide",
color: "#5f5757",
fontSize: "3rem",
}}
>
<b>Troop</b>
</h2>
<TypeAnimation
style={{
fontFamily: "Dancing Script",
fontSize: "1.5rem",
marginLeft: "10rem",
}}
sequence={["- See 'N' Smile 😃", 100]}
speed={30}
/>
<p style={{ fontSize: "2rem" }}>Connect with your Loved ones!</p>
<Link
to="/auth"
style={{ backgroundColor: "#9d6b0df2", borderRadius: "10px" }}
>
Get started
</Link>
</div>
<div
className="heroImg"
data-aos="flip-up"
data-aos-delay="300"
>
<img src="./landingPic1.jpg" style={{ height: "20rem" }} />
</div>
</div>
</section>
<section className="slide">
<div className="working" data-aos="zoom-in-up">
<div
className="steps"
style={{
display: "flex",
flexDirection: "column",
width:"50vw",
flexWrap: "wrap",
alignContent: "flex-start",
alignItems: "flex-start",
fontSize: "1.2rem",
}} data-aos="fade-up-left" data-aos-delay="300"
>
<h2 className="heading">How it works? 🤔</h2>
<p>- Share your meeting code or room link</p>
<p>- Allow Mic and Video access</p>
<p>- That's it! You are Live</p>
</div>
<div
className="workingImg"
style={{display:"flex",justifyContent:"center"}}
data-aos="flip-up"
data-aos-delay="300"
>
<img src="./iconSymbol.jpg" style={{ height: "15rem" }} />
</div>
</div>
</section>
<section className="slide">
<div className="features" data-aos="zoom-in-up">
<div className="lines" data-aos="fade-down-right">
<h2 className="heading">Features </h2>
<p>- Video and Audio Sharing</p>
<p>- Screen Sharing</p>
<p>- Live Chat</p>
<Link
to="/auth"
style={{ backgroundColor: "#9d6b0df2", borderRadius: "10px" }}
>
Register
</Link>
</div>
<div className="featuresImg" data-aos="flip-up" data-aos-delay="300">
<img src="./features.jpg" style={{height:"18rem",width:"20rem"}}/>
</div>
</div>
</section>
<Footer />
</div>
</>
);
}
APP.CSS
body {
margin: 0;
padding: 0;
font-family: "DM Sans";
overflow-x: hidden;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: scroll;
}
a {
text-decoration: none;
color: white;
padding: 0.5rem;
}
a:hover {
opacity: 0.5 !important;
}
.nav {
position: fixed;
top: 0;
width: 100vw;
height: 10vh;
background-color: #242424;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
z-index: 100;
}
.navHeader {
display: flex;
align-items: center;
gap: 1rem;
}
img:hover{
cursor: pointer;
}
.navLinks {
display: flex;
gap: 2rem;
width: 25rem;
}
.scrollContainer {
margin-top: 10vh;
height: 90vh;
scroll-snap-align: center;
}
/* Each full-screen slide */
.slide {
height: 90vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background-image: url("/landingBg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.hero {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0, 0, 0, 0.9);
padding: 2rem;
border-radius: 20px;
color: white;
}
.text {
flex: 1;
padding: 1rem;
}
.heroImg {
flex: 1;
display: flex;
justify-content: center;
}
.heading {
font-size: 2rem;
font-family: "Audiowide";
color: #5f5757;
}
.working {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(0, 0, 0, 0.9);
padding: 2rem;
border-radius: 20px;
color: white;
}
.features {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(0, 0, 0, 0.9);
padding: 2rem;
border-radius: 20px;
color: white;
}
.features p {
font-size: 1.3rem;
}
.lines{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50vw;
}
.footer {
background-color: #242424;
height: 13vh;
padding: 2rem;
color: aliceblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.iconLinks {
height: 5rem;
}
.iconLinks i {
font-size: 1.5rem;
}
@media (max-width: 768px) {
.navHeader {
flex-wrap: wrap;
}
.navLinks {
display: flex;
flex-direction: column;
position: absolute;
right: 0;
background-color: #121212;
opacity: 0.9;
justify-content: space-evenly;
align-items: flex-start;
gap: 10px;
width: 35vw;
margin-top: 12rem;
}
h2 {
width: 10rem;
}
span {
margin-left: 0 !important;
}
.hero {
flex-wrap: wrap;
width: 80%;
height: 60%;
}
img{
width: 45vw;
height: 25vh;
}
.working{
width: 85%;
height: 60%;
}
.features{
width: 80%;
height: 60%;
}
}
@media (max-width:597px) {
.heroImg{
display: none;
}
.featuresImg{
display: none;
}
.workingImg{
display: none !important;
}
.navHeader img{
height: 2rem !important;
width: 2rem !important;
}
h2{
font-size: 1.5rem !important;
}
}
Comments
Post a Comment