first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,116 @@
|
||||
import React from 'react';
|
||||
import aboutThumb from '../../assets/images/about-thumb-2.png';
|
||||
import aboutThumb3 from '../../assets/images/about-thumb-3.png';
|
||||
import icon1 from '../../assets/images/icon/1.png';
|
||||
import icon5 from '../../assets/images/icon/5.svg';
|
||||
import icon6 from '../../assets/images/icon/6.svg';
|
||||
import icon7 from '../../assets/images/icon/7.svg';
|
||||
|
||||
function AboutHomeThree() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-about-3-area pt-100 pb-100" id="features">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-about-thumb-3 wow animated fadeInLeft"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<img src={aboutThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">
|
||||
Appie lets you launch your app in minutes.
|
||||
</h3>
|
||||
<p>
|
||||
He nicked it tickety boo harry the cras bargy chap mush spiffing
|
||||
spend a penny the full monty burke butty.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<div className="appie-traffic-service mb-30">
|
||||
<div className="icon">
|
||||
<img src={icon5} alt="" />
|
||||
</div>
|
||||
<h5 className="title">Carefully designed</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="appie-traffic-service item-2 mb-30">
|
||||
<div className="icon">
|
||||
<img src={icon1} alt="" />
|
||||
</div>
|
||||
<h5 className="title">Seamless Sync</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row align-items-center mt-100 flex-column-reverse flex-lg-row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-traffic-title">
|
||||
<h3 className="title">Browse over 40k Apps over the world</h3>
|
||||
<p>
|
||||
He nicked it tickety boo harry the cras bargy chap mush spiffing
|
||||
spend a penny the full monty burke butty.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<div className="appie-traffic-service mb-30 item-3">
|
||||
<div className="icon">
|
||||
<img src={icon6} alt="" />
|
||||
</div>
|
||||
<h5 className="title">User Interactive</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="appie-traffic-service item-2 mb-30 item-4">
|
||||
<div className="icon">
|
||||
<img src={icon7} alt="" />
|
||||
</div>
|
||||
<h5 className="title">Choose a App</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="traffic-btn mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-about-thumb-3 text-right wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<img src={aboutThumb3} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutHomeThree;
|
||||
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import BlogFour from '../../assets/images/blog-4.jpg';
|
||||
import BlogFive from '../../assets/images/blog-5.jpg';
|
||||
import BlogSix from '../../assets/images/blog-6.jpg';
|
||||
import BlogSeven from '../../assets/images/blog-7.jpg';
|
||||
|
||||
function BlogHomeThree() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-blog-3-area pt-90 pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Latest blog posts</h3>
|
||||
<p>The app provides design and digital marketing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={BlogFour} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="title">
|
||||
<a href="/news/single-news">
|
||||
How to Improve Your App Store Position
|
||||
</a>
|
||||
</h5>
|
||||
<div className="meta-item">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-clock" /> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments" /> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={BlogFive} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="title">
|
||||
<a href="/news/single-news">
|
||||
Introducing New App Design for our iOS App
|
||||
</a>
|
||||
</h5>
|
||||
<div className="meta-item">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-clock" /> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments" /> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={BlogSix} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="title">
|
||||
<a href="/news/single-news">
|
||||
Engineering job is Becoming More interesting.
|
||||
</a>
|
||||
</h5>
|
||||
<div className="meta-item">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-clock" /> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments" /> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={BlogSeven} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="title">
|
||||
<a href="/news/single-news">
|
||||
20 Myths About Mobile Applications
|
||||
</a>
|
||||
</h5>
|
||||
<div className="meta-item">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-clock" /> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments" /> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="blog-btn text-center mt-60">
|
||||
<Link className="main-btn" to="/news">
|
||||
View All Posts <i className="fal fa-arrow-right" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogHomeThree;
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import downloadThumb from '../../assets/images/download-thumb-1.png';
|
||||
import downloadThumbTwo from '../../assets/images/download-thumb-2.png';
|
||||
|
||||
function DownloadHomeThree({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-download-3-area pt-100 ${className || ''}`} id="download">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Download app today!</h3>
|
||||
<p>Download app for Andraoid today — it's free.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-download-3-box mt-30 mr-20 wow animated fadeInLeft"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="content">
|
||||
<h4 className="title">Android</h4>
|
||||
<p>Download app for Android today — it's free.</p>
|
||||
<a className="main-btn" href="#">
|
||||
<i className="fab fa-google-play" />
|
||||
Download for Android
|
||||
</a>
|
||||
</div>
|
||||
<div className="thumb text-center">
|
||||
<img src={downloadThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-download-3-box mt-30 ml-20 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="content">
|
||||
<h4 className="title">iOS & iPadOS</h4>
|
||||
<p>Download app for iOS today — it's free.</p>
|
||||
<a className="main-btn main-btn-2" href="#">
|
||||
<i className="fab fa-apple" />
|
||||
Download for iOS
|
||||
</a>
|
||||
</div>
|
||||
<div className="thumb text-right">
|
||||
<img src={downloadThumbTwo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DownloadHomeThree;
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo-4.png';
|
||||
|
||||
function FooterHomeThree({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-footer-area appie-footer-3-area ${className}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget footer-about-widget-3">
|
||||
<div className="logo">
|
||||
<a href="#">
|
||||
<img src={logo} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
Appie WordPress is theme is the last theme you will ever have.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<div className="footer-navigation footer-navigation-3">
|
||||
<h4 className="title">Company</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/about-us">About Us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/Service">Service</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Case Studies</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/news">Blog</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact">Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div className="footer-navigation footer-navigation-3">
|
||||
<h4 className="title">Support</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/about-us">Community</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Resources</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Faqs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Careers</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div className="footer-widget-info">
|
||||
<h4 className="title">Get In Touch</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-envelope" /> support@appie.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone" /> +(642) 342 762 44
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt" /> 442 Belle Terre
|
||||
St Floor 7, San Francisco, AV 4206
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="
|
||||
footer-copyright
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
pt-35
|
||||
"
|
||||
>
|
||||
<div className="apps-download-btn">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-apple" /> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play" /> Download for
|
||||
Android
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="copyright-text">
|
||||
<p>Copyright © 2021 Appie. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FooterHomeThree;
|
||||
@@ -0,0 +1,101 @@
|
||||
import React, { useState } from 'react';
|
||||
import FunFactThumb from '../../assets/images/fun-fact-thumb.png';
|
||||
import CounterUpCom from '../../lib/CounterUpCom';
|
||||
import PopupVideo from '../PopupVideo';
|
||||
|
||||
function FunFactHomeThree() {
|
||||
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-fun-fact-area" id="fun-fact-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="appie-fun-fact-box wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-fun-fact-content">
|
||||
<h3 className="title">
|
||||
Get started with Appie Template.
|
||||
</h3>
|
||||
<p>
|
||||
The app provides design and digital marketing,
|
||||
applied arts can include industrial design
|
||||
</p>
|
||||
<div className="row">
|
||||
<div className="col-sm-4">
|
||||
<div className="appie-fun-fact-item">
|
||||
<h4 className="title">
|
||||
<CounterUpCom
|
||||
endValue="700"
|
||||
sectionSelect="fun-fact-area"
|
||||
/>
|
||||
k
|
||||
</h4>
|
||||
<span>App Downloads</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="appie-fun-fact-item">
|
||||
<h4 className="title">
|
||||
<CounterUpCom
|
||||
endValue="476"
|
||||
sectionSelect="fun-fact-area"
|
||||
/>
|
||||
+
|
||||
</h4>
|
||||
<span>Average Review</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="appie-fun-fact-item">
|
||||
<h4 className="title">
|
||||
<CounterUpCom
|
||||
endValue="30"
|
||||
sectionSelect="fun-fact-area"
|
||||
/>
|
||||
M
|
||||
</h4>
|
||||
<span>Active Users</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-fun-fact-play">
|
||||
<a
|
||||
onClick={(e) => handleShowVideo(e)}
|
||||
className="appie-video-popup"
|
||||
href="https://www.youtube.com/watch?v=EE7NqzhMDms"
|
||||
>
|
||||
<i className="fas fa-play" />
|
||||
</a>
|
||||
<img src={FunFactThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunFactHomeThree;
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-3.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeThree({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-3-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-3">
|
||||
<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" /> 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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeaderHomeThree;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from 'react';
|
||||
import heroThumb from '../../assets/images/hero-thumb-4.png';
|
||||
import PopupVideo from '../PopupVideo';
|
||||
|
||||
function HeroHomeThree() {
|
||||
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-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">Creative way to Showcase your app</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" /> Play Video
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="thumb mt-100 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<img src={heroThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeThree;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
function ProjectHomeThree({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-project-3-area ${className} `}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="
|
||||
appie-project-3-box
|
||||
d-block d-md-flex
|
||||
justify-content-between
|
||||
align-items-center
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<h4 className="title">
|
||||
Start your project <br />
|
||||
with Appie.
|
||||
</h4>
|
||||
<a className="main-btn" href="#">
|
||||
Let’s Talk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectHomeThree;
|
||||
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
import iconOne from '../../assets/images/icon/1.png';
|
||||
import iconTwo from '../../assets/images/icon/2.png';
|
||||
import iconThree from '../../assets/images/icon/3.png';
|
||||
import iconFour from '../../assets/images/icon/4.png';
|
||||
|
||||
function ServicesHomeThree() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-service-area appie-service-3-area pt-195 pb-100" id="service">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">What you can do</h3>
|
||||
<p>
|
||||
The full monty spiffing good time no biggie cack grub fantastic.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service appie-single-services-3
|
||||
text-center
|
||||
mt-30
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={iconOne} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Easy to use</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
<a href="#">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service appie-single-services-3
|
||||
text-center
|
||||
mt-30
|
||||
item-2
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={iconTwo} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">App Development</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
<a href="#">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service appie-single-services-3
|
||||
text-center
|
||||
mt-30
|
||||
item-3
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={iconThree} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Fully Functional</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
<a href="#">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service appie-single-services-3
|
||||
text-center
|
||||
mt-30
|
||||
item-4
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={iconFour} alt="" />
|
||||
</div>
|
||||
<h4 className="appie-title">Secured protocol</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
<a href="#">
|
||||
Read More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeThree;
|
||||
@@ -0,0 +1,119 @@
|
||||
import React, { useRef } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import SimpleReactLightbox, { SRLWrapper } from 'simple-react-lightbox';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import shape12 from '../../assets/images/shape/shape-12.png';
|
||||
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 showCaseOne from '../../assets/images/showcase-1.png';
|
||||
import showCaseTwo from '../../assets/images/showcase-2.png';
|
||||
import showCaseThree from '../../assets/images/showcase-3.png';
|
||||
import showCaseFour from '../../assets/images/showcase-4.png';
|
||||
import showCaseFive from '../../assets/images/showcase-5.png';
|
||||
|
||||
function ShowCaseHomeThree() {
|
||||
const sliderRef = useRef();
|
||||
// const sliderNext = () => {
|
||||
// sliderRef.current.slickNext();
|
||||
// };
|
||||
// const sliderPrev = () => {
|
||||
// sliderRef.current.slickPrev();
|
||||
// };
|
||||
const settings = {
|
||||
autoplay: false,
|
||||
arrows: false,
|
||||
dots: true,
|
||||
slidesToShow: 4,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<section className="appie-showcase-area">
|
||||
<SimpleReactLightbox>
|
||||
<SRLWrapper>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Creative app showcase</h3>
|
||||
<p>The app provides design and digital marketing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row appie-showcase-slider">
|
||||
<div className="col-lg-12">
|
||||
<Slider ref={sliderRef} {...settings}>
|
||||
<div>
|
||||
<div className="appie-showcase-item mt-30">
|
||||
<a className="appie-image-popup">
|
||||
<img src={showCaseOne} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="appie-showcase-item mt-30">
|
||||
<a className="appie-image-popup">
|
||||
<img src={showCaseTwo} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="appie-showcase-item mt-30">
|
||||
<a className="appie-image-popup">
|
||||
<img src={showCaseThree} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="appie-showcase-item mt-30">
|
||||
<a className="appie-image-popup">
|
||||
<img src={showCaseFour} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="appie-showcase-item mt-30">
|
||||
<a className="appie-image-popup">
|
||||
<img src={showCaseFive} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="showcase-shape-1">
|
||||
<img src={shape14} alt="" />
|
||||
</div>
|
||||
<div className="showcase-shape-2">
|
||||
<img src={shape13} alt="" />
|
||||
</div>
|
||||
<div className="showcase-shape-3">
|
||||
<img src={shape12} alt="" />
|
||||
</div>
|
||||
<div className="showcase-shape-4">
|
||||
<img src={shape15} alt="" />
|
||||
</div>
|
||||
</SRLWrapper>
|
||||
</SimpleReactLightbox>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShowCaseHomeThree;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import AboutHomeThree from './AboutHomeThree';
|
||||
import BlogHomeThree from './BlogHomeThree';
|
||||
import DownloadHomeThree from './DownloadHomeThree';
|
||||
import FooterHomeThree from './FooterHomeThree';
|
||||
import FunFactHomeThree from './FunFactHomeThree';
|
||||
import HeaderHomeThree from './HeaderHomeThree';
|
||||
import HeroHomeThree from './HeroHomeThree';
|
||||
import ProjectHomeThree from './ProjectHomeThree';
|
||||
import ServicesHomeThree from './ServicesHomeThree';
|
||||
import ShowCaseHomeThree from './ShowCaseHomeThree';
|
||||
|
||||
function HomeThree() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderHomeThree action={drawerAction.toggle} />
|
||||
<HeroHomeThree />
|
||||
<ServicesHomeThree />
|
||||
<FunFactHomeThree />
|
||||
<AboutHomeThree />
|
||||
<ShowCaseHomeThree />
|
||||
<DownloadHomeThree />
|
||||
<BlogHomeThree />
|
||||
<ProjectHomeThree />
|
||||
<FooterHomeThree />
|
||||
<BackToTop className="back-to-top-3" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeThree;
|
||||
Reference in New Issue
Block a user