huncholane/slroofPublic

main

slroof/components/sections/Banner1.js

113 lines3.4 KBJavaScript

RawDownloadHistory

1	import Link from "next/link";
2	import { useState } from "react";
3	import Brand1 from "./Brand1";
4
5	export default function Banner1() {
6	const [isActive, setIsActive] = useState({
7	status: false,
8	key: "",
9	});
10
11	const handleToggle = (key) => {
12	if (isActive.key === key) {
13	setIsActive({
14	status: false,
15	});
16	} else {
17	setIsActive({
18	status: true,
19	key,
20	});
21	}
22	};
23
24	return (
25	<>
26	<section className="banner-area">
27	<div
28	className="banner-shape"
29	data-background="/assets/img/banner/banner_shape.jpg"
30	/>
31	<div
32	className="banner-bg"
33	data-background="/assets/img/banner/banner_bg.jpg"
34	>
35	<div className="banner-content">
36	<h2 className="title wow fadeInDown" data-wow-delay=".2s">
37	Best Roofing Services and Consulting
38	</h2>
39	<p className="wow fadeInUp" data-wow-delay=".2s">
40	Providing top-quality roofing services and expert consulting to
41	ensure your peace of mind.
42	</p>
43	<Link
44	href="/project"
45	className="btn wow fadeInUp"
46	data-wow-delay=".4s"
47	>
48	Discover More
49	</Link>
50	</div>
51	<div className="banner-tooltip-wrap">
52	<div
53	className={
54	isActive.key == 1
55	? "tooltip-item top active"
56	: "tooltip-item top"
57	}
58	onClick={() => handleToggle(1)}
59	>
60	<div className="tooltip-btn pulse">
61	<i className="fas fa-plus" />
62	</div>
63	<div className="tooltip-content">
64	<h2 className="title">Combustion Roof Vent</h2>
65	<p>
66	Suffered alteration in some a goody form, by injected humor,
67	or into the randomized word.
68	</p>
69	</div>
70	</div>
71	<div
72	className={
73	isActive.key == 2 ? "tooltip-item active" : "tooltip-item"
74	}
75	onClick={() => handleToggle(2)}
76	>
77	<div className="tooltip-btn pulse">
78	<i className="fas fa-plus" />
79	</div>
80	<div className="tooltip-content">
81	<h2 className="title">Combustion Roof Vent</h2>
82	<p>
83	Suffered alteration in some a goody form, by injected humor,
84	or into the randomized word.
85	</p>
86	</div>
87	</div>
88	<div
89	className={
90	isActive.key == 3 ? "tooltip-item active" : "tooltip-item"
91	}
92	onClick={() => handleToggle(3)}
93	>
94	<div className="tooltip-btn pulse">
95	<i className="fas fa-plus" />
96	</div>
97	<div className="tooltip-content">
98	<h2 className="title">Combustion Roof Vent</h2>
99	<p>
100	Suffered alteration in some a goody form, by injected humor,
101	or into the randomized word.
102	</p>
103	</div>
104	</div>
105	</div>
106	</div>
107	{/* brand-area */}
108	<Brand1 />
109	{/* brand-area-end */}
110	</section>
111	</>
112	);
113	}