CREATING THE LANDING PAGE

 CREATED A NAV BAR AND LANDING PAGE'S CONTENT.

LANDINGPAGE.JSX

import React from "react";
import "../App.css";
import {Link} from "react-router-dom";
export default function LandingPage() {
  return (
    <>
      <div className="landingContainer">
        <nav>
          <div className="navHeader">
            <h2>Logo and title</h2>
          </div>
          <div className="navLinks">
            <a>Register</a>
            <a>Login</a>
          </div>
        </nav>
        <div className="menu">
          <div>
            <h2>
              <span style={{ color: "orange" }}>Connect</span> with your desired
              ones
            </h2>
            <p>just a few clicks away!</p>
            <div role="button">
              <Link to="">Get started</Link>
            </div>
          </div>
          <div>
            <img src="/mobile.png" />
          </div>
        </div>
      </div>
    </>
  );
}

APP.CSS

.landingContainer {
  height: 100vh;
  width: 100vw;
  background: url("public/bgPr2.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.landingContainer a{
    color: white;
}
.landingContainer nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landingContainer .navHeader {
  font-size: 1rem;
  font-weight: 700;
}
.landingContainer nav .navLinks {
  padding: 1rem;
  text-decoration: none;
  display: flex;
  gap: 1rem;
  cursor: pointer;
}
.menu {
  display: flex;
  justify-content: space-between;
  padding-inline: 2rem;
  align-items: center;
  height: 50vh;
}
.menu > div:nth-child(1) h2 {
  font-size: 2rem;
}
.menu > div:nth-child(1) p {
  font-size: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
}

.menu > div:nth-child(1) div[role="button"] {
  font-size: 1rem;
  background-color: orange;
  width: fit-content;
  padding: 0.5rem;
  border-radius: 1rem;
}
.menu > div:nth-child(2) img {
  height: 60vh;
  margin-top: 5rem;
  width: auto;
}




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