added details to app download page
This commit was merged in pull request #10.
This commit is contained in:
@@ -899,6 +899,11 @@ p {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.appie-title .earn-rewards {
|
||||
background-color: #f54747!important;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.header-nav-box .appie-btn-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -117,6 +117,27 @@ font-size: 15px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.app-download.options{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.app-download.options .main-btn {
|
||||
color: #0e1133;
|
||||
background-color: #fff;
|
||||
border: 3px solid #3EAFCC;
|
||||
padding: 2px 112px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.app-download.appie-hero-content h5 {
|
||||
color: #51B5D0;
|
||||
/* border-color: #fff; */
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 300px) and (max-width: 1024px) {
|
||||
.testimonial-about-slider-active .testimonial-box {
|
||||
box-shadow: none;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -1,9 +1,11 @@
|
||||
import React from 'react'
|
||||
import HomeOneHeader from '../HomeOne/HomeOneHeader';
|
||||
import AppDownloadDetails from './AppDownloadDetails';
|
||||
|
||||
export default function AppDownload() {
|
||||
return (
|
||||
<div>
|
||||
<div className='vh-100 d-flex justify-content-center align-items-center'>App Download Content Here</div>
|
||||
</div>
|
||||
<>
|
||||
<HomeOneHeader showLogoOnly={true} />
|
||||
<AppDownloadDetails />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react'
|
||||
import heroThumbOne from '../../assets/images/app-thumb-1.png';
|
||||
import heroThumbOne1 from '../../assets/images/app-thumb-2.png';
|
||||
|
||||
import heroThumbTwo from '../../assets/images/app-pic.png';
|
||||
import CustomSlider from '../customSlider/CustomSlider';
|
||||
|
||||
const AppDownloadDetails = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-hero-area">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="app-download appie-hero-content appie-hero-content-6">
|
||||
<h5 className='title'>Download from</h5>
|
||||
<div className='flex app-download options'>
|
||||
<ul>
|
||||
<li className=''>
|
||||
<a className="item-2" target='_blank' href={process.env.REACT_APP_APPLE_APP}>
|
||||
<i className="fab fa-apple"></i>
|
||||
<span>
|
||||
Available on the <span>App Store</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className=''>
|
||||
<a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
|
||||
<i className="fab fa-google-play"></i>
|
||||
<span>
|
||||
Available on the <span>Google Play</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h5>OR</h5>
|
||||
<a target='_blank' href={process.env.REACT_APP_DASH_URL_SIGNUP} className='main-btn'>
|
||||
Register Online
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1 className="appie-title"> Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span> </h1>
|
||||
<p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a tasks portfolio and find others to perform tasks for you.</p>
|
||||
</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="WrenchBoard" /> */}
|
||||
<div style={{ width: '350px', margin: 'auto' }}>
|
||||
<CustomSlider
|
||||
images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
|
||||
speed='5'
|
||||
indicatorColor='#333'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="thumb-2 wow animated fadeInRight"
|
||||
data-wow-duration="2000ms"
|
||||
data-wow-delay="600ms"
|
||||
>
|
||||
<img src={heroThumbTwo} alt="" width="100%" height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppDownloadDetails
|
||||
@@ -4,7 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
|
||||
import Navigation from '../Navigation';
|
||||
import getConfig from './../../Config/config'
|
||||
|
||||
function HomeOneHeader({ action }) {
|
||||
function HomeOneHeader({ action, showLogoOnly = false }) {
|
||||
var site = getConfig()[0];
|
||||
useEffect(() => {
|
||||
StickyMenu();
|
||||
@@ -21,27 +21,29 @@ function HomeOneHeader({ action }) {
|
||||
</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={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
<i className="fal fa-user" /> Login
|
||||
</a>
|
||||
<a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
|
||||
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" />
|
||||
{!showLogoOnly && <>
|
||||
<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>
|
||||
<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={process.env.REACT_APP_DASH_URL_LOGIN}>
|
||||
<i className="fal fa-user" /> Login
|
||||
</a>
|
||||
<a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
|
||||
let [sliderCount, setSliderCount] = useState(0);
|
||||
|
||||
const sliderStart = (count) => {
|
||||
if (count + 1 && typeof count == "number") {
|
||||
return setSliderCount(count);
|
||||
}
|
||||
if (sliderCount >= images.length - 1) {
|
||||
return setSliderCount(0);
|
||||
}
|
||||
setSliderCount((prev) => prev + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const sliderInterval = setInterval(() => {
|
||||
sliderStart();
|
||||
}, speed * 1000);
|
||||
return () => {
|
||||
clearInterval(sliderInterval);
|
||||
};
|
||||
}, [sliderCount]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className=""
|
||||
style={{
|
||||
width: "100%",
|
||||
margin: "auto",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div className="" style={{ width: "100%", display: "flex" }}>
|
||||
{images.map((image, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={image}
|
||||
alt="image"
|
||||
style={{
|
||||
width: "100%",
|
||||
minWidth: "100%",
|
||||
maxHeight: "695px",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
transition: ".9s",
|
||||
right: `${
|
||||
sliderCount == index ? sliderCount * 100 + "%" : "-100%"
|
||||
}`,
|
||||
opacity: `${sliderCount == index ? "1" : "0"}`,
|
||||
}}
|
||||
// style={{minWidth:'100%', height:'auto', position:'relative', transition:'.9s', right:`${sliderCount*100}%`, opacity:`${sliderCount == index ? '1':'0'}`}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="custom_indicators"
|
||||
style={{
|
||||
margin: "10px auto",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{images.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => sliderStart(index)}
|
||||
className={`custom_indicator ${indicatorClass}`}
|
||||
style={{
|
||||
backgroundColor: `${
|
||||
sliderCount == index ? `${indicatorColor}` : ""
|
||||
}`,
|
||||
width: "15px",
|
||||
height: "15px",
|
||||
borderRadius: "999px",
|
||||
border: `1px solid ${indicatorColor}`,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomSlider;
|
||||
Reference in New Issue
Block a user