159 أسطر
19 KiB
TypeScript
159 أسطر
19 KiB
TypeScript
import WorldMap from "../../assets/bgMapOpacity.png";
|
|
|
|
function StrategyHero() {
|
|
const trueIcon = <svg width="20" height="20" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
|
|
<path d="M10 19.05C14.8325 19.05 18.75 15.1325 18.75 10.3C18.75 5.4675 14.8325 1.54999 10 1.54999C5.16751 1.54999 1.25 5.4675 1.25 10.3C1.25 15.1325 5.16751 19.05 10 19.05Z" fill="#4CAF50" />
|
|
<path d="M14.4157 6.38336L8.74902 12.05L6.41569 9.7167L5.24902 10.8834L8.74902 14.3834L15.5824 7.55003L14.4157 6.38336Z" fill="#CCFF90" />
|
|
</svg>
|
|
|
|
return (
|
|
<div className="flex flex-col items-center px-4 py-16 rounded-xl bg-white shadow-[0_1px_1px_0_rgba(5,23,84,0.02),0_1px_2.5px_0_rgba(5,11,18,0.12),0_0_0_1px_#E9EAF1] relative overflow-hidden mb-5">
|
|
<div className="flex flex-col items-center gap-12 w-full max-w-4xl z-10">
|
|
<div className="flex flex-col items-center gap-2.5 text-center">
|
|
<h1 className="text-[32px] font-bold text-grey-950 leading-normal">
|
|
Your Strategy
|
|
</h1>
|
|
<p className="text-base text-gray-500 leading-[22px]">
|
|
(For World Domination)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-10 w-full ">
|
|
{/* World Map Background */}
|
|
<img
|
|
// src="https://api.builder.io/api/v1/image/assets/TEMP/9a98b10a88c312c11534f246f482275fb884becf?width=2837"
|
|
src={WorldMap}
|
|
alt=""
|
|
className="absolute inset-0 w-full h-full object-cover opacity-20 pointer-events-none"
|
|
// style={{ transform: 'translate(-27%, -31%)' }}
|
|
// style={{ width: '100vw', height: '100vh', objectFit: 'cover', pointerEvents: 'none', transform: 'translate(-27%, -31%)' }}
|
|
/>
|
|
|
|
{/* Steps Container */}
|
|
<div className="relative flex flex-col md:flex-row items-center md:items-start gap-8 md:gap-0 w-full justify-evenly">
|
|
{/* Step 1 */}
|
|
<div className="flex flex-col items-center gap-7 w-[86px] shrink-0">
|
|
<div className="relative w-[86px] h-[86px] rounded-[15.6px] border border-[rgba(164,173,187,0.71)] bg-white shadow-[0_-6.24px_1.56px_0_#F4F6F9_inset,0_7.8px_37.44px_0_rgba(57,64,98,0.07),0_1.742px_8.363px_0_rgba(57,64,98,0.04),0_0.519px_2.49px_0_rgba(57,64,98,0.03)]">
|
|
<svg width="44" height="44" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<path d="M22.0303 5.28833C24.3797 5.28838 26.5764 5.73427 28.6309 6.62036C30.7056 7.51522 32.4978 8.72344 34.0166 10.2434C35.5358 11.7637 36.7443 13.5562 37.6416 15.6301C38.5296 17.6826 38.9751 19.8788 38.9717 22.2288V22.4514L37.4756 21.9915C37.4208 17.8017 35.9215 14.2088 32.9863 11.2737C29.9957 8.28304 26.3222 6.78159 22.0303 6.78149C17.7381 6.78149 14.064 8.28289 11.0732 11.2737C8.08245 14.2645 6.58105 17.9385 6.58105 22.2307C6.58115 26.5227 8.0826 30.1961 11.0732 33.1868C14.0084 36.1219 17.6013 37.6212 21.791 37.676L22.251 39.1721H22.0303C19.6782 39.1721 17.4814 38.7259 15.4297 37.8401C13.3573 36.9452 11.5646 35.7375 10.043 34.217C8.52172 32.6969 7.3135 30.9046 6.41992 28.8313C5.53496 26.7779 5.08902 24.5809 5.08789 22.2297C5.08676 19.8793 5.5329 17.683 6.41992 15.6301C7.31608 13.5561 8.5247 11.7638 10.0439 10.2434C11.5627 8.72356 13.3541 7.51518 15.4287 6.62036C17.4833 5.73422 19.6807 5.28833 22.0303 5.28833ZM36.5244 27.678L32.9004 28.8782L31.2793 29.4153L32.4873 30.6223L39.4346 37.5706L37.3701 39.635L30.4219 32.6877L29.2148 31.4797L28.6777 33.1008L27.4775 36.7249L23.5996 23.8L36.5244 27.678ZM22.0303 12.4866C24.6727 12.4867 26.8997 13.3749 28.7695 15.1633C30.2667 16.5954 31.2005 18.273 31.5859 20.2219L29.9043 19.7219C29.4069 18.1427 28.4983 16.8151 27.1875 15.7639C25.797 14.649 24.1861 14.0572 22.3916 13.9866L22.0303 13.9797C19.7694 13.9797 17.8076 14.7971 16.2021 16.4026C14.5967 18.0081 13.7793 19.9698 13.7793 22.2307C13.7794 24.1709 14.373 25.9048 15.5635 27.3879C16.6155 28.6984 17.9431 29.6072 19.5215 30.1047L20.0215 31.7864C18.0725 31.401 16.3949 30.4671 14.9629 28.97C13.1745 27.1001 12.2862 24.8732 12.2861 22.2307C12.2861 19.5077 13.2273 17.2271 15.127 15.3274C17.0266 13.4277 19.3072 12.4866 22.0303 12.4866Z" fill="#787B91" stroke="#787B91" strokeWidth="2.106" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2.5">
|
|
<div className="relative w-[25px] h-[26px]">
|
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12.7001" cy="13.05" r="12.35" fill="#4C60E5" />
|
|
</svg>
|
|
<span className="absolute inset-0 flex items-center justify-center text-white text-[17px] font-semibold">1</span>
|
|
</div>
|
|
<p className="text-base text-gray-900 text-center whitespace-nowrap">Add your Keywords</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dotted Line 1 */}
|
|
<div className="hidden md:block w-[158px] h-0.5 mt-[43px] shrink-0 absolute bottom-[70px] left-[210px]">
|
|
<svg width="163" height="5" viewBox="0 0 163 5" fill="none" xmlns="http://www.w3.org/2000/svg" className="opacity-60">
|
|
<path d="M2.59985 2.70001H160.55" stroke="#4C60E5" strokeWidth="3.9" strokeLinecap="round" strokeDasharray="0.13 9.23" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Step 2 */}
|
|
<div className="flex flex-col items-center gap-7 w-[86px] shrink-0">
|
|
<div className="relative w-[86px] h-[86px] rounded-[15.6px] border border-[rgba(164,173,187,0.71)] bg-white shadow-[0_-6.24px_1.56px_0_#F4F6F9_inset,0_7.8px_37.44px_0_rgba(57,64,98,0.07),0_1.742px_8.363px_0_rgba(57,64,98,0.04),0_0.519px_2.49px_0_rgba(57,64,98,0.03)]">
|
|
<svg width="44" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<path d="M19.6015 35.2345C18.2098 36.6262 16.3222 37.408 14.3541 37.408C12.3859 37.408 10.4983 36.6262 9.1066 35.2345C7.71489 33.8428 6.93303 31.9552 6.93303 29.987C6.93303 28.0188 7.71489 26.1313 9.1066 24.7395L15.665 18.1812C16.9883 16.857 18.7636 16.0824 20.6344 16.0129C22.5052 15.9434 24.333 16.5842 25.7509 17.8066M24.8452 9.00481C26.2364 7.6136 28.1232 6.83203 30.0907 6.83203C32.0582 6.83203 33.945 7.6136 35.3363 9.00481C36.7275 10.396 37.509 12.2829 37.509 14.2504C37.509 16.2178 36.7275 18.1047 35.3363 19.4959L28.7817 26.0505C27.4592 27.3768 25.6836 28.1535 23.8119 28.2244C21.9402 28.2953 20.111 27.6552 18.6919 26.4326" stroke="#787B91" strokeWidth="3.432" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2.5">
|
|
<div className="relative w-[25px] h-[26px]">
|
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12.9995" cy="13.05" r="12.35" fill="#4C60E5" />
|
|
</svg>
|
|
<span className="absolute inset-0 flex items-center justify-center text-white text-[17px] font-semibold">2</span>
|
|
</div>
|
|
<p className="text-base text-grey-900 text-center whitespace-nowrap">Light 250+ Beacons</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dotted Line 2 */}
|
|
<div className="hidden md:block w-[168px] h-0.5 mt-[43px] shrink-0 absolute bottom-[70px] right-[280px]">
|
|
<svg width="163" height="5" viewBox="0 0 163 5" fill="none" xmlns="http://www.w3.org/2000/svg" className="opacity-60">
|
|
<path d="M2.8999 2.70001H160.85" stroke="#4C60E5" strokeWidth="3.9" strokeLinecap="round" strokeDasharray="0.13 9.23" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Step 3 */}
|
|
<div className="flex flex-col items-center gap-7 w-[185px] shrink-0">
|
|
<div className="relative w-[86px] h-[86px] rounded-[15.6px] border border-[rgba(164,173,187,0.71)] bg-white shadow-[0_-6.24px_1.56px_0_#F4F6F9_inset,0_7.8px_37.44px_0_rgba(57,64,98,0.07),0_1.742px_8.363px_0_rgba(57,64,98,0.04),0_0.519px_2.49px_0_rgba(57,64,98,0.03)]">
|
|
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
|
<path d="M106.834 71.2781V59.3875C106.834 58.3871 106.437 57.4278 105.73 56.7204C105.022 56.0131 104.063 55.6157 103.063 55.6157H76.6604C75.6601 55.6157 74.7007 56.0131 73.9934 56.7204C73.286 57.4278 72.8887 58.3871 72.8887 59.3875V88.2223C72.8888 88.4569 72.9617 88.6856 73.0975 88.8769C73.2333 89.0681 73.4251 89.2125 73.6465 89.29C73.8679 89.3674 74.1079 89.3742 74.3333 89.3092C74.5587 89.2443 74.7584 89.111 74.9047 88.9276L79.3006 83.4322C79.6539 82.9909 80.1019 82.6347 80.6115 82.3899C81.1211 82.1451 81.6791 82.0179 82.2444 82.0178H88.9911" stroke="#787B91" strokeWidth="3.432" strokeLinecap="round" strokeLinejoin="round" transform="translate(-72, -55)" />
|
|
<path d="M87.517 68.8167H84.3909C83.9764 68.8167 83.5788 68.652 83.2857 68.3589C82.9926 68.0658 82.8279 67.6682 82.8279 67.2537V65.6906C82.8279 65.2761 82.9926 64.8785 83.2857 64.5854C83.5788 64.2922 83.9764 64.1276 84.3909 64.1276H85.954C86.3685 64.1276 86.7661 64.2922 87.0592 64.5854C87.3524 64.8785 87.517 65.2761 87.517 65.6906V68.8167ZM87.517 68.8167C87.517 70.3798 85.954 71.9428 84.3909 73.5059M96.8953 68.8167H93.7692C93.3547 68.8167 92.9571 68.652 92.664 68.3589C92.3709 68.0658 92.2062 67.6682 92.2062 67.2537V65.6906C92.2062 65.2761 92.3709 64.8785 92.664 64.5854C92.9571 64.2922 93.3547 64.1276 93.7692 64.1276H95.3323C95.7468 64.1276 96.1444 64.2922 96.4375 64.5854C96.7306 64.8785 96.8953 65.2761 96.8953 65.6906V68.8167ZM96.8953 68.8167C96.8953 70.3798 95.3323 71.9428 93.7692 73.5059" fill="#787B91" transform="translate(-72, -55)" />
|
|
<path d="M87.517 68.8167H84.3909C83.9764 68.8167 83.5788 68.652 83.2857 68.3589C82.9926 68.0658 82.8279 67.6682 82.8279 67.2537V65.6906C82.8279 65.2761 82.9926 64.8785 83.2857 64.5854C83.5788 64.2922 83.9764 64.1276 84.3909 64.1276H85.954C86.3685 64.1276 86.7661 64.2922 87.0592 64.5854C87.3524 64.8785 87.517 65.2761 87.517 65.6906V68.8167ZM87.517 68.8167C87.517 70.3798 85.954 71.9428 84.3909 73.5059M96.8953 68.8167H93.7692C93.3547 68.8167 92.9571 68.652 92.664 68.3589C92.3709 68.0658 92.2062 67.6682 92.2062 67.2537V65.6906C92.2062 65.2761 92.3709 64.8785 92.664 64.5854C92.9571 64.2922 93.3547 64.1276 93.7692 64.1276H95.3323C95.7468 64.1276 96.1444 64.2922 96.4375 64.5854C96.7306 64.8785 96.8953 65.2761 96.8953 65.6906V68.8167ZM96.8953 68.8167C96.8953 70.3798 95.3323 71.9428 93.7692 73.5059" stroke="#787B91" strokeWidth="2.5633" strokeLinecap="round" strokeLinejoin="round" transform="translate(-72, -55)" />
|
|
<path d="M101.912 74.9068C102.015 74.7311 102.161 74.5853 102.338 74.4839C102.514 74.3826 102.714 74.3292 102.917 74.3292C103.121 74.3292 103.321 74.3826 103.497 74.4839C103.673 74.5853 103.82 74.7311 103.922 74.9068L106.524 79.372L111.575 80.4665C111.774 80.5096 111.958 80.6042 112.108 80.7406C112.259 80.877 112.372 81.0505 112.434 81.2439C112.497 81.4373 112.508 81.6438 112.466 81.8428C112.424 82.0418 112.331 82.2263 112.196 82.378L108.752 86.2318L109.274 91.3736C109.294 91.5761 109.261 91.7804 109.178 91.9661C109.095 92.1519 108.965 92.3126 108.8 92.4322C108.635 92.5519 108.442 92.6262 108.24 92.6478C108.037 92.6695 107.833 92.6376 107.647 92.5555L102.917 90.4709L98.1877 92.5555C98.0015 92.6376 97.7971 92.6695 97.5947 92.6478C97.3923 92.6262 97.1992 92.5519 97.0346 92.4322C96.8699 92.3126 96.7395 92.1519 96.6564 91.9661C96.5733 91.7804 96.5404 91.5761 96.561 91.3736L97.0821 86.2318L93.6388 82.3789C93.5031 82.2273 93.4096 82.0427 93.3676 81.8436C93.3256 81.6445 93.3365 81.4378 93.3994 81.2443C93.4622 81.0507 93.5747 80.877 93.7256 80.7405C93.8765 80.6041 94.0606 80.5096 94.2595 80.4665L99.311 79.372L101.912 74.9068Z" fill="url(#paint2_linear)" transform="translate(-72, -55)" />
|
|
<defs>
|
|
<linearGradient id="paint2_linear" x1="109.01" y1="89.9964" x2="95.9537" y2="79.5516" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#D6A205" />
|
|
<stop offset="1" stopColor="#FFC977" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2.5">
|
|
<div className="relative w-[25px] h-[26px]">
|
|
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12.2997" cy="13.05" r="12.35" fill="#4C60E5" />
|
|
</svg>
|
|
<span className="absolute inset-0 flex items-center justify-center text-white text-[17px] font-semibold">3</span>
|
|
</div>
|
|
<p className="text-base text-grey-900 text-center leading-[23.4px] whitespace-nowrap">
|
|
Become the Source<br />Cited in AI and Top LLMs
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Guaranteed Backlinks Section */}
|
|
<div className="flex flex-col items-start gap-2 w-full max-w-[640px]">
|
|
<h3 className="text-base font-bold text-gray-900 leading-[23.4px]">
|
|
Guaranteed, Backlinks Are:
|
|
</h3>
|
|
<div className="flex flex-col md:flex-row items-stretch w-full gap-0">
|
|
<div className="flex items-center gap-1.5 px-3.5 py-2.5 border border-grey-300 md:rounded-l-md flex-1 min-h-[56px] bg-white relative">
|
|
{trueIcon}
|
|
<span className="text-[15px] text-grey-900 leading-[18px]">Indexed</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 px-3.5 py-2.5 border border-grey-300 bg-white flex-1 min-h-[56px] relative">
|
|
{trueIcon}
|
|
<span className="text-[15px] text-grey-900 leading-[18px]">Interlinked</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 px-3.5 py-2.5 border border-grey-300 bg-white md:rounded-r-md flex-1 min-h-[56px] relative">
|
|
{trueIcon}
|
|
<span className="text-[15px] text-grey-900 leading-[18px]">LLM Seeded</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bonus Section */}
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-[#E5F9EA] w-full max-w-[640px] relative">
|
|
<div className="flex items-center justify-center w-10 h-10 p-2.5 rounded-[10px] border border-[rgba(0,0,0,0.07)] bg-white shrink-0">
|
|
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_medal)">
|
|
<path d="M0.168164 2.36678C0.0574219 2.20272 0 2.00585 0 1.80897C0 1.25116 0.451172 0.799988 1.00898 0.799988H5.49199C5.95137 0.799988 6.38203 1.04198 6.61582 1.43573L9.42539 6.11561C7.44844 6.36581 5.68066 7.28866 4.36406 8.65448L0.168164 2.36678ZM20.8277 2.36678L16.6359 8.65448C15.3193 7.28866 13.5516 6.36581 11.5746 6.11561L14.3842 1.43573C14.6221 1.04198 15.0486 0.799988 15.508 0.799988H19.991C20.5488 0.799988 21 1.25116 21 1.80897C21 2.00585 20.9426 2.20272 20.8318 2.36678H20.8277ZM3.28125 14.5812C3.28125 12.6667 4.04179 10.8306 5.39557 9.47681C6.74935 8.12303 8.58547 7.36249 10.5 7.36249C12.4145 7.36249 14.2506 8.12303 15.6044 9.47681C16.9582 10.8306 17.7188 12.6667 17.7188 14.5812C17.7188 16.4958 16.9582 18.3319 15.6044 19.6857C14.2506 21.0394 12.4145 21.8 10.5 21.8C8.58547 21.8 6.74935 21.0394 5.39557 19.6857C4.04179 18.3319 3.28125 16.4958 3.28125 14.5812ZM10.8445 10.6889C10.7051 10.4017 10.299 10.4017 10.1555 10.6889L9.23672 12.551C9.1793 12.6658 9.07266 12.7437 8.94961 12.7601L6.89062 13.0596C6.5748 13.1047 6.45176 13.4902 6.67734 13.7158L8.16621 15.1678C8.25645 15.258 8.29746 15.381 8.27695 15.5082L7.92422 17.5549C7.8709 17.8666 8.19902 18.1086 8.48203 17.9609L10.3195 16.993C10.4303 16.9355 10.5656 16.9355 10.6764 16.993L12.5139 17.9609C12.7969 18.1086 13.125 17.8707 13.0717 17.5549L12.7189 15.5082C12.6984 15.3851 12.7395 15.258 12.8297 15.1678L14.3186 13.7158C14.5482 13.4943 14.4211 13.1088 14.1053 13.0596L12.0504 12.7601C11.9273 12.7437 11.8166 12.6617 11.7633 12.551L10.8445 10.6889Z" fill="#65677D" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_medal">
|
|
<rect width="21" height="21" fill="white" transform="translate(0 0.799988)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm text-grey-900 leading-5">
|
|
<span className="font-bold">BONUS: </span>
|
|
Reputation management is built in. The first pages of Google and Bing become a symphony of positive presence for your brand name, that you control.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default StrategyHero; |