WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

first commit

Browse Source
This commit is contained in:
Olu Amey
2021-12-18 20:23:31 -05:00
commit bce242fd22
308 changed files with 42398 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeFour/FeaturesHomeFour.js
+69
View File
@@ -0,0 +1,69 @@
import React from 'react';
import shape13 from '../../assets/images/shape/shape-13.png';
import shape14 from '../../assets/images/shape/shape-14.png';
import shape15 from '../../assets/images/shape/shape-15.png';
import trafficThumb from '../../assets/images/traffic-thumb-2.png';
function FeaturesHomeFour() {
return (
<>
<section
className="appie-features-area-2 appie-features-area-5 pt-90 pb-100"
id="features"
>
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-12">
<div className="appie-section-title text-center">
<h3 className="appie-title">
Wherever you need <br /> us the most
</h3>
<p>
The full monty spiffing good time no biggie cack grub fantastic.
</p>
</div>
</div>
</div>
<div className="row mt-30 align-items-center">
<div className="col-lg-6">
<div className="appie-features-boxes ">
<div className="appie-features-box-item appie-features-box-5-item">
<h4 className="title">Well Integrated</h4>
<p>The bee's knees chancer car boot absolutely.</p>
</div>
<div className="appie-features-box-item item-2 appie-features-box-5-item">
<h4 className="title">Clean and modern Design</h4>
<p>The bee's knees chancer car boot absolutely.</p>
</div>
<div className="appie-features-box-item item-3 appie-features-box-5-item">
<h4 className="title">Light and dark mode</h4>
<p>The bee's knees chancer car boot absolutely.</p>
</div>
</div>
</div>
<div className="col-lg-6">
<div
className="appie-features-thumb wow animated fadeInRight"
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
<img src={trafficThumb} alt="" />
</div>
</div>
</div>
</div>
<div className="features-shape-1">
<img src={shape13} alt="" />
</div>
<div className="features-shape-2">
<img src={shape14} alt="" />
</div>
<div className="features-shape-3">
<img src={shape15} alt="" />
</div>
</section>
</>
);
}
export default FeaturesHomeFour;
src/components/HomeFour/HeaderHomeFour.js
+52
View File
@@ -0,0 +1,52 @@
import React, { useEffect } from 'react';
import logo from '../../assets/images/logo-6.png';
import StickyMenu from '../../lib/StickyMenu';
import Navigation from '../Navigation';
function HeaderHomeFour({ action }) {
useEffect(() => {
StickyMenu();
}, []);
return (
<>
<header className="appie-header-area appie-header-4-area appie-sticky">
<div className="container">
<div className="header-nav-box header-nav-box-5">
<div className="row align-items-center">
<div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
<div className="appie-logo-box">
<a href="/">
<img src={logo} alt="" />
</a>
</div>
</div>
<div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
<div className="appie-header-main-menu">
<Navigation />
</div>
</div>
<div className="col-lg-4 col-md-7 col-sm-6 col-6 order-2 order-sm-3">
<div className="appie-btn-box text-right">
<a className="login-btn" href="#">
<i className="fal fa-user"></i> Login
</a>
<a className="main-btn ml-30" href="#">
Get Started
</a>
<div
onClick={(e) => action(e)}
className="toggle-btn ml-30 canvas_open d-lg-none d-block"
>
<i className="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</>
);
}
export default HeaderHomeFour;
src/components/HomeFour/HeroHomeFour.js
+59
View File
@@ -0,0 +1,59 @@
import React, { useState } from 'react';
import heroThumb from '../../assets/images/hero-thumb-6.png';
import PopupVideo from '../PopupVideo';
function HeroHomeFour() {
const [showVideo, setVideoValue] = useState(false);
const handleShowVideo = (e) => {
e.preventDefault();
setVideoValue(!showVideo);
};
return (
<>
{showVideo && (
<PopupVideo
videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
handler={(e) => handleShowVideo(e)}
/>
)}
<section className="appie-hero-area appie-hero-5-area appie-hero-3-area">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-10">
<div className="appie-hero-content text-center">
<h1 className="appie-title">
Mobile Interaction Designs of January 2022{' '}
</h1>
<p>
Jolly good excuse my french boot super my good sir cup of <br />
char richard about chinwag.
</p>
<div className="hero-btns">
<a className="main-btn" href="#">
Get a Quote
</a>
<a
onClick={(e) => handleShowVideo(e)}
className="appie-video-popup"
href="https://www.youtube.com/watch?v=EE7NqzhMDms"
>
<i className="fas fa-play"></i> Watch the trailer
</a>
</div>
<div
className="thumb mt-80 wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<img src={heroThumb} alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}
export default HeroHomeFour;
src/components/HomeFour/index.js
+36
View File
@@ -0,0 +1,36 @@
import React from 'react';
import useToggle from '../../Hooks/useToggle';
import BackToTop from '../BackToTop';
import PricingHomeOne from '../HomeOne/PricingHomeOne';
import ServicesHomeOne from '../HomeOne/ServicesHomeOne';
import TestimonialHomeOne from '../HomeOne/TestimonialHomeOne';
import FooterHomeThree from '../HomeThree/FooterHomeThree';
import ProjectHomeThree from '../HomeThree/ProjectHomeThree';
import CounterArea from '../HomeTwo/CounterArea';
import VideoPlayerHomeTwo from '../HomeTwo/VideoPlayerHomeTwo';
import Drawer from '../Mobile/Drawer';
import FeaturesHomeFour from './FeaturesHomeFour';
import HeaderHomeFour from './HeaderHomeFour';
import HeroHomeFour from './HeroHomeFour';
function HomeFour() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<Drawer drawer={drawer} action={drawerAction.toggle} />
<HeaderHomeFour action={drawerAction.toggle} />
<HeroHomeFour />
<ServicesHomeOne className="pt-190" />
<FeaturesHomeFour />
<CounterArea style={{ backgroundColor: '#EEF1F6' }} />
<TestimonialHomeOne />
<VideoPlayerHomeTwo className="pt-100" />
<PricingHomeOne />
<ProjectHomeThree className="home-four-project" />
<FooterHomeThree className="home-four-footer" />
<BackToTop className="back-to-top-3" />
</>
);
}
export default HomeFour;