added footer section and hero section

2024-07-29 21:47:26 +01:00
parent fa177964f5
commit cef38f100f
7 changed files with 146 additions and 52 deletions
@@ -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 (
+    <div
+      className=""
+      style={{
+        width: "100%",
+        margin: "auto",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div className="" style={{ width: "100%", display: "flex" }}>
+        {images.map((image, index) => (
+          <Image
+            key={index}
+            src={image}
+            width={'100%'}
+            height={'100%'}
+            alt="Screen Images"
+            style={{
+                width: "100%",
+                minWidth: "100%",
+                maxHeight: "695px",
+                height: "100%",
+                position: "relative",
+                transition: ".9s",
+                right: `${
+                  sliderCount == index ? sliderCount * 100 + "%" : "-100%"
+                }`,
+                opacity: `${sliderCount == index ? "1" : "0"}`,
+              }}
+            />
+        ))}
+      </div>
+      <div
+        className="custom_indicators"
+        style={{
+          margin: "10px auto",
+          display: "flex",
+          gap: "10px",
+          justifyContent: "center",
+        }}
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            onClick={() => sliderStart(index)}
+            className={`custom_indicator ${indicatorClass}`}
+            style={{
+              backgroundColor: `${
+                sliderCount == index ? `${indicatorColor}` : ""
+              }`,
+              width: "15px",
+              height: "15px",
+              borderRadius: "999px",
+              border: `1px solid ${indicatorColor}`,
+              cursor: "pointer",
+            }}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CustomSlider;