first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,84 @@
+'use client'
+
+import React, { useState } from "react";
+import Slider from "react-slick";
+import Image from "next/image";
+export default function SlickAsNav() {
+  const [nav1, setNav1] = useState();
+  const [nav2, setNav2] = useState();
+
+  var settings = {
+    slidesToShow: 3,
+    responsive: [
+      {
+        breakpoint: 991,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 420,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Slider
+        className="slick-nav-none"
+        asNavFor={nav2}
+        ref={(slider1) => setNav1(slider1)}
+        autoplay={true}
+      >
+        <div className="item">
+          <Image width={1174} height={663} style={{height:'fit-content'}}     src="/images/assets/feature-img-12.png" alt="feature" />
+        </div>
+        <div className="item">
+          <Image width={1174} height={663} style={{height:'fit-content'}}     src="/images/assets/feature-img-12.png" alt="feature" />
+        </div>
+        <div className="item">
+          <Image width={1174} height={663} style={{height:'fit-content'}}     src="/images/assets/feature-img-12.png" alt="feature" />
+        </div>
+      </Slider>
+      {/* Top Image slide */}
+
+      <Slider
+        {...settings}
+        asNavFor={nav1}
+        ref={(slider2) => setNav2(slider2)}
+        swipeToSlide={true}
+        focusOnSelect={true}
+        className="slick-nav-custom"
+      >
+        <div className="block-style-eleven mt-40">
+          <div className="num font-rubik">01</div>
+          <div className="title">Personal Notes</div>
+          <p className="font-rubik">
+            A place to think and track ideas for you and your team
+          </p>
+        </div>
+        {/* /.block-style-eleven */}
+        <div className="block-style-eleven mt-40">
+          <div className="num font-rubik">02</div>
+          <div className="title">Knowledge Base</div>
+          <p className="font-rubik">
+            A home for your team, best practices and thoughts.
+          </p>
+        </div>
+        {/* /.block-style-eleven */}
+        <div className="block-style-eleven mt-40">
+          <div className="num font-rubik">03</div>
+          <div className="title">Products Doc</div>
+          <p className="font-rubik">
+            Beautiful docs for your APIs, Products, FAQs, & User Guides,
+          </p>
+        </div>
+        {/* /.block-style-eleven */}
+      </Slider>
+      {/* Bottom text slide */}
+    </>
+  );
+}