WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added new slide section

Browse Source
This commit is contained in:
victorAnumudu
2024-02-01 00:12:36 +01:00
parent bd3d945f55
commit e13d973b30
4 changed files with 109 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/main.css
+24
View File
@@ -8594,4 +8594,28 @@ LND PAGE STYLE STARTS HERE
.banner_text h1{
font-size: 30px;
}
}
/* -----------Interface_Section-Css-Start----------------- */
/* interface wraper */
.interface_section .screen_slider {
margin-top: 35px;
min-height: 720px;
}
/* interface images */
.interface_section .owl-item .screen_frame_img img {
transform: scale(.9);
border: 2px solid #000;
border-radius: 20px;
transition: 1s all;
margin: 0 auto;
}
.interface_section .owl-item.center .screen_frame_img img {
transform: scale(1);
border: 3px solid #000;
}
src/components/HomeOne/FeaturedScreen.js
+78
View File
@@ -0,0 +1,78 @@
import React from 'react'
import OwlCarousel from 'react-owl-carousel'
import localImgLoad from '../../lib/localImgLoad'
export default function FeaturedScreen() {
const screen_slider = {
loop:true,
margin:10,
nav:false,
autoplay: true,
smartSpeed: 1500,
center: true,
dots: true,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:5
}
}
}
return (
<>
<section className="appie-service-area pt-50 pb-50 interface_section">
<div className="container-fluid">
<div className="appie-traffic-title section_title text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
<h3 className='title'>App Screens <div className='section_sub_title'></div></h3>
<p>Simplicity of use is our goal always. Here are some of our featured screens.</p>
</div>
<div className="screen_slider" >
<OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_1.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_2.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_3.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_4.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_5.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_6.png')} alt="image" />
</div>
</div>
<div className="item">
<div className="screen_frame_img">
<img src={localImgLoad('images/slider/slider_7.png')} alt="image" />
</div>
</div>
</OwlCarousel>
</div>
</div>
</section>
</>
)
}
src/components/HomeOne/HeroHomeOne.js
+5 -15
View File
@@ -3,25 +3,14 @@ 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 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';
import getConfig from './../../Config/config'
import CustomSlider from '../customSlider/CustomSlider';
import Slider1 from '../../assets/images/slider/slider_1.png'
import Slider2 from '../../assets/images/slider/slider_2.png'
import Slider3 from '../../assets/images/slider/slider_3.png'
import Slider4 from '../../assets/images/slider/slider_4.png'
import Slider5 from '../../assets/images/slider/slider_5.png'
import Slider6 from '../../assets/images/slider/slider_6.png'
import Slider7 from '../../assets/images/slider/slider_7.png'
function HeroHomeOne() {
const Sliders = [Slider1, Slider2, Slider3, Slider4, Slider5, Slider6, Slider7]
var site = getConfig()[0];
return (
<>
@@ -62,9 +51,10 @@ function HeroHomeOne() {
data-wow-duration="2000ms"
data-wow-delay="200ms"
>
{/* <img src={heroThumbOne} alt="WrenchBoard" /> */}
<div style={{ width: '350px', margin: 'auto' }}>
<CustomSlider
images={Sliders}
images={[heroThumbOne, heroThumbOne1, heroThumbOne]}
speed='5'
indicatorColor='#333'
/>
src/components/HomeOne/index.js
+2
View File
@@ -18,6 +18,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
import WrenchBoardHome from './WrenchBoardHome';
import RecentJobsOne from './RecentJobsOne';
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
import FeaturedScreen from './FeaturedScreen';
//import BlogData from './../../Services/BlogData';
function HomeOne() {
@@ -35,6 +36,7 @@ function HomeOne() {
{/*<FaqHomeOne />*/}
{/*<TrafficHomeOne />*/}
<TrafficHomeTwo />
<FeaturedScreen />
{/*<TestimonialHomeOne />*/}
{/*<TeamHomeOne />*/}
{/*<PricingHomeOne />*/}