first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,52 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderAbout({ 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"></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 HeaderAbout;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
|
||||
function HeroAbout() {
|
||||
return (
|
||||
<>
|
||||
<div className="appie-about-top-title-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-about-top-title">
|
||||
<h2 className="title">The leading people Management platform</h2>
|
||||
<p>We offer you a panoply of cutting-edge options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section className="appie-about-page-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-about-page-content">
|
||||
<h3 className="title">
|
||||
Join our team to create the best digital solutions.
|
||||
</h3>
|
||||
<p>
|
||||
He nicked it up the duff a load of old tosh bleeder butty bugger
|
||||
all mate cheeky bugger bodge tickety boo, mush well Richard
|
||||
geeza buggered haggle david you mug I, such a fibber my good sir
|
||||
knackered down the pub baking cakes chancer golly gosh. Car boot
|
||||
give us a bell bits and hanky panky me old mucker fantastic in
|
||||
my flat so I said nice one he lost his bottle.
|
||||
</p>
|
||||
<a href="#">
|
||||
View all Members <i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroAbout;
|
||||
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
|
||||
function ServicesAbout() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-services-2-area pt-90 pb-55" id="service">
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6 col-md-8">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">We’re driven by our values</h3>
|
||||
<p>The app provides design and digital marketing. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-tv"></i>
|
||||
</div>
|
||||
<h4 className="title">Carefully designed</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about item-2 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-code"></i>
|
||||
</div>
|
||||
<h4 className="title">Clean Modern Code</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about item-3 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-user-friends"></i>
|
||||
</div>
|
||||
<h4 className="title">User Interactive</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about item-4 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-mobile"></i>
|
||||
</div>
|
||||
<h4 className="title">Choose a App</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about item-5 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-retweet"></i>
|
||||
</div>
|
||||
<h4 className="title">Seamless Sync</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 appie-single-service-about item-6 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-bell"></i>
|
||||
</div>
|
||||
<h4 className="title">Notifications Settings</h4>
|
||||
<p>He lost his bottle loo don't get shirty with me ruddy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesAbout;
|
||||
@@ -0,0 +1,163 @@
|
||||
import React from 'react';
|
||||
import team1 from '../../assets/images/team-1.jpg';
|
||||
import team2 from '../../assets/images/team-2.jpg';
|
||||
import team3 from '../../assets/images/team-3.jpg';
|
||||
import team4 from '../../assets/images/team-4.jpg';
|
||||
|
||||
function TeamAbout() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-team-area appie-team-about-area pb-90">
|
||||
<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 appie-team-item-about mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={team1} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={team2} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={team3} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={team4} alt="" />
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamAbout;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import SignupHomeEight from '../HomeEight/SignupHomeEight';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import SponserHomeTwo from '../HomeTwo/SponserHomeTwo';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import HeaderAbout from './HeaderAbout';
|
||||
import HeroAbout from './HeroAbout';
|
||||
import ServicesAbout from './ServicesAbout';
|
||||
import TeamAbout from './TeamAbout';
|
||||
|
||||
function AboutUs() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderAbout drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeroAbout />
|
||||
<ServicesAbout />
|
||||
<TeamAbout />
|
||||
<SponserHomeTwo />
|
||||
<SignupHomeEight />
|
||||
<FooterHomeOne className="appie-footer-about-area" />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutUs;
|
||||
@@ -0,0 +1,19 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import TopToBottom from '../lib/TopToBottom';
|
||||
|
||||
function BackToTop({ className }) {
|
||||
useEffect(() => {
|
||||
TopToBottom('.back-to-top');
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<div className={`back-to-top ${className}`}>
|
||||
<a href="#">
|
||||
<i className="fal fa-arrow-up" />
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BackToTop;
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import cart1 from '../../assets/images/cart-1.jpg';
|
||||
import cart2 from '../../assets/images/cart-2.jpg';
|
||||
|
||||
function Cart({ value, action }) {
|
||||
return (
|
||||
<div className="amm-shopping-cart-wrapper">
|
||||
<div className={`amm-shopping-cart-canvas ${value ? 'open' : ''}`}>
|
||||
<div className="amm-shopping_cart">
|
||||
<div className="amm-shopping_cart-top-bar d-flex justify-content-between">
|
||||
<h6>Shopping Cart</h6>
|
||||
<button type="button" onClick={action} className="amm-shopping-cart-close">
|
||||
<i className="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="amm-shopping_cart-list-items mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<div className="amm-single-shopping-cart media">
|
||||
<div className="cart-image">
|
||||
<img src={cart1} alt="Cart" />
|
||||
</div>
|
||||
<div className="cart-content media-body pl-15">
|
||||
<h6>
|
||||
<a href="#">Banana</a>
|
||||
</h6>
|
||||
<span className="quality">QTY: 01</span>
|
||||
<span className="price">$205.00</span>
|
||||
<a className="remove" href="#">
|
||||
<i className="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="amm-single-shopping-cart media">
|
||||
<div className="cart-image">
|
||||
<img src={cart2} alt="Cart" />
|
||||
</div>
|
||||
<div className="cart-content media-body pl-15">
|
||||
<h6>
|
||||
<a href="#">Grape</a>
|
||||
</h6>
|
||||
<span className="quality">QTY: 01</span>
|
||||
<span className="price-discount">$205.00</span>
|
||||
<span className="price-close">$205.00</span>
|
||||
<a className="remove" href="#">
|
||||
<i className="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="amm-shopping_cart-btn">
|
||||
<div className="total pt-35 d-flex justify-content-between">
|
||||
<h5>Subtotal:</h5>
|
||||
<p>$240.00</p>
|
||||
</div>
|
||||
<div className="cart-btn pt-25">
|
||||
<a className="main-btn" href="#">
|
||||
View Cart
|
||||
</a>
|
||||
<a className="main-btn main-btn-2" href="#">
|
||||
Checkout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`overlay ${value ? 'open' : ''}`}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cart;
|
||||
@@ -0,0 +1,118 @@
|
||||
import React from 'react';
|
||||
|
||||
function Forms() {
|
||||
return (
|
||||
<>
|
||||
<section className="contact-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="contact--info-area">
|
||||
<h3>Get in touch</h3>
|
||||
<p>Looking for help? Fill the form and start a new adventure.</p>
|
||||
<div className="single-info">
|
||||
<h5>Headquaters</h5>
|
||||
<p>
|
||||
<i className="fal fa-home"></i>
|
||||
744 New York Ave, Brooklyn, Kings,
|
||||
<br /> New York 10224
|
||||
</p>
|
||||
</div>
|
||||
<div className="single-info">
|
||||
<h5>Phone</h5>
|
||||
<p>
|
||||
<i className="fal fa-phone"></i>
|
||||
(+642) 245 356 432
|
||||
<br />
|
||||
(+420) 336 476 328
|
||||
</p>
|
||||
</div>
|
||||
<div className="single-info">
|
||||
<h5>Support</h5>
|
||||
<p>
|
||||
<i className="fal fa-envelope"></i>
|
||||
bisy@support.com
|
||||
<br />
|
||||
help@education.com
|
||||
</p>
|
||||
</div>
|
||||
<div className="ab-social">
|
||||
<h5>Follow Us</h5>
|
||||
<a className="fac" href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a className="twi" href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a className="you" href="#">
|
||||
<i className="fab fa-youtube"></i>
|
||||
</a>
|
||||
<a className="lin" href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-8">
|
||||
<div className="contact-form">
|
||||
<h4>Let’s Connect</h4>
|
||||
<p>Integer at lorem eget diam facilisis lacinia ac id massa.</p>
|
||||
<form action="#" method="post" className="row">
|
||||
<div className="col-md-6">
|
||||
<input type="text" name="f-name" placeholder="First Name" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input type="text" name="l-name" placeholder="Last Name" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input
|
||||
type="number"
|
||||
name="phone"
|
||||
placeholder="Phone Number"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<input type="text" name="suject" placeholder="Subject" />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="How can we help?"
|
||||
></textarea>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="condition-check">
|
||||
<input id="terms-conditions" type="checkbox" />
|
||||
<label htmlFor="terms-conditions">
|
||||
I agree to the <a href="#">Terms & Conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 text-right">
|
||||
<input type="submit" name="submit" value="Send Message" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="bisylms-map">
|
||||
<iframe
|
||||
title="map"
|
||||
src="https://maps.google.com/maps?width=720&height=600&hl=en&coord=39.966528,-75.158284&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland+(My%20Business%20Name)&ie=UTF8&t=p&z=16&iwloc=B&output=embed"
|
||||
></iframe>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Forms;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import HeaderNews from '../News/HeaderNews';
|
||||
import HeroNews from '../News/HeroNews';
|
||||
import Forms from './Forms';
|
||||
|
||||
function Contact() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderNews drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blogs"
|
||||
breadcrumb={[
|
||||
{ link: '/', title: 'home' },
|
||||
{ link: '/news', title: 'Blogs' },
|
||||
]}
|
||||
/>
|
||||
<Forms />
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Contact;
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Svg from './Svg';
|
||||
|
||||
function Error() {
|
||||
const history = useHistory();
|
||||
const goBack = (e) => {
|
||||
e.preventDefault();
|
||||
history.goBack();
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="appie-error-area">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-error-content text-center">
|
||||
<Svg />
|
||||
<span>Sorry!</span>
|
||||
<h3 className="title">The page can’t be found.</h3>
|
||||
<p>
|
||||
The page you're looking for isn't available. Use the go back
|
||||
button below
|
||||
</p>
|
||||
<a onClick={(e) => goBack(e)} href="#">
|
||||
Go Back <i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Error;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
|
||||
function Loader() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xlink="http://www.w3.org/1999/xlink"
|
||||
style={{
|
||||
margin: 'auto',
|
||||
background: 'rgb(255, 255, 255)',
|
||||
display: 'block',
|
||||
shapeRendering: 'auto',
|
||||
}}
|
||||
width="200px"
|
||||
height="200px"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<circle cx="50" cy="50" r="0" fill="none" stroke="#e90c59" strokeWidth="2">
|
||||
<animate
|
||||
attributeName="r"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
values="0;40"
|
||||
keyTimes="0;1"
|
||||
keySplines="0 0.2 0.8 1"
|
||||
calcMode="spline"
|
||||
begin="0s"
|
||||
></animate>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
values="1;0"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.2 0 0.8 1"
|
||||
calcMode="spline"
|
||||
begin="0s"
|
||||
></animate>
|
||||
</circle>
|
||||
<circle cx="50" cy="50" r="0" fill="none" stroke="#46dff0" strokeWidth="2">
|
||||
<animate
|
||||
attributeName="r"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
values="0;40"
|
||||
keyTimes="0;1"
|
||||
keySplines="0 0.2 0.8 1"
|
||||
calcMode="spline"
|
||||
begin="-0.5s"
|
||||
></animate>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
repeatCount="indefinite"
|
||||
dur="1s"
|
||||
values="1;0"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.2 0 0.8 1"
|
||||
calcMode="spline"
|
||||
begin="-0.5s"
|
||||
></animate>
|
||||
</circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
@@ -0,0 +1,13 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
const ScrollToTop = ({ children }) => {
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [location]);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ScrollToTop;
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import thumb4 from '../../assets/images/about-thumb-4.png';
|
||||
import thumb5 from '../../assets/images/about-thumb-5.png';
|
||||
|
||||
function AboutHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-about-8-area pt-100 pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title mb-30">
|
||||
<h3 className="appie-title">
|
||||
We bring everything <br />
|
||||
that's required to build apps
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-about-8-box">
|
||||
<h3 className="title">
|
||||
Will my Template be <br />
|
||||
Mobile Friendly
|
||||
</h3>
|
||||
<p>
|
||||
A load of old tosh spiffing pear shaped show <br />
|
||||
off pick your nose and blow
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
<div className="thumb">
|
||||
<img src={thumb4} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-about-8-box">
|
||||
<h3 className="title">
|
||||
Website & Mobile <br />
|
||||
App Design
|
||||
</h3>
|
||||
<p>
|
||||
A load of old tosh spiffing pear shaped show <br />
|
||||
off pick your nose and blow
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
<div className="thumb mr-30">
|
||||
<img src={thumb5} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutHomeEight;
|
||||
@@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import blog4 from '../../assets/images/blog-4.jpg';
|
||||
import blog5 from '../../assets/images/blog-5.jpg';
|
||||
import blog6 from '../../assets/images/blog-6.jpg';
|
||||
import blog7 from '../../assets/images/blog-7.jpg';
|
||||
import shape5 from '../../assets/images/shape/5.png';
|
||||
import shape12 from '../../assets/images/shape/shape-12.png';
|
||||
|
||||
function BlogHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-blog-3-area appie-blog-8-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 appie-blog-item-8 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={blog4} 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"></i> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments"></i> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 appie-blog-item-8 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={blog5} 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"></i> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments"></i> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 appie-blog-item-8 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={blog6} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5 className="title">
|
||||
<a href="#">
|
||||
Engineering job is Becoming More interesting.
|
||||
</a>
|
||||
</h5>
|
||||
<div className="meta-item">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-clock"></i> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments"></i> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-blog-item-3 appie-blog-item-8 mt-30">
|
||||
<div className="thumb">
|
||||
<img src={blog7} 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"></i> July 14, 2022
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-comments"></i> July 14, 2022
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-12">
|
||||
<div className="blog-btn text-center mt-60">
|
||||
<a className="main-btn" href="#">
|
||||
View All Posts <i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-blog-8-shape-1">
|
||||
<img src={shape5} alt="" />
|
||||
</div>
|
||||
<div className="appie-blog-8-shape-2">
|
||||
<img src={shape12} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogHomeEight;
|
||||
@@ -0,0 +1,157 @@
|
||||
import React, { useState } from 'react';
|
||||
import CounterUpCom from '../../lib/CounterUpCom';
|
||||
import PopupVideo from '../PopupVideo';
|
||||
|
||||
function FaqHomeEight() {
|
||||
const [showQuestion, setQuestion] = useState(0);
|
||||
const [showVideo, setVideoValue] = useState(false);
|
||||
const openQuestion = (e, value) => {
|
||||
e.preventDefault();
|
||||
setQuestion(value);
|
||||
};
|
||||
const handleShowVideo = (e) => {
|
||||
e.preventDefault();
|
||||
setVideoValue(!showVideo);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{showVideo && (
|
||||
<PopupVideo
|
||||
videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
|
||||
handler={(e) => handleShowVideo(e)}
|
||||
/>
|
||||
)}
|
||||
<div className="appie-faq-8-area pt-100 pb-100" id="counter">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">Get started with Appie Template.</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="faq-accordion wow fadeInRight mt-30"
|
||||
data-wow-duration="1500ms"
|
||||
>
|
||||
<div
|
||||
className="accrodion-grp wow fadeIn faq-accrodion"
|
||||
data-wow-duration="1500ms"
|
||||
data-grp-name="faq-accrodion"
|
||||
>
|
||||
<div
|
||||
className={`accrodion ${
|
||||
showQuestion === 0 ? 'active' : ''
|
||||
}`}
|
||||
onClick={(e) => openQuestion(e, 0)}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Does Appie have dynamic content?</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQuestion === 0 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the cras boot.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`accrodion ${
|
||||
showQuestion === 1 ? 'active' : ''
|
||||
}`}
|
||||
onClick={(e) => openQuestion(e, 1)}
|
||||
>
|
||||
<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: showQuestion === 1 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the cras boot.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`accrodion ${
|
||||
showQuestion === 2 ? 'active' : ''
|
||||
}`}
|
||||
onClick={(e) => openQuestion(e, 2)}
|
||||
>
|
||||
<div className="accrodion-inner">
|
||||
<div className="accrodion-title">
|
||||
<h4>Website & Mobile App Design</h4>
|
||||
</div>
|
||||
<div
|
||||
className="accrodion-content"
|
||||
style={{
|
||||
display: showQuestion === 2 ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="inner">
|
||||
<p>
|
||||
Naff Oxford vagabond in my flat chinwag
|
||||
blatant grub tomfoolery that I bits and bobs
|
||||
up the cras boot.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="faq-play-box">
|
||||
<div className="play-btn">
|
||||
<a
|
||||
onClick={(e) => handleShowVideo(e)}
|
||||
className="appie-video-popup"
|
||||
href="https://www.youtube.com/watch?v=EE7NqzhMDms"
|
||||
>
|
||||
<i className="fas fa-play" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="faq-play-counter">
|
||||
<div className="box-1">
|
||||
<h4 className="title">
|
||||
<CounterUpCom endValue="700" sectionSelect="counter" />k
|
||||
</h4>
|
||||
<span>App Downloads</span>
|
||||
</div>
|
||||
<div className="box-1 box-2">
|
||||
<h4 className="title">
|
||||
<CounterUpCom endValue="545" sectionSelect="counter" />k
|
||||
</h4>
|
||||
<span>App Downloads</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FaqHomeEight;
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo-9.png';
|
||||
|
||||
function FooterHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-footer-area appie-footer-about-area appie-footer-8-area">
|
||||
<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"></i>
|
||||
</a>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</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"></i> support@appie.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone"></i> +(642) 342 762 44
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt"></i> 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"></i> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play"></i> 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 FooterHomeEight;
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-9.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeEight({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-8-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-6">
|
||||
<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 HeaderHomeEight;
|
||||
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import hero from '../../assets/images/hero-thumb-9.png';
|
||||
import shapeOne from '../../assets/images/shape/1.png';
|
||||
import shapeTwo from '../../assets/images/shape/2.png';
|
||||
import shapeThree from '../../assets/images/shape/3.png';
|
||||
import shapeFour from '../../assets/images/shape/4.png';
|
||||
|
||||
function HeroHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area appie-hero-8-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-content appie-hero-content-8">
|
||||
<h1 className="appie-title">We’re a full-range design app</h1>
|
||||
<p>
|
||||
Jolly good excuse my french boot super my good sir cup of char
|
||||
richard about chinwag.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-google-play" />
|
||||
<span>Google Play</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-apple" /> <span>App Store</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-thumb-6">
|
||||
<div
|
||||
className="thumb text-center wow animated fadeInUp"
|
||||
data-wow-duration="1000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={hero} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="home-8-shape-1">
|
||||
<img src={shapeThree} alt="" />
|
||||
</div>
|
||||
<div className="home-8-shape-2">
|
||||
<img src={shapeFour} alt="" />
|
||||
</div>
|
||||
<div className="home-8-shape-3">
|
||||
<img src={shapeOne} alt="" />
|
||||
</div>
|
||||
<div className="home-8-shape-4">
|
||||
<img src={shapeTwo} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeEight;
|
||||
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import serviceThumb from '../../assets/images/service-thumb-1.png';
|
||||
|
||||
function ServicesHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="appie-services-2-area appie-services-8-area pt-90 pb-55"
|
||||
id="service"
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6 col-md-8">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">Solution for every need.</h3>
|
||||
<p>The app provides design and digital marketing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service-2 appie-single-service-about
|
||||
mt-30
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-tv" />
|
||||
</div>
|
||||
<h4 className="title">Carefully designed</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service-2 appie-single-service-about
|
||||
item-2
|
||||
mt-30
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-code" />
|
||||
</div>
|
||||
<h4 className="title">Clean Modern Code</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service-2 appie-single-service-about
|
||||
item-3
|
||||
mt-30
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-user-friends" />
|
||||
</div>
|
||||
<h4 className="title">User Interactive</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div
|
||||
className="
|
||||
appie-single-service-2 appie-single-service-about
|
||||
item-4
|
||||
mt-30
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fal fa-mobile" />
|
||||
</div>
|
||||
<h4 className="title">Choose a App</h4>
|
||||
<p>
|
||||
He lost his bottle loo don't get shirty with me ruddy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="service-thumb">
|
||||
<img src={serviceThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeEight;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import signupThumb from '../../assets/images/signup-thumb.png';
|
||||
|
||||
function SponserHomeEight({ className }) {
|
||||
return (
|
||||
<>
|
||||
<div className={`appie-signup-area ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-signup-box">
|
||||
<span>No credit card required</span>
|
||||
<h3 className="title">Get Started.</h3>
|
||||
<form action="#">
|
||||
<div className="input-box">
|
||||
<input type="text" placeholder="Enter your name" />
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="email" placeholder="Enter your email" />
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<button type="submit">Sign Up</button>
|
||||
</div>
|
||||
<div className="appie_checkbox_common checkbox_style2">
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="checkbox2"
|
||||
id="checkbox4"
|
||||
/>
|
||||
<label htmlFor="checkbox4">
|
||||
<span></span>By signing up you agree to our
|
||||
<a href="#">Terms & Conditions.</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div className="thumb">
|
||||
<img src={signupThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SponserHomeEight;
|
||||
@@ -0,0 +1,193 @@
|
||||
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 TeamHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="
|
||||
appie-team-area appie-team-about-area appie-team-8-area
|
||||
pt-90
|
||||
pb-90
|
||||
"
|
||||
>
|
||||
<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 appie-team-item-about appie-team-item-8
|
||||
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"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about appie-team-item-8
|
||||
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"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about appie-team-item-8
|
||||
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"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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 appie-team-item-about appie-team-item-8
|
||||
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"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="content text-left">
|
||||
<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"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamHomeEight;
|
||||
@@ -0,0 +1,335 @@
|
||||
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-1.png';
|
||||
|
||||
function TestimonialHomeEight() {
|
||||
const articleCarosel = useRef();
|
||||
const peopleCarosel = useRef();
|
||||
const sliderNext = () => {
|
||||
articleCarosel.current.slickNext();
|
||||
peopleCarosel.current.slickNext();
|
||||
};
|
||||
const sliderPrev = () => {
|
||||
articleCarosel.current.slickPrev();
|
||||
peopleCarosel.current.slickPrev();
|
||||
};
|
||||
const settingsForArticle = {
|
||||
autoplay: false,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
};
|
||||
const settingsForPeople = {
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
autoplay: false,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="appie-testimonial-about-area pb-45">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">What clients say about us</h3>
|
||||
<p>The app provides design and digital marketing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-10">
|
||||
<div
|
||||
className="testimonial-about-slider-active"
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<span
|
||||
onClick={sliderPrev}
|
||||
className="prev slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-left"></i>
|
||||
</span>
|
||||
<Slider {...settingsForArticle} ref={articleCarosel}>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial-parent-item">
|
||||
<div className="testimonial-box">
|
||||
<div className="icon">
|
||||
<i className="fas fa-quote-left"></i>
|
||||
</div>
|
||||
<div className="ratings-icon">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fas fa-star"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
Twit some dodgy chav he legged it crikey blatant
|
||||
starkers pukka show off show off pick your nose and
|
||||
blow off morish bum bag boot quaint, Oxford off his
|
||||
nut I bugger up the kyver brilliant bits and bobs
|
||||
haggle buggered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
<span
|
||||
onClick={sliderNext}
|
||||
className="next slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-right"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-8 col-sm-10">
|
||||
<div className="testimonial-box-about-slider-small-active">
|
||||
<Slider {...settingsForPeople} ref={peopleCarosel}>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={user} alt="" />
|
||||
</div>
|
||||
<div className="content text-center">
|
||||
<h5 className="title">Bodrum Salvador</h5>
|
||||
<span>Product Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TestimonialHomeEight;
|
||||
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import workThumb from '../../assets/images/how-it-work-thumb.png';
|
||||
|
||||
function WorkPartHomeEight() {
|
||||
return (
|
||||
<>
|
||||
<div className="appie-how-it-work-area pt-10 pb-100">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="how-it-work-thumb text-center">
|
||||
<img src={workThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-how-it-work-content">
|
||||
<h2 className="title">How It works</h2>
|
||||
<p>
|
||||
The little rotter harry butty lurgy spend a peny spiffing skive
|
||||
off golly gosh baking cakes.
|
||||
</p>
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<div className="how-it-work-box">
|
||||
<span>1</span>
|
||||
<h5 className="title">
|
||||
Download <br />
|
||||
the app
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="how-it-work-box">
|
||||
<span>2</span>
|
||||
<h5 className="title">
|
||||
Create a <br />
|
||||
free account
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="how-it-work-box">
|
||||
<span>3</span>
|
||||
<h5 className="title">
|
||||
Sync across <br />
|
||||
All devices
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="how-it-work-box">
|
||||
<span>4</span>
|
||||
<h5 className="title">
|
||||
Monthly & <br />
|
||||
weekly reports
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkPartHomeEight;
|
||||
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import AboutHomeEight from './AboutHomeEight';
|
||||
import BlogHomeEight from './BlogHomeEight';
|
||||
import FaqHomeEight from './FaqHomeEight';
|
||||
import FooterHomeEight from './FooterHomeEight';
|
||||
import HeaderHomeEight from './HeaderHomeEight';
|
||||
import HeroHomeEight from './HeroHomeEight';
|
||||
import ServicesHomeEight from './ServicesHomeEight';
|
||||
import SignupHomeEight from './SignupHomeEight';
|
||||
import TeamHomeEight from './TeamHomeEight';
|
||||
import TestimonialHomeEight from './TestimonialHomeEight';
|
||||
import WorkPartHomeEight from './WorkPartHomeEight';
|
||||
|
||||
function HomeEight() {
|
||||
const [drawer, setDrawer] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={setDrawer.toggle} />
|
||||
<HeaderHomeEight drawer={drawer} action={setDrawer.toggle} />
|
||||
<HeroHomeEight />
|
||||
<AboutHomeEight />
|
||||
<ServicesHomeEight />
|
||||
<WorkPartHomeEight />
|
||||
<FaqHomeEight />
|
||||
<TeamHomeEight />
|
||||
<TestimonialHomeEight />
|
||||
<BlogHomeEight />
|
||||
<SignupHomeEight className="appie-signup-8-area" />
|
||||
<FooterHomeEight />
|
||||
<BackToTop className="back-to-top-8" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeEight;
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo-5.png';
|
||||
|
||||
function FooterHomeFive() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-footer-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget footer-about-widget-5">
|
||||
<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"></i>
|
||||
</a>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<div className="footer-navigation footer-navigation-5">
|
||||
<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-5">
|
||||
<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"></i> support@appie.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone"></i> +(642) 342 762 44
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt"></i> 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"></i> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play"></i> 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 FooterHomeFive;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-5.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeFive({ action, cartToggle, searchToggle }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-4-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">
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="search-open"
|
||||
onClick={(e) => searchToggle(e)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<i className="fal fa-search"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
onClick={cartToggle}
|
||||
className="cart-btn amm-shopping-cart-open"
|
||||
href="#"
|
||||
>
|
||||
<i className="fal fa-shopping-cart"></i>
|
||||
<span>2</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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 HeaderHomeFive;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import HeroDot from '../../assets/images/hero-dot.png';
|
||||
import heroThumb from '../../assets/images/hero-thumb-5.png';
|
||||
import shape from '../../assets/images/shape/shape-10.png';
|
||||
|
||||
function HeroHomeFive() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area appie-hero-4-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-hero-content appie-hero-content-4">
|
||||
<span>30 Days Free Trial</span>
|
||||
<h1 className="appie-title">Get it done with appie.io</h1>
|
||||
<p>
|
||||
Tosser lemon squeezy chancer hanky panky arse plastered show off
|
||||
show off pick your nose and blow knackered bugger porkies.
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Let’s Talk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-hero-thumb appie-hero-thumb-4">
|
||||
<img src={heroThumb} alt="" />
|
||||
<div className="hero-dot">
|
||||
<img src={HeroDot} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-shape-1">
|
||||
<img src={shape} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeFive;
|
||||
@@ -0,0 +1,44 @@
|
||||
// import React, { useState } from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import Cart from '../Cart';
|
||||
import TestimonialHomeOne from '../HomeOne/TestimonialHomeOne';
|
||||
import DownloadHomeThree from '../HomeThree/DownloadHomeThree';
|
||||
import ServicesHomeThree from '../HomeThree/ServicesHomeThree';
|
||||
import ShowCaseHomeThree from '../HomeThree/ShowCaseHomeThree';
|
||||
import FeaturesHomeTwo from '../HomeTwo/FeaturesHomeTwo';
|
||||
import SponserHomeTwo from '../HomeTwo/SponserHomeTwo';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import SearchModule from '../SearchModule';
|
||||
import FooterHomeFive from './FooterHomeFive';
|
||||
import HeaderHomeFive from './HeaderHomeFive';
|
||||
import HeroHomeFive from './HeroHomeFive';
|
||||
|
||||
function HomeFive() {
|
||||
const [search, searchAction] = useToggle(false);
|
||||
const [cart, cartAction] = useToggle(false);
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<SearchModule value={search} searchToggle={searchAction.toggle} />
|
||||
<Cart value={cart} action={cartAction.toggle} />
|
||||
<HeaderHomeFive
|
||||
action={drawerAction.toggle}
|
||||
cartToggle={cartAction.toggle}
|
||||
searchToggle={searchAction.toggle}
|
||||
/>
|
||||
<HeroHomeFive />
|
||||
<ServicesHomeThree />
|
||||
<FeaturesHomeTwo />
|
||||
<DownloadHomeThree className="pb-90" />
|
||||
<ShowCaseHomeThree />
|
||||
<TestimonialHomeOne />
|
||||
<SponserHomeTwo className="pt-90" />
|
||||
<FooterHomeFive />
|
||||
<BackToTop className="back-to-top-5" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeFive;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-7.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeSeven({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-7-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-7">
|
||||
<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 HeaderHomeSeven;
|
||||
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import heroThumb2 from '../../assets/images/hero-shape-2.png';
|
||||
import heroThumb8 from '../../assets/images/hero-thumb-8.png';
|
||||
|
||||
function HeroHomeSeven() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area appie-hero-6-area appie-hero-7-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-7">
|
||||
<div className="appie-hero-content appie-hero-content-6 appie-hero-content-7">
|
||||
<h1 className="appie-title">Creative way to Showcase your app </h1>
|
||||
<p>
|
||||
Lost the plot so I said nancy boy I don't want no agro bleeder
|
||||
bum bag easy peasy cheesed off cheers ruddy.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-apple"></i>
|
||||
<span>
|
||||
Available on the <span>App Store</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play"></i>
|
||||
<span>
|
||||
Available on the <span>Google Play</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="info"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-hero-thumb-6">
|
||||
<div
|
||||
className="thumb wow animated fadeInUp text-center"
|
||||
data-wow-duration="1000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumb8} alt="" />
|
||||
<div className="back-image">
|
||||
<img src={heroThumb2} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeSeven;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BlogHomeOne from '../HomeOne/BlogHomeOne';
|
||||
import FaqHomeOne from '../HomeOne/FaqHomeOne';
|
||||
import FeaturesHomeOne from '../HomeOne/FeaturesHomeOne';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import ProjectHomeOne from '../HomeOne/ProjectHomeOne';
|
||||
import TeamHomeOne from '../HomeOne/TeamHomeOne';
|
||||
import CounterArea from '../HomeTwo/CounterArea';
|
||||
import DownloadHomeTwo from '../HomeTwo/DownloadHomeTwo';
|
||||
import PricingHomeTwo from '../HomeTwo/PricingHomeTwo';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import HeaderHomeSeven from './HeaderHomeSeven';
|
||||
import HeroHomeSeven from './HeroHomeSeven';
|
||||
|
||||
function HomeSeven() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderHomeSeven action={drawerAction.toggle} />
|
||||
<HeroHomeSeven />
|
||||
<FeaturesHomeOne />
|
||||
<CounterArea />
|
||||
<DownloadHomeTwo className="mb-0" />
|
||||
<TeamHomeOne />
|
||||
<PricingHomeTwo />
|
||||
<FaqHomeOne className="pt-90" />
|
||||
<BlogHomeOne />
|
||||
<ProjectHomeOne />
|
||||
<FooterHomeOne />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeSeven;
|
||||
@@ -0,0 +1,147 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function FooterHomeSix() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-footer-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget footer-about-widget-6">
|
||||
<div className="logo">
|
||||
<a href="#">
|
||||
<img src="assets/images/logo-8.png" 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"></i>
|
||||
</a>
|
||||
<div className="social mt-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<div className="footer-navigation footer-navigation-6">
|
||||
<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-6">
|
||||
<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"></i> support@appie.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone"></i> +(642) 342 762 44
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt"></i> 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"></i> Download for iOS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play"></i> 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 FooterHomeSix;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-8.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeSix({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-6">
|
||||
<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="logo" />
|
||||
</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>
|
||||
<form action="#">
|
||||
<div className="input-box">
|
||||
<i className="fal fa-search"></i>
|
||||
<input type="text" placeholder="Search..." />
|
||||
</div>
|
||||
</form>
|
||||
<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 HeaderHomeSix;
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import heroThumb from '../../assets/images/hero-thumb-7.png';
|
||||
|
||||
function HeroHomeSix() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area appie-hero-6-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-thumb-6">
|
||||
<div
|
||||
className="thumb wow animated fadeInUp"
|
||||
data-wow-duration="1000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-hero-content appie-hero-content-6">
|
||||
<span>Welcome To Creative App.</span>
|
||||
<h1 className="appie-title">Get started with Appie Template.</h1>
|
||||
<p>
|
||||
Lost the plot so I said nancy boy I don't want no agro bleeder
|
||||
bum bag easy peasy cheesed off cheers ruddy.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-apple"></i>
|
||||
<span>
|
||||
Available on the <span>App Store</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play"></i>
|
||||
<span>
|
||||
Available on the <span>Google Play</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeSix;
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FeaturesHomeOne from '../HomeOne/FeaturesHomeOne';
|
||||
import PricingHomeOne from '../HomeOne/PricingHomeOne';
|
||||
import BlogHomeThree from '../HomeThree/BlogHomeThree';
|
||||
import DownloadHomeThree from '../HomeThree/DownloadHomeThree';
|
||||
import CounterArea from '../HomeTwo/CounterArea';
|
||||
import ServicesHomeTwo from '../HomeTwo/ServicesHomeTwo';
|
||||
import VideoPlayerHomeTwo from '../HomeTwo/VideoPlayerHomeTwo';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import FooterHomeSix from './FooterHomeSix';
|
||||
import HeaderHomeSix from './HeaderHomeSix';
|
||||
import HeroHomeSix from './HeroHomeSix';
|
||||
|
||||
function HomeSix() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderHomeSix action={drawerAction.toggle} />
|
||||
<HeroHomeSix />
|
||||
<ServicesHomeTwo className="pt-90" />
|
||||
<BackToTop className="back-to-top-6" />
|
||||
<FeaturesHomeOne className="appie-features-6-area" />
|
||||
<CounterArea />
|
||||
<VideoPlayerHomeTwo />
|
||||
<DownloadHomeThree className="pt-0 pb-100" />
|
||||
<PricingHomeOne className="appie-pricing-6-area" />
|
||||
<BlogHomeThree />
|
||||
<FooterHomeSix />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeSix;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
import aboutThumb from '../../assets/images/about-thumb.png';
|
||||
|
||||
function AboutHomeTwo() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-about-area mb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div
|
||||
className="appie-about-box wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-thumb">
|
||||
<img src={aboutThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="appie-about-content">
|
||||
<span>Marketing</span>
|
||||
<h3 className="title">
|
||||
Make a lasting impression with appie.
|
||||
</h3>
|
||||
<p>
|
||||
Jolly good quaint james bond victoria sponge happy
|
||||
days cras arse over blatant.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="appie-about-service mt-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h4 className="title">Carefully designed</h4>
|
||||
<p>
|
||||
Mucker plastered bugger all mate morish are.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="appie-about-service mt-30">
|
||||
<div className="icon">
|
||||
<i className="fal fa-check" />
|
||||
</div>
|
||||
<h4 className="title">Choose a App</h4>
|
||||
<p>
|
||||
Mucker plastered bugger all mate morish are.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutHomeTwo;
|
||||
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import counterIconOne from '../../assets/images/icon/counter-icon-1.svg';
|
||||
import counterIconTwo from '../../assets/images/icon/counter-icon-2.svg';
|
||||
import counterIconThree from '../../assets/images/icon/counter-icon-3.svg';
|
||||
import counterIconFour from '../../assets/images/icon/counter-icon-4.svg';
|
||||
import CounterUpCom from '../../lib/CounterUpCom';
|
||||
|
||||
function CounterArea({ style }) {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-counter-area pt-90 pb-190" id="counter" style={style}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">How does it work</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-counter mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="counter-content">
|
||||
<div className="icon">
|
||||
<img src={counterIconOne} alt="" />
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<span className="counter-item">
|
||||
<CounterUpCom endValue={100} sectionSelect="counter" />
|
||||
</span>
|
||||
k+
|
||||
</h3>
|
||||
<p>Active Installation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-counter mt-30 item-2 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="counter-content">
|
||||
<div className="icon">
|
||||
<img src={counterIconTwo} alt="" />
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<span className="counter-item">
|
||||
<CounterUpCom endValue={108} sectionSelect="counter" />
|
||||
</span>
|
||||
+
|
||||
</h3>
|
||||
<p>Active Installation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-counter mt-30 item-3 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="counter-content">
|
||||
<div className="icon">
|
||||
<img src={counterIconThree} alt="" />
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<span className="counter-item">
|
||||
<CounterUpCom endValue={307} sectionSelect="counter" />
|
||||
</span>
|
||||
+
|
||||
</h3>
|
||||
<p>Active Installation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-md-6">
|
||||
<div
|
||||
className="appie-single-counter mt-30 item-4 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="800ms"
|
||||
>
|
||||
<div className="counter-content">
|
||||
<div className="icon">
|
||||
<img src={counterIconFour} alt="" />
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<span className="counter-item">
|
||||
<CounterUpCom endValue={725} sectionSelect="counter" />
|
||||
</span>
|
||||
k+
|
||||
</h3>
|
||||
<p>Active Installation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CounterArea;
|
||||
@@ -0,0 +1,59 @@
|
||||
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';
|
||||
|
||||
function DownloadHomeTwo({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-download-area pt-150 pb-160 mb-90 ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-download-content">
|
||||
<span>Download Our App</span>
|
||||
<h3 className="title">
|
||||
App is available <br />
|
||||
for free on app store
|
||||
</h3>
|
||||
<p>
|
||||
Jolly good quaint james bond victoria sponge happy days cras
|
||||
arse over blatant.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fab fa-apple" />
|
||||
<span>
|
||||
Download for <span>iOS</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="item-2" href="#">
|
||||
<i className="fab fa-google-play" />
|
||||
<span>
|
||||
Download for <span>Android</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="download-shape-1">
|
||||
<img src={shape15} alt="" />
|
||||
</div>
|
||||
<div className="download-shape-2">
|
||||
<img src={shape14} alt="" />
|
||||
</div>
|
||||
<div className="download-shape-3">
|
||||
<img src={shape13} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DownloadHomeTwo;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import featureThumb from '../../assets/images/features-thumb-2.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';
|
||||
|
||||
function FeaturesHomeTwo() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-features-area-2 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 appie-section-title-2 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">
|
||||
<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">
|
||||
<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">
|
||||
<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={featureThumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="features-shape-1">
|
||||
<img src={shape15} alt="" />
|
||||
</div>
|
||||
<div className="features-shape-2">
|
||||
<img src={shape14} alt="" />
|
||||
</div>
|
||||
<div className="features-shape-3">
|
||||
<img src={shape13} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeaturesHomeTwo;
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo-2.png';
|
||||
|
||||
function FooterHomeTwo() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-footer-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div className="footer-about-widget footer-about-widget-2">
|
||||
<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-2">
|
||||
<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-2">
|
||||
<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 FooterHomeTwo;
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-2.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderHomeTwo({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-2-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="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 HeaderHomeTwo;
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import heroMan from '../../assets/images/hero-mans.png';
|
||||
import heroThumb from '../../assets/images/hero-thumb-3.png';
|
||||
import shapeTen from '../../assets/images/shape/shape-10.png';
|
||||
import shapeEleven from '../../assets/images/shape/shape-11.png';
|
||||
import shapeTwelve from '../../assets/images/shape/shape-12.png';
|
||||
import shapeNine from '../../assets/images/shape/shape-9.png';
|
||||
|
||||
function HeroHomeTwo() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area-2 mb-90">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-5">
|
||||
<div className="appie-hero-content-2">
|
||||
<span>14 day free</span>
|
||||
<h1 className="appie-title">
|
||||
Ready to launch your app in one, <span>Application</span>
|
||||
</h1>
|
||||
<p>Find the best application in the appie.</p>
|
||||
<form action="#">
|
||||
<div className="input-box">
|
||||
<input type="text" placeholder="info@appie.com" />
|
||||
<i className="fal fa-envelope" />
|
||||
<button type="button">
|
||||
<i className="fal fa-arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="hero-users">
|
||||
<img src={heroMan} alt="" />
|
||||
<span>
|
||||
30k <span> Feedback</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="appie-hero-thumb-3 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<img src={heroThumb} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-1">
|
||||
<img src={shapeNine} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-2">
|
||||
<img src={shapeTen} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-3">
|
||||
<img src={shapeEleven} alt="" />
|
||||
</div>
|
||||
<div className="hero-shape-4">
|
||||
<img src={shapeTwelve} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroHomeTwo;
|
||||
@@ -0,0 +1,347 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function PricingHomeTwo() {
|
||||
const [toggleSwitch, setSwitchValue] = useState(true);
|
||||
const handleSwitch = (e) => {
|
||||
e.preventDefault();
|
||||
setSwitchValue(!toggleSwitch);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<section className="appie-pricing-2-area pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Simple pricing for Everyone</h3>
|
||||
<p>
|
||||
The full monty spiffing good time no biggie cack grub fantastic.
|
||||
</p>
|
||||
<div className="appie-pricing-tab-btn">
|
||||
<ul
|
||||
className="nav nav-pills mb-3"
|
||||
id="pills-tab"
|
||||
role="tablist"
|
||||
>
|
||||
<li className="nav-item" role="presentation">
|
||||
<a
|
||||
onClick={(e) => handleSwitch(e)}
|
||||
className={`nav-link ${
|
||||
toggleSwitch ? 'active' : ''
|
||||
}`}
|
||||
href="#"
|
||||
type="button"
|
||||
role="tab"
|
||||
>
|
||||
Monthly
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className={`nav-item ${toggleSwitch ? 'on' : 'off'}`}
|
||||
role="presentation"
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleSwitch(e)}
|
||||
className={`nav-link ${
|
||||
toggleSwitch === false ? 'active' : ''
|
||||
}`}
|
||||
href="#"
|
||||
type="button"
|
||||
role="tab"
|
||||
>
|
||||
Yearly
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="tab-content" id="pills-tabContent">
|
||||
<div
|
||||
className={`tab-pane fade ${toggleSwitch ? 'active show' : ''}`}
|
||||
id="pills-home"
|
||||
role="tabpanel"
|
||||
aria-labelledby="pills-home-tab"
|
||||
>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
wow
|
||||
animated
|
||||
fadeInLeft
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<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 className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
active
|
||||
wow
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
>
|
||||
<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 className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
item-2
|
||||
wow
|
||||
animated
|
||||
fadeInRight
|
||||
"
|
||||
>
|
||||
<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
|
||||
className={`tab-pane fade ${
|
||||
toggleSwitch === false ? 'active show' : ''
|
||||
}`}
|
||||
id="pills-profile"
|
||||
role="tabpanel"
|
||||
aria-labelledby="pills-profile-tab"
|
||||
>
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
animated
|
||||
fadeInLeft
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<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 className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
active
|
||||
animated
|
||||
fadeInUp
|
||||
"
|
||||
>
|
||||
<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 className="pricing-rebon">
|
||||
<span>Most Popular</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="
|
||||
pricing-one__single pricing-one__single_2
|
||||
item-2
|
||||
animated
|
||||
fadeInRight
|
||||
"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingHomeTwo;
|
||||
@@ -0,0 +1,147 @@
|
||||
import React from 'react';
|
||||
|
||||
function ServicesHomeTwo({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-services-2-area pb-100 ${className}`} id="service">
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6 col-md-8">
|
||||
<div className="appie-section-title">
|
||||
<h3 className="appie-title">How does it work</h3>
|
||||
<p>
|
||||
The full monty spiffing good time no biggie cack grub fantastic.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-4">
|
||||
<div className="appie-section-title text-right">
|
||||
<a className="main-btn" href="#">
|
||||
View all Features <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-bolt" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 item-2 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-home" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 item-3 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-link" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 item-4 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-bell" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 item-5 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="400ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-cog" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-single-service-2 item-6 mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<div className="icon">
|
||||
<i className="fas fa-lock" />
|
||||
</div>
|
||||
<h4 className="title">Fast and intuitive</h4>
|
||||
<p>
|
||||
Oxford posh bevvy give us a bell gutted mate spend a penny
|
||||
quaint cockup plastered.
|
||||
</p>
|
||||
<a href="#">
|
||||
Read Mor <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesHomeTwo;
|
||||
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import Sponser1 from '../../assets/images/sponser-1.png';
|
||||
import Sponser10 from '../../assets/images/sponser-10.png';
|
||||
import Sponser2 from '../../assets/images/sponser-2.png';
|
||||
import Sponser3 from '../../assets/images/sponser-3.png';
|
||||
import Sponser4 from '../../assets/images/sponser-4.png';
|
||||
import Sponser5 from '../../assets/images/sponser-5.png';
|
||||
import Sponser6 from '../../assets/images/sponser-6.png';
|
||||
import Sponser7 from '../../assets/images/sponser-7.png';
|
||||
import Sponser8 from '../../assets/images/sponser-8.png';
|
||||
import Sponser9 from '../../assets/images/sponser-9.png';
|
||||
import sponserShape from '../../assets/images/sponser-shape.png';
|
||||
|
||||
function SponserHomeTwo({ className }) {
|
||||
return (
|
||||
<>
|
||||
<section className={`appie-sponser-area pb-100 ${className}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">
|
||||
Appie works best with <br />
|
||||
your favorite platforms
|
||||
</h3>
|
||||
<p>Join over 40,000 businesses worldwide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-sponser-box d-flex justify-content-center">
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser1} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser2} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser3} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser4} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser5} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser6} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-sponser-box item-2 d-flex justify-content-center">
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser7} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser8} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser9} alt="" />
|
||||
</div>
|
||||
<div className="sponser-item">
|
||||
<img src={Sponser10} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sponser-shape">
|
||||
<img src={sponserShape} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SponserHomeTwo;
|
||||
@@ -0,0 +1,135 @@
|
||||
import React, { useRef } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import testmonialUser from '../../assets/images/testimonial-user-1.png';
|
||||
|
||||
function TestimonialHomeTwo() {
|
||||
const sliderRef = useRef();
|
||||
const sliderNext = () => {
|
||||
sliderRef.current.slickNext();
|
||||
};
|
||||
const sliderPrev = () => {
|
||||
sliderRef.current.slickPrev();
|
||||
};
|
||||
const settings = {
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<section className="appie-testimonial-2-area mb-90" id="testimonial">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-testimonial-2-box">
|
||||
<div
|
||||
className="appie-testimonial-slider-2"
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<span
|
||||
onClick={sliderPrev}
|
||||
className="prev slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-left" />
|
||||
</span>
|
||||
<Slider ref={sliderRef} {...settings}>
|
||||
<div className="appie-testimonial-slider-2-item">
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={testmonialUser} alt="" />
|
||||
<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>
|
||||
<span>(4.7) review</span>
|
||||
</div>
|
||||
<div className="content">
|
||||
<p>
|
||||
Why I say old chap that is spiffing chip
|
||||
shop such a fibber the bee's knees, the
|
||||
wireless Richard fantastic do one cracking
|
||||
goal pukka baking cakes starkers mush don't
|
||||
get shirty with me argy bargy, I naff
|
||||
chimney pot blimey he lost his bottle cup.
|
||||
</p>
|
||||
<div className="author-info">
|
||||
<h5 className="title">Hanson Deck</h5>
|
||||
<span>Web developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appie-testimonial-slider-2-item">
|
||||
<div className="item">
|
||||
<div className="thumb">
|
||||
<img src={testmonialUser} alt="" />
|
||||
<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>
|
||||
<span>(4.7) review</span>
|
||||
</div>
|
||||
<div className="content">
|
||||
<p>
|
||||
Why I say old chap that is spiffing chip
|
||||
shop such a fibber the bee's knees, the
|
||||
wireless Richard fantastic do one cracking
|
||||
goal pukka baking cakes starkers mush don't
|
||||
get shirty with me argy bargy, I naff
|
||||
chimney pot blimey he lost his bottle cup.
|
||||
</p>
|
||||
<div className="author-info">
|
||||
<h5 className="title">Hanson Deck</h5>
|
||||
<span>Web developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
<span
|
||||
onClick={sliderNext}
|
||||
className="next slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-right" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TestimonialHomeTwo;
|
||||
@@ -0,0 +1,105 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import videoSlideOne from '../../assets/images/video-slide-1.jpg';
|
||||
import videoSlideTwo from '../../assets/images/video-slide-2.jpg';
|
||||
import videoThumb from '../../assets/images/video-thumb-1.jpg';
|
||||
import PopupVideo from '../PopupVideo';
|
||||
|
||||
function VideoPlayerHomeTwo({ className }) {
|
||||
const [showVideo, setshowVideoValue] = useState(false);
|
||||
const handleVideoShow = (e) => {
|
||||
e.preventDefault();
|
||||
setshowVideoValue(!showVideo);
|
||||
};
|
||||
const sliderRef = useRef();
|
||||
const settings = {
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
};
|
||||
const sliderNext = () => {
|
||||
sliderRef.current.slickNext();
|
||||
};
|
||||
const sliderPrev = () => {
|
||||
sliderRef.current.slickPrev();
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{showVideo && (
|
||||
<PopupVideo
|
||||
handler={(e) => handleVideoShow(e)}
|
||||
videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
|
||||
/>
|
||||
)}
|
||||
<section className={`appie-video-player-area pb-100 ${className || ''}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="appie-video-player-item">
|
||||
<div className="thumb">
|
||||
<img src={videoThumb} alt="" />
|
||||
<div className="video-popup">
|
||||
<a
|
||||
onClick={(e) => handleVideoShow(e)}
|
||||
role="button"
|
||||
href="#"
|
||||
className="appie-video-popup"
|
||||
>
|
||||
<i className="fas fa-play" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3 className="title">
|
||||
Watch the two-minute video to learn how.
|
||||
</h3>
|
||||
<p>
|
||||
The wireless cheesed on your bike mate zonked a load of old
|
||||
tosh hunky dory it's all gone to pot haggle william car boot
|
||||
pear shaped geeza.
|
||||
</p>
|
||||
<a className="main-btn" href="#">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div
|
||||
className="appie-video-player-slider"
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<span
|
||||
onClick={sliderPrev}
|
||||
className="prev slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-left" />
|
||||
</span>
|
||||
<Slider ref={sliderRef} {...settings}>
|
||||
<div className="item">
|
||||
<img src={videoSlideOne} alt="" />
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src={videoSlideTwo} alt="" />
|
||||
</div>
|
||||
</Slider>
|
||||
<span
|
||||
onClick={sliderNext}
|
||||
className="next slick-arrow"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
<i className="fal fa-arrow-right" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoPlayerHomeTwo;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import AboutHomeTwo from './AboutHomeTwo';
|
||||
import CounterArea from './CounterArea';
|
||||
import DownloadHomeTwo from './DownloadHomeTwo';
|
||||
import FeaturesHomeTwo from './FeaturesHomeTwo';
|
||||
import FooterHomeTwo from './FooterHomeTwo';
|
||||
import HeaderHomeTwo from './HeaderHomeTwo';
|
||||
import HeroHomeTwo from './HeroHomeTwo';
|
||||
import PricingHomeTwo from './PricingHomeTwo';
|
||||
import ServicesHomeTwo from './ServicesHomeTwo';
|
||||
import SponserHomeTwo from './SponserHomeTwo';
|
||||
import TestimonialHomeTwo from './TestimonialHomeTwo';
|
||||
import VideoPlayerHomeTwo from './VideoPlayerHomeTwo';
|
||||
|
||||
function HomeTwo() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderHomeTwo action={drawerAction.toggle} />
|
||||
<HeroHomeTwo />
|
||||
<ServicesHomeTwo />
|
||||
<AboutHomeTwo />
|
||||
<FeaturesHomeTwo />
|
||||
<CounterArea />
|
||||
<VideoPlayerHomeTwo />
|
||||
<DownloadHomeTwo />
|
||||
<PricingHomeTwo />
|
||||
<TestimonialHomeTwo />
|
||||
<SponserHomeTwo />
|
||||
<FooterHomeTwo />
|
||||
<BackToTop className="back-to-top-2" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeTwo;
|
||||
@@ -0,0 +1,195 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import logo from '../../assets/images/logo.png';
|
||||
|
||||
function Drawer({ drawer, action }) {
|
||||
const [itemSize, setSize] = useState('0px');
|
||||
const [item, setItem] = useState('home');
|
||||
const handler = (e, value) => {
|
||||
e.preventDefault();
|
||||
const getItems = document.querySelectorAll(`#${value} li`).length;
|
||||
if (getItems > 0) {
|
||||
setSize(`${43 * getItems}px`);
|
||||
setItem(value);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onClick={(e) => action(e)}
|
||||
className={`off_canvars_overlay ${drawer ? 'active' : ''}`}
|
||||
></div>
|
||||
<div className="offcanvas_menu">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className={`offcanvas_menu_wrapper ${drawer ? 'active' : ''}`}>
|
||||
<div className="canvas_close">
|
||||
<a href="#" onClick={(e) => action(e)}>
|
||||
<i className="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="offcanvas-brand text-center mb-40">
|
||||
<img src={logo} alt="" />
|
||||
</div>
|
||||
<div id="menu" className="text-left ">
|
||||
<ul className="offcanvas_main_menu">
|
||||
<li
|
||||
onClick={(e) => handler(e, 'home')}
|
||||
id="home"
|
||||
className="menu-item-has-children active"
|
||||
>
|
||||
<span className="menu-expand">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</span>
|
||||
<a href="#">Home</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={{
|
||||
height: item === 'home' ? itemSize : '0px',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<Link to="/">Home 1</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-two">Home 2</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-three">Home 3</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-four">Home 4</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-five">Home 5</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-six">Home 6</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-seven">Home 7</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-eight">Home 8</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
onClick={(e) => handler(e, 'service')}
|
||||
id="service"
|
||||
className="menu-item-has-children active"
|
||||
>
|
||||
<Link to="/service">Service</Link>
|
||||
</li>
|
||||
<li
|
||||
onClick={(e) => handler(e, 'pages')}
|
||||
id="pages"
|
||||
className="menu-item-has-children active"
|
||||
>
|
||||
<span className="menu-expand">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</span>
|
||||
<a href="#">Pages</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={{
|
||||
height: item === 'pages' ? itemSize : '0px',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<Link to="/about-us">About Us</Link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<Link to="/error">Error</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
onClick={(e) => handler(e, 'news')}
|
||||
id="news"
|
||||
className="menu-item-has-children active"
|
||||
>
|
||||
<span className="menu-expand">
|
||||
<i className="fa fa-angle-down"></i>
|
||||
</span>
|
||||
<a href="#">News</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
style={{
|
||||
height: item === 'news' ? itemSize : '0px',
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<Link to="/news">news page</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/news/single-news">Single News</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
onClick={(e) => handler(e, 'contact')}
|
||||
id="contact"
|
||||
className="menu-item-has-children active"
|
||||
>
|
||||
<Link to="/contact">Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="offcanvas-social">
|
||||
<ul className="text-center">
|
||||
<li>
|
||||
<a href="$">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="$">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="$">
|
||||
<i className="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="$">
|
||||
<i className="fab fa-dribbble"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-widget-info">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-envelope"></i>{' '}
|
||||
support@appie.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-phone"></i> +(642) 342 762 44
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fal fa-map-marker-alt"></i> 442 Belle
|
||||
Terre St Floor 7, San Francisco, AV 4206
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Drawer;
|
||||
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function Navigation() {
|
||||
return (
|
||||
<>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
Home <i className="fal fa-angle-down" />
|
||||
</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to="/">Home 1</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-two">Home 2</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-three">Home 3</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-four">Home 4</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-five">Home 5</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-six">Home 6</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-seven">Home 7</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/home-eight">Home 8</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/service">Service</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
Pages <i className="fal fa-angle-down" />
|
||||
</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to="/about-us">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/error">Error</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
News <i className="fal fa-angle-down" />
|
||||
</a>
|
||||
<ul className="sub-menu">
|
||||
<li>
|
||||
<Link to="/news">News Page</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/news/single-news">Single News</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact">Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
@@ -0,0 +1,215 @@
|
||||
import React from 'react';
|
||||
import singlePost from '../../assets/images/single-post/1.jpg';
|
||||
import author from '../../assets/images/single-post/author.png';
|
||||
import cmnt1 from '../../assets/images/single-post/c1.png';
|
||||
import cmnt2 from '../../assets/images/single-post/c2.png';
|
||||
import cmnt3 from '../../assets/images/single-post/c3.png';
|
||||
|
||||
function Blog() {
|
||||
return (
|
||||
<>
|
||||
<div className="single-post-area">
|
||||
<p>
|
||||
Tosser posh grub he lost his bottle bamboozled show off show off pick your nose
|
||||
and blow off cheesed off starkers what a load of rubbish, Jeffrey bubble and
|
||||
squeak I Charles a load of old tosh some dodgy chav wind up David gormless,
|
||||
hotpot arse over tit hanky panky bog-standard don't get shirty with me bloke
|
||||
Richard. Smashing he legged it in my flat bodge a blinding shot amongst
|
||||
brilliant blag, I grub A bit of how's your father bite your arm off the BBC the
|
||||
full monty chancer, bobby bender he nicked it down the pub Why cheeky bugger.
|
||||
Starkers pardon you bubble and squeak a blinding shot it's all gone to pot bits
|
||||
and bobs car boot lurgy so I said cheesed off boot Harry such a fibber, naff
|
||||
chinwag bamboozled the bee's knees bloke fanny around loo are you taking the
|
||||
piss barney off his nut cack. Arse over tit he nicked it that matie boy lost the
|
||||
plot pardon me my lady well cheers he legged it, boot bits and bobs brown bread
|
||||
is cras bamboozled bite your arm off down the pub brolly, cobblers horse play
|
||||
what a load of rubbish sloshed chancer say you mug cockup. Geeza some dodgy chav
|
||||
bonnet Oxford so I said pukka pardon you starkers cor blimey guvnor are you
|
||||
taking the piss, cheesed off in my flat cheeky posh down the pub horse play
|
||||
nancy boy plastered cobblers cack, morish chinwag the BBC my good sir jolly good
|
||||
cuppa amongst blatant. Grub owt to do with me cheeky bugger squiffy chinwag
|
||||
pukka say hunky-dory crikey quaint fanny around jolly good brown bread up the
|
||||
kyver cack zonked tickety boo mush morish.
|
||||
</p>
|
||||
<div className="post-thumb">
|
||||
<img src={singlePost} alt="" />
|
||||
</div>
|
||||
<h4 className="article-title">Logotype Masterclass with Jessica Hische</h4>
|
||||
<p>
|
||||
Lost the plot morish bleeder absolutely bladdered my lady chinwag that bleeding
|
||||
Eaton blag, cheeky bugger burke matie boy brown bread say pukka off his nut
|
||||
sloshed mufty, squiffy show off show off pick your nose and blow off brolly bite
|
||||
your arm off bloke bubble and squeak hotpot happy days. Old spiffing cras bugger
|
||||
blimey chancer me old mucker vagabond you mug, amongst absolutely bladdered
|
||||
spend a penny ruddy wellies he lost his bottle hanky panky up the kyver bender,
|
||||
give us a bell my good sir car boot pear shaped young delinquent victoria sponge
|
||||
tomfoolery. Lavatory knackered pukka chip shop a blinding shot cor blimey guvnor
|
||||
bodge blower, barmy faff about cheeky nice one at public school. Have it down
|
||||
the pub posh matie boy wind up hunky-dory, he lost his bottle the full monty
|
||||
bugger all mate cheeky bugger cras chancer, absolutely bladdered amongst
|
||||
tomfoolery pukka. Knackered
|
||||
</p>
|
||||
<p>
|
||||
James Bond old happy days the wireless cracking goal bloke me old mucker, arse
|
||||
over tit blower mush the bee's knees chip shop the BBC, say lemon squeezy
|
||||
blatant what a load of rubbish bog-standard nancy boy. Mush spiffing good time
|
||||
brown bread cheeky bite your arm off chip shop bugger all mate, my lady down the
|
||||
pub is faff about pukka.
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
I don't want no agro brilliant are you taking the piss skive off super boot
|
||||
chancer don't get shirty.
|
||||
</p>
|
||||
<cite>Indigo Violet</cite>
|
||||
</blockquote>
|
||||
<p>
|
||||
That faff about the full monty blower bubble and squeak cheeky old matie boy
|
||||
burke, the bee's knees what a load of rubbish golly gosh mufty is Elizabeth
|
||||
squiffy, lurgy chimney pot Jeffrey Richard naff Queen's English cheesed off. Old
|
||||
bonnet cheesed off lurgy me old mucker a blinding shot bits and bobs lavatory
|
||||
barney, say no biggie jolly good mush chancer pukka what a load of rubbish,
|
||||
Harry don't get shirty with me arse over tit he lost his bottle spiffing good
|
||||
time bubble and squeak say. I bog Harry a load of old tosh quaint brown bread
|
||||
get stuffed mate bobby, lemon squeezy boot bum bag chimney pot codswallop
|
||||
amongst, lavatory twit bits and bobs pardon you daft ummm I'm telling. Blatant
|
||||
matie boy say bugger all mate butty gormless, you mug pukka happy days bobby.
|
||||
Down the pub what a load of rubbish geeza faff about chancer bits and bobs daft
|
||||
lavatory boot victoria sponge spend a penny grub ummm I'm telling, absolutely
|
||||
bladdered A bit of how's your father arse over tit do one chimney pot tomfoolery
|
||||
porkies owt to do with me spiffing good time zonked.
|
||||
</p>
|
||||
<div className="post-tags">
|
||||
<h5>Tags:</h5>
|
||||
<a href="#">Bisy LMS</a>
|
||||
<a href="#">Design</a>
|
||||
<a href="#">General</a>
|
||||
</div>
|
||||
<div className="post-share">
|
||||
<h5>Share:</h5>
|
||||
<a className="fac" href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a className="twi" href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a className="goo" href="#">
|
||||
<i className="fab fa-google"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="post-admin">
|
||||
<img src={author} alt="" />
|
||||
<a href="#">Justin Case</a>
|
||||
<span>About Author</span>
|
||||
<p>
|
||||
Me old mucker bits and bobs you mug tickety-boo a load of old tosh bender
|
||||
mufty bloke old daft.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment-area">
|
||||
<h3>Comment (3)</h3>
|
||||
<ol className="comment-list">
|
||||
<li>
|
||||
<div className="single-comment">
|
||||
<img src={cmnt1} alt="" />
|
||||
<h5>
|
||||
<a href="#">Jason Response</a>
|
||||
</h5>
|
||||
<span>April 03, 2019</span>
|
||||
<div className="comment">
|
||||
<p>
|
||||
He legged it bevvy mush owt to do with me such fibber fa about
|
||||
cup of tea sloshed morish butty bubble. Butty gormless lavatory
|
||||
twit bits and bobs pardon you daft ummm I'm telling.
|
||||
</p>
|
||||
</div>
|
||||
<a className="comment-reply-link" href="#">
|
||||
<i className="fal fa-reply"></i>Reply
|
||||
</a>
|
||||
<div className="c-border"></div>
|
||||
</div>
|
||||
<ul className="children">
|
||||
<li>
|
||||
<div className="single-comment">
|
||||
<img src={cmnt2} alt="" />
|
||||
<h5>
|
||||
<a href="#">Sue Shei</a>
|
||||
</h5>
|
||||
<span>April 14, 2019</span>
|
||||
<div className="comment">
|
||||
<p>
|
||||
Super chancer cheeky bloke haggle give us a bell well
|
||||
mufty chinwag say bite. lavatory twit bits and bobs
|
||||
pardon you daft ummm I'm telling. Blatant matie boy say
|
||||
bugger all mate butty gormless
|
||||
</p>
|
||||
</div>
|
||||
<a className="comment-reply-link" href="#">
|
||||
<i className="fal fa-reply"></i>Reply
|
||||
</a>
|
||||
<div className="c-border"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="single-comment">
|
||||
<img src={cmnt3} alt="" />
|
||||
<h5>
|
||||
<a href="#">Douglas Lyphe</a>
|
||||
</h5>
|
||||
<span>July 27, 2020</span>
|
||||
<div className="comment">
|
||||
<p>
|
||||
Oxford baking cakes dropped clanger fanny around
|
||||
vagabond amongst cor blimey guvnor. Blatant matie boy
|
||||
say bugger all mate butty gormless lavatory twit bits
|
||||
and bobs pardon you daft ummm I'm telling.
|
||||
</p>
|
||||
</div>
|
||||
<a className="comment-reply-link" href="#">
|
||||
<i className="fal fa-reply"></i>Reply
|
||||
</a>
|
||||
<div className="c-border"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div className="comment-form-area">
|
||||
<h3>Post a Comment</h3>
|
||||
<p>Your email address will not be published. Required fields are marked</p>
|
||||
<div className="comment-form">
|
||||
<form className="row" action="#" method="post">
|
||||
<div className="col-md-6">
|
||||
<input type="text" name="name" placeholder="Name" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input type="email" name="email" placeholder="Email" />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<input type="url" name="url" placeholder="Website" />
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="save-comment">
|
||||
<input id="history-name" type="checkbox" />
|
||||
<label htmlFor="history-name">
|
||||
Save my name, email, and website in this browser for the next
|
||||
time I comment.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<textarea placeholder="Coment"></textarea>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<button type="submit">Post Comment</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
@@ -0,0 +1,109 @@
|
||||
import React from 'react';
|
||||
import BlogImg1 from '../../assets/images/blog/p1.jpg';
|
||||
import BlogImg2 from '../../assets/images/blog/p2.jpg';
|
||||
import BlogImg3 from '../../assets/images/blog/p3.jpg';
|
||||
import BlogImg4 from '../../assets/images/blog/p4.jpg';
|
||||
|
||||
function BlogSideBar() {
|
||||
return (
|
||||
<div className="blog-sidebar">
|
||||
<aside className="widget widget-search">
|
||||
<form className="search-form" action="#" method="post">
|
||||
<input type="search" name="s" placeholder="Search..." />
|
||||
<button type="submit">
|
||||
<i className="fal fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</aside>
|
||||
<aside className="widget widget-categories">
|
||||
<h3 className="widget-title">Categories</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Web Design</a>
|
||||
<span>(24)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Marketing</a>
|
||||
<span>(15)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Frontend</a>
|
||||
<span>(8)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">IT & Software</a>
|
||||
<span>(13)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Photography</a>
|
||||
<span>(4)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Technology</a>
|
||||
<span>(16)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">General</a>
|
||||
<span>(12)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
<aside className="widget widget-trend-post">
|
||||
<h3 className="widget-title">Popular Posts</h3>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg1} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Using creative problem Solving</a>
|
||||
</h5>
|
||||
<span>March 10, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg2} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Fundamentals of UI Design</a>
|
||||
</h5>
|
||||
<span>Jan 14, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg3} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Making music with Other people</a>
|
||||
</h5>
|
||||
<span>April 12, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg4} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Brush strokes energize Trees in paintings</a>
|
||||
</h5>
|
||||
<span>July 4, 2020</span>
|
||||
</div>
|
||||
</aside>
|
||||
<aside className="widget">
|
||||
<h3 className="widget-title">Popular Tags</h3>
|
||||
<div className="tags">
|
||||
<a href="#">Bisy LMS</a>
|
||||
<a href="#">Design</a>
|
||||
<a href="#">General</a>
|
||||
<a href="#">Online</a>
|
||||
<a href="#">Prevention</a>
|
||||
<a href="#">Artist</a>
|
||||
<a href="#">Education</a>
|
||||
<a href="#">Motivation</a>
|
||||
<a href="#">Politico</a>
|
||||
<a href="#">Live Cases</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogSideBar;
|
||||
@@ -0,0 +1,209 @@
|
||||
import React from 'react';
|
||||
import blogImg1 from '../../assets/images/blog/1.jpg';
|
||||
import blogImg2 from '../../assets/images/blog/2.jpg';
|
||||
import blogImg3 from '../../assets/images/blog/3.jpg';
|
||||
import blogImg4 from '../../assets/images/blog/4.jpg';
|
||||
import blogImg5 from '../../assets/images/blog/5.jpg';
|
||||
import blogImg6 from '../../assets/images/blog/6.jpg';
|
||||
import blogImg7 from '../../assets/images/blog/7.jpg';
|
||||
import blogImg8 from '../../assets/images/blog/8.jpg';
|
||||
|
||||
function Blogs() {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg1} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="/news/single-news">
|
||||
Build A Full Web Chat App From Scratch.
|
||||
</a>
|
||||
</h3>
|
||||
<a className="read-more" href="single-post.html">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg2} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="/news/single-news">
|
||||
Insights on How to Improve Your Teaching.
|
||||
</a>
|
||||
</h3>
|
||||
<a className="read-more" href="/news/single-news">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg3} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="/news/single-news">
|
||||
Brush Strokes Energize Trees In Paintings
|
||||
</a>
|
||||
</h3>
|
||||
<a className="read-more" href="/news/single-news">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg4} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="/news/single-news">Learning Python for Data Analysis.</a>
|
||||
</h3>
|
||||
<a className="read-more" href="/news/single-news">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg5} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="single-post.html">
|
||||
Logotype Masterclass with Jessica Hische
|
||||
</a>
|
||||
</h3>
|
||||
<a className="read-more" href="single-post.html">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg6} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="/news/single-news">
|
||||
Build A Full Web Chat App From Scratch.
|
||||
</a>
|
||||
</h3>
|
||||
<a className="read-more" href="single-post.html">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg7} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="single-post.html">Learning Python for Data Analysis.</a>
|
||||
</h3>
|
||||
<a className="read-more" href="single-post.html">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="post-item-1">
|
||||
<img src={blogImg8} alt="" />
|
||||
<div className="b-post-details">
|
||||
<div className="bp-meta">
|
||||
<a href="#">
|
||||
<i className="fal fa-clock"></i>April 22, 2020
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fal fa-comments"></i>6 Comments
|
||||
</a>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="single-post.html">Learning Python for Data Analysis.</a>
|
||||
</h3>
|
||||
<a className="read-more" href="single-post.html">
|
||||
Read More<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="bisylms-pagination">
|
||||
<span className="current">01</span>
|
||||
<a href="#">02</a>
|
||||
<a className="next" href="#">
|
||||
next<i className="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blogs;
|
||||
@@ -0,0 +1,52 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import logo from '../../assets/images/logo-7.png';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderNews({ action }) {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-page-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
|
||||
<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 HeaderNews;
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function HeroNews({ title, breadcrumb }) {
|
||||
return (
|
||||
<>
|
||||
<div className="appie-page-title-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-page-title-item">
|
||||
<h3 className="title">{title}</h3>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol className="breadcrumb">
|
||||
{breadcrumb.map((value) => (
|
||||
<li key={Math.random()} className="breadcrumb-item">
|
||||
<Link to={value.link}>{value.title}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroNews;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import Blog from './Blog';
|
||||
import BlogSideBar from './BlogSideBar';
|
||||
import HeaderNews from './HeaderNews';
|
||||
import HeroNews from './HeroNews';
|
||||
|
||||
function SingleNews() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blog"
|
||||
breadcrumb={[
|
||||
{ link: '/', title: 'home' },
|
||||
{ link: '/news', title: 'Blogs' },
|
||||
{ link: '/news/single-news', title: 'Blog' },
|
||||
]}
|
||||
/>
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 col-md-7">
|
||||
<Blog />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-5">
|
||||
<BlogSideBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SingleNews;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import Blogs from './Blogs';
|
||||
import BlogSideBar from './BlogSideBar';
|
||||
import HeaderNews from './HeaderNews';
|
||||
import HeroNews from './HeroNews';
|
||||
|
||||
function News() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blogs"
|
||||
breadcrumb={[
|
||||
{ link: '/', title: 'home' },
|
||||
{ link: '/news', title: 'Blogs' },
|
||||
]}
|
||||
/>
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 col-md-7">
|
||||
<Blogs />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-5">
|
||||
<BlogSideBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default News;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
|
||||
function PopupVideo({ videoSrc, handler }) {
|
||||
/*
|
||||
//www.youtube.com/embed/EE7NqzhMDms?autoplay=1
|
||||
*/
|
||||
return (
|
||||
<div>
|
||||
<div onClick={handler} className="mfp-bg mfp-ready"></div>
|
||||
<div
|
||||
className="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready"
|
||||
tabIndex="-1"
|
||||
style={{ overflow: ' hidden auto' }}
|
||||
>
|
||||
<div className="mfp-container mfp-s-ready mfp-iframe-holder">
|
||||
<div className="mfp-content">
|
||||
<div className="mfp-iframe-scaler">
|
||||
<button
|
||||
onClick={handler}
|
||||
title="Close (Esc)"
|
||||
type="button"
|
||||
className="mfp-close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<iframe
|
||||
title="video"
|
||||
className="mfp-iframe"
|
||||
src={videoSrc}
|
||||
frameBorder="0"
|
||||
allowFullScreen=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mfp-preloader">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PopupVideo;
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import logo from '../../assets/images/logo-7.png';
|
||||
|
||||
function SearchModule({ value, searchToggle }) {
|
||||
return (
|
||||
<>
|
||||
<div className={`search-box ${value ? 'open' : ''}`}>
|
||||
<div className="search-header">
|
||||
<div className="container mt-60">
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<h5 className="search-title">
|
||||
<img src={logo} alt="" />
|
||||
</h5>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="search-close text-right">
|
||||
<button
|
||||
onClick={searchToggle}
|
||||
type="button"
|
||||
className="search-close-btn"
|
||||
>
|
||||
Close <span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="search-body">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="search-form">
|
||||
<form action="#">
|
||||
<input type="text" placeholder="Search for Products" />
|
||||
<button type="button">
|
||||
<i className="fa fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchModule;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/service-details-thumb.jpg';
|
||||
|
||||
function DetailsService() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-service-details-area pt-100 pb-100">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="service-details-sidebar mr-50">
|
||||
<div className="service-category-widget">
|
||||
<ul>
|
||||
<li>
|
||||
<i className="fal fa-home"></i>Fast Development
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-tag"></i>App, UX
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-user-friends"></i>20-30 Employees
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-bookmark"></i>Appie Template
|
||||
</li>
|
||||
<li>
|
||||
<i className="fal fa-globe"></i>quomodosoft.com/appie
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="service-download-widget">
|
||||
<a href="#">
|
||||
<i className="fal fa-download"></i>
|
||||
<span>Download docs</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="service-download-widget">
|
||||
<a href="#">
|
||||
<i className="fal fa-file-pdf"></i>
|
||||
<span>Characteristics</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="service-details-content">
|
||||
<div className="thumb">
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3 className="title">What we're Building</h3>
|
||||
<p>
|
||||
Tomfoolery wind up blag me old mucker chap super ruddy
|
||||
chancer bobby, vagabond it's your round cuppa cheesed off
|
||||
blower nice one at public school, Why cockup knackered pear
|
||||
shaped amongst spiffing good time he nicked it.
|
||||
</p>
|
||||
<span>
|
||||
He lost his bottle mufty spend a penny cheeky at public
|
||||
school daft get stuffed mate don't get shirty.
|
||||
</span>
|
||||
<p>
|
||||
My good sir cup of char no biggie knees up happy days
|
||||
absolutely bladdered don't get shirty with me chimney pot
|
||||
James Bond he lost his bottle me old mucker, bobby nice one
|
||||
cack codswallop what a load of rubbish Jeffrey barmy blower
|
||||
tomfoolery, crikey only a quid at public school mufty tosser
|
||||
up the duff say Richard I don't want no agro. Owt to do with
|
||||
me barney quaint jolly good off his nut vagabond pardon you
|
||||
gutted mate the little rotter excuse my French, the bee's
|
||||
knees don't get shirty with me he nicked it give us a bell
|
||||
zonked lavatory Charles gosh, Eaton the BBC is victoria
|
||||
sponge a William bog what a load of rubbish. Smashing only a
|
||||
quid cockup he lost his bottle bugger Jeffrey mufty,
|
||||
starkers blatant zonked easy peasy brolly car boot, blimey
|
||||
at public school cheeky bugger you mug david. Tomfoolery a
|
||||
load of old tosh Queen's English lemon squeezy old
|
||||
hunky-dory mush chap give us a bell bloke, chancer knackered
|
||||
cheesed off buggered tinkety tonk old fruit car boot only a
|
||||
quid spiffing good time chinwag, he lost his bottle pukka
|
||||
gutted mate naff horse play cup of tea baking cakes a
|
||||
blinding shot. bobby the wireless matie boy show.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailsService;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import logo from '../../assets/images/logo-7.png';
|
||||
import Navigation from '../Navigation';
|
||||
|
||||
function HeaderService({ action }) {
|
||||
return (
|
||||
<>
|
||||
<header className="appie-header-area appie-header-page-area appie-sticky">
|
||||
<div className="container">
|
||||
<div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
|
||||
<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 HeaderService;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import thumb from '../../assets/images/fun-fact-thumb.png';
|
||||
|
||||
function HeroService() {
|
||||
return (
|
||||
<>
|
||||
<div className="appie-page-title-area appie-page-service-title-area">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-page-title-item">
|
||||
<span>Fast Development</span>
|
||||
<h3 className="title">
|
||||
Simple but effective, <br /> effortless yet powerful.
|
||||
</h3>
|
||||
<div className="thumb">
|
||||
<img src={thumb} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeroService;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import StickyMenu from '../../lib/StickyMenu';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import ProjectHomeOne from '../HomeOne/ProjectHomeOne';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import DetailsService from './DetailsService';
|
||||
import HeaderService from './HeaderService';
|
||||
import HeroService from './HeroService';
|
||||
|
||||
function Service() {
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
});
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
<HeaderService action={drawerAction.toggle} />
|
||||
<HeroService />
|
||||
<DetailsService />
|
||||
<ProjectHomeOne />
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Service;
|
||||
Reference in New Issue
Block a user