*************CREATING LANDING PAGE*********************

 WE WILL START WITH SELECTING A BACKGROUND IMAGE FOR THE PAGE FROM UNSPLASH.

THEN WE WILL CREATE A NAVBAR THAT INCLUDES LOGO, TITLE AND LINKS LIKE REGISTER, LOGIN, JOIN AS GUEST.



<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>

TO MAKE IT RESPONSIVE , I NEED TO FIND THE WIDTH OF THE SCREEN, HENCE I CREATED A FUNCTION

 useEffect(() => {
    const handleResize = () => {
      setMenu(window.innerWidth <= 768);
      if (window.innerWidth > 768) setToggle(false);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

LATER , I WANTED TO SHOW THE CONTENT WITH ANIMATION ON SCROLL . SO I DIVIDED EACH CONTENT INTO A SLIDE, SO THAT FOR EACH SLIDE I COULD ANIMATION.

FOR THE ANIMATION I USED NPM PACKAGE AOS. ANIMATION ON SCROLL

TO INSTALL : NPM I AOS

IN THE FIRST SLIDE TO DISPLAY THE CAPTION, I USED A TYPING STYLE. IT IS ALSO A PACKAGE KNOWN AS REACT-TYPE-ANIMATION.

TO INSTALL: NPM I REACT-TYPE-ANIMATION

FOR THE EMOJIS : emojipedia

WE INITIALIZE AOS 

  useEffect(() => {
    AOS.init({
      duration: 1000,
      once: false,
    });
  }, []);


<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>


THEN WE MOVE ON TO THE FOOTER.

<footer className="footer">
      <h5>&copy;All rights reserved</h5>
      <div className="iconLinks">
        <a href="https://github.com/abhishekkumar71">
          <i className="fa-brands fa-github"></i>
        </a>
        <a href="https://www.linkedin.com/in/abhishek-kumar5471">
          <i className="fa-brands fa-linkedin"></i>
        </a>
        <a href="https://www.blogger.com/profile/11390721205359469828">
          <i className="fa-brands fa-blogger"></i>
        </a>
      </div>
    </footer>










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>
    </>
  );
}







Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more