elangptra/frontend_adaptive_learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing page responsive

Browse Source
This commit is contained in:
Dimas Atmodjo 2024-11-19 16:48:14 +07:00
parent 7051807ccf
commit 53a7fa6494
3 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/styles/index.css
View File

@ -16,6 +16,10 @@ body {
width: 100vw; width: 100vw;
} }
.w-75{
width: 75%;
}
.h-fit{ .h-fit{
height: fit-content; height: fit-content;
} }
@ -355,9 +359,17 @@ body {
} }
@media (max-width: 992px) {
.ilustration-img{
height: 50%;
}
}
@media (max-width: 768px) {
.landing-page section:not(:last-of-type){
margin-bottom: 0!important;
}
}

107
src/components/layout/guest/MainNav.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Navbar, Nav, Container, Button } from 'react-bootstrap'; import { Navbar, Nav, Container, Button, Offcanvas } from 'react-bootstrap';
import logo from '../../../assets/images/logo.png'; import logo from '../../../assets/images/logo.png';
import logoWhite from '../../../assets/images/logo-w.png'; import logoWhite from '../../../assets/images/logo-w.png';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
@ -8,6 +8,10 @@ const MainNav = () => {
const location = useLocation(); const location = useLocation();
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const handleScroll = () => { const handleScroll = () => {
if (window.scrollY > 80) { if (window.scrollY > 80) {
setScrolled(true); setScrolled(true);
@ -25,51 +29,76 @@ const MainNav = () => {
const getNavbarMenu = () => { const getNavbarMenu = () => {
if (location.pathname === '/') { if (location.pathname === '/') {
return 'd-block w-100'; return 'd-block flex-grow-1';
} else{ } else{
return 'd-none' return 'd-none'
} }
}; };
return ( return (
<Navbar collapseOnSelect expand="md" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}> <>
<Container> <Navbar collapseOnSelect expand="lg" className={`position-fixed w-100 ${scrolled ? 'bg-blue' : 'bg-blur'}`} style={{zIndex:"99",top:"0"}}>
{/* <Navbar.Brand href="#home" className='text-white'> <Container>
<img {/* <Navbar.Brand href="#home" className='text-white'>
alt="" <img
src={logo} alt=""
height="32" src={logo}
className="d-inline-block align-top" height="32"
/>{' '} className="d-inline-block align-top"
</Navbar.Brand> */} />{' '}
<Navbar.Brand href="/" className='text-white'> </Navbar.Brand> */}
<img <Navbar.Brand href="/" className='text-white'>
alt="" <img
src={(location.pathname === '/' || scrolled) ? logoWhite : logo} alt=""
height="32" src={(location.pathname === '/' || scrolled) ? logoWhite : logo}
className="d-inline-block align-top" height="32"
/>{' '} className="d-inline-block align-top"
</Navbar.Brand> />{' '}
<div className={getNavbarMenu()}> </Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" /> <div className={getNavbarMenu()}>
<Navbar.Collapse id="responsive-navbar-nav"> <div className='d-none d-lg-block'>
<Nav className="w-100 w-lg-75 justify-content-center"> <Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Nav.Link href="#hero" className='text-white me-3'>Home.</Nav.Link> <Navbar.Collapse id="responsive-navbar-nav">
<Nav.Link href="#whatis" className='text-white me-3'>What Is.</Nav.Link> <Nav className="w-100 w-lg-75 justify-content-center">
<Nav.Link href="#feature" className='text-white me-3'>Feature.</Nav.Link> <Nav.Link href="#hero" className='text-white me-3'>Home.</Nav.Link>
<Nav.Link href="#youget" className='text-white me-3'>You Get.</Nav.Link> <Nav.Link href="#whatis" className='text-white me-3'>What Is.</Nav.Link>
<Nav.Link href="#contacts" className='text-white me-3'>Join Now.</Nav.Link> <Nav.Link href="#feature" className='text-white me-3'>Feature.</Nav.Link>
<Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link> <Nav.Link href="#youget" className='text-white me-3'>You Get.</Nav.Link>
<Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link> <Nav.Link href="#contacts" className='text-white me-3'>Join Now.</Nav.Link>
</Nav> <Nav.Link href="/signup" className='text-white me-3 d-block d-md-none'>Sign Up</Nav.Link>
<Nav className='d-none d-lg-flex'> <Nav.Link href="/login" className='text-white me-3 d-block d-md-none'>Login</Nav.Link>
<Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button> </Nav>
<Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button> <Nav className='d-flex'>
</Nav> <Button as='a' href='/signup' variant='white-blue' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Sign<span className="ts">_</span>Up</Button>
</Navbar.Collapse> <Button as='a' href='/login' variant='outline-white' className='btn-nav mx-1 rounded-4 py-2 fs-6' size='lg'>Login</Button>
</div> </Nav>
</Container> </Navbar.Collapse>
</div>
<div className='d-flex d-lg-none justify-content-end'>
<Button variant="outline-white" onClick={handleShow}>
<i className="bi bi-list text-white"></i>
</Button>
</div>
</div>
</Container>
</Navbar> </Navbar>
<Offcanvas show={show} onHide={handleClose} placement='end'>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Menu</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav.Link href="#hero" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Home.</Nav.Link>
<Nav.Link href="#whatis" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>What Is.</Nav.Link>
<Nav.Link href="#feature" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>Feature.</Nav.Link>
<Nav.Link href="#youget" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top text-blue'>You Get.</Nav.Link>
<Nav.Link href="#contacts" style={{fontSize:"3.5vh"}} className='py-3 ps-3 border-top border-bottom text-blue'>Join Now.</Nav.Link>
<div className="d-flex w-100 justify-content-between mt-3">
<Nav.Link href="/signup" style={{fontSize:"3.5vh"}} className='w-50 text-center me-1 py-2 border-top text-black bg-warning rounded-3'>Sign Up</Nav.Link>
<Nav.Link href="/login" style={{fontSize:"3.5vh"}} className='w-50 text-center ms-1 py-2 border-top border-bottom text-white bg-blue rounded-3'>Login</Nav.Link>
</div>
</Offcanvas.Body>
</Offcanvas>
</>
); );
}; };

32
src/roles/guest/landing_page/views/Home.jsx
View File

@ -15,15 +15,15 @@ const Home = () => {
<section id='hero' className='bg-gd h-screen position-relative'> <section id='hero' className='bg-gd h-screen position-relative'>
<Container className='pt-5 position-relative' style={{zIndex:"2"}}> <Container className='pt-5 position-relative' style={{zIndex:"2"}}>
<Row> <Row>
<Col md={6} className="col-12 pe-5 text-white d-flex flex-column"> <Col lg={6} className="col-12 pe-5 text-white d-flex flex-column">
<h1 className='fw-bold display-4'>Your Learning, <br /> Your Way</h1> <h1 className='fw-bold display-4'>Your Learning, <br /> Your Way</h1>
<p className='pe-5 fs-5 mt-4'>Transform the way you learn <span className='text-warning'>English</span> with exercises that adapt to your pace and style.</p> <p className='pe-5 fs-5 mt-4'>Transform the way you learn <span className='text-warning'>English</span> with exercises that adapt to your pace and style.</p>
<div className="d-flex w-100 pe-5 mt-4"> <div className="d-flex w-100 pe-5 mt-4 flex-column flex-sm-row">
<Button variant='warning' size='lg' className='rounded-4 me-3 w-100 text-dark'>SIGN UP</Button> <Button variant='warning' size='lg' className='rounded-4 me-3 mb-3 mb-sm-0 w-100 text-dark'>SIGN UP</Button>
<Button variant='outline-light' size='lg' className='rounded-4 w-100'>READ MORE</Button> <Button variant='outline-light' size='lg' className='rounded-4 w-100'>READ MORE</Button>
</div> </div>
</Col> </Col>
<Col md={6} className="col-12 d-flex items-center"> <Col lg={6} className="col-12 d-none d-lg-flex items-center">
<img src={illustration} alt="/" className='w-100'/> <img src={illustration} alt="/" className='w-100'/>
</Col> </Col>
</Row> </Row>
@ -35,8 +35,8 @@ const Home = () => {
<section id='whatis'> <section id='whatis'>
<Container className='mt-5'> <Container className='mt-5'>
<Row> <Row>
<Col md={6} className='col-12'> <Col md={6} className='col-12 d-none d-md-block'>
<img src={illustration2} alt="/" /> <img src={illustration2} alt="/" className='w-75'/>
</Col> </Col>
<Col md={6} className='col-12 d-flex flex-column justify-content-center'> <Col md={6} className='col-12 d-flex flex-column justify-content-center'>
<div className='d-flex align-items-center mb-3'> <div className='d-flex align-items-center mb-3'>
@ -47,8 +47,8 @@ const Home = () => {
<p className='fs-5'> <p className='fs-5'>
<span className='text-blue fw-bold'>SEALS</span> refers to a personalized approach to language education that adjusts to the individual learner's needs, pace, and skill level. <span className='text-blue fw-bold'>SEALS</span> refers to a personalized approach to language education that adjusts to the individual learner's needs, pace, and skill level.
</p> </p>
<div className="d-flex"> <div className="d-flex flex-column flex-sm-row">
<Button variant='gd' size='lg' className='rounded-4 w-100 me-3'>Basic Learning</Button> <Button variant='gd' size='lg' className='rounded-4 w-100 me-3 mb-3 mb-sm-0'>Basic Learning</Button>
<Button variant='gd' size='lg' className='rounded-4 w-100'>Advance Learning</Button> <Button variant='gd' size='lg' className='rounded-4 w-100'>Advance Learning</Button>
</div> </div>
</Col> </Col>
@ -63,7 +63,7 @@ const Home = () => {
<span className='text-blue fw-bold'> English</span> skills. <span className='text-blue fw-bold'> English</span> skills.
</h5> </h5>
<Row> <Row>
<Col sm={6} md={3} className='col-12'> <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
<div className='p-4 rounded rounded-4 bg-white'> <div className='p-4 rounded rounded-4 bg-white'>
<img src={Feature1} alt="/" /> <img src={Feature1} alt="/" />
<h4 className='my-3'>Listening</h4> <h4 className='my-3'>Listening</h4>
@ -72,7 +72,7 @@ const Home = () => {
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={6} md={3} className='col-12'> <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
<div className='p-4 rounded rounded-4 bg-white'> <div className='p-4 rounded rounded-4 bg-white'>
<img src={Feature2} alt="/" /> <img src={Feature2} alt="/" />
<h4 className='my-3'>Reading</h4> <h4 className='my-3'>Reading</h4>
@ -81,7 +81,7 @@ const Home = () => {
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={6} md={3} className='col-12'> <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
<div className='p-4 rounded rounded-4 bg-white'> <div className='p-4 rounded rounded-4 bg-white'>
<img src={Feature3} alt="/" /> <img src={Feature3} alt="/" />
<h4 className='my-3'>Grammar</h4> <h4 className='my-3'>Grammar</h4>
@ -90,7 +90,7 @@ const Home = () => {
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={6} md={3} className='col-12'> <Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
<div className='p-4 rounded rounded-4 bg-white'> <div className='p-4 rounded rounded-4 bg-white'>
<img src={Feature4} alt="/" /> <img src={Feature4} alt="/" />
<h4 className='my-3'>Vocabulary</h4> <h4 className='my-3'>Vocabulary</h4>
@ -105,8 +105,8 @@ const Home = () => {
<section id='youget'> <section id='youget'>
<Container className='mt-5'> <Container className='mt-5'>
<Row> <Row>
<Col md={6} className='col-12'> <Col md={6} className='col-12 d-none d-md-block'>
<img src={SvgService} alt="/" /> <img src={SvgService} alt="/" className='w-75'/>
</Col> </Col>
<Col md={6} className='col-12'> <Col md={6} className='col-12'>
<h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1> <h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1>
@ -176,7 +176,7 @@ const Home = () => {
</div> */} </div> */}
<Container className='position-relative' style={{zIndex:"2"}}> <Container className='position-relative' style={{zIndex:"2"}}>
<Row> <Row>
<Col sm={6} className='col-12 pe-5'> <Col md={6} className='col-12 pe-5'>
<div> <div>
<h4>SEALS</h4> <h4>SEALS</h4>
<p className='text-blue-50'>The first free end-to-end analytics service for the site, designed to work with enterprises of various levels and business segments.</p> <p className='text-blue-50'>The first free end-to-end analytics service for the site, designed to work with enterprises of various levels and business segments.</p>
@ -211,7 +211,7 @@ const Home = () => {
</p> </p>
</div> </div>
</Col> </Col>
<Col sm={6} className='col-12 ps-5 d-flex flex-column justify-content-between'> <Col md={6} className='col-12 ps-5 d-none d-md-flex flex-column justify-content-between'>
<div className="d-flex"> <div className="d-flex">
<a href="#whatis" className='me-4 text-white text-decoration-none'>What is.</a> <a href="#whatis" className='me-4 text-white text-decoration-none'>What is.</a>
<a href="#feature" className='me-4 text-white text-decoration-none'>Feature.</a> <a href="#feature" className='me-4 text-white text-decoration-none'>Feature.</a>