import { useEffect, useState, useRef } from "react";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from "swiper";
import 'swiper/css';
import "swiper/css/pagination";
import Link from "next/link";
import { useDispatch } from "react-redux";
import { setPageHeading } from "../src/redux/actions/commonAction";
import { common } from "../src/helper/Common";

const Home = () => {

   const headerContainer = useRef();
   const headerNav = useRef();


   const [openToggleBar, setOpenToggleBar] = useState(false)
   const [landTemp, setLandTemp] = useState([
      { id: 1, img: './images/html_template_preview/theme1.jpg' },
      { id: 2, img: './images/html_template_preview/theme2.jpg' },
      { id: 3, img: './images/html_template_preview/theme3.jpg' },
      { id: 4, img: './images/html_template_preview/theme4.jpg' },
      { id: 5, img: './images/html_template_preview/theme5.jpg' },
      { id: 6, img: './images/html_template_preview/theme6.jpg' },
      { id: 7, img: './images/html_template_preview/theme7.jpg' },
      { id: 8, img: './images/html_template_preview/theme8.jpg' },
      { id: 9, img: './images/html_template_preview/theme9.jpg' },
      { id: 10, img: './images/html_template_preview/theme10.jpg' },
      { id: 11, img: './images/html_template_preview/theme11.jpg' },
      { id: 12, img: './images/html_template_preview/theme12.jpg' },
      { id: 13, img: './images/html_template_preview/theme13.jpg' },
      { id: 14, img: './images/html_template_preview/theme14.jpg' },
      { id: 15, img: './images/html_template_preview/theme15.jpg' },
      { id: 16, img: './images/html_template_preview/theme16.jpg' },
      { id: 17, img: './images/html_template_preview/theme17.jpg' },
      { id: 18, img: './images/html_template_preview/theme18.jpg' },
      { id: 19, img: './images/html_template_preview/theme19.jpg' },
      { id: 20, img: './images/html_template_preview/theme20.jpg' },
   ]
   );

   let dispatch = useDispatch();
   useEffect(() => {
      dispatch(setPageHeading({
         pageHeading: "PixaURL",
         title: "PixaURL - Run Your Own SaaS Platform for Building Bio URL , Mini Sites, Digital Cards",
      }));
   }, [dispatch]);

   /* menu toggle outside click start */

   /* menu toggle outside click start */
   useEffect(() => {

      function handleClickOutside(event) {
         if (headerNav.current && !headerNav.current.contains(event.target)) {
            headerContainer.current.classList.remove('ddd');
         }
      }
      document.addEventListener("mousedown", handleClickOutside);
      return () => {
         document.removeEventListener("mousedown", handleClickOutside);
      };
   }, [headerNav]);


   /* menu toggle outside click end */
   const navToggle = () => {
      headerContainer.current.classList.toggle('open');

   }

   const openToggle = () => {
      console.log('fwerfwfwef');
      setOpenToggleBar(!openToggleBar)
   }
   const [isEnabled, setIsEnabled] = useState(false)

   const checkPlanFeature = () => {
      common.getAPI(
         {
            method: "POST",
            url: 'auth/checkPlanFeature',
            data: {}
         },
         (resp) => {
            if (resp.status === 'success') {
               setIsEnabled(resp.data.isEnabled);
            }
         }
      );
   }
   useEffect(() => {
      checkPlanFeature()
   }, []);

   return (
      <>
         <div className="pix_header_wr">
            <div className="pix_container">
               <div className="pix_header_main" ref={headerContainer}>
                  <div className="pix_header_logo">
                     <Link href="/">
                        <svg width="876" height="190" viewBox="0 0 876 190" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M317.25 76.24C317.25 97.65 299.82 115.08 278.41 115.08H252.45V154.49H225.36V37.59H278.41C299.82 37.59 317.25 55.02 317.25 76.24V76.24ZM289.97 76.24C289.97 69.99 284.85 64.68 278.41 64.68H252.45V87.8H278.41C284.85 87.8 289.97 82.68 289.97 76.24Z" fill="#2F2F3D"></path><path d="M327.67 48.01C327.67 39.86 334.87 33.42 343.96 33.42C353.05 33.42 360.25 39.86 360.25 48.01C360.25 56.16 353.05 62.6 343.96 62.6C334.87 62.6 327.67 56.16 327.67 48.01V48.01ZM357.8 154.49H330.52V69.8H357.8V154.49V154.49Z" fill="#2F2F3D"></path><path d="M462.38 69.8L430.55 112.62L461.62 154.49H427.89L413.68 133.65L399.66 154.49H365.74L396.81 112.62L365.17 69.8H398.9L413.68 91.59L428.46 69.8H462.38V69.8Z" fill="#2F2F3D"></path><path d="M527.57 69.99H554.85V154.49H527.57V150.13C521.32 154.3 513.74 156.57 505.97 156.57C482.85 156.57 464.1 136.68 464.1 112.23C464.1 87.78 482.86 68.08 505.97 68.08C513.74 68.08 521.32 70.35 527.57 74.52V69.97V69.99ZM527.38 103.15C523.97 96.9 517.91 93.11 511.09 93.11C501.05 93.11 492.71 101.64 492.71 112.25C492.71 122.86 501.05 131.58 511.09 131.58C517.91 131.58 523.97 127.6 527.38 121.54V103.16V103.15Z" fill="#2F2F3D"></path><path d="M635.76 37.59H663.04V110.73C663.04 135.74 642.58 156.2 617.57 156.2C592.56 156.2 572.1 135.74 572.1 110.73V37.59H599.19V110.73C599.19 120.77 607.34 129.11 617.57 129.11C627.8 129.11 635.76 120.77 635.76 110.73V37.59Z" fill="#F9913A"></path><path d="M754.37 112.43L753.42 112.81L779.57 154.49H747.36L723.3 116.03H711.17V154.49H684.08V37.59H737.89C759.49 37.59 777.11 55.21 777.11 76.81C777.11 92.54 767.83 106.18 754.37 112.43V112.43ZM750.01 76.81C750.01 70.18 744.52 64.68 737.88 64.68H711.16V88.74H737.88C744.51 88.74 750.01 83.43 750.01 76.8V76.81Z" fill="#F9913A"></path><path d="M822.2 127.21H875.63V154.49H794.91V37.4H822.19V127.21H822.2Z" fill="#F9913A"></path><path d="M177.98 23.92V99.59C177.98 149.31 137.93 190 88.99 190C40.05 190 0 149.32 0 99.59V23.92C0 10.71 10.54 0 23.54 0H154.44C167.44 0 177.98 10.71 177.98 23.92Z" fill="url(#paint0_linear_3_11)"></path><path d="M59.64 143.62C59.64 152.81 67.09 160.26 76.28 160.26C85.47 160.26 92.92 152.81 92.92 143.62V104.44C92.92 95.25 85.47 87.8 76.28 87.8C67.09 87.8 59.64 95.25 59.64 104.44L59.64 143.62Z" fill="#FFEAE9"></path><path opacity="0.1" d="M59.64 123.52C61.6 118.09 71.42 119.22 76.99 119.07H92.91V116.67H67.12L59.84 118.9L58.77 121.71L59.63 123.53L59.64 123.52Z" fill="black"></path><path d="M87.86 83.39L75.57 83.41C69.97 83.41 65.43 78.87 65.43 73.27C65.43 67.67 69.97 63.13 75.57 63.13L87.86 63.15C89.26 63.26 90.3 64.48 90.19 65.87C90.09 67.12 89.1 68.1 87.86 68.2H75.56C72.76 68.2 70.49 70.47 70.49 73.27C70.49 76.07 72.76 78.34 75.56 78.34H87.86C89.26 78.45 90.3 79.67 90.19 81.06C90.09 82.31 89.1 83.29 87.86 83.39V83.39ZM101.03 75.75H82.54C81.17 75.75 80.06 74.64 80.06 73.27C80.06 71.9 81.17 70.79 82.54 70.79H101.03C102.4 70.79 103.51 71.9 103.51 73.27C103.51 74.64 102.4 75.75 101.03 75.75ZM107.99 83.41L95.7 83.39C94.3 83.28 93.26 82.06 93.37 80.67C93.47 79.42 94.46 78.44 95.7 78.34H108C110.8 78.34 113.07 76.07 113.07 73.27C113.07 70.47 110.8 68.2 108 68.2H95.7C94.3 68.09 93.26 66.87 93.37 65.48C93.47 64.23 94.46 63.25 95.7 63.15L107.99 63.13C113.59 63.13 118.13 67.67 118.13 73.27C118.13 78.87 113.59 83.41 107.99 83.41V83.41Z" fill="#FFEAE9"></path><path d="M139.46 42.47C130.97 33.98 120.7 29.73 108.66 29.73H56.98C49.21 29.73 42.85 36.09 42.85 43.86V44.63C42.85 52.4 49.21 58.76 56.98 58.76H108.66C112.68 58.76 116.1 60.18 118.93 63C121.76 65.83 123.17 69.25 123.17 73.27C123.17 77.29 121.76 80.71 118.93 83.54C116.1 86.37 112.68 87.78 108.66 87.78H74.15C73.13 87.78 72.16 87.78 71.24 87.8H62C61.85 87.8 61.7 87.82 61.55 87.82C61.28 87.81 61.02 87.78 60.75 87.78C50.91 87.78 42.87 95.83 42.87 105.66C42.87 115.49 50.33 122.94 59.66 123.51V123.54C59.66 115.57 70.77 116.97 77.01 116.8H108.67C120.71 116.8 130.98 112.56 139.47 104.07C147.96 95.58 152.2 85.31 152.2 73.27C152.2 61.23 147.96 50.96 139.47 42.47H139.46Z" fill="white"></path><path opacity="0.5" d="M154.44 0H150.1C156.64 13.41 160.31 28.48 160.31 44.41C160.31 100.46 114.87 145.9 58.82 145.9C39.26 145.9 20.99 140.36 5.48999 130.77C18.06 165.25 50.82 190 88.99 190C137.94 190 177.98 149.32 177.98 99.59V23.92C177.98 10.71 167.44 0 154.44 0V0Z" fill="url(#paint1_linear_3_11)"></path><defs><linearGradient id="paint0_linear_3_11" x1="88.99" y1="250.95" x2="88.99" y2="-34.06" gradientUnits="userSpaceOnUse"><stop stopColor="#FF5873"></stop><stop offset="1" stopColor="#FFAD5D"></stop></linearGradient><linearGradient id="paint1_linear_3_11" x1="44.23" y1="181.54" x2="194.93" y2="30.84" gradientUnits="userSpaceOnUse"><stop stopColor="white" stopOpacity="0"></stop><stop offset="0.54" stopColor="white" stopOpacity="0.5"></stop><stop offset="1" stopColor="white" stopOpacity="0"></stop></linearGradient></defs></svg>
                     </Link>
                  </div>
                  <div className="pix_nav_toggle" onClick={() => navToggle()}>
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.833403 8.33236C0.612371 8.33236 0.400392 8.24456 0.244098 8.08826C0.0878049 7.93197 0 7.71999 0 7.49896V0.833403C0 0.612371 0.0878049 0.400392 0.244098 0.244098C0.400392 0.0878048 0.612371 0 0.833403 0H7.50063C7.72166 0 7.93364 0.0878048 8.08993 0.244098C8.24622 0.400392 8.33403 0.612371 8.33403 0.833403V7.49896C8.33403 7.71999 8.24622 7.93197 8.08993 8.08826C7.93364 8.24456 7.72166 8.33236 7.50063 8.33236H0.833403ZM12.501 8.33236C12.28 8.33236 12.068 8.24456 11.9117 8.08826C11.7554 7.93197 11.6676 7.71999 11.6676 7.49896V0.833403C11.6676 0.612371 11.7554 0.400392 11.9117 0.244098C12.068 0.0878048 12.28 0 12.501 0H19.1666C19.3876 0 19.5996 0.0878048 19.7559 0.244098C19.9122 0.400392 20 0.612371 20 0.833403V7.49896C20 7.71999 19.9122 7.93197 19.7559 8.08826C19.5996 8.24456 19.3876 8.33236 19.1666 8.33236H12.501ZM0.833403 20C0.612371 20 0.400392 19.9122 0.244098 19.7559C0.0878049 19.5996 0 19.3876 0 19.1666V12.4994C0 12.2783 0.0878049 12.0664 0.244098 11.9101C0.400392 11.7538 0.612371 11.666 0.833403 11.666H7.50063C7.72166 11.666 7.93364 11.7538 8.08993 11.9101C8.24622 12.0664 8.33403 12.2783 8.33403 12.4994V19.1666C8.33403 19.3876 8.24622 19.5996 8.08993 19.7559C7.93364 19.9122 7.72166 20 7.50063 20H0.833403ZM12.501 20C12.28 20 12.068 19.9122 11.9117 19.7559C11.7554 19.5996 11.6676 19.3876 11.6676 19.1666V12.4994C11.6676 12.2783 11.7554 12.0664 11.9117 11.9101C12.068 11.7538 12.28 11.666 12.501 11.666H19.1666C19.3876 11.666 19.5996 11.7538 19.7559 11.9101C19.9122 12.0664 20 12.2783 20 12.4994V19.1666C20 19.3876 19.9122 19.5996 19.7559 19.7559C19.5996 19.9122 19.3876 20 19.1666 20H12.501Z" fill="#F9913A"></path></svg>
                     <span>Menu</span>
                  </div>
                  <div className="pix_header_nav" ref={headerNav}>
                     <ul>
                        <li><a href="#stab_template">Templates</a></li>
                        <li><a href="#pix_features">Features</a></li>
                        {/* <li><a href="/Plans">Plans</a></li> */}
                        {
                           isEnabled && <li><Link href="/pricing" >Pricing</Link></li>
                        }
                        <li><a href="https://doc.pixaurl.com/" target="_blank" rel="noreferrer">Document</a></li>
                     </ul>
                  </div>
                  <div className="pix_header_btn">
                     <Link href="/auth/login" className="pix_nav_clr">Login</Link>
                     <a href="https://codecanyon.net/item/pixaurl-organize-your-social-handles-in-just-a-single-tap/47307498" target="_blank" rel="noreferrer" className="pix-btn">Buy Now</a>
                  </div>
                  <div className={`pix_action_mobile ${openToggleBar ? 'open' : ''}`}>
                     <div className="pix_dropdown_toggle" onClick={() => openToggle()} data-toggle="dropdown"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6.42847C13.9404 6.42847 12.9047 6.74266 12.0237 7.33131C11.1427 7.91996 10.4561 8.75663 10.0506 9.73552C9.64514 10.7144 9.53905 11.7916 9.74576 12.8307C9.95247 13.8699 10.4627 14.8245 11.2119 15.5737C11.9611 16.3229 12.9157 16.8331 13.9548 17.0398C14.994 17.2465 16.0712 17.1404 17.0501 16.735C18.0289 16.3295 18.8656 15.6429 19.4543 14.7619C20.0429 13.8809 20.3571 12.8452 20.3571 11.7856C20.3571 10.3648 19.7927 9.0022 18.788 7.99754C17.7834 6.99288 16.4208 6.42847 15 6.42847ZM15 14.9999C14.3642 14.9999 13.7428 14.8114 13.2142 14.4582C12.6856 14.105 12.2736 13.603 12.0304 13.0157C11.7871 12.4283 11.7234 11.782 11.8474 11.1585C11.9715 10.535 12.2776 9.96229 12.7271 9.51277C13.1766 9.06324 13.7494 8.75711 14.3729 8.63308C14.9964 8.50906 15.6427 8.57271 16.23 8.816C16.8174 9.05928 17.3194 9.47126 17.6725 9.99985C18.0257 10.5284 18.2143 11.1499 18.2143 11.7856C18.2134 12.6378 17.8745 13.4549 17.2719 14.0575C16.6693 14.6601 15.8522 14.999 15 14.9999Z" fill="#F9913A"></path><path d="M15 0C12.0333 0 9.13319 0.879735 6.66645 2.52796C4.19971 4.17618 2.27713 6.51886 1.14181 9.25975C0.00649925 12.0006 -0.290551 15.0166 0.288227 17.9263C0.867006 20.8361 2.29562 23.5088 4.3934 25.6066C6.49119 27.7044 9.16394 29.133 12.0736 29.7118C14.9834 30.2905 17.9994 29.9935 20.7403 28.8582C23.4811 27.7229 25.8238 25.8003 27.472 23.3335C29.1203 20.8668 30 17.9667 30 15C29.9955 11.0231 28.4137 7.21047 25.6016 4.39841C22.7895 1.58635 18.9769 0.0045372 15 0V0ZM8.57143 26.1182V24.6429C8.57228 23.7906 8.9112 22.9736 9.51382 22.3709C10.1164 21.7683 10.9335 21.4294 11.7857 21.4286H18.2143C19.0665 21.4294 19.8836 21.7683 20.4862 22.3709C21.0888 22.9736 21.4277 23.7906 21.4286 24.6429V26.1182C19.4777 27.2574 17.2591 27.8577 15 27.8577C12.7409 27.8577 10.5223 27.2574 8.57143 26.1182V26.1182ZM23.5629 24.5636C23.5415 23.1582 22.9689 21.8175 21.9685 20.8303C20.968 19.843 19.6198 19.2884 18.2143 19.2857H11.7857C10.3802 19.2884 9.03197 19.843 8.03153 20.8303C7.03108 21.8175 6.4585 23.1582 6.43715 24.5636C4.49418 22.8287 3.124 20.5445 2.50804 18.0136C1.89208 15.4826 2.0594 12.8243 2.98783 10.3906C3.91627 7.95683 5.56203 5.8625 7.70719 4.38489C9.85235 2.90728 12.3957 2.1161 15.0005 2.1161C17.6054 2.1161 20.1487 2.90728 22.2939 4.38489C24.4391 5.8625 26.0848 7.95683 27.0132 10.3906C27.9417 12.8243 28.109 15.4826 27.493 18.0136C26.8771 20.5445 25.5069 22.8287 23.5639 24.5636H23.5629Z" fill="#F9913A"></path></svg>
                     </div>
                     <div className="pix_dropdown">
                        <ul>
                           <li><Link className="pix_dropdown_link" href="/auth/login">Login</Link></li>
                           <li><a className="pix_dropdown_link" href="https://codecanyon.net/item/pixaurl-organize-your-social-handles-in-just-a-single-tap/47307498" target="_blank" rel="noreferrer">Buy Now</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_bannerBG_main" style={{ backgroundImage: `url('assets/images/banner_BG.png')` }}>
            <div className="pix_container">
               <div className="pix_banner_main">
                  <h2 className="pix_bnr_heading">Build Your Personalized <span>Pro Bio URL</span> App,
                     Packed With Over 20+ Pre-Built Templates.</h2>
                  <p className="pix_bnr_subheading">Comparable To Top Apps Such As <span>LinkTree , Bio.Link, lnk.bio </span> And Other Prominent Apps.</p>
                  <h5>Connect and manage all your social links in one place. Organize your social handles into a single tap. Get a link and work smart.</h5>
               </div>
            </div>
            <div className="pix_banner_mockup">
               <img src="assets/images/bnr_full.png" alt="Mockup" />
            </div>
         </div>

         <div className="pix_section1_2">
            <div className="pix_container">
               <div className="pix_section1_2_center">
                  <h3 className="pix_sections_title"> Landing Page</h3>
               </div>
               <img src="assets/images/landingPageScreen.png" alt="LandingPage" />
            </div>
         </div>

         <div className="pix_section2">
            <div className="pix_container">
               <div className="pix_section2_flex">
                  <div className="pix_section2_left">
                     <div className="pix_section2_box">
                        <img src="assets/images/icons_s2.png" alt="icons 1" />
                        <h4>Dynamic Insight</h4>
                        <p>Experience the vast access to
                           various platforms fosters an
                           enormous engagement.</p>
                        <a><svg xmlns="http://www.w3.org/2000/svg" width="7px" height="12px"><path fill="rgb(249, 145, 58)" d="M1.228,-0.010 C0.911,-0.010 0.606,0.116 0.362,0.356 C-0.113,0.849 -0.113,1.656 0.362,2.149 L4.058,5.986 L0.350,9.824 C-0.126,10.317 -0.126,11.125 0.350,11.617 C0.826,12.110 1.606,12.110 2.082,11.617 L6.655,6.884 C6.887,6.643 7.009,6.328 7.009,5.987 C7.009,5.646 6.875,5.331 6.655,5.090 L2.094,0.356 C1.850,0.116 1.533,-0.010 1.228,-0.010 Z"></path></svg></a>
                     </div>
                     <div className="pix_section2_box">
                        <img src="assets/images/icons_s2_1.png" alt="icons 2" />
                        <h4>Efficient approach</h4>
                        <p>Create a single link and save
                           a bunch of hours for you and
                           your subscribers.</p>
                        <a><svg xmlns="http://www.w3.org/2000/svg" width="7px" height="12px"><path fill="rgb(249, 145, 58)" d="M1.228,-0.010 C0.911,-0.010 0.606,0.116 0.362,0.356 C-0.113,0.849 -0.113,1.656 0.362,2.149 L4.058,5.986 L0.350,9.824 C-0.126,10.317 -0.126,11.125 0.350,11.617 C0.826,12.110 1.606,12.110 2.082,11.617 L6.655,6.884 C6.887,6.643 7.009,6.328 7.009,5.987 C7.009,5.646 6.875,5.331 6.655,5.090 L2.094,0.356 C1.850,0.116 1.533,-0.010 1.228,-0.010 Z"></path></svg></a>
                     </div>
                  </div>
                  <div className="pix_section2_right">
                     <h3 className="pix_sections_title">Our Core Features</h3>
                     <p className="pix_sections_subtitle">PixaURL provides a single location to concentrate your
                        follower’s attention on your every social media account.
                        Also, you can<br />
                        customize your profile with the available creative templates.
                        Here you can edit the content and add the links to your
                        website
                     </p>
                     <Link href="/auth/login"><a className="pix-btn">Know More</a></Link>
                  </div>
               </div>
            </div>
         </div>
         <div className="pix_section3" style={{ backgroundImage: `url('assets/images/sec3_BG.png')` }}>
            <div className="pix_container_full">
               <div className="pix_section3_flex">
                  <div className="pix_section3_left">
                     <h3 className="pix_sections_title">Customize Your Bio Link
                        In Minutes</h3>
                     <p className="pix_sections_subtitle">With PixaURL, You Can Create A Stunning And Personalized BioLink In Just Minutes! Showcase All Your Important Links And Content In One Place, Making It Easier For Your Audience To Connect With You.</p></div>
                  <div className="pix_section3_right">
                     <img className="" src="assets/images/sec3.png" alt="sec3" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section4">
            <div className="pix_container">
               <div className="pix_section4_flex">
                  <div className="pix_section4_left">
                     <img className="" src="assets/images/sec4.png" alt="sec4" />
                  </div>
                  <div className="pix_section4_right">
                     <h3 className="pix_sections_title">Make Your Portfolio</h3>
                     <p className="pix_sections_subtitle">Create Your Own Portfolio in Just a Single Tap with PixaURL. Experience the convenience and creativity this tool has to offer, and take your online presence to new heights with PixaURL.</p>
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section5">
            <div className="pix_container">
               <div className="pix_section5_flex">
                  <div className="pix_section5_left">
                     <h3 className="pix_sections_title">Add Your Social
                        Media Link</h3>
                     <p className="pix_sections_subtitle">Enhance Your Online Presence With PixaURL: Seamlessly Share And Connect Through Your Social Media Links!!</p>

                  </div>
                  <div className="pix_section5_right">
                     <img src="assets/images/sec5.png" alt="" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section7">
            <div className="pix_container">
               <div className="pix_section7_center">
                  <h3 className="pix_sections_title"> Template Customize Theme Options</h3>
                  <p className="pix_sections_subtitle">Effortlessly Customize The Appearance Of Your Template To Match Your Unique Style</p>
               </div>
               <div className="pix_imgBox">
                  <img className="" src="assets/images/sec7_main.png" alt="sec7_main" />
                  <div className="pix_arrow_left">
                     <img className="" src="assets/images/sec7_arrow01.png" alt="sec7_arrow01" />
                  </div>
                  <div className="pix_arrow_right">
                     <img className="" src="assets/images/sec7_arrow02.png" alt="sec7_arrow02" />

                  </div>
               </div>
               <div className="pix_section7_flex">
                  <div className="pix_section7_right">
                     <img className="" src="assets/images/sec07_02.png" alt="sec07_02" />
                  </div>
                  <div className="pix_section7_left">
                     <img className="" src="assets/images/sec07_01.png" alt="sec07_01" />
                  </div>

               </div>
            </div>
         </div>

         <div className="pix_section8">
            <div className="pix_container">
               <div className="pix_section8_flex">
                  <div className="pix_section8_left">
                     <h3 className="pix_sections_title">Different Types Of Social Icons Packs</h3>
                     <p className="pix_sections_subtitle">Choose The Social Icon Pack That Best Represents Your Brand And Personality, And Let Your BioLink Shine!</p>
                  </div>
                  <div className="pix_section8_right">
                     <img src="assets/images/sec8.png" alt="sec8" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section6" id="stab_template">
            <div className="pix_section6_flex">
               <div className="pix_section6_left">
                  <h3 className="pix_sections_title">Start With Creative Templates</h3>
                  <p className="pix_sections_subtitle">Craft Your Portfolio Effortlessly With Pixaurl. Elevate Your Online Presence With Ease And Creativity.</p>
               </div>

               <div className="pix_section6_right">
                  <div className="pix_slider_main">
                     <Swiper
                        spaceBetween={0}
                        slidesPerView={'auto'}
                        loop={true}
                        autoplay={{
                           delay: 2500,
                           disableOnInteraction: false,
                        }}
                        centeredSlides={true}
                        modules={[Autoplay]}

                     >
                        {landTemp.map((ltemp, index) =>
                           <SwiperSlide key={index}>
                              <img src={ltemp.img} width="100%" alt="templates" />
                           </SwiperSlide>
                        )}
                     </Swiper>
                  </div>
               </div>
            </div>
         </div>



         <div className="pix_section9" style={{ backgroundImage: `url('assets/images/section9_BG.png')` }}>
            <div className="pix_container">
               <div className="pix_section9_flex">
                  <div className="pix_section9_left">
                     <h3 className="pix_sections_title">Boosting Your Website's Visibility</h3>
                     <p className="pix_sections_subtitle">Organize Your Website's URL In A Clear And Descriptive Manner, Making It Easier For Search Engines And Users To Understand The Content Of Each Page.</p>
                  </div>
                  <div className="pix_section9_right">
                     <img className="pix_imgShadow" src="assets/images/sec9.png" alt="sec9" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section10">
            <div className="pix_container">
               <div className="pix_section10_center">
                  <h3 className="pix_sections_title">Admin Account Features</h3>
                  <p className="pix_sections_subtitle">The Admin Dashboard Offers The Ability To Effortlessly Manage Users, Categories, Templates, Icon Types, And Icon Packs.</p>
               </div>
               <div className="pix_section10_flex">
                  <div className="pix_section10_left">
                     <img className="" src="assets/images/sec10_01.png" alt="sec10_01" />
                     <div className="pix_section10_title">
                        <h3>Manage Users</h3>
                     </div>
                  </div>
                  <div className="pix_section10_right">
                     <img className="" src="assets/images/sec10_02.png" alt="sec10_02" />
                     <div className="pix_section10_title">
                        <h3>Manage Categories</h3>
                     </div>
                  </div>
               </div>
               <div className="pix_section10_flex">
                  <div className="pix_section10_left">
                     <img className="" src="assets/images/sec10_03.png" alt="sec10_03" />
                     <div className="pix_section10_title">
                        <h3>Manage Templates</h3>
                     </div>
                  </div>
                  <div className="pix_section10_right">
                     <img className="" src="assets/images/sec10_04.png" alt="sec10_04" />
                     <div className="pix_section10_title">
                        <h3>Manage Icon Type</h3>
                     </div>
                  </div>
               </div>
               <div className="pix_section10_centerBox">
                  <img className="" src="assets/images/sec10_05.png" alt="sec10_05" />
                  <div className="pix_section10_title">
                     <h3>Manage Icon Pack</h3>
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section11">
            <div className="pix_container">
               <div className="pix_section11_center">
                  <h3 className="pix_sections_title">How Admin Create New Template</h3>
                  <p className="pix_sections_subtitle">Achieve A Ready-to-use Template In Just A Few Minutes By Following These Easy Steps.</p>
               </div>
               <div className="pix_section11_flex sec11_01">
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec11_01.png" alt="sec11_01" />
                  </div>
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_pink">01</span>
                        <h3>Click on "Create Add New" Button
                           and enter the details.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow02.png" alt="arrow 2" />
                        </div>
                     </div>
                  </div>
               </div>
               <div className="pix_section11_flex pix_section11_rightImg sec11_02">
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_success">02</span>
                        <h3>An editor screen will appear
                           containing various editing elements.
                           You can customize your template
                           with a user-friendly editor.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow01.png" alt="arrow 1" />
                        </div>
                     </div>
                  </div>
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec11_02.png" alt="sec11_01" />
                  </div>
               </div>
               <div className="pix_section11_flex sec11_03">
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec11_03.png" alt="sec11_01" />
                  </div>
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_blue">03</span>
                        <h3>Click on Settings button and you
                           will be redirected to the another
                           screen. On this screen, click on
                           Appearance option. From here
                           you can customize the appearance
                           of the template.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow02.png" alt="arrow 2" />
                        </div>
                     </div>
                  </div>
               </div>
               <div className="pix_section11_flex pix_section11_rightImg sec11_04">
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_purple">04</span>
                        <h3>This setting will allow you to
                           manage social icons for your
                           templates.</h3>
                     </div>
                  </div>
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec11_04.png" alt="sec11_01" />
                  </div>
               </div>

            </div>
         </div>

         <div className="pix_section12" style={{ backgroundImage: `url('assets/images/sec12_BG.jpg')` }}>
            <div className="pix_container">
               <div className="pix_section12_center">
                  <h3 className="pix_sections_title">User Account Features</h3>
                  <p className="pix_sections_subtitle">The User Dashboard Provides Convenient Settings To Add, Edit, And Delete Templates, Enabling You To Get Your Content Ready With Ease.</p>

               </div>
               <div className="pix_section12_centerBox">
                  <img className="pix_imgShadow" src="assets/images/sec12_01.png" alt="sec12_01" />
                  <div className="pix_section12_title">
                     <h3>User Dashboard</h3>
                  </div>
               </div>
               <div className="pix_section12_flex">
                  <div className="pix_section12_left">
                     <img className="pix_imgShadow" src="assets/images/sec12_02.png" alt="sec12_02" />
                     <div className="pix_section12_title">
                        <h3>Add, Edit And Delete Templates</h3>
                     </div>
                  </div>
                  <div className="pix_section12_right">
                     <img className="pix_imgShadow" src="assets/images/sec12_03.png" alt="sec12_03" />
                     <div className="pix_section12_title">
                        <h3>Edit And Convert Into Your Templates</h3>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section11">
            <div className="pix_container">
               <div className="pix_section11_center">
                  <h3 className="pix_sections_title">How User Create New Link</h3>
                  <p className="pix_sections_subtitle">Get Your Template Ready In Just A Few Minutes By Following These Straightforward Steps. </p>
               </div>
               <div className="pix_section11_flex sec11_01">
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec13_01.png" alt="sec13_01" />
                  </div>
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_pink">01</span>
                        <h3>Click on "Create New Link" button.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow02.png" alt="arrow 2" />
                        </div>
                     </div>
                  </div>
               </div>
               <div className="pix_section11_flex pix_section11_rightImg sec11_02">
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_success">02</span>
                        <h3>It redirects you to the template
                           page to select any template.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow01.png" alt="arrow 1" />
                        </div>
                     </div>
                  </div>
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec13_02.png" alt="sec13_02" />
                  </div>
               </div>
               <div className="pix_section11_flex sec11_03">
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec13_03.png" alt="sec13_03" />
                  </div>
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_blue">03</span>
                        <h3>When you select the template.
                           A popup will appear, enter your
                           URL name there.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow02.png" alt="arrow 2" />
                        </div>
                     </div>
                  </div>
               </div>
               <div className="pix_section11_flex pix_section11_rightImg sec11_04">
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_purple">04</span>
                        <h3>You will be redirected to the editor.
                           You can add Profile pictures,
                           names, Tag Lines, and Links, and
                           also you can add multiple pages
                           with this in a single template.</h3>
                        <div className="pix_section11_arrow">
                           <img src="assets/images/sec7_arrow01.png" alt="arrow 1" />
                        </div>
                     </div>
                  </div>
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec13_04.png" alt="sec13_04" />
                  </div>
               </div>
               <div className="pix_section11_flex sec11_05">
                  <div className="pix_section11_left">
                     <img className="pix_imgShadow" src="assets/images/sec13_05.png" alt="sec13_05" />
                  </div>
                  <div className="pix_section11_right">
                     <div className="pix_section11_title">
                        <span className="pix_secondary">05</span>
                        <h3>Personalized Page That Stores All
                           The Prominent Links You Wish To
                           Share With Your Viewers.</h3>
                     </div>
                  </div>
               </div>

            </div>
         </div>

         <div className="pix_section14">
            <div className="pix_container">
               <div className="pix_section14_flex">
                  <div className="pix_section14_left">
                     <h3 className="pix_sections_title">Profile Setting</h3>
                     <p className="pix_sections_Subtitle">You Can Fine-tune And Manage Your Profile Picture And Contact Information, It Give You Full Control Over How You Present Yourself To The World.</p>
                  </div>
                  <div className="pix_section14_right">
                     <img className="pix_imgShadow" src="assets/images/sec14.png" alt="sec14" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section15" style={{ backgroundImage: `url('assets/images/sec15_BG.png')` }}>
            <div className="pix_container">
               <div className="pix_section15_flex">
                  <div className="pix_section15_left">
                     <img className="pix_imgShadow" src="assets/images/sec15_01.png" alt="Mockup" />
                     <a href="#" className="pix-btn">Buy Now</a>
                  </div>
                  <div className="pix_section15_right">
                     <img className="pix_imgShadow" src="assets/images/sec15_02.png" alt="Boy" />
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_section16" id="pix_features">
            <div className="pix_container">
               <div className="pix_section16_center">
                  <h3 className="pix_sections_title">App Features</h3>
                  <p className="pix_sections_subtitle">It Boasts A Wide Array Of Impressive Features That Enhance The User Experience And Make It Stand Out From The Crowd.</p>
               </div>
               <div className="pix_section16_flex">
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/nextJS.png" alt="nextJS" />
                     <h4>Next JS</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_01.png" alt="sec16_01" />
                     <h4>Dashboard</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_02.png" alt="sec16_01" />
                     <h4>Links Analytics</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_03.png" alt="sec16_01" />
                     <h4>Links Management</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_05.png" alt="sec16_01" />
                     <h4>Pre-Made Templates</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_09.png" alt="sec16_01" />
                     <h4>Bring In Smart Wealth</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_04.png" alt="sec16_01" />
                     <h4>Profile Management</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_08.png" alt="sec16_01" />
                     <h4>Share your link globally</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_12.png" alt="sec16_01" />
                     <h4>Customizable color Options</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_13.png" alt="sec16_01" />
                     <h4>User Friendly</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_10.png" alt="sec16_01" />
                     <h4>Share Your Ideas With
                        The World</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_11.png" alt="sec16_01" />
                     <h4>Device Friendly/Responsive</h4>
                  </div>
                  <div className="pix_section16_item">
                     <img className="pix_imgShadow" src="assets/images/sec16_14.png" alt="sec16_01" />
                     <h4>Lightweight</h4>
                  </div>
               </div>
            </div>
         </div>

         <div className="pix_footer" style={{ backgroundImage: `url('assets/images/footerBG.png')` }}>
            <div className="pix_container">
               <div className="pix_footer_item">
                  <div className="pix_footer_logo">
                     <img src="assets/images/footerLogo.png" alt="" />
                  </div>
                  <div className="pix_footer_content">
                     <h4>This Item Is Made By</h4>
                     <h3>Envato Elite Author</h3>
                     <a href="https://codecanyon.net/item/pixaurl-organize-your-social-handles-in-just-a-single-tap/47307498" target="_blank" rel="noreferrer" className="pix-btn">Buy Now</a>
                  </div>

                  <div className="pix_footer_copyRight">
                     <p>© Copyright 2023 <a href="https://app.pixaurl.com/">PixaURL</a> All Rights Reserved.</p>
                  </div>
               </div>
            </div>
         </div>
      </>
   );
}

export default Home;
