import React from 'react'
import Herosection from "../assets/herosection.svg"
import DashboardPreview from "../assets/MacBookPro.svg"
import { Link } from 'react-router-dom'
const HomePage = () => {
    return (
        <div className="min-h-screen bg-white overflow-x-hidden">
            <div className="relative">
                <div className="absolute inset-x-0 top-0 h-[944px] bg-gradient-to-b from-[#112674] via-[#112674] to-transparent opacity-100"
                    style={{ background: `url(${Herosection})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />

                <div className="absolute inset-x-0 top-0 h-[944px] opacity-full">
                    <img
                        src={Herosection}
                        alt=""
                        className="w-full h-full object-cover mix-blend-overlay"
                    />
                </div>

                <div className="relative z-10">
                    <header className="container mx-auto px-4 pt-4 max-w-[1260px]">
                        <nav className="flex items-center justify-between px-3 md:px-4 py-3 rounded-[15px] border border-white/15 bg-white/10 backdrop-blur-sm min-h-[63px]">
                            <div className="flex items-center flex-shrink-0">
                                <svg className="w-[120px] md:w-[160px] h-[24px] md:h-[32px]" viewBox="0 0 160 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M159.637 24.6462H156.579V24.0967C156.579 23.6825 156.691 23.2525 156.914 22.8065C156.993 22.6791 157.033 22.5596 157.033 22.4481C157.033 22.3526 156.977 22.2809 156.866 22.2331L156.794 22.2092C156.699 22.2092 156.627 22.249 156.579 22.3287C156.547 22.4083 156.523 22.4561 156.508 22.472C156.014 23.2047 155.448 23.7861 154.811 24.2161C154.174 24.6303 153.41 24.8373 152.518 24.8373C151.45 24.8373 150.495 24.5506 149.651 23.9772C148.822 23.4038 148.177 22.6233 147.715 21.6358C147.253 20.6483 147.023 19.5493 147.023 18.3388C147.023 17.1283 147.253 16.0292 147.715 15.0417C148.177 14.0542 148.822 13.2737 149.651 12.7003C150.495 12.1269 151.45 11.8402 152.518 11.8402C153.457 11.8402 154.262 12.0552 154.931 12.4853C155.616 12.8994 156.141 13.4649 156.508 14.1816C156.635 14.4524 156.778 14.5479 156.938 14.4683C157.017 14.4205 157.057 14.3488 157.057 14.2533C157.057 14.1577 157.009 14.0144 156.914 13.8232C156.691 13.3772 156.579 12.9392 156.579 12.5092V7.44414H159.637V24.6462ZM153.234 22.0659C153.887 22.0659 154.469 21.8986 154.978 21.5641C155.488 21.2297 155.878 20.7757 156.149 20.2023C156.436 19.6289 156.579 19.0077 156.579 18.3388C156.579 17.6698 156.436 17.0486 156.149 16.4752C155.878 15.9018 155.488 15.4479 154.978 15.1134C154.469 14.7789 153.887 14.6117 153.234 14.6117C152.215 14.6117 151.435 14.97 150.893 15.6868C150.351 16.3876 150.081 17.2716 150.081 18.3388C150.081 19.4059 150.351 20.2979 150.893 21.0146C151.435 21.7155 152.215 22.0659 153.234 22.0659Z" fill="white" />
                                    <path d="M141.886 14.7311C141.95 14.7311 142.006 14.7072 142.054 14.6594C142.101 14.5957 142.133 14.54 142.149 14.4922C142.436 13.8392 142.731 13.3295 143.033 12.9631C143.336 12.5968 143.774 12.318 144.347 12.1269C144.921 11.9358 145.701 11.8402 146.689 11.8402V14.9461C146.497 14.9302 146.235 14.9222 145.9 14.9222C144.483 14.9222 143.495 15.2567 142.938 15.9257C142.38 16.5787 142.101 17.6618 142.101 19.175V24.6462H139.043V12.0313H142.101V12.7242C142.101 13.218 141.982 13.7038 141.743 14.1816C141.679 14.309 141.647 14.4126 141.647 14.4922C141.647 14.6196 141.719 14.6993 141.863 14.7311H141.886Z" fill="white" />
                                    <path d="M131.433 11.8402C132.707 11.8402 133.822 12.1269 134.777 12.7003C135.733 13.2737 136.466 14.0542 136.976 15.0417C137.485 16.0292 137.74 17.1283 137.74 18.3388C137.74 19.5493 137.485 20.6483 136.976 21.6358C136.466 22.6233 135.733 23.4038 134.777 23.9772C133.822 24.5506 132.707 24.8373 131.433 24.8373C130.158 24.8373 129.043 24.5506 128.088 23.9772C127.132 23.4038 126.399 22.6233 125.89 21.6358C125.38 20.6483 125.125 19.5493 125.125 18.3388C125.125 17.1283 125.38 16.0292 125.89 15.0417C126.399 14.0542 127.132 13.2737 128.088 12.7003C129.043 12.1269 130.158 11.8402 131.433 11.8402ZM131.433 22.0659C132.436 22.0659 133.225 21.7155 133.798 21.0146C134.387 20.2979 134.682 19.4059 134.682 18.3388C134.682 17.2716 134.387 16.3876 133.798 15.6868C133.225 14.97 132.436 14.6117 131.433 14.6117C130.429 14.6117 129.633 14.97 129.043 15.6868C128.47 16.3876 128.183 17.2716 128.183 18.3388C128.183 19.4059 128.47 20.2979 129.043 21.0146C129.633 21.7155 130.429 22.0659 131.433 22.0659Z" fill="white" />
                                    <path d="M111.096 20.7279C111.176 21.0783 111.216 21.588 111.216 22.257C111.216 22.4959 111.312 22.6154 111.503 22.6154C111.694 22.6154 111.789 22.4959 111.789 22.257C111.789 21.588 111.829 21.0783 111.909 20.7279L113.796 12.0313H117.428L119.315 20.7279C119.395 21.0783 119.435 21.588 119.435 22.257C119.435 22.4959 119.53 22.6154 119.721 22.6154C119.913 22.6154 120.008 22.4959 120.008 22.257C120.008 21.588 120.048 21.0783 120.128 20.7279L122.111 12.0313H125.36L121.728 24.6462H117.715L116.018 16.5947C115.939 16.2124 115.899 15.647 115.899 14.8984C115.899 14.6594 115.803 14.54 115.612 14.54C115.421 14.54 115.325 14.6594 115.325 14.8984C115.325 15.647 115.286 16.2124 115.206 16.5947L113.51 24.6462H109.496L105.864 12.0313H109.113L111.096 20.7279Z" fill="white" />
                                    <path d="M97.9846 20.1785C98.1121 20.5608 98.1758 21.0386 98.1758 21.612C98.1758 21.8828 98.2713 22.0182 98.4625 22.0182C98.6536 22.0182 98.7492 21.8828 98.7492 21.612C98.7492 21.0864 98.8208 20.6086 98.9642 20.1785L101.664 12.0315H104.913L99.5615 26.1037C99.1314 27.2346 98.5899 28.0389 97.9369 28.5168C97.2838 28.9946 96.4078 29.2335 95.3088 29.2335H93.0152V26.5576H94.0664C94.7672 26.5576 95.253 26.5417 95.5238 26.5098C95.8105 26.478 96.0255 26.3984 96.1689 26.2709C96.3281 26.1435 96.4635 25.9126 96.575 25.5781L96.8378 24.8135L91.9161 12.0315H95.1654L97.9846 20.1785Z" fill="white" />
                                    <path d="M92.1564 18.1716C92.1564 18.4265 92.1325 18.7371 92.0847 19.1034H82.9103C83.0218 20.0591 83.3722 20.8077 83.9615 21.3492C84.5508 21.8908 85.3233 22.1616 86.279 22.1616C87.5692 22.1616 88.4213 21.5244 88.8354 20.2502H91.9413C91.6546 21.6359 91.0335 22.7509 90.0778 23.5951C89.138 24.4233 87.8638 24.8374 86.2551 24.8374C84.9331 24.8374 83.7943 24.5587 82.8386 24.0012C81.8829 23.4437 81.1582 22.6792 80.6645 21.7076C80.1707 20.7201 79.9238 19.5972 79.9238 18.3389C79.9238 17.0328 80.1787 15.894 80.6883 14.9224C81.198 13.9348 81.9227 13.1783 82.8625 12.6526C83.8182 12.1111 84.9331 11.8403 86.2073 11.8403C87.2426 11.8403 88.2063 12.0633 89.0982 12.5093C90.0061 12.9393 90.7388 13.6322 91.2963 14.5879C91.8697 15.5276 92.1564 16.7222 92.1564 18.1716ZM89.0982 17.0009C89.0345 16.2045 88.7637 15.5595 88.2859 15.0657C87.8081 14.5719 87.1471 14.3251 86.3029 14.3251C84.4871 14.3251 83.3961 15.217 83.0297 17.0009H89.0982Z" fill="white" />
                                    <path d="M77.0313 24.6463L71.9902 17.6938L70.6283 19.2229V24.6463H67.3791V7.82652H70.6283V13.1066C70.6283 13.5207 70.5806 13.8472 70.485 14.0861C70.3894 14.3251 70.2381 14.5879 70.031 14.8746C69.9833 14.9383 69.9594 15.01 69.9594 15.0896C69.9594 15.1692 69.9912 15.233 70.0549 15.2807C70.0868 15.3126 70.1346 15.3285 70.1983 15.3285C70.2938 15.3285 70.3815 15.2887 70.4611 15.2091L76.8402 7.82652H80.7584L74.1165 15.3046L81.1407 24.6463H77.0313Z" fill="white" />
                                    <path d="M63.4736 18.1715C63.4736 18.4263 63.4497 18.7369 63.4019 19.1033H54.2275C54.339 20.0589 54.6894 20.8075 55.2788 21.3491C55.8681 21.8906 56.6406 22.1614 57.5963 22.1614C58.8864 22.1614 59.7386 21.5243 60.1527 20.2501H63.2586C62.9719 21.6358 62.3507 22.7507 61.395 23.5949C60.4553 24.4231 59.1811 24.8373 57.5724 24.8373C56.2504 24.8373 55.1115 24.5585 54.1559 24.0011C53.2002 23.4436 52.4755 22.679 51.9817 21.7074C51.4879 20.7199 51.2411 19.597 51.2411 18.3387C51.2411 17.0326 51.4959 15.8938 52.0056 14.9222C52.5153 13.9347 53.24 13.1781 54.1797 12.6525C55.1354 12.1109 56.2504 11.8402 57.5246 11.8402C58.5599 11.8402 59.5235 12.0632 60.4155 12.5091C61.3234 12.9392 62.056 13.632 62.6135 14.5877C63.1869 15.5275 63.4736 16.722 63.4736 18.1715ZM60.4155 17.0008C60.3518 16.2044 60.081 15.5593 59.6032 15.0655C59.1253 14.5718 58.4643 14.3249 57.6202 14.3249C55.8044 14.3249 54.7133 15.2169 54.347 17.0008H60.4155Z" fill="white" />
                                    <path d="M45.4163 11.8402C46.818 11.8402 47.925 12.2941 48.7373 13.202C49.5496 14.1099 49.9558 15.4399 49.9558 17.1919V24.6461H46.8976V18.2431C46.8976 16.8734 46.7145 15.9257 46.3481 15.4C45.9818 14.8744 45.3845 14.6116 44.5562 14.6116C43.9669 14.6116 43.4094 14.8187 42.8838 15.2328C42.3741 15.6469 41.96 16.2283 41.6414 16.9769C41.3229 17.7255 41.1636 18.5697 41.1636 19.5094V24.6461H38.1055V12.0313H41.1636V12.8197C41.1636 13.1861 41.1318 13.4967 41.068 13.7515C41.0043 14.0063 40.9088 14.2692 40.7813 14.5399C40.7017 14.7311 40.6619 14.8585 40.6619 14.9222C40.6619 15.0655 40.7256 15.1452 40.853 15.1611H40.9247C41.0362 15.1611 41.1318 15.0655 41.2114 14.8744C41.5618 14.094 42.1034 13.3931 42.836 12.7719C43.5687 12.1508 44.4288 11.8402 45.4163 11.8402Z" fill="white" />
                                    <path d="M16.1458 0.353859C11.8332 0.353859 7.77881 2.01483 4.7293 5.03127C1.67979 8.0477 0 12.0587 0 16.3246C0 20.5905 1.67979 24.6009 4.7293 27.6173C7.77881 30.6337 11.8332 32.2953 16.1458 32.2953C17.1104 32.2953 18.061 32.2125 18.9912 32.0493L17.2145 26.6728C14.1765 26.9759 11.0294 25.9796 8.70721 23.6825C4.60587 19.6257 4.60527 13.0235 8.70721 8.96603C12.8085 4.90918 19.4831 4.90918 23.5851 8.96603C25.9813 11.3363 26.9772 14.5743 26.5744 17.6669L31.9617 19.5643C32.1809 18.5102 32.2929 17.4257 32.2923 16.3246C32.2923 12.0587 30.6125 8.0477 27.563 5.03127C24.5135 2.01483 20.4585 0.353859 16.1458 0.353859Z" fill="white" />
                                    <path d="M16.146 10.9561C19.0672 10.9563 21.4476 13.2391 21.5669 16.0996L16.8286 14.4307C16.0984 14.1737 15.2833 14.3489 14.728 14.8838C14.1728 15.4189 13.9727 16.2204 14.2134 16.9492L15.7769 21.6797C12.9514 21.4921 10.7185 19.1675 10.7183 16.3252C10.7183 13.3601 13.1484 10.9561 16.146 10.9561ZM21.2593 18.125C20.698 19.6848 19.4288 20.9108 17.8335 21.4268L16.147 16.3242L21.2593 18.125Z" fill="white" />
                                    <path d="M31.8959 21.8729L16.1458 16.3247L21.406 32.2402C21.5767 32.7566 22.3034 32.7885 22.5194 32.2886L24.3896 27.9617C24.4557 27.8088 24.6571 27.7702 24.7763 27.8881L28.8118 31.8798C29.1012 32.1661 29.5707 32.1661 29.8607 31.8798L31.6523 30.1076C31.9417 29.8214 31.9417 29.357 31.6523 29.0702L27.6121 25.0738C27.4918 24.9549 27.5329 24.7536 27.6901 24.6897L31.9224 22.9721C32.4278 22.7672 32.4106 22.0536 31.8959 21.8724V21.8729Z" fill="white" />
                                </svg>
                            </div>

                            <div className="hidden md:flex items-center gap-3 lg:gap-6">
                                <Link to="#" className="px-3 lg:px-4 py-1.5 rounded-lg bg-[#A6FCFF30] text-white text-sm lg:text-base font-medium ">
                                    Home
                                </Link>
                                <Link to="#" className="text-[#FFFFFFB5] text-sm lg:text-base text-white transition-colors">
                                    Solutions
                                </Link>
                                <Link to="#" className="text-[#FFFFFFB5] text-sm lg:text-base text-white transition-colors">
                                    Pricing
                                </Link>
                                <Link to="#" className="text-[#FFFFFFB5] text-sm lg:text-base text-white transition-colors">
                                    Company
                                </Link>
                            </div>

                            <div className="flex items-center gap-3 lg:gap-5">
                                <Link to="#" className="hidden sm:block text-[#FFFFFFB5] text-sm lg:text-base text-white transition-colors">
                                    Log In
                                </Link>
                                <button className="px-3 lg:px-3.5 py-1.5 rounded-lg bg-white text-[#17171B] text-sm lg:text-base font-medium hover:bg-white/90 transition-colors">
                                    Sign up
                                </button>
                            </div>
                        </nav>
                    </header>

                    <main className="container mx-auto px-4 pt-12 md:pt-24 pb-16 max-w-[1500px]">
                        <div className="flex flex-col xl:flex-row items-center gap-8 md:gap-12 justify-between">
                            <div className="flex-1 w-full max-w-[586px]">
                                <div className="space-y-6 md:space-y-10">
                                    <div className="space-y-3 md:space-y-3.5">
                                        <h1 className="text-white text-3xl sm:text-4xl md:text-5xl lg:text-[54px] font-bold leading-tight md:leading-[60px] tracking-[-0.78px]">
                                            Go Beyond Rankings. Become the Source.
                                        </h1>

                                        <div className="space-y-2 text-white text-base md:text-lg lg:text-[19px] leading-6">
                                            <p>We build a new class of AI-focused backlinks that help your</p>
                                            <div className="flex flex-wrap items-center gap-2">
                                                <span>business be seen in</span>
                                                <div className="flex flex-wrap items-center gap-1.5">
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl border border-[#E9EAF1] bg-white shadow-sm">
                                                        <svg className="w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.0481 10.1992C18.0481 9.5752 17.9921 8.9752 17.8881 8.3992H9.6001V11.8072H14.3361C14.1281 12.9032 13.5041 13.8312 12.5681 14.4552V16.6712H15.4241C17.0881 15.1352 18.0481 12.8792 18.0481 10.1992Z" fill="#4285F4" />
                                                            <path d="M9.59965 18.8005C11.9757 18.8005 13.9677 18.0165 15.4237 16.6725L12.5677 14.4565C11.7837 14.9845 10.7837 15.3044 9.59965 15.3044C7.31165 15.3044 5.36765 13.7605 4.67165 11.6805H1.74365V13.9525C3.19165 16.8245 6.15965 18.8005 9.59965 18.8005Z" fill="#34A853" />
                                                            <path d="M4.67229 11.6715C4.49629 11.1435 4.39229 10.5835 4.39229 9.99945C4.39229 9.41545 4.49629 8.85545 4.67229 8.32745V6.05545H1.74429C1.14429 7.23945 0.800293 8.57545 0.800293 9.99945C0.800293 11.4235 1.14429 12.7595 1.74429 13.9435L4.02429 12.1675L4.67229 11.6715Z" fill="#FBBC05" />
                                                            <path d="M9.59965 4.70322C10.8957 4.70322 12.0477 5.15122 12.9677 6.01522L15.4877 3.49522C13.9597 2.07122 11.9757 1.19922 9.59965 1.19922C6.15965 1.19922 3.19165 3.17522 1.74365 6.05522L4.67165 8.32722C5.36765 6.24722 7.31165 4.70322 9.59965 4.70322Z" fill="#EA4335" />
                                                        </svg>
                                                        <span className="text-black text-sm">Google</span>
                                                    </div>
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl border border-[#E9EAF1] bg-white shadow-sm">
                                                        <svg className="w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M6.81372 14.3521C7.39482 15.0789 7.98665 15.9927 8.29637 16.5447C8.67355 17.2623 8.82994 17.7468 9.11052 18.6146C9.27458 19.0899 9.43097 19.234 9.75909 19.234C10.1179 19.234 10.2819 18.9918 10.4077 18.6146C10.6698 17.8004 10.8722 17.181 11.1927 16.5907C12.4285 14.2602 14.4432 12.6042 15.5778 10.335C15.5778 10.335 16.3244 8.94899 16.3244 7.0079C16.3244 5.19867 15.5885 3.94141 15.5885 3.94141L6.81832 14.3675L6.81372 14.3521Z" fill="#34A853" />
                                                            <path d="M3.8391 10.0908C4.54593 11.7007 5.89365 13.1113 6.8136 14.3532L11.6893 8.57289C11.6893 8.57289 11.0009 9.47444 9.75743 9.47444C8.37138 9.47444 7.24291 8.3705 7.24291 6.97525C7.24291 6.01544 7.81481 5.35001 7.81481 5.35001C4.22701 5.88358 4.42634 6.75293 3.82837 10.0877L3.8391 10.0908Z" fill="#FBBC04" />
                                                            <path d="M11.7508 0.702332C13.3761 1.22517 14.756 2.32757 15.5839 3.93748L11.6895 8.58322C11.6895 8.58322 12.2614 7.91472 12.2614 6.95798C12.2614 5.53359 11.0593 4.45879 9.76221 4.45879C8.53102 4.45879 7.83032 5.3496 7.83032 5.3496C8.12931 4.66884 11.2188 0.933852 11.7554 0.703865L11.7508 0.702332Z" fill="#4285F4" />
                                                            <path d="M4.72876 2.74598C5.69777 1.59298 7.39661 0.400116 9.74248 0.400116C10.8755 0.400116 11.7357 0.700632 11.7357 0.700632L7.82592 5.34637C7.5622 5.20332 4.98941 3.19982 4.72876 2.73985V2.74598Z" fill="#1A73E8" />
                                                            <path d="M3.83932 10.0914C3.83932 10.0914 3.19995 8.82187 3.19995 6.99424C3.19995 5.26167 3.87765 3.74376 4.7332 2.76248L7.83036 5.369L3.84391 10.0914H3.83932Z" fill="#EA4335" />
                                                        </svg>
                                                        <span className="text-black text-sm">G Maps</span>
                                                    </div>
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl border border-[#E9EAF1] bg-white shadow-sm">
                                                        <svg className="w-[115px] h-[22px]" viewBox="0 0 115 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1.3934 9.9539C0.846749 10.0104 0.399902 10.4504 0.399902 11C0.399902 11.5496 0.846749 11.9896 1.3934 12.0461C5.87575 12.5093 9.43829 16.0718 9.90147 20.5542C9.95796 21.1008 10.398 21.5477 10.9476 21.5477C11.4971 21.5477 11.9372 21.1008 11.9937 20.5542C12.4569 16.0718 16.0194 12.5093 20.5018 12.0461C21.0484 11.9896 21.4952 11.5496 21.4952 11C21.4952 10.4504 21.0484 10.0104 20.5018 9.9539C16.0194 9.49072 12.4569 5.92818 11.9937 1.44583C11.9372 0.899178 11.4971 0.452332 10.9476 0.452332C10.398 0.452332 9.95796 0.899178 9.90147 1.44583C9.43829 5.92818 5.87575 9.49072 1.3934 9.9539Z" fill="#B5BEFF" />
                                                            <text fill="black" style={{ fontFamily: 'Inter', fontSize: '14px' }} x="27" y="16">AI Overviews</text>
                                                        </svg>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="flex flex-wrap items-center gap-2">
                                                <div className="flex items-center gap-1.5">
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl border border-[#E9EAF1] bg-white shadow-sm">
                                                        <img src="https://api.builder.io/api/v1/image/assets/TEMP/ae1284bfcdbe42e6f4fbdcc61068c68465802151?width=42" alt="" className="w-[21px] h-[21px]" />
                                                        <span className="text-black text-sm">Chat GPT</span>
                                                    </div>
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl bg-white">
                                                        <img src="https://api.builder.io/api/v1/image/assets/TEMP/8937d50d213e74ef05d9f8fea7432fd7f91badf1?width=44" alt="" className="w-[22px] h-[22px]" />
                                                        <span className="text-black text-sm">Gemini</span>
                                                    </div>
                                                    <div className="flex items-center gap-1.5 px-2.5 py-2 rounded-3xl border border-[#E9EAF1] bg-white shadow-sm">
                                                        <img src="https://api.builder.io/api/v1/image/assets/TEMP/aa9cd4be49773ff3b58cc56447f5e34f62429c57?width=40" alt="" className="w-5 h-5" />
                                                        <span className="text-black text-sm">Perplexity</span>
                                                    </div>
                                                </div>
                                                <span>and the evolving</span>
                                            </div>
                                            <p>future of search.</p>
                                        </div>
                                    </div>

                                    <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-1 p-1.5 rounded-[33px] bg-white w-full max-w-[498px]">
                                        <input
                                            type="text"
                                            placeholder="Enter Your Website URL"
                                            className="flex-1 px-4 py-2 sm:py-0 text-sm md:text-base text-[#65677D] bg-transparent outline-none placeholder:text-[#65677D]"
                                        />
                                        <button
                                            className="px-3 md:px-4 py-2.5 rounded-[67px]  text-white text-xs md:text-sm font-medium whitespace-nowrap"
                                            style={{
                                                background: 'linear-gradient(180deg, #4A81FC 0%, #334EFD 100%)',
                                                boxShadow: '0 1px 3px 0 rgba(2, 10, 66, 0.38), 0 0 0 1px #4D64FB'
                                            }}
                                        >
                                            Let Us Show You How
                                        </button>
                                    </div>

                                    <div className="max-w-[519px]">
                                        <p className="text-black text-sm md:text-base">
                                            Backlinks are the foundation of all visibility. Welcome to our world.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div className="flex-shrink-0 w-full xl:w-[55%]">
                                <div
                                    className="w-full max-w-[800px] aspect-[800/635] rounded-2xl bg-[#F9F9FB] overflow-hidden relative mx-auto"
                                    style={{
                                        boxShadow: '0 36.323px 63.17px -15.003px rgba(74, 82, 131, 0.16), 0 13.258px 23.058px -8.686px rgba(74, 82, 131, 0.11), 0 6.437px 11.194px -4.738px rgba(74, 82, 131, 0.09), 0 3.155px 5.488px -3.159px rgba(74, 82, 131, 0.09), 0 1.248px 2.17px -0.79px rgba(74, 82, 131, 0.03), 0 0 0 8px rgba(9, 21, 98, 0.06)'
                                    }}
                                >
                                    <div className="absolute inset-0 bg-[#FBFAF9] rounded-2xl" />
                                    <img
                                        src={DashboardPreview}
                                        alt="Dashboard Preview"
                                        className="absolute left-0 md:-left-3.5 top-0 w-full h-full object-fill scale-100 hover:scale-110 transition-all duration-500"
                                    />
                                </div>
                            </div>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-5 mt-8 md:mt-64 max-w-[1752px]">
                            <div className="h-[200px] md:h-[260px] rounded-[13px] bg-[#EDEFF1]" />
                            <div className="h-[200px] md:h-[260px] rounded-[13px] bg-[#EDEFF1]" />
                            <div className="h-[200px] md:h-[260px] rounded-[13px] bg-[#EDEFF1]" />
                            <div className="h-[200px] md:h-[260px] rounded-[13px] bg-[#EDEFF1]" />
                        </div>
                    </main>
                </div>
            </div>
        </div>
    )
}

export default HomePage