text: import React from "react";
  import Link from "next/link";
  
  // components
  
  import Navbar from "components/Navbars/IndexNavbarAuth.js";
  import Footer from "components/Footers/Footer.js";
  
  import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
  
  import { SRLWrapper } from "simple-react-lightbox";
  
  import Hubspot from "components/Custom/hubspot"
  
  
  
  export default function Landing() {
    return (
      <>
        <Navbar />
        <main>
          <div className="relative mt-10 flex content-center items-center justify-center space-y-10">
            
            <div
              className="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-16"
              style={{ transform: "translateZ(0)" }}
            >
              <svg
                className="absolute bottom-0 overflow-hidden"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                
              </svg>
              
            </div>
          </div>
  
          
  
          
          <SRLWrapper>
          <section className="pt-20 py-20">
            <div className="container mx-auto px-4 ">
              <div className="flex flex-wrap justify-center text-center my-8">
                <div className="w-full lg:w-6/12 px-4">
                  <h2 className="text-4xl font-semibold">Showcase</h2>
                  <p className="text-lg leading-relaxed m-4 text-gray-600">
                    According to the National Oceanic and Atmospheric
                    Administration, Ted, Scambos, NSIDClead scentist, puts the
                    potentially record maximum.
                  </p>
                </div>
              </div> 
  
              <div className="flex flex-wrap">
               <div className="w-full h-4/6 md:w-full h-4/6 ml-auto mr-auto  px-4">
               <ReactCompareSlider
                    itemOne={
                      <ReactCompareSliderImage
                        src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1500&q=80"
                        style={{ filter: "grayscale(1)" }}
                        alt="one"
                      />
                    }
                    itemTwo={
                      <ReactCompareSliderImage
                        src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1500&q=80"
                        alt="two"
                      />
                    }
                    
                    style={{
                      display: "flex",
                      margin:"10px",
                      position: "relative",
                      backgroundPosition:"center , center",
                      backgroundSize:"cover",
                      boxShadow:"0px 10px 25px 0px rgba(0, 0, 0, 0.3)",
                      borderRadius:".25rem",
                      height:"80%"
                    
                    }}
                />
                </div>
              </div>
  
  
              <div className="w-full h-4/6 md:w-full h-4/6 ml-auto mr-auto px-4">
                
                
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage1"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
               
  
                
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage2"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
                
              </div>
  
              <div className="flex flex-wrap items-center my-6 ">
                 <div className="w-full md:w-6/12 px-4 mr-auto ml-auto">
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage3"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
                </div>
  
                <div className="w-full md:w-6/12 px-4 mr-auto ml-auto">
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage4"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
                </div>
              </div>
              <div className="flex flex-wrap items-center  my-6">
               <div className="w-full md:w-6/12 px-4 mr-auto ml-auto ">
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage5"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
                </div>
  
                <div className="w-full md:w-6/12 px-4 mr-auto ml-auto ">
                  <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded-lg bg-gray-800">
                    <img
                      alt="lbimage6"
                      src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
                      className="w-full align-middle rounded-lg"
                    />
                    
                  </div>
                </div>
              </div>
            
            
            
          
              
            </div>
          </section>
  
          </SRLWrapper>
           {/* <section className="   relative block bg-gray-900">
            <div
              className="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
              style={{ transform: "translateZ(0)" }}
            >
              <svg
                className="absolute bottom-0 overflow-hidden"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="text-gray-900 fill-current"
                  points="2560 0 2560 100 0 100"
                ></polygon>
              </svg>
            </div>
  
            
          </section>
          <section className="relative block   bg-gray-900">
          <div
              className="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
              style={{ transform: "translateZ(0)" }}
            >
              <svg
                className="absolute bottom-0 overflow-hidden"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="text-gray-900 fill-current"
                  points="2560 0 2560 100 0 100"
                ></polygon>
              </svg>
            </div>
            <div className="container py-16 mx-auto px-4 ">
              <div className="flex flex-wrap justify-center ">
                
                <div className="w-full lg:w-6/12 px-4 ">
  
                  <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300">
                    <div className="flex-auto p-5 lg:p-5">
                      <h4 className="text-2xl font-semibold">
                        Want us to keep you updated ?
                      </h4>
                      <p className="leading-relaxed mt-1 mb-4 text-gray-600">
                        Please provide us your email to get early access.
                      </p>
                      
  
                      <div className="relative w-full mb-3">
                        <label
                          className="block uppercase text-gray-700 text-xs font-bold mb-2"
                          htmlFor="email"
                        >
                          Email
                        </label>
                        <input
                          type="email"
                          className="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
                          placeholder="Email"
                        />
                      </div>
  
                      <div className="text-center mt-6">
                        <button
                          className="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                          type="button"
                        >
                          Send Message
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section> */}
          <Hubspot/>
  
        </main>
        <Footer />
      </>
    );
  }
  