diff --git a/public/index.html b/public/index.html index d7db067..be5e2fd 100755 --- a/public/index.html +++ b/public/index.html @@ -2,20 +2,26 @@ - - - - + + + + + - - - - + + + + + + - - - WrenchBoard - - - - - - +
- - + + + diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 67ca1f5..5afa7cf 100755 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -1,26 +1,3 @@ -/*----------------------------------------------------------------------------------- - - Template Name: Sample - Corporate Business Bootstrap4 HTML5 Template - Template URI: site.com - Description: Sample - Corporate Business Bootstrap4 HTML5 Template - Author: MD THAHERIL ISLAM - Author URI: site.com - Version: 1.0 - ------------------------------------------------------------------------------------ - - CSS INDEX - =================== - - 01. Theme default CSS - 02. Header - 03. Hero - 04. Footer - ------------------------------------------------------------------------------------*/ -/*=========================== - 1. COMMON css -===========================*/ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); body { font-family: "Roboto", sans-serif; @@ -38,7 +15,6 @@ body[data-theme="light"] { --logo: url("../images/wrenchboard.png") no-repeat; } - /* ==========================================vue */ * { margin: 0; @@ -2314,6 +2290,18 @@ p { display: none; } } + +@media screen and (min-width: 688px) and (max-width: 1031px) { + /* Your CSS styles for this viewport size */ + .appie-blog-item{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + + .black{ color:#000; } diff --git a/src/components/AboutUs/HeaderAbout.js b/src/components/AboutUs/HeaderAbout.js index 493a82f..e5dd0a3 100644 --- a/src/components/AboutUs/HeaderAbout.js +++ b/src/components/AboutUs/HeaderAbout.js @@ -19,7 +19,7 @@ function HeaderAbout({ action }) {
- +
diff --git a/src/components/HomeOne/FooterHomeOne.js b/src/components/HomeOne/FooterHomeOne.js index bc842cd..913dcc0 100644 --- a/src/components/HomeOne/FooterHomeOne.js +++ b/src/components/HomeOne/FooterHomeOne.js @@ -1,10 +1,10 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Link } from 'react-router-dom'; import logo from '../../assets/images/wrenchboard-logo-text.png'; import getConfig from './../../Config/config' function FooterHomeOne({ className }) { - var site = getConfig()[0]; + var site = useMemo(() => getConfig()[0], []);; let newDate = new Date().getFullYear() return ( @@ -16,7 +16,7 @@ function FooterHomeOne({ className }) {
- WrenchBoard + WrenchBoard

diff --git a/src/components/HomeOne/HomeOneHeader.js b/src/components/HomeOne/HomeOneHeader.js index c240570..d407a4c 100644 --- a/src/components/HomeOne/HomeOneHeader.js +++ b/src/components/HomeOne/HomeOneHeader.js @@ -5,48 +5,48 @@ import Navigation from '../Navigation'; import getConfig from './../../Config/config' function HomeOneHeader({ action }) { - var site = getConfig()[0]; - useEffect(() => { - StickyMenu(); - }, []); - return ( -

-
-
-
-
-
- - WrenchBoard - -
-
-
-
- -
-
-
-
- - Login - - - Get Started - -
action(e)} - className="toggle-btn ml-30 canvas_open d-lg-none d-block" - > - -
-
-
-
-
+ var site = getConfig()[0]; + useEffect(() => { + StickyMenu(); + }, []); + return ( +
+
+
+
+
+
+ + WrenchBoard + +
-
- ); +
+
+ +
+
+
+
+ + Login + + + Get Started + +
action(e)} + className="toggle-btn ml-30 canvas_open d-lg-none d-block" + > + +
+
+
+
+
+ + + ); } export default HomeOneHeader; diff --git a/src/components/HomeOne/ServicesHomeOne.js b/src/components/HomeOne/ServicesHomeOne.js index 43d31f7..a9fdba0 100644 --- a/src/components/HomeOne/ServicesHomeOne.js +++ b/src/components/HomeOne/ServicesHomeOne.js @@ -1,8 +1,8 @@ -import React from 'react'; -import IconOne from '../../assets/images/icon/account_login.png'; -import IconTwo from '../../assets/images/icon/task.png'; -import IconThree from '../../assets/images/icon/target.png'; -import IconFour from '../../assets/images/icon/reward.png'; +import React from "react"; +import IconOne from "../../assets/images/icon/account_login.png"; +import IconTwo from "../../assets/images/icon/task.png"; +import IconThree from "../../assets/images/icon/target.png"; +import IconFour from "../../assets/images/icon/reward.png"; function ServiceItem({ icon, title, description, index }) { return ( @@ -13,7 +13,7 @@ function ServiceItem({ icon, title, description, index }) { style={{ cursor: "default" }} >
- {title} + {title}

{title}

{description}

@@ -26,28 +26,31 @@ function ServicesHomeOne({ className }) { const serviceItems = [ { icon: IconOne, - title: 'Free Account', - description: 'Join WrenchBoard. Get your free account.', + title: "Free Account", + description: "Join WrenchBoard. Get your free account.", }, { icon: IconTwo, - title: 'Set Goals', - description: 'Suggest or find what you want to get rewarded for.', + title: "Set Goals", + description: "Suggest or find what you want to get rewarded for.", }, { icon: IconThree, - title: 'Complete', - description: 'Complete task, and notify assigner with ease.', + title: "Complete", + description: "Complete task, and notify assigner with ease.", }, { icon: IconFour, - title: 'Reward', - description: 'Task completed. Find your reward.', + title: "Reward", + description: "Task completed. Find your reward.", }, ]; return ( -
+
diff --git a/src/components/HomeOne/TrafficHomeTwo.js b/src/components/HomeOne/TrafficHomeTwo.js index 05cbde8..61e3462 100644 --- a/src/components/HomeOne/TrafficHomeTwo.js +++ b/src/components/HomeOne/TrafficHomeTwo.js @@ -1,10 +1,8 @@ -import React from 'react'; -//import thumb from '../../assets/images/PerformingTaskNew.png'; -import thumb from '../../assets/images/PerformingTask2.jpg'; -import getConfig from './../../Config/config' +import React from "react"; +import thumb from "../../assets/images/PerformingTask2.jpg"; +import getConfig from "./../../Config/config"; function TrafficHomeOne() { - var site = getConfig()[0]; return (
@@ -31,39 +29,26 @@ function TrafficHomeOne() {
))} - {/*
- -
*/}
-
-
- +
+
+
- {/*
- -
*/}
); } diff --git a/src/components/News/Blogs.js b/src/components/News/Blogs.js index 7d6abc0..f72761a 100644 --- a/src/components/News/Blogs.js +++ b/src/components/News/Blogs.js @@ -48,7 +48,7 @@ function Blogs({ pathname }) { data-wow-delay="200ms" > - {blog.post_title} + {blog.post_title}
diff --git a/src/components/StickyHeader/StickyHeaderNav.js b/src/components/StickyHeader/StickyHeaderNav.js index 2afcb28..d396921 100644 --- a/src/components/StickyHeader/StickyHeaderNav.js +++ b/src/components/StickyHeader/StickyHeaderNav.js @@ -16,7 +16,7 @@ function StickyHeaderNav({action}) { diff --git a/src/components/customSlider/CustomSlider.js b/src/components/customSlider/CustomSlider.js index 9796b26..007187e 100644 --- a/src/components/customSlider/CustomSlider.js +++ b/src/components/customSlider/CustomSlider.js @@ -1,178 +1,87 @@ -// import React, { useEffect, useState, useRef } from 'react' +import React, { useEffect, useState } from "react"; -// function CustomSlider({images, speed, indicatorColor, indicatorClass}) { -// const imageElement = useRef() -// let [sliderCount, setSliderCount] = useState(0) +function CustomSlider({ images, speed, indicatorColor, indicatorClass }) { + let [sliderCount, setSliderCount] = useState(0); -// const sliderStart = (count) => { -// imageElement.current.classList.add('sliding-images') -// setTimeout(()=>{ -// imageElement.current.classList.remove('sliding-images') -// }, 1000) -// 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 ( -//
-// image -//
-// {images.map((image, index)=>( -//
sliderStart(index)} -// className={`custom_indicator ${indicatorClass}`} -// style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}} -// >
-// ))} -//
-//
-// ) -// } - -// export default CustomSlider - -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) + 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) + useEffect(() => { + const sliderInterval = setInterval(() => { + sliderStart(); + }, speed * 1000); return () => { - clearInterval(sliderInterval) - } - },[sliderCount]) + clearInterval(sliderInterval); + }; + }, [sliderCount]); return ( -
-
- {images.map((image, index)=>( - image - ))} -
-
- {images.map((image, index)=>( -
sliderStart(index)} - className={`custom_indicator ${indicatorClass}`} - style={{backgroundColor:`${sliderCount == index ? `${indicatorColor}` : ''}`, width:'15px', height: '15px', borderRadius: '999px', border: `1px solid ${indicatorColor}`, cursor:'pointer'}} - >
- ))} -
+
+
+ {images.map((image, index) => ( + image + ))} +
+
+ {images.map((image, index) => ( +
sliderStart(index)} + className={`custom_indicator ${indicatorClass}`} + style={{ + backgroundColor: `${ + sliderCount == index ? `${indicatorColor}` : "" + }`, + width: "15px", + height: "15px", + borderRadius: "999px", + border: `1px solid ${indicatorColor}`, + cursor: "pointer", + }} + >
+ ))} +
- ) + ); } -export default CustomSlider - -// import React, { useEffect, useState } from 'react'; - -// function CustomSlider({ images, speed, indicatorColor, indicatorClass }) { -// const [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, speed]); - -// console.log("This is slider count", sliderCount) - -// return ( -//
-//
-// {images.map((image, index) => ( -// image -// ))} -//
-//
-// {images.map((image, index) => ( -//
sliderStart(index)} -// className={`custom_indicator ${indicatorClass}`} -// style={{ -// backgroundColor: sliderCount === index ? `${indicatorColor}` : '', -// width: '15px', -// height: '15px', -// borderRadius: '999px', -// border: `1px solid ${indicatorColor}`, -// cursor: 'pointer', -// }} -// >
-// ))} -//
-//
-// ); -// } - -// export default CustomSlider; - +export default CustomSlider;