256 lines
15 KiB
JavaScript
256 lines
15 KiB
JavaScript
import React from 'react';
|
|
import { Container, Row, Col, Button, ButtonGroup } from 'react-bootstrap';
|
|
import illustration from '../../../../assets/images/illustration/Illustration.png';
|
|
import illustration2 from '../../../../assets/images/illustration/Illustration2.png';
|
|
import SvgService from '../../../../assets/images/illustration/service.png';
|
|
import SvgHero from '../../../../assets/images/Decoration.png';
|
|
import Feature1 from '../../../../assets/images/feature1.png';
|
|
import Feature2 from '../../../../assets/images/feature2.png';
|
|
import Feature3 from '../../../../assets/images/feature3.png';
|
|
import Feature4 from '../../../../assets/images/feature4.png';
|
|
|
|
const Home = () => {
|
|
return (
|
|
<div className='bg-white landing-page'>
|
|
<section id='hero' className='bg-gd h-screen position-relative'>
|
|
<Container className='pt-5 position-relative' style={{zIndex:"2"}}>
|
|
<Row>
|
|
<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>
|
|
<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 flex-column flex-sm-row">
|
|
<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>
|
|
</div>
|
|
</Col>
|
|
<Col lg={6} className="col-12 d-none d-lg-flex items-center">
|
|
<img src={illustration} alt="/" className='w-100'/>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
<div className="svg-background position-absolute bottom-0 w-100" style={{zIndex:"1"}}>
|
|
<img src={SvgHero} alt="" className='w-100'/>
|
|
</div>
|
|
</section>
|
|
<section id='whatis'>
|
|
<Container className='mt-5'>
|
|
<Row>
|
|
<Col md={6} className='col-12 d-none d-md-block'>
|
|
<img src={illustration2} alt="/" className='w-75'/>
|
|
</Col>
|
|
<Col md={6} className='col-12 d-flex flex-column justify-content-center'>
|
|
<div className='d-flex align-items-center mb-3'>
|
|
<h4 className='text-secondary mb-0'>What is</h4>
|
|
<div className='ms-2 border-top border-3 border-secondary' style={{width:"180px"}}></div>
|
|
</div>
|
|
<h1 className='text-blue fw-bold pb-2 mb-3'>Smart Adaptive Learning System (SEALS) ?</h1>
|
|
<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.
|
|
</p>
|
|
<div className="d-flex flex-column flex-sm-row">
|
|
<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>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</section>
|
|
<section id='feature'>
|
|
<Container className='mt-5 bg-blue-50 rounded-5 p-4'>
|
|
<h1 className='text-blue fw-bold text-center w-100'>Feature Section for You</h1>
|
|
<h5 className='mx-auto text-center mb-5' style={{maxWidth:"645px"}}>
|
|
Develop your skills by studying the topics in each section below with the level determining your
|
|
<span className='text-blue fw-bold'> English</span> skills.
|
|
</h5>
|
|
<Row>
|
|
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
|
<div className='p-4 rounded rounded-4 bg-white'>
|
|
<img src={Feature1} alt="/" />
|
|
<h4 className='my-3'>Listening</h4>
|
|
<p className='text-secondary fs-7 m-0 truncate truncate-4'>
|
|
It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
|
|
</p>
|
|
</div>
|
|
</Col>
|
|
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
|
<div className='p-4 rounded rounded-4 bg-white'>
|
|
<img src={Feature2} alt="/" />
|
|
<h4 className='my-3'>Reading</h4>
|
|
<p className='text-secondary fs-7 m-0 truncate truncate-4'>
|
|
It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
|
|
</p>
|
|
</div>
|
|
</Col>
|
|
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
|
<div className='p-4 rounded rounded-4 bg-white'>
|
|
<img src={Feature3} alt="/" />
|
|
<h4 className='my-3'>Grammar</h4>
|
|
<p className='text-secondary fs-7 m-0 truncate truncate-4'>
|
|
It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
|
|
</p>
|
|
</div>
|
|
</Col>
|
|
<Col sm={6} md={3} className='col-12 mb-3 mb-md-0'>
|
|
<div className='p-4 rounded rounded-4 bg-white'>
|
|
<img src={Feature4} alt="/" />
|
|
<h4 className='my-3'>Vocabulary</h4>
|
|
<p className='text-secondary fs-7 m-0 truncate truncate-4'>
|
|
It typically consists of a series of audio recordings, such as conversations, lectures, or monologues, that are played for the test-taker, who must then answer a set of questions based on the content of the recordings.
|
|
</p>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</section>
|
|
<section id='youget'>
|
|
<Container className='mt-5'>
|
|
<Row>
|
|
<Col md={6} className='col-12 d-none d-md-block'>
|
|
<img src={SvgService} alt="/" className='w-75'/>
|
|
</Col>
|
|
<Col md={6} className='col-12'>
|
|
<h1 className='fw-bold'>What Will You <span className='text-blue'>Get </span>?</h1>
|
|
<p className='text-secondary'>In sem orci feugiat nibh. Rhoncus sit integer sed sit pla feugiat elementum suscipit ac ut rhoncus sit.</p>
|
|
<div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
|
|
<div className='me-3'>
|
|
<div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
|
|
<i className="bi bi-check-lg text-white fs-4"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6>Feugiat varius imperdiet ultrices pretium.</h6>
|
|
<p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
|
|
</div>
|
|
</div>
|
|
<div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
|
|
<div className='me-3'>
|
|
<div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
|
|
<i className="bi bi-check-lg text-white fs-4"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6>Feugiat varius imperdiet ultrices pretium.</h6>
|
|
<p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
|
|
</div>
|
|
</div>
|
|
<div className="p-3 mb-3 rounded-3 shadow shadow-sm d-flex">
|
|
<div className='me-3'>
|
|
<div className="bg-blue ratio-1 rounded-3 d-flex items-center" style={{width:"40px",height:"40px"}}>
|
|
<i className="bi bi-check-lg text-white fs-4"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h6>Feugiat varius imperdiet ultrices pretium.</h6>
|
|
<p className='text-secondary fs-7 m-0'>Arcu venenatis iaculis et arcu quis sed. Sed sollicitudin nulla sagittis id et diam lobortis</p>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</section>
|
|
<section id='contacts'>
|
|
<Container className='bg-blue-50 p-4 rounded-5'>
|
|
<Row>
|
|
<Col className='d-flex flex-column items-center'>
|
|
<h1 className='fw-bold'>What Are You <span className='text-blue'>Waiting </span> for ?</h1>
|
|
<p className='text-secondary'>Start your efficient <span className='text-blue'>English</span> learning journey today!</p>
|
|
<Button variant='warning' size='lg' className='rounded-4 px-5 mt-4'>JOIN NOW</Button>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* <section className='bg-gd d-flex flex-column items-center text-white'>
|
|
<div className="w-100 mb-5" style={{marginTop:'-1px'}}>
|
|
<img src={SvgFooter} alt="" className='w-100' />
|
|
</div>
|
|
<h1>What Are You Waiting For?</h1>
|
|
<p>Start your efficient <span className='text-warning'>English</span> learning journey today!</p>
|
|
<Button variant="warning" className='px-5 fw-bold text-dark'>Join Now</Button>
|
|
</section> */}
|
|
|
|
|
|
<footer className='positon-relative text-white py-5'>
|
|
{/* <div className="position-absolute w-100" style={{zIndex:"1",marginTop:"-3rem"}}>
|
|
<img src={SvgFooter} alt="/" className='w-100' />
|
|
</div> */}
|
|
<Container className='position-relative' style={{zIndex:"2"}}>
|
|
<Row>
|
|
<Col md={6} className='col-12 pe-5'>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div className='mt-5 d-flex justify-content-between align-items-end'>
|
|
<div className="social-icon-box d-flex flex-column">
|
|
<div className="d-flex">
|
|
<a href="/">
|
|
<i className="bi bi-instagram"></i>
|
|
</a>
|
|
</div>
|
|
<div className='d-flex'>
|
|
<a href="/">
|
|
<i className="bi bi-facebook"></i>
|
|
</a>
|
|
<a href="/">
|
|
<i className="bi bi-tiktok"></i>
|
|
</a>
|
|
</div>
|
|
<div className='d-flex'>
|
|
<a href="/">
|
|
<i className="bi bi-twitter-x"></i>
|
|
</a>
|
|
<a href="/">
|
|
<i className="bi bi-youtube"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p className='m-0'>
|
|
©2024 — Copyright <br />
|
|
All Rights reserved
|
|
</p>
|
|
</div>
|
|
</Col>
|
|
<Col md={6} className='col-12 ps-5 d-none d-md-flex flex-column justify-content-between'>
|
|
<div className="d-flex">
|
|
<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="#youget" className='me-4 text-white text-decoration-none'>You Get.</a>
|
|
<a href="#contacts" className='me-4 text-white text-decoration-none'>Contacts.</a>
|
|
</div>
|
|
<div className="d-flex justify-content-between align-items-end">
|
|
<div>
|
|
<h5>Contact Us</h5>
|
|
<p className='text-blue-50 m-0'>
|
|
+62 (999) 888-77-66 <br />
|
|
hello@adaptivelearning.com
|
|
</p>
|
|
|
|
<h5 className='mt-3'>Location</h5>
|
|
<p className='text-blue-50 m-0'>
|
|
483920, Indonesia, <br />
|
|
Number Office 22/2/5
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h6>Languages</h6>
|
|
<ButtonGroup size='sm' aria-label="Basic example">
|
|
<Button variant="ts" className='text-white'>ENG</Button>
|
|
<Button variant="ts" className='text-white'>IND</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</footer>
|
|
|
|
{/* <footer className='bg-gd w-100 py-3 border-top'>
|
|
<h6 className='text-center text-white m-0'>Copyright © Adaptive English Learning</h6>
|
|
</footer> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|