irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Project1.js
109 lines7.0 KBJavaScript
RawDownloadHistory
1import Link from "next/link"
2import { useState } from 'react'
3
4export default function Project1() {
5 const [isActive, setIsActive] = useState({
6 status: false,
7 key: "",
8 })
9
10 const handleToggle = (key) => {
11 if (isActive.key === key) {
12 setIsActive({
13 status: false,
14 })
15 } else {
16 setIsActive({
17 status: true,
18 key,
19 })
20 }
21 }
22 return (
23 <>
24 <section className="project-area project-bg" data-background="/assets/img/bg/project_bg.jpg">
25 <div className="container">
26 <div className="row align-items-end">
27 <div className="col-lg-8">
28 <div className="section-title white-title mb-50 tg-heading-subheading animation-style3">
29 <span className="sub-title tg-element-title">Latest Projects</span>
30 <h2 className="title tg-element-title">Explore Our Latest Projects</h2>
31 </div>
32 </div>
33 <div className="col-lg-4">
34 <div className="view-all-btn text-end mb-50">
35 <Link href="/project" className="btn">View All Projects</Link>
36 </div>
37 </div>
38 </div>
39 <div className="row">
40 <div className="col-lg-12">
41 <div className="project-item wow fadeInUp" data-wow-delay=".2s" onMouseEnter={() => handleToggle(1)} onMouseLeave={() => handleToggle(1)}>
42 <div className="project-thumb" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
43 <img src="/assets/img/project/project_img01.jpg" alt="" />
44 </div>
45 <div className="project-content">
46 <div className="left-side-content">
47 <span>Projects V1</span>
48 <h2 className="title"><Link href="/project-details">Low Rise Building and Repair Roof</Link></h2>
49 <p style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>There are many variations of passages of Lorem Ipsum ava have suffered alteration in some form, by injected humour which don't look even slightly believable.</p>
50
51 </div>
52 <div className="project-link">
53 <Link href="/project-details"><i className="fas fa-arrow-right" /></Link>
54 </div>
55 </div>
56 </div>
57 <div className="project-item wow fadeInUp" data-wow-delay=".3s" onMouseEnter={() => handleToggle(2)} onMouseLeave={() => handleToggle(2)}>
58 <div className="project-thumb" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
59 <img src="/assets/img/project/project_img02.jpg" alt="" />
60 </div>
61 <div className="project-content">
62 <div className="left-side-content">
63 <span>Projects V2</span>
64 <h2 className="title"><Link href="/project-details">The World Class Roofing</Link></h2>
65 <p style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>There are many variations of passages of Lorem Ipsum ava have suffered alteration in some form, by injected humour which don't look even slightly believable.</p>
66 </div>
67 <div className="project-link">
68 <Link href="/project-details"><i className="fas fa-arrow-right" /></Link>
69 </div>
70 </div>
71 </div>
72 <div className="project-item wow fadeInUp" data-wow-delay=".4s" onMouseEnter={() => handleToggle(3)} onMouseLeave={() => handleToggle(3)}>
73 <div className="project-thumb" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
74 <img src="/assets/img/project/project_img03.jpg" alt="" />
75 </div>
76 <div className="project-content">
77 <div className="left-side-content">
78 <span>Projects V3</span>
79 <h2 className="title"><Link href="/project-details">Quality Control System Roofing</Link></h2>
80 <p style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>There are many variations of passages of Lorem Ipsum ava have suffered alteration in some form, by injected humour which don't look even slightly believable.</p>
81 </div>
82 <div className="project-link">
83 <Link href="/project-details"><i className="fas fa-arrow-right" /></Link>
84 </div>
85 </div>
86 </div>
87 <div className="project-item wow fadeInUp" data-wow-delay=".5s" onMouseEnter={() => handleToggle(4)} onMouseLeave={() => handleToggle(4)}>
88 <div className="project-thumb" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
89 <img src="/assets/img/project/project_img04.jpg" alt="" />
90 </div>
91 <div className="project-content">
92 <div className="left-side-content">
93 <span>Projects V3</span>
94 <h2 className="title"><Link href="/project-details">Low Rise Building and Repair Roof</Link></h2>
95 <p style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>There are many variations of passages of Lorem Ipsum ava have suffered alteration in some form, by injected humour which don't look even slightly believable.</p>
96 </div>
97 <div className="project-link">
98 <Link href="/project-details"><i className="fas fa-arrow-right" /></Link>
99 </div>
100 </div>
101 </div>
102 </div>
103 </div>
104 </div>
105 </section>
106
107 </>
108 )
109}