first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import blogOne from '../../assets/images/blog-1.jpg';
|
||||
import blogTwo from '../../assets/images/blog-2.jpg';
|
||||
import blogThree from '../../assets/images/blog-3.jpg';
|
||||
|
||||
function BlogHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-blog-area pt-90 pb-95">
|
||||
<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>Different layouts and styles for team sections.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blogOne} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>March 10, 2022</li>
|
||||
<li>
|
||||
<a href="#">Saas & App</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href="/news/single-news">
|
||||
Introducing New Apps Design for our iOS App
|
||||
</a>
|
||||
</h3>
|
||||
<a href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blogTwo} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>March 10, 2022</li>
|
||||
<li>
|
||||
<a href="#">Saas & App</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href="/news/single-news">
|
||||
How to bring Dolce to your company
|
||||
</a>
|
||||
</h3>
|
||||
<a href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blogThree} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>March 10, 2022</li>
|
||||
<li>
|
||||
<a href="#">Saas & App</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href="/news/single-news">
|
||||
17 Effective Ways to Monetize Mobile Apps
|
||||
</a>
|
||||
</h3>
|
||||
<a href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogHomeOne;
|
||||
@@ -0,0 +1,158 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function FaqHomeOne({ className }) {
|
||||
const [showQues, setQues] = useState(1);
|
||||
const openQuestion = (value) => {
|
||||
setQues(value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-faq-area pb-95 ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Frequently asked questions</h3>
|
||||
<p>Different layouts and styles for team sections.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="faq-accordion wow fadeInRight mt-30"
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<div
|
||||
className="accrodion-grp animated fadeIn faq-accrodion wow"
|
||||
data-wow-duration="1500ms"
|
||||
data-grp-name="faq-accrodion"
|
||||
>
|
||||
<div
|
||||
onClick={() => openQuestion(1)}
|
||||
className={`accrodion ${showQues === 1 ? 'active' : ''}`}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Where do I usually find FAQs in a page?</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQues === 1 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the duff cras boot bevvy no biggie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => openQuestion(2)}
|
||||
className={`accrodion ${showQues === 2 ? 'active' : ''}`}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Where do I usually find FAQs in a page?</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQues === 2 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the duff cras boot bevvy no biggie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="faq-accordion wow fadeInRight mt-30"
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<div
|
||||
className="accrodion-grp animated fadeIn faq-accrodion wow"
|
||||
data-wow-duration="1500ms"
|
||||
data-grp-name="faq-accrodion"
|
||||
>
|
||||
<div
|
||||
onClick={() => openQuestion(3)}
|
||||
className={`accrodion ${showQues === 3 ? 'active' : ''}`}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Where do I usually find FAQs in a page?</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQues === 3 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the duff cras boot bevvy no biggie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => openQuestion(4)}
|
||||
className={`accrodion ${showQues === 4 ? 'active' : ''}`}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Where do I usually find FAQs in a page?</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQues === 4 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the duff cras boot bevvy no biggie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="faq-text text-center pt-40">
|
||||
<p>
|
||||
Can't find an answer?{' '}
|
||||
<a href="mailto:demo@gmail.com">Email us</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FaqHomeOne;
|
||||
@@ -0,0 +1,246 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import thumb from '../../assets/images/features-thumb-1.png';
|
||||
import shapeSix from '../../assets/images/shape/shape-6.png';
|
||||
import shapeSeven from '../../assets/images/shape/shape-7.png';
|
||||
import shapeEight from '../../assets/images/shape/shape-8.png';
|
||||
|
||||
function FeaturesHomeOne({ className }) {
|
||||
const [tab, setTab] = useState('setting');
|
||||
const handleClick = (e, value) => {
|
||||
e.preventDefault();
|
||||
setTab(value);
|
||||
};
|
||||
return (
|
||||
<section className={`appie-features-area pt-100 ${className}`} id="features">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-3">
|
||||
<div className="appie-features-tabs-btn">
|
||||
<div
|
||||
className="nav flex-column nav-pills"
|
||||
id="v-pills-tab"
|
||||
role="tablist"
|
||||
aria-orientation="vertical"
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'setting')}
|
||||
className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
|
||||
id="v-pills-home-tab"
|
||||
data-toggle="pill"
|
||||
href="#v-pills-home"
|
||||
role="tab"
|
||||
aria-controls="v-pills-home"
|
||||
aria-selected="true"
|
||||
>
|
||||
<i className="fas fa-cog" /> Settings
|
||||
</a>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'report')}
|
||||
className={`nav-link ${tab === 'report' ? 'active' : ''}`}
|
||||
id="v-pills-profile-tab"
|
||||
data-toggle="pill"
|
||||
href="#v-pills-profile"
|
||||
role="tab"
|
||||
aria-controls="v-pills-profile"
|
||||
aria-selected="false"
|
||||
>
|
||||
<i className="fas fa-exclamation-triangle" /> Report
|
||||
</a>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'notice')}
|
||||
className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
|
||||
id="v-pills-messages-tab"
|
||||
data-toggle="pill"
|
||||
href="#v-pills-messages"
|
||||
role="tab"
|
||||
aria-controls="v-pills-messages"
|
||||
aria-selected="false"
|
||||
>
|
||||
<i className="fas fa-bell" /> Saeety Notices
|
||||
</a>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'app')}
|
||||
className={`nav-link ${tab === 'app' ? 'active' : ''}`}
|
||||
id="v-pills-settings-tab"
|
||||
data-toggle="pill"
|
||||
href="#v-pills-settings"
|
||||
role="tab"
|
||||
aria-controls="v-pills-settings"
|
||||
aria-selected="false"
|
||||
>
|
||||
<i className="fas fa-lock" /> App Lock
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-9">
|
||||
<div className="tab-content" id="v-pills-tabContent">
|
||||
<div
|
||||
className={`${
|
||||
tab === 'setting' ? 'show active' : ''
|
||||
} tab-pane fade`}
|
||||
id="v-pills-home"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-home-tab"
|
||||
>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-thumb text-center wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-content wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<span>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</p>
|
||||
<Link className="main-btn" to="/about-us">
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
|
||||
id="v-pills-profile"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-profile-tab"
|
||||
>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-thumb text-center animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-content animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<span>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
|
||||
id="v-pills-messages"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-messages-tab"
|
||||
>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-thumb text-center animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-content animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<span>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
|
||||
id="v-pills-settings"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-settings-tab"
|
||||
>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-thumb text-center animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div
|
||||
className="appie-features-content animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<span>Custom Reacyions</span>
|
||||
<h3 className="title">
|
||||
Let the <br /> Conversation flow
|
||||
</h3>
|
||||
<p>
|
||||
Car boot absolutely bladdered posh burke the
|
||||
wireless mush some dodg.
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="features-shape-1">
|
||||
<img src={shapeSix} alt="" />
|
||||
</div>
|
||||
<div className="features-shape-2">
|
||||
<img src={shapeSeven} alt="" />
|
||||
</div>
|
||||
<div className="features-shape-3">
|
||||
<img src={shapeEight} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeaturesHomeOne;
|
||||
@@ -0,0 +1,148 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo.png';
|
||||
|
||||
function FooterHomeOne({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-footer-area ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget">
|
||||
<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">
|
||||
<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">
|
||||
<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 FooterHomeOne;
|
||||
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import heroThumbOne from '../../assets/images/hero-thumb-1.png';
|
||||
import heroThumbTwo from '../../assets/images/hero-thumb-2.png';
|
||||
import shapeTwo from '../../assets/images/shape/shape-2.png';
|
||||
import shapeThree from '../../assets/images/shape/shape-3.png';
|
||||
import shapeFour from '../../assets/images/shape/shape-4.png';
|
||||
|
||||
function HeroHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-content">
|
||||
<span>Welcome To Appie</span>
|
||||
<h1 className="appie-title">
|
||||
Manage it all, in this all new system.
|
||||
</h1>
|
||||
<p>
|
||||
Hanky panky lavatory up the duff jolly good cack brolly is
|
||||
chinwag zonked happy days sloshed.
|
||||
</p>
|
||||
<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>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-thumb">
|
||||
<div
|
||||
className="thumb wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<img src={heroThumbOne} alt="" />
|
||||
</div>
|
||||
<div
|
||||
className="thumb-2 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumbTwo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-shape-1">
|
||||
<img src={shapeTwo} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-2">
|
||||
<img src={shapeThree} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-3">
|
||||
<img src={shapeFour} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeOne;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HomeOneHeader({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
}, []);
|
||||
return (
|
||||
<header className="appie-header-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box">
|
||||
<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 HomeOneHeader;
|
||||
@@ -0,0 +1,254 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function PricingHomeOne({ className }) {
|
||||
const [toggleSwitch, setSwitchValue] = useState(true);
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-pricing-area pt-90 pb-90 ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Choose your plan</h3>
|
||||
<p>Different layouts and styles for team sections.</p>
|
||||
</div>
|
||||
<ul
|
||||
className="list-inline text-center switch-toggler-list"
|
||||
role="tablist"
|
||||
id="switch-toggle-tab"
|
||||
>
|
||||
<li className={`month ${toggleSwitch ? 'active' : ''}`}>
|
||||
<a href="#">Monthly</a>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
onClick={() => setSwitchValue(!toggleSwitch)}
|
||||
className={`switch ${toggleSwitch ? 'on' : 'off'}`}
|
||||
>
|
||||
<span className="slider round" />
|
||||
</label>
|
||||
</li>
|
||||
<li className={`year ${toggleSwitch === false ? 'active' : ''}`}>
|
||||
<a href="#">Annualy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabed-content">
|
||||
{toggleSwitch ? (
|
||||
<div id="month">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInLeft">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Fresh</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>04</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Get your 14 day free trial</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 15 GB cloud
|
||||
storage
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInUp">
|
||||
<div className="pricing-one__single center">
|
||||
<div className="pricig-heading">
|
||||
<h6>Sweet</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>16</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 50 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInRight">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Juicy</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>27</span>
|
||||
<p>/month</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> Data security
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 100 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div id="year">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInLeft">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Fresh</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>32</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Get your 14 day free trial</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 15 GB cloud
|
||||
storage
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInUp">
|
||||
<div className="pricing-one__single center">
|
||||
<div className="pricig-heading">
|
||||
<h6>Sweet</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>116</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 50 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6 wow animated fadeInRight">
|
||||
<div className="pricing-one__single">
|
||||
<div className="pricig-heading">
|
||||
<h6>Juicy</h6>
|
||||
<div className="price-range">
|
||||
<sup>$</sup> <span>227</span>
|
||||
<p>/Yearly</p>
|
||||
</div>
|
||||
<p>Billed $276 per website annually.</p>
|
||||
</div>
|
||||
<div className="pricig-body">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 60-day chat
|
||||
history
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> Data security
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 100 GB cloud
|
||||
storage
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-check" /> 24/7 Support
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pricing-btn mt-35">
|
||||
<a className="main-btn" href="#">
|
||||
Choose plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingHomeOne;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
|
||||
function ProjectHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-project-area pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="appie-project-box wow animated slideInUp"
|
||||
data-wow-duration="1000ms"
|
||||
data-wow-delay="0ms"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-project-content">
|
||||
<h3 className="title">
|
||||
Start your project with appie.
|
||||
</h3>
|
||||
<p>We will email you only about this product.</p>
|
||||
<form action="#">
|
||||
<div className="input-box mt-30">
|
||||
<input type="text" placeholder="Your email" />
|
||||
<button type="button">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-project-thumb">
|
||||
<img src="assets/images/project-thumb.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectHomeOne;
|
||||
@@ -0,0 +1,84 @@
|
||||
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 ServicesHomeOne({ className }) {
|
||||
return (
|
||||
<section className={`appie-service-area pt-90 pb-100 ${className}`} 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">
|
||||
Designed with <br /> The applicant in mind.
|
||||
</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 text-center mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconOne} alt="" />
|
||||
<span>1</span>
|
||||
</div>
|
||||
<h4 className="appie-title">Searching</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-2 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconTwo} alt="" />
|
||||
<span>2</span>
|
||||
</div>
|
||||
<h4 className="appie-title">Designing</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-3 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconThree} alt="" />
|
||||
<span>3</span>
|
||||
</div>
|
||||
<h4 className="appie-title">Building</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-service text-center mt-30 item-4 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<img src={IconFour} alt="" />
|
||||
<span>4</span>
|
||||
</div>
|
||||
<h4 className="appie-title">Suporting</h4>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeOne;
|
||||
@@ -0,0 +1,164 @@
|
||||
import React from 'react';
|
||||
import teamOne from '../../assets/images/team-1.jpg';
|
||||
import teamTwo from '../../assets/images/team-2.jpg';
|
||||
import teamThree from '../../assets/images/team-3.jpg';
|
||||
import teamFour from '../../assets/images/team-4.jpg';
|
||||
|
||||
function TeamHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-team-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">Meet our Team Members</h3>
|
||||
<p>Different layouts and styles for team sections.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamOne} alt="" />
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Benjamin Evalent</h5>
|
||||
<span>CEO-Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamTwo} alt="" />
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Benjamin Evalent</h5>
|
||||
<span>CEO-Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamThree} alt="" />
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Benjamin Evalent</h5>
|
||||
<span>CEO-Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-team-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={teamFour} alt="" />
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Benjamin Evalent</h5>
|
||||
<span>CEO-Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="team-btn text-center mt-50">
|
||||
<a className="main-btn" href="#">
|
||||
{' '}
|
||||
View all Members <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamHomeOne;
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useRef } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import user from '../../assets/images/testimonial-user.png';
|
||||
|
||||
function TestimonialHomeOne() {
|
||||
const sliderRef = useRef();
|
||||
const sliderNext = () => {
|
||||
sliderRef.current.slickNext();
|
||||
};
|
||||
const sliderPrev = () => {
|
||||
sliderRef.current.slickPrev();
|
||||
};
|
||||
return (
|
||||
<section className="appie-testimonial-area pt-100 pb-160" id="testimonial">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-testimonial-slider" style={{ position: 'relative' }}>
|
||||
<span
|
||||
className="prev slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
onClick={sliderNext}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
<i className="fal fa-arrow-left" />
|
||||
</span>
|
||||
<Slider ref={sliderRef} dots arrows={false}>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Jason Response</h5>
|
||||
<span>April 14, 2022</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Why I say old chap that is spiffing lurgy Oxford
|
||||
cracking goal bleeder, bog-standard Harry brilliant mush
|
||||
a blinding shot starkers.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Jason Response</h5>
|
||||
<span>April 14, 2022</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Why I say old chap that is spiffing lurgy Oxford
|
||||
cracking goal bleeder, bog-standard Harry brilliant mush
|
||||
a blinding shot starkers.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-testimonial-item text-center">
|
||||
<div className="author-info">
|
||||
<img src={user} alt="" />
|
||||
<h5 className="title">Jason Response</h5>
|
||||
<span>April 14, 2022</span>
|
||||
</div>
|
||||
<div className="text">
|
||||
<p>
|
||||
Why I say old chap that is spiffing lurgy Oxford
|
||||
cracking goal bleeder, bog-standard Harry brilliant mush
|
||||
a blinding shot starkers.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
<span
|
||||
onClick={sliderPrev}
|
||||
role="button"
|
||||
tabIndex="-1"
|
||||
className="next slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-right" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TestimonialHomeOne;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/traffic-thumb.png';
|
||||
|
||||
function TrafficHomeOne() {
|
||||
return (
|
||||
<section className="appie-traffic-area pt-140 pb-180">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-traffic-title">
|
||||
<span>Traffic</span>
|
||||
<h3 className="title">Stage reporting with 50k queries.</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-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service mb-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Carefully designed</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-2 mb-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Choose a App</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-3">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">Seamless Sync</h5>
|
||||
<p>Mucker plastered bugger all mate morish are.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="appie-traffic-service item-4">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h5 className="title">User Interactive</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>
|
||||
<div className="traffic-thumb ">
|
||||
<img
|
||||
className="wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
src={thumb}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrafficHomeOne;
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import BlogHomeOne from './BlogHomeOne';
|
||||
import FaqHomeOne from './FaqHomeOne';
|
||||
import FeaturesHomeOne from './FeaturesHomeOne';
|
||||
import FooterHomeOne from './FooterHomeOne';
|
||||
import HeroHomeOne from './HeroHomeOne';
|
||||
import HomeOneHeader from './HomeOneHeader';
|
||||
import PricingHomeOne from './PricingHomeOne';
|
||||
import ProjectHomeOne from './ProjectHomeOne';
|
||||
import ServicesHomeOne from './ServicesHomeOne';
|
||||
import TeamHomeOne from './TeamHomeOne';
|
||||
import TestimonialHomeOne from './TestimonialHomeOne';
|
||||
import TrafficHomeOne from './TrafficHomeOne';
|
||||
|
||||
function HomeOne() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HomeOneHeader action={drawerAction.toggle} />
|
||||
<HeroHomeOne />
|
||||
<ServicesHomeOne />
|
||||
<FeaturesHomeOne />
|
||||
<TrafficHomeOne />
|
||||
<TestimonialHomeOne />
|
||||
<TeamHomeOne />
|
||||
<PricingHomeOne />
|
||||
<FaqHomeOne />
|
||||
<BlogHomeOne />
|
||||
<ProjectHomeOne />
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeOne;
|
||||
Reference in New Issue
Block a user