From cef38f100f5b97144fa5ff43370cb1fa4071f78c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 29 Jul 2024 21:47:26 +0100 Subject: [PATCH] added footer section and hero section --- app/assets/css/main.css | 2 +- app/components/AfterHero.js | 34 ++++---- app/components/FooterHomeOne.js | 32 ++++---- app/components/HeroHomeOne.js | 28 ++++--- app/components/HomeOne.js | 9 +- app/components/customSlider/CustomSlider.js | 91 +++++++++++++++++++++ app/page.tsx | 2 +- 7 files changed, 146 insertions(+), 52 deletions(-) create mode 100644 app/components/customSlider/CustomSlider.js diff --git a/app/assets/css/main.css b/app/assets/css/main.css index eb30ad3..8b9ad18 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -6729,7 +6729,7 @@ blockquote cite { } .appie-about-8-area { - background-image: url(../images/background-bg.jpg); + /* background-image: url(../images/background-bg.jpg); */ background-size: cover; background-position: center; background-repeat: no-repeat; diff --git a/app/components/AfterHero.js b/app/components/AfterHero.js index 7951a47..454a592 100644 --- a/app/components/AfterHero.js +++ b/app/components/AfterHero.js @@ -1,12 +1,13 @@ import React from 'react'; -import thumb4 from '../assets/images/about-thumb-4.png'; import thumb5 from '../assets/images/about-thumb-5.png'; import cardImg from '../assets/images/home/card-home-01.png' +import bg from '../assets/images/background-bg.jpg' +import Image from 'next/image'; function AfterHero() { return ( <> -
+
@@ -37,27 +38,17 @@ function AfterHero() {
- Child Card +
- {/*
-

- Assign Faster with
- wrenchAgent -

-

- Ask our ❛❛wrenchAgent❜❜ Generative AI to assist -

- - Learn More - -
- -
-
*/}

@@ -75,7 +66,12 @@ function AfterHero() {

- +
diff --git a/app/components/FooterHomeOne.js b/app/components/FooterHomeOne.js index dac7537..b1bd709 100644 --- a/app/components/FooterHomeOne.js +++ b/app/components/FooterHomeOne.js @@ -1,6 +1,5 @@ -"use client" import React, { useMemo } from 'react'; -import { Link } from 'react-router-dom'; +import Image from 'next/image'; import logo from '../assets/images/wrenchboard-logo-text.png'; import getConfig from '../../Config/config'; // './../../Config/config' @@ -17,19 +16,24 @@ function FooterHomeOne({ className }) {

{`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}

- + Read More - +
diff --git a/app/components/HeroHomeOne.js b/app/components/HeroHomeOne.js index 16166f6..661e5fc 100644 --- a/app/components/HeroHomeOne.js +++ b/app/components/HeroHomeOne.js @@ -1,20 +1,17 @@ import React from 'react'; -import heroThumbOne from '../../assets/images/app-thumb-1.png'; -import heroThumbTwo from '../../assets/images/app-pic.png'; -import shapeTwo from '../../assets/images/shape/shape-2.png'; +import Image from 'next/image' -import getConfig from './../../Config/config' -import CustomSlider from '../customSlider/CustomSlider'; +import heroThumbTwo from '../assets/images/app-pic.png'; -// import SliderOne from '../../assets/images/home/app-slide-home-0.png' +import CustomSlider from './customSlider/CustomSlider' -import SliderOne from '../../assets/images/home/top_sliders/slide_1.png' -import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png' -import SliderThree from '../../assets/images/home/top_sliders/slide_3.png' -import SliderFour from '../../assets/images/home/top_sliders/slide_4.png' -import SliderFive from '../../assets/images/home/top_sliders/slide_5.png' -import SliderCenter from '../../assets/images/home/top_sliders/slide_33.png' +import SliderOne from '../assets/images/home/top_sliders/slide_1.png' +import SliderTwo from '../assets/images/home/top_sliders/slide_2.png' +import SliderThree from '../assets/images/home/top_sliders/slide_3.png' +import SliderFour from '../assets/images/home/top_sliders/slide_4.png' +import SliderFive from '../assets/images/home/top_sliders/slide_5.png' +import SliderCenter from '../assets/images/home/top_sliders/slide_33.png' function HeroHomeOne() { @@ -76,7 +73,12 @@ function HeroHomeOne() { data-wow-duration="2000ms" data-wow-delay="600ms" > - + Image
diff --git a/app/components/HomeOne.js b/app/components/HomeOne.js index 17e669d..cc4e34a 100644 --- a/app/components/HomeOne.js +++ b/app/components/HomeOne.js @@ -4,8 +4,8 @@ import useToggle from '../Hooks/useToggle'; import Drawer from '../Mobile/Drawer'; // import BlogHomeOne from './BlogHomeOne'; // import FeaturesHomeOne from './FeaturesHomeOne'; -// import FooterHomeOne from './FooterHomeOne'; -// import HeroHomeOne from './HeroHomeOne'; +import FooterHomeOne from './FooterHomeOne'; +import HeroHomeOne from './HeroHomeOne'; // import HomeOneHeader from './HomeOneHeader'; import ServicesHomeOne from './ServicesHomeOne'; // import TrafficHomeOne from './TrafficHomeOne'; @@ -24,11 +24,12 @@ function HomeOne() { return ( <> {/* */} -
THIS IS HOME
+
THIS IS HOME
+ - {/* */} + ); diff --git a/app/components/customSlider/CustomSlider.js b/app/components/customSlider/CustomSlider.js new file mode 100644 index 0000000..3996e78 --- /dev/null +++ b/app/components/customSlider/CustomSlider.js @@ -0,0 +1,91 @@ +"use client" +import Image from "next/image"; +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 ( +
+
+ {images.map((image, index) => ( + Screen Images + ))} +
+
+ {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; diff --git a/app/page.tsx b/app/page.tsx index 49e11d6..51c4fe0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -12,7 +12,7 @@ import './assets/css/style.css'; export default function Home() { return ( -
+
);