mohammedsaid18/dashboard
1
0
نسخ 2
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

Compare commits

قاعدة: mohammedsaid18:main
الفروع العلامات
mohammedsaid18:main mohammedsaid18:feature/keyword-actions-ui mohammedsaid18:ui
...
مقارنة: mohammedsaid18:e7f4317ef20b23a7466fcd9dc73c58efd7a33539
الفروع العلامات
mohammedsaid18:feature/keyword-actions-ui mohammedsaid18:ui mohammedsaid18:main

6 الالتزامات
main ... e7f4317ef2

المؤلف SHA1 الرسالة التاريخ
mohammedsaid18
e7f4317ef2 update navbar 2025-10-19 23:37:39 +03:00
mohammedsaid18
f6295a9853 Create Home Page 2025-10-19 23:26:31 +03:00
mohammedsaid18
b673a28b4a Create Home Page 2025-10-19 23:22:16 +03:00
mohammedsaid18
490aebbf8a Add Page Keyword 2025-10-19 19:16:45 +03:00
mohammedsaid18
50d9c13f98 feature/keyword-actions 2025-10-19 14:10:29 +03:00
mohammedsaid18
a1ce182317 feature/keyword-actions-ui 2025-10-19 13:53:47 +03:00
43 ملفات معدلة مع 2947 إضافات و323 حذوفات
توسيع جميع الملفات طي جميع الملفات

2
public/vite.svg
عرض الملف

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stopColor="#41D1FF"></stop><stop offset="100%" stopColor="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stopColor="#FFEA83"></stop><stop offset="8.333%" stopColor="#FFDD35"></stop><stop offset="100%" stopColor="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 1.5 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.5 KiB

17
src/App.tsx
عرض الملف

@@ -9,28 +9,37 @@ import Settings from './pages/Settings';
import Strategy from './pages/Strategy';
import Login from './pages/login';
import ProtectedRoute from './components/ProtectedRoute';
import Keywords from './pages/Keywords';
import HomePage from './pages/HomePage';
function App() {
return (
<Router>
<div className="min-h-screen bg-white">
<Header />
<Routes>
<Route path="/login" element={<Login />} />
{/* <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/" element={<HomePage />} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/portfolio" element={<ProtectedRoute><Portfolio /></ProtectedRoute>} />
<Route path="/analysis" element={<ProtectedRoute><Analysis /></ProtectedRoute>} />
<Route path="/strategy" element={<ProtectedRoute><Strategy /></ProtectedRoute>} />
<Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
*/}
<Route path="/keywords" element={<ProtectedRoute><Keywords /></ProtectedRoute>} />
<Route path="/" element={<Dashboard />} />
{/* <Route path="/" element={<Dashboard />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/analysis" element={<Analysis />} />
<Route path="/strategy" element={<Strategy />} />
<Route path="/settings" element={<Settings />} />
<Route path="/analysis" element={<Analysis />} />
<Route path="/keywords" element={<Keywords />} /> */}
</Routes>

777
src/assets/MacBookPro.svg Normal file
عرض الملف

تم حذف اختلاف الملف لأن أحد الأسطر أو أكثر طويلة جداً
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.1 MiB

ثنائية
src/assets/bgMapOpacity.png Normal file
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 872 KiB

178
src/assets/herosection.svg Normal file
عرض الملف

@@ -0,0 +1,178 @@
<svg width="1512" height="944" viewBox="0 0 1512 944" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1512" height="762.413" fill="url(#paint0_linear_11710_20413)"/>
<g style="mix-blend-mode:overlay" clip-path="url(#clip0_11710_20413)">
<rect width="1509.69" height="943.556" transform="translate(1.15527)" fill="white"/>
<mask id="mask0_11710_20413" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="1510" height="944">
<rect x="1.15527" width="1509.69" height="943.556" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0_11710_20413)">
<rect x="-68.0388" y="-0.501068" width="1648.08" height="996.959" fill="#3742D9"/>
<g filter="url(#filter0_f_11710_20413)">
<path d="M-59.4731 415.346L781.453 -13.7994L1163.69 -13.7994L1631.48 100.64L-8.50822 740.27L-59.4731 415.346Z" fill="url(#paint1_linear_11710_20413)"/>
</g>
<g filter="url(#filter1_f_11710_20413)">
<path d="M-104.846 402.2L839.999 -0.653327L1163.69 -13.7994L1631.48 100.64L-8.50805 740.27L-104.846 402.2Z" fill="url(#paint2_linear_11710_20413)"/>
</g>
<g filter="url(#filter2_f_11710_20413)">
<ellipse cx="345.81" cy="112.777" rx="345.81" ry="112.777" transform="matrix(0.914846 -0.403803 0.330497 0.943807 533.886 358.587)" fill="#0623DF"/>
</g>
<g filter="url(#filter3_f_11710_20413)">
<path d="M707.211 30.887C523.798 57.4573 295.026 108.384 70.1972 30.887C58.364 24.9825 49.2918 31.3298 107.668 103.955C180.639 194.737 419.273 157.096 707.211 30.887Z" fill="#4463B1"/>
</g>
<g opacity="0.4" filter="url(#filter4_f_11710_20413)">
<path d="M640.416 43.4482C494.946 64.5219 313.501 104.913 135.183 43.4482C125.798 38.7652 118.603 43.7994 164.903 101.401C222.778 173.402 412.044 143.548 640.416 43.4482Z" fill="#4463B1"/>
</g>
<path d="M717.451 343.694C1068.75 172.036 1214.36 163.862 1551.1 229.256L1662.13 449.959L38.5191 950.628C8.78947 945.179 94.9442 807.58 329.749 599.138C374.01 559.847 366.155 515.353 717.451 343.694Z" fill="url(#paint3_linear_11710_20413)"/>
<g opacity="0.7" filter="url(#filter5_f_11710_20413)">
<path d="M943.64 269.005C1303.41 121.101 1214.36 163.863 1551.09 229.256L1662.12 449.959L51.2595 946.542C21.5299 941.092 -12.4469 825.563 89.4836 660.445C216.897 454.046 524.844 441.178 943.64 269.005Z" fill="#4463B1"/>
</g>
<g filter="url(#filter6_f_11710_20413)">
<path d="M846.681 362.086C1258 259.039 1237.25 163.863 1609.6 229.256L1662.12 449.96L-119.126 946.542C-152 941.092 -189.571 825.564 -76.8589 660.445C64.031 454.046 536.724 439.741 846.681 362.086Z" fill="#4463B1"/>
</g>
<g filter="url(#filter7_f_11710_20413)">
<ellipse cx="345.81" cy="112.777" rx="345.81" ry="112.777" transform="matrix(0.914846 -0.403803 0.330497 0.943807 -69.3596 527.391)" fill="#4463B1"/>
</g>
<g opacity="0.4" filter="url(#filter8_f_11710_20413)">
<ellipse cx="345.81" cy="163.723" rx="345.81" ry="163.723" transform="matrix(0.914846 -0.403803 0.330497 0.943807 460.186 587.338)" fill="#4463B1"/>
</g>
<g filter="url(#filter9_f_11710_20413)">
<ellipse cx="345.81" cy="112.777" rx="345.81" ry="112.777" transform="matrix(0.914846 -0.403803 0.330497 0.943807 1029.4 452.626)" fill="#558CF8"/>
</g>
<g filter="url(#filter10_f_11710_20413)">
<ellipse cx="310.742" cy="173.722" rx="310.742" ry="173.722" transform="matrix(0.914846 -0.403803 0.330497 0.943807 -387.392 532.984)" fill="#4C7EFE"/>
</g>
<g filter="url(#filter11_f_11710_20413)">
<path d="M-450.703 836.731V1490.82H1872.54V357.321L-450.703 836.731Z" fill="white"/>
</g>
<g filter="url(#filter12_f_11710_20413)">
<path d="M1226.59 204.018L1732.72 -53.4682L1607.12 256.539L1226.59 204.018Z" fill="#4C7EFE"/>
</g>
<g opacity="0.4" filter="url(#filter13_f_11710_20413)">
<path d="M319.454 841.545L1118.7 472.093L1497.31 419.143L1969.66 421.799L395.464 1026.01L319.454 841.545Z" fill="url(#paint4_linear_11710_20413)"/>
</g>
<g opacity="0.4" filter="url(#filter14_f_11710_20413)">
<path d="M932.13 651.383L1773.11 396.164L2155.37 396.164L2623.19 464.222L983.099 844.619L932.13 651.383Z" fill="url(#paint5_linear_11710_20413)"/>
</g>
<g opacity="0.4" filter="url(#filter15_f_11710_20413)">
<path d="M881.569 707.987L1790.58 356.355L2110.94 309.609L2583.47 320.833L1001.41 895.975L881.569 707.987Z" fill="url(#paint6_linear_11710_20413)"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_f_11710_20413" x="-66.8119" y="-21.1381" width="1705.63" height="768.747" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.66938" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter1_f_11710_20413" x="-130.007" y="-38.9609" width="1786.65" height="804.393" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="12.5807" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter2_f_11710_20413" x="397.003" y="-22.1395" width="981.037" height="695.053" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="85.9684" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter3_f_11710_20413" x="-9.84216" y="-42.0887" width="788.344" height="267.388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="35.6454" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter4_f_11710_20413" x="90.5024" y="4.36978" width="587.656" height="174.471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="18.8711" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter5_f_11710_20413" x="9.45373" y="157.608" width="1664.2" height="800.466" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5.76618" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter6_f_11710_20413" x="-200.828" y="159.532" width="1911.18" height="835.236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="24.1131" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter7_f_11710_20413" x="-206.243" y="146.664" width="981.037" height="695.053" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="85.9684" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter8_f_11710_20413" x="337.714" y="222.014" width="985.891" height="760.418" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="85.9684" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter9_f_11710_20413" x="892.519" y="71.8993" width="981.037" height="695.053" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="85.9684" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter10_f_11710_20413" x="-507.711" y="193.054" width="924.028" height="756.825" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="85.9684" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter11_f_11710_20413" x="-614.253" y="193.772" width="2650.34" height="1460.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="81.7748" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter12_f_11710_20413" x="1155.3" y="-124.759" width="648.704" height="452.589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="35.6454" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter13_f_11710_20413" x="312.116" y="411.805" width="1664.88" height="621.546" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.66938" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter14_f_11710_20413" x="924.792" y="388.825" width="1705.74" height="463.133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="3.66938" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<filter id="filter15_f_11710_20413" x="856.408" y="284.447" width="1752.22" height="636.689" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="12.5807" result="effect1_foregroundBlur_11710_20413"/>
</filter>
<linearGradient id="paint0_linear_11710_20413" x1="756" y1="0" x2="756" y2="762.413" gradientUnits="userSpaceOnUse">
<stop offset="0.259615" stop-color="#112674"/>
<stop offset="1" stop-color="#3CA1EE" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_11710_20413" x1="786.004" y1="-13.7994" x2="86.8029" y2="577.525" gradientUnits="userSpaceOnUse">
<stop stop-color="#54BDFF"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_11710_20413" x1="526.627" y1="253.906" x2="32.3322" y2="656.59" gradientUnits="userSpaceOnUse">
<stop offset="0.0104167" stop-color="#91B0ED"/>
<stop offset="0.458333" stop-color="#437DD5"/>
<stop offset="1" stop-color="#3A89F0"/>
</linearGradient>
<linearGradient id="paint3_linear_11710_20413" x1="1221.64" y1="282.388" x2="436.51" y2="562.781" gradientUnits="userSpaceOnUse">
<stop stop-color="#819CFF"/>
<stop offset="0.65537" stop-color="#006CE7"/>
<stop offset="1" stop-color="#819CFF"/>
</linearGradient>
<linearGradient id="paint4_linear_11710_20413" x1="1123.2" y1="471.463" x2="806.172" y2="1086.51" gradientUnits="userSpaceOnUse">
<stop stop-color="#3A4CF0"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint5_linear_11710_20413" x1="1777.66" y1="396.164" x2="1380.85" y2="960.491" gradientUnits="userSpaceOnUse">
<stop stop-color="#3AF0C6"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint6_linear_11710_20413" x1="1497.76" y1="544.384" x2="1261.11" y2="967.561" gradientUnits="userSpaceOnUse">
<stop offset="0.166667" stop-color="#60B5FF"/>
<stop offset="0.541667" stop-color="#DBC0C6" stop-opacity="0.69"/>
<stop offset="0.791667" stop-color="#C2DEFF" stop-opacity="0.62"/>
<stop offset="1" stop-color="#9492FF" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_11710_20413">
<rect width="1509.69" height="943.556" fill="white" transform="translate(1.15527)"/>
</clipPath>
</defs>
</svg>
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 12 KiB

4
src/assets/icons/InProgress.svg
عرض الملف

@@ -1,5 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" stroke="#4285F4" stroke-width="1.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" stroke="#4285F4" strokeWidth="1.75" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12.7158 7.99997C12.7158 9.47365 12.0526 10.7263 11.0211 11.6105L8 7.99997V3.28418C10.5789 3.28418 12.7158 5.42102 12.7158 7.99997Z" fill="#4285F4"/>
<path d="M8.4375 3.74414C10.5747 3.96793 12.2783 5.81021 12.2783 8C12.2783 9.17422 11.8146 10.1946 11.0586 10.9746L8.4375 7.83984V3.74414Z" fill="#4285F4" stroke="#4285F4" stroke-width="0.875"/>
<path d="M8.4375 3.74414C10.5747 3.96793 12.2783 5.81021 12.2783 8C12.2783 9.17422 11.8146 10.1946 11.0586 10.9746L8.4375 7.83984V3.74414Z" fill="#4285F4" stroke="#4285F4" strokeWidth="0.875"/>
</svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 681 B

بعد

العرض:  |  الارتفاع:  |  الحجم: 677 B

4
src/assets/icons/NA.svg
عرض الملف

@@ -1,4 +1,4 @@
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 16.5C12.6421 16.5 16 13.1421 16 9C16 4.85786 12.6421 1.5 8.5 1.5C4.35786 1.5 1 4.85786 1 9C1 13.1421 4.35786 16.5 8.5 16.5Z" stroke="#999BAD" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.1987 2.59314L4.80078 15.4069" stroke="#999BAD" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 16.5C12.6421 16.5 16 13.1421 16 9C16 4.85786 12.6421 1.5 8.5 1.5C4.35786 1.5 1 4.85786 1 9C1 13.1421 4.35786 16.5 8.5 16.5Z" stroke="#999BAD" strokeWidth="1.875" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12.1987 2.59314L4.80078 15.4069" stroke="#999BAD" strokeWidth="1.875" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 505 B

بعد

العرض:  |  الارتفاع:  |  الحجم: 499 B

3
src/assets/icons/Vector.svg Normal file
عرض الملف

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9861 10.0701L12.2185 10.325L11.1794 10.6697L11.9529 11.4432L14.6462 14.1356L14.1355 14.6463L11.4431 11.9529L10.6697 11.1795L10.325 12.2186L10.0701 12.9861L8.82007 8.82013L12.9861 10.0701ZM7.81421 1.07404C8.75099 1.07404 9.62398 1.25173 10.4392 1.60333C11.2674 1.96054 11.9803 2.44186 12.5837 3.04572C13.1873 3.64976 13.6689 4.36238 14.0271 5.19025C14.3496 5.93571 14.5223 6.73017 14.5486 7.57794L14.4158 7.53693C14.3536 5.82365 13.7133 4.34224 12.4998 3.12872C11.2212 1.85034 9.64538 1.20685 7.81421 1.20685C5.98302 1.20693 4.4072 1.85018 3.12866 3.12872C1.85012 4.40726 1.20687 5.98308 1.20679 7.81427C1.20679 9.64544 1.85028 11.2213 3.12866 12.4998C4.34218 13.7133 5.82359 14.3537 7.53687 14.4158L7.57788 14.5486C6.72951 14.5212 5.93527 14.3479 5.19019 14.0262C4.36301 13.669 3.65023 13.1878 3.04565 12.5838C2.44127 11.9799 1.95994 11.2668 1.60327 10.4393C1.25215 9.62453 1.07443 8.75176 1.07397 7.81427C1.07353 6.87716 1.25136 6.00469 1.60327 5.19025C1.961 4.3624 2.44212 3.64975 3.04565 3.04572C3.64906 2.44186 4.36198 1.96054 5.19019 1.60333C6.00525 1.25183 6.87765 1.07408 7.81421 1.07404ZM7.81421 4.04083C8.84228 4.04083 9.70059 4.38354 10.4255 5.07697C10.901 5.53181 11.2284 6.04807 11.4138 6.63458L11.2458 6.5838C11.0191 5.9425 10.6334 5.39698 10.0906 4.96173C9.43519 4.43624 8.66725 4.17427 7.81519 4.17365H7.81421C6.81822 4.17373 5.94831 4.53564 5.24194 5.242C4.53558 5.94837 4.17367 6.81828 4.17358 7.81427C4.17358 8.66662 4.4356 9.43516 4.96167 10.0906C5.39718 10.6331 5.9428 11.0191 6.58374 11.2459L6.63452 11.4139C6.04801 11.2285 5.53175 10.9011 5.0769 10.4256C4.38348 9.70065 4.04077 8.84234 4.04077 7.81427C4.04085 6.75551 4.40336 5.87746 5.14038 5.14044C5.8774 4.40342 6.75545 4.04091 7.81421 4.04083Z" fill="#2B2D3B" stroke="#4C60E5" strokeWidth="1.35"/>
</svg>
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.8 KiB

3
src/assets/icons/Vector2.svg Normal file
عرض الملف

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9861 10.0701L12.2186 10.325L11.1795 10.6697L11.9529 11.4432L14.6463 14.1356L14.1356 14.6463L11.4432 11.9529L10.6697 11.1795L10.325 12.2186L10.0701 12.9861L8.82013 8.82013L12.9861 10.0701ZM7.81427 1.07404C8.75105 1.07404 9.62404 1.25173 10.4393 1.60333C11.2675 1.96054 11.9804 2.44186 12.5838 3.04572C13.1873 3.64976 13.669 4.36238 14.0272 5.19025C14.3497 5.93571 14.5223 6.73017 14.5486 7.57794L14.4158 7.53693C14.3537 5.82365 13.7133 4.34224 12.4998 3.12872C11.2213 1.85034 9.64544 1.20685 7.81427 1.20685C5.98308 1.20693 4.40726 1.85018 3.12872 3.12872C1.85018 4.40726 1.20693 5.98308 1.20685 7.81427C1.20685 9.64544 1.85034 11.2213 3.12872 12.4998C4.34224 13.7133 5.82365 14.3537 7.53693 14.4158L7.57794 14.5486C6.72957 14.5212 5.93533 14.3479 5.19025 14.0262C4.36307 13.669 3.65029 13.1878 3.04572 12.5838C2.44133 11.9799 1.96 11.2668 1.60333 10.4393C1.25222 9.62453 1.07449 8.75176 1.07404 7.81427C1.07359 6.87716 1.25142 6.00469 1.60333 5.19025C1.96106 4.3624 2.44218 3.64975 3.04572 3.04572C3.64912 2.44186 4.36204 1.96054 5.19025 1.60333C6.00531 1.25183 6.87771 1.07408 7.81427 1.07404ZM7.81427 4.04083C8.84234 4.04083 9.70065 4.38354 10.4256 5.07697C10.9011 5.53181 11.2285 6.04807 11.4139 6.63458L11.2459 6.5838C11.0192 5.9425 10.6334 5.39698 10.0906 4.96173C9.43525 4.43624 8.66731 4.17427 7.81525 4.17365H7.81427C6.81828 4.17373 5.94837 4.53564 5.242 5.242C4.53564 5.94837 4.17373 6.81828 4.17365 7.81427C4.17365 8.66662 4.43566 9.43516 4.96173 10.0906C5.39725 10.6331 5.94286 11.0191 6.5838 11.2459L6.63458 11.4139C6.04807 11.2285 5.53181 10.9011 5.07697 10.4256C4.38354 9.70065 4.04083 8.84234 4.04083 7.81427C4.04091 6.75551 4.40342 5.87746 5.14044 5.14044C5.87746 4.40342 6.75551 4.04091 7.81427 4.04083Z" fill="#2B2D3B" stroke="#2B2D3B" strokeWidth="1.35"/>
</svg>
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.8 KiB

2
src/assets/icons/gemini-color.svg
عرض الملف

@@ -1 +1 @@
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"></stop><stop offset="1" stop-color="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"></stop><stop offset="1" stop-color="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"></stop><stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stopColor="#08B962"></stop><stop offset="1" stopColor="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stopColor="#F94543"></stop><stop offset="1" stopColor="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stopColor="#FABC12"></stop><stop offset=".46" stopColor="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 2.8 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 2.8 KiB

2
src/assets/icons/gemini.svg
عرض الملف

@@ -1,5 +1,5 @@
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="1.42077" y="0.653986" width="26.0999" height="26.0999" rx="5.16682" fill="white" stroke="#E9EAF1" stroke-width="1.14818"/>
<rect x="1.42077" y="0.653986" width="26.0999" height="26.0999" rx="5.16682" fill="white" stroke="#E9EAF1" strokeWidth="1.14818"/>
<rect x="4.60156" y="3.30972" width="20.7884" height="20.7884" fill="url(#pattern0_11479_10636)"/>
<defs>
<pattern id="pattern0_11479_10636" patternContentUnits="objectBoundingBox" width="1" height="1">
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 399 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 399 KiB

4
src/assets/icons/iconheader/active.svg
عرض الملف

@@ -1,6 +1,6 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="41" height="41" rx="6.5" fill="white"/>
<rect x="0.5" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
<path d="M23.1667 30.75H21.0001C15.8932 30.75 13.3398 30.75 11.7527 29.1629C10.1667 27.578 10.1667 25.0246 10.1667 19.9167V16.606C10.1667 14.6387 10.1667 13.655 10.5784 12.9162C10.8721 12.3897 11.3065 11.9554 11.8329 11.6617C12.5717 11.25 13.5554 11.25 15.5227 11.25C16.7837 11.25 17.4142 11.25 17.9667 11.4569C19.2267 11.9292 19.7467 13.0743 20.3154 14.2107L21.0001 15.5833M16.6667 15.5833H26.1459C28.4285 15.5833 29.5692 15.5833 30.3893 16.1315C30.7439 16.3685 31.0483 16.6729 31.2852 17.0274C31.8334 17.8475 31.8334 18.9883 31.8334 21.2708C31.8341 21.962 31.8323 22.5939 31.828 23.1667" stroke="#65677D" stroke-width="1.625" stroke-linecap="round"/>
<path d="M27.16 30.1347C27.5544 30.5291 28.0895 30.7508 28.6474 30.7508C29.2053 30.7508 29.7403 30.5291 30.1348 30.1347C30.5293 29.7402 30.7509 29.2051 30.7509 28.6472C30.7509 28.0894 30.5293 27.5543 30.1348 27.1598L28.2758 25.3008C27.9007 24.9255 27.3975 24.7059 26.8672 24.6862C26.3369 24.6665 25.8188 24.8482 25.4169 25.1947M25.6736 22.6997C25.2793 22.3054 24.7444 22.0839 24.1867 22.0839C23.6291 22.0839 23.0942 22.3054 22.6999 22.6997C22.3055 23.0941 22.084 23.6289 22.084 24.1866C22.084 24.7443 22.3055 25.2792 22.6999 25.6735L24.5578 27.5314C24.9327 27.9074 25.4359 28.1275 25.9665 28.1476C26.497 28.1677 27.0155 27.9863 27.4178 27.6397" stroke="#65677D" stroke-width="1.625" stroke-linecap="round"/>
<path d="M23.1667 30.75H21.0001C15.8932 30.75 13.3398 30.75 11.7527 29.1629C10.1667 27.578 10.1667 25.0246 10.1667 19.9167V16.606C10.1667 14.6387 10.1667 13.655 10.5784 12.9162C10.8721 12.3897 11.3065 11.9554 11.8329 11.6617C12.5717 11.25 13.5554 11.25 15.5227 11.25C16.7837 11.25 17.4142 11.25 17.9667 11.4569C19.2267 11.9292 19.7467 13.0743 20.3154 14.2107L21.0001 15.5833M16.6667 15.5833H26.1459C28.4285 15.5833 29.5692 15.5833 30.3893 16.1315C30.7439 16.3685 31.0483 16.6729 31.2852 17.0274C31.8334 17.8475 31.8334 18.9883 31.8334 21.2708C31.8341 21.962 31.8323 22.5939 31.828 23.1667" stroke="#65677D" strokeWidth="1.625" strokeLinecap="round"/>
<path d="M27.16 30.1347C27.5544 30.5291 28.0895 30.7508 28.6474 30.7508C29.2053 30.7508 29.7403 30.5291 30.1348 30.1347C30.5293 29.7402 30.7509 29.2051 30.7509 28.6472C30.7509 28.0894 30.5293 27.5543 30.1348 27.1598L28.2758 25.3008C27.9007 24.9255 27.3975 24.7059 26.8672 24.6862C26.3369 24.6665 25.8188 24.8482 25.4169 25.1947M25.6736 22.6997C25.2793 22.3054 24.7444 22.0839 24.1867 22.0839C23.6291 22.0839 23.0942 22.3054 22.6999 22.6997C22.3055 23.0941 22.084 23.6289 22.084 24.1866C22.084 24.7443 22.3055 25.2792 22.6999 25.6735L24.5578 27.5314C24.9327 27.9074 25.4359 28.1275 25.9665 28.1476C26.497 28.1677 27.0155 27.9863 27.4178 27.6397" stroke="#65677D" strokeWidth="1.625" strokeLinecap="round"/>
</svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 1.6 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.6 KiB

4
src/assets/icons/iconheader/portfolio.svg
عرض الملف

@@ -1,6 +1,6 @@
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.1665" y="0.5" width="41" height="41" rx="6.5" fill="white"/>
<rect x="1.1665" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
<path d="M11.9341 21.4952C11.9341 16.7568 11.9341 14.3876 13.3797 12.9264C13.3922 12.9137 13.4048 12.9011 13.4175 12.8885C14.8787 11.443 17.2525 11.443 22.0002 11.443C26.7479 11.443 29.1217 11.443 30.5829 12.8885C30.5955 12.9011 30.6082 12.9137 30.6207 12.9264C32.0663 14.3876 32.0663 16.728 32.0663 21.4089C32.0663 26.0897 32.0663 28.4302 30.6207 29.8913C30.6082 29.904 30.5955 29.9166 30.5829 29.9292C29.1217 31.3748 26.7813 31.3748 22.1004 31.3748H21.7288C17.2142 31.3748 14.9569 31.3748 13.5144 30.0225C13.436 29.9489 13.3599 29.8729 13.2864 29.7945C11.9341 28.352 11.9341 26.0664 11.9341 21.4952Z" stroke="#65677D" stroke-width="1.63" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5454 24.5926L19.2139 21.0418C19.3773 20.8232 19.6169 20.6738 19.8852 20.6234C20.1535 20.573 20.4309 20.6251 20.6625 20.7695L23.2657 22.4142C23.5063 22.5674 23.7973 22.6201 24.0763 22.561C24.3553 22.502 24.6 22.3359 24.7579 22.0983L27.4373 18.0574" stroke="#65677D" stroke-width="1.63" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9341 21.4952C11.9341 16.7568 11.9341 14.3876 13.3797 12.9264C13.3922 12.9137 13.4048 12.9011 13.4175 12.8885C14.8787 11.443 17.2525 11.443 22.0002 11.443C26.7479 11.443 29.1217 11.443 30.5829 12.8885C30.5955 12.9011 30.6082 12.9137 30.6207 12.9264C32.0663 14.3876 32.0663 16.728 32.0663 21.4089C32.0663 26.0897 32.0663 28.4302 30.6207 29.8913C30.6082 29.904 30.5955 29.9166 30.5829 29.9292C29.1217 31.3748 26.7813 31.3748 22.1004 31.3748H21.7288C17.2142 31.3748 14.9569 31.3748 13.5144 30.0225C13.436 29.9489 13.3599 29.8729 13.2864 29.7945C11.9341 28.352 11.9341 26.0664 11.9341 21.4952Z" stroke="#65677D" strokeWidth="1.63" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16.5454 24.5926L19.2139 21.0418C19.3773 20.8232 19.6169 20.6738 19.8852 20.6234C20.1535 20.573 20.4309 20.6251 20.6625 20.7695L23.2657 22.4142C23.5063 22.5674 23.7973 22.6201 24.0763 22.561C24.3553 22.502 24.6 22.3359 24.7579 22.0983L27.4373 18.0574" stroke="#65677D" strokeWidth="1.63" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 1.3 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.3 KiB

4
src/assets/icons/iconheader/total.svg
عرض الملف

@@ -1,6 +1,6 @@
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.833252" y="0.5" width="41" height="41" rx="6.5" fill="white"/>
<rect x="0.833252" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
<path d="M10.5 21C10.5 15.0167 15.3501 10.1667 21.3333 10.1667C27.3166 10.1667 32.1667 15.0167 32.1667 21C32.1667 26.9832 27.3166 31.8333 21.3333 31.8333C15.3501 31.8333 10.5 26.9832 10.5 21Z" stroke="#65677D" stroke-width="1.625"/>
<path d="M22.0758 24.7172C22.4703 25.1117 23.0053 25.3333 23.5632 25.3333C24.1211 25.3333 24.6561 25.1117 25.0506 24.7172C25.445 24.3228 25.6667 23.7877 25.6667 23.2299C25.6667 22.672 25.445 22.137 25.0506 21.7425L23.1916 19.8836C22.8165 19.5082 22.3133 19.2887 21.7831 19.269C21.2528 19.2493 20.7347 19.4309 20.3328 19.7774M20.5895 17.2826C20.1952 16.8882 19.6604 16.6667 19.1027 16.6667C18.545 16.6667 18.0102 16.8882 17.6159 17.2826C17.2215 17.6769 17 18.2117 17 18.7694C17 19.3271 17.2215 19.8619 17.6159 20.2562L19.4737 22.1141C19.8486 22.49 20.3519 22.7102 20.8824 22.7303C21.4129 22.7504 21.9314 22.5689 22.3336 22.2224" stroke="#65677D" stroke-width="1.62495" stroke-linecap="round"/>
<path d="M10.5 21C10.5 15.0167 15.3501 10.1667 21.3333 10.1667C27.3166 10.1667 32.1667 15.0167 32.1667 21C32.1667 26.9832 27.3166 31.8333 21.3333 31.8333C15.3501 31.8333 10.5 26.9832 10.5 21Z" stroke="#65677D" strokeWidth="1.625"/>
<path d="M22.0758 24.7172C22.4703 25.1117 23.0053 25.3333 23.5632 25.3333C24.1211 25.3333 24.6561 25.1117 25.0506 24.7172C25.445 24.3228 25.6667 23.7877 25.6667 23.2299C25.6667 22.672 25.445 22.137 25.0506 21.7425L23.1916 19.8836C22.8165 19.5082 22.3133 19.2887 21.7831 19.269C21.2528 19.2493 20.7347 19.4309 20.3328 19.7774M20.5895 17.2826C20.1952 16.8882 19.6604 16.6667 19.1027 16.6667C18.545 16.6667 18.0102 16.8882 17.6159 17.2826C17.2215 17.6769 17 18.2117 17 18.7694C17 19.3271 17.2215 19.8619 17.6159 20.2562L19.4737 22.1141C19.8486 22.49 20.3519 22.7102 20.8824 22.7303C21.4129 22.7504 21.9314 22.5689 22.3336 22.2224" stroke="#65677D" strokeWidth="1.62495" strokeLinecap="round"/>
</svg>
جنبًا إلى جنب التمرير طبقة

قبل

العرض:  |  الارتفاع:  |  الحجم: 1.2 KiB

بعد

العرض:  |  الارتفاع:  |  الحجم: 1.2 KiB

ثنائية
src/assets/image.png
عرض الملف

ملف ثنائي غير معروض.
جنبًا إلى جنب

قبل

العرض:  |  الارتفاع:  |  الحجم: 96 KiB

118
src/assets/keyword-data.ts Normal file
عرض الملف

@@ -0,0 +1,118 @@
export interface KeywordRow {
id: string;
keyword: string;
searchVolume: number;
googlePos: number;
mapsPos: number | null;
aiOverview: "visible" | "invisible";
chatGPT: "visible" | "invisible";
gemini: "visible" | "invisible";
perplexity: "visible" | "invisible";
competition: "light" | "medium" | "hard";
promptExplorer: "coming-soon";
status: "active" | "pause" | "Add-Keyword";
}
export interface KeywordSection {
id: string;
title: string;
subtitle: string;
keywords: KeywordRow[];
expanded: boolean;
}
export const keywordSections: KeywordSection[] = [
{
id: "bofu",
title: "Transactional, Immediate Business Impact, Highest Competition Opportunities (Bottom of Funnel - BoFu)",
subtitle: "High Conversion Intent. Immediate Revenue Drivers.",
expanded: true,
keywords: [
{
id: "1",
keyword: "CPA Los Angeles",
searchVolume: 200,
googlePos: 7,
mapsPos: 10,
aiOverview: "visible",
chatGPT: "visible",
gemini: "visible",
perplexity: "visible",
competition: "light",
promptExplorer: "coming-soon",
status: "Add-Keyword",
},
{
id: "2",
keyword: "Richard Bower CPA",
searchVolume: 200,
googlePos: 5,
mapsPos: 8,
aiOverview: "invisible",
chatGPT: "invisible",
gemini: "invisible",
perplexity: "invisible",
competition: "medium",
promptExplorer: "coming-soon",
status: "Add-Keyword",
},
{
id: "3",
keyword: "Best CPA Los Angeles",
searchVolume: 200,
googlePos: 5,
mapsPos: 14,
aiOverview: "visible",
chatGPT: "visible",
gemini: "visible",
perplexity: "visible",
competition: "hard",
promptExplorer: "coming-soon",
status: "active",
},
{
id: "4",
keyword: "Best CPA Los Angeles",
searchVolume: 200,
googlePos: 5,
mapsPos: 14,
aiOverview: "visible",
chatGPT: "visible",
gemini: "visible",
perplexity: "visible",
competition: "hard",
promptExplorer: "coming-soon",
status: "pause",
},
{
id: "5",
keyword: "Richard Bower CPA",
searchVolume: 200,
googlePos: 9,
mapsPos: 12,
aiOverview: "invisible",
chatGPT: "invisible",
gemini: "invisible",
perplexity: "invisible",
competition: "medium",
promptExplorer: "coming-soon",
status: "active",
},
],
},
{
id: "mofu",
title: "Consideration Opportunities (Middle of Funnel - MoFu)",
subtitle: "Research and Comparison Intent. Nurturing Leads.",
expanded: false,
keywords: [],
},
{
id: "tofu",
title: "Educational Opportunities (Top of Funnel - ToFu)",
subtitle: "Informational Intent. Essential for building E-E-A-T and AI Trust.",
expanded: false,
keywords: [],
},
];

3
src/cn.ts Normal file
عرض الملف

@@ -0,0 +1,3 @@
export function cn(...classes: (string | false | undefined | null)[]) {
return classes.filter(Boolean).join(" ");
}

98
src/components/Analysis/BacklinksCard.tsx Normal file
عرض الملف

@@ -0,0 +1,98 @@
import MetricTooltip from "../shared/MetricTooltip";
function BacklinksCard() {
const competitors = [
{ name: "Milk + Honey Spa", dr: "95", aiq: "79", backlinks: "400", image: "https://api.builder.io/api/v1/image/assets/TEMP/985c97cce1ce854eaa65ce4b054e28a828957b68?width=44" },
{ name: "MEdbeauty LA", dr: "98", aiq: "72", backlinks: "350", image: "https://api.builder.io/api/v1/image/assets/TEMP/f9d249f4e7da75b492dd0037675f9f886cf288cf?width=44", highlighted: true },
{ name: "Beverly Hils Med Spa", dr: "22", aiq: "10", backlinks: "20", image: "https://api.builder.io/api/v1/image/assets/TEMP/adcc4580d54fa23a89a9b0b9e8835525d3a4e01c?width=44", isYou: true },
];
return (
<div className="flex flex-col justify-between p-4 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] flex-1">
<div className="flex flex-col items-center gap-0 self-stretch justify-between pr-[50px]">
<div className="flex flex-col items-start gap-[7px] px-2.5 self-stretch">
<h2 className="text-base font-semibold text-grey-950 leading-[22px]">
Unique Backlinks Count
</h2>
<p className="text-sm text-[#65677D] leading-5">
If everyone has good content and proper SEO, what determines who ranks #1? Backlinks. Period.
</p>
</div>
<div className="flex flex-col items-start gap-1.5 pt-1.5 self-stretch">
{/* Header Row */}
<div className="flex items-center gap- self-stretch justify-between pr-[90px]">
<span className="w-60 text-xs font-semibold text-[#65677D] leading-[18px]">Top Competitor</span>
<div className="flex w-[63px] items-center gap-2 justify-center ">
<span className="text-xs font-semibold text-[#65677D] leading-[18px]">DR</span>
<MetricTooltip tooltipText="DR" />
</div>
<div className="flex w-[72px] items-center gap-2 justify-center ">
<span className="text-xs font-semibold text-[#65677D] leading-[18px]">AIQ</span>
<MetricTooltip tooltipText="AIQ" />
</div>
<span className="w-[82px] text-xs font-semibold text-[#65677D] leading-[18px] mr-[10px]">Backlinks</span>
</div>
{/* Competitor Rows */}
<div className="flex flex-col items-center self-stretch">
{competitors.map((competitor, index) => (
<div
key={index}
className="flex py-3 justify-between items-center self-stretch border-t border-b border-grey-300 bg-white pr-[40px]"
>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<div className="relative w-[18px] h-[18px] rounded-[5.58px] overflow-hidden">
<img src={competitor.image} alt={competitor.name} className="w-full h-full object-cover" />
</div>
<a href="#" className="text-xs text-[#4C60E5] underline leading-[18px] hover:text-primary/80">
{competitor.name}
</a>
</div>
</div>
<div className="flex w-[359px] justify-between items-center">
<span className={`w-7 text-sm leading-5 ${competitor.isYou ? 'font-semibold text-[#65677D]' : 'text-grey-700'}`}>
{competitor.dr}
</span>
<span className={`w-9 text-sm leading-5 ${competitor.isYou ? 'font-semibold text-[#65677D]' : 'text-grey-700'}`}>
{competitor.aiq}
</span>
<div className="relative flex w-36 items-center gap-2 px-1 border border-grey-300 rounded-[5px] h-[22px]">
<div
className="absolute left-0 top-0 h-full rounded-[5px] opacity-19"
style={{
width: competitor.isYou ? '23%' : competitor.highlighted ? '39%' : '62%',
backgroundColor: competitor.isYou ? '#dce8fd' : '#fff3d0'
}}
/>
<span className="relative z-10 text-sm font-semibold text-grey-900 leading-5">
{competitor.backlinks}
</span>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* Bottom Line */}
<div className="flex flex-col items-start gap-1.5 p-4 rounded-xl bg-[#E6ECFB] self-stretch mt-4">
<div className="flex items-center gap-1.5">
<svg width="16" height="16" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 16.3C10.1217 16.3 12.1566 15.4572 13.6569 13.9569C15.1571 12.4566 16 10.4218 16 8.30005C16 6.17832 15.1571 4.14349 13.6569 2.64319C12.1566 1.1429 10.1217 0.300049 8 0.300049C5.87827 0.300049 3.84344 1.1429 2.34315 2.64319C0.842855 4.14349 0 6.17832 0 8.30005C0 10.4218 0.842855 12.4566 2.34315 13.9569C3.84344 15.4572 5.87827 16.3 8 16.3ZM6.8 11.9C6.8 11.5818 6.92643 11.2766 7.15147 11.0515C7.37652 10.8265 7.68174 10.7 8 10.7C8.31826 10.7 8.62348 10.8265 8.84853 11.0515C9.07357 11.2766 9.2 11.5818 9.2 11.9C9.2 12.2183 9.07357 12.5235 8.84853 12.7486C8.62348 12.9736 8.31826 13.1 8 13.1C7.68174 13.1 7.37652 12.9736 7.15147 12.7486C6.92643 12.5235 6.8 12.2183 6.8 11.9ZM7.2128 4.15605C7.2462 3.9716 7.34331 3.80473 7.48718 3.68457C7.63105 3.56441 7.81255 3.49858 8 3.49858C8.18745 3.49858 8.36895 3.56441 8.51282 3.68457C8.65669 3.80473 8.7538 3.9716 8.7872 4.15605L8.8 4.30005V8.30005L8.7872 8.44405C8.7538 8.6285 8.65669 8.79537 8.51282 8.91553C8.36895 9.03569 8.18745 9.10151 8 9.10151C7.81255 9.10151 7.63105 9.03569 7.48718 8.91553C7.34331 8.79537 7.2462 8.6285 7.2128 8.44405L7.2 8.30005V4.30005L7.2128 4.15605Z" fill="#2B2D3B" />
</svg>
<h3 className="text-sm font-bold text-grey-950 leading-[18px]">Bottom Line</h3>
</div>
<p className="text-xs text-grey-900 leading-[18px]">
Your competitors have more backlinks. That's why they rank higher in Google. That's why AI mentions them instead of you. We fix this by building you a network of 250+ quality backlinks that changes both problems at once. Simple problem, simple solution, complex execution that we handle entirely.
</p>
</div>
</div>
);
}
export default BacklinksCard;

160
src/components/Analysis/RankingsCard.tsx Normal file
عرض الملف

@@ -0,0 +1,160 @@
import ChatGPT from "../../assets/icons/gpt.svg"
function RankingsCard() {
return (
<div className="flex flex-col items-start gap-2.5 p-4 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] flex-1">
<div className="flex flex-col items-start gap-[7px] self-stretch">
<h2 className="text-lg font-semibold text-gray-950 leading-[22px]">
Primary Keyword Rankings
</h2>
<div className="flex flex-col items-start gap-1 self-stretch">
<p className="text-sm text-gray-800 leading-5">
Higher Google rankings = More Ai citations. It's not a coincidence.
</p>
<div className="flex items-end gap-[7px] self-stretch">
<span className="text-sm text-gray-800 leading-5">Primary Keyword:</span>
<div className="inline-flex items-center px-1.5 py-0.5 rounded bg-[#F0F3FE]">
<span className="text-xs font-semibold text-[#3742D9] leading-[18px]">
Medical Spa Beverly Hills
</span>
</div>
</div>
</div>
</div>
<div className="flex flex-col items-start gap-2 py-2.5 self-stretch">
{/* Google Section */}
<div className="flex flex-col items-start gap-2 p-4 rounded-xl border border-gray-200 self-stretch">
<div className="flex flex-col items-start gap-6">
<div className="flex flex-col items-start gap-4">
<div className="flex items-start gap-3.5">
<div className="relative w-10 h-10 rounded-lg border border-gray-300 bg-white flex items-center justify-center">
<svg width="24" height="24" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.4588 12.7081C22.4588 11.9281 22.3888 11.1781 22.2588 10.4581H11.8988V14.7181H17.8188C17.5588 16.0881 16.7788 17.2481 15.6088 18.0281V20.7981H19.1788C21.2588 18.8781 22.4588 16.0581 22.4588 12.7081Z" fill="#4285F4" />
<path d="M12.0002 23.3006C14.9702 23.3006 17.4602 22.3206 19.2802 20.6406L15.7102 17.8706C14.7302 18.5306 13.4802 18.9306 12.0002 18.9306C9.14018 18.9306 6.71018 17.0006 5.84018 14.4006H2.18018V17.2406C3.99018 20.8306 7.70018 23.3006 12.0002 23.3006Z" fill="#34A853" />
<path d="M5.84119 14.3894C5.62119 13.7294 5.49119 13.0294 5.49119 12.2994C5.49119 11.5694 5.62119 10.8694 5.84119 10.2094V7.36938H2.18119C1.43119 8.84938 1.00119 10.5194 1.00119 12.2994C1.00119 14.0794 1.43119 15.7494 2.18119 17.2294L5.03119 15.0094L5.84119 14.3894Z" fill="#FBBC05" />
<path d="M12.0002 5.67907C13.6202 5.67907 15.0602 6.23907 16.2102 7.31907L19.3602 4.16907C17.4502 2.38907 14.9702 1.29907 12.0002 1.29907C7.70018 1.29907 3.99018 3.76907 2.18018 7.36907L5.84018 10.2091C6.71018 7.60907 9.14018 5.67907 12.0002 5.67907Z" fill="#EA4335" />
</svg>
</div>
<div className="flex flex-col items-start gap-6">
<div className="flex flex-col items-start gap-1.5 w-full">
<h3 className="text-sm font-semibold text-gray-950 leading-5">Google</h3>
<div className="flex items-center gap-2.5">
<div className="flex items-center gap-0.5">
<span className="text-sm text-gray-800 leading-5">Google Search</span>
<div className="inline-flex items-center px-1.5 py-0.5 rounded bg-[#F0F3FE]">
<span className="text-xs font-semibold text-[#3742D9] leading-[18px]">#2</span>
</div>
</div>
<div className="w-1 h-1 rounded-full bg-gray-300" />
<div className="flex items-center gap-0.5">
<span className="text-sm text-gray-800 leading-5">Maps</span>
<div className="inline-flex items-center px-1.5 py-0.5 rounded bg-[#F0F3FE]">
<span className="text-xs font-semibold text-[#3742D9] leading-[18px]">#5</span>
</div>
</div>
</div>
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-sm text-gray-800 leading-5">Strongly influences</span>
<div className="flex items-center gap-0.5 px-1 py-0.5 rounded bg-gray-200">
<img src="https://api.builder.io/api/v1/image/assets/TEMP/0a411ce003a79952ac6605bb43cdf01cf8847e97?width=24" alt="Gemini" className="w-3 h-3" />
<span className="text-xs text-gray-900 leading-[18px]">Gemini</span>
</div>
<span className="text-sm text-gray-800 leading-5">&</span>
<div className="flex items-center gap-0.5 px-1 py-0.5 rounded bg-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
<path d="M0.565145 5.70498C0.254187 5.73711 0 5.98743 0 6.30005C0 6.61266 0.254187 6.86299 0.565145 6.89512C3.11491 7.1586 5.14145 9.18514 5.40493 11.7349C5.43706 12.0459 5.68739 12.3 6 12.3C6.31261 12.3 6.56294 12.0459 6.59507 11.7349C6.85855 9.18514 8.88509 7.1586 11.4349 6.89512C11.7458 6.86299 12 6.61266 12 6.30005C12 5.98743 11.7458 5.73711 11.4349 5.70498C8.88509 5.4415 6.85855 3.41496 6.59507 0.865194C6.56294 0.554236 6.31261 0.300049 6 0.300049C5.68739 0.300049 5.43706 0.554236 5.40493 0.865194C5.14145 3.41496 3.11491 5.4415 0.565145 5.70498Z" fill="#B5BEFF" />
<mask id="mask0_12117_25665" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="13">
<path d="M0.565145 5.70498C0.254187 5.73711 0 5.98743 0 6.30005C0 6.61266 0.254187 6.86299 0.565145 6.89512C3.11491 7.1586 5.14145 9.18514 5.40493 11.7349C5.43706 12.0459 5.68739 12.3 6 12.3C6.31261 12.3 6.56294 12.0459 6.59507 11.7349C6.85855 9.18514 8.88509 7.1586 11.4349 6.89512C11.7458 6.86299 12 6.61266 12 6.30005C12 5.98743 11.7458 5.73711 11.4349 5.70498C8.88509 5.4415 6.85855 3.41496 6.59507 0.865194C6.56294 0.554236 6.31261 0.300049 6 0.300049C5.68739 0.300049 5.43706 0.554236 5.40493 0.865194C5.14145 3.41496 3.11491 5.4415 0.565145 5.70498Z" fill="#887BE9" />
</mask>
<g mask="url(#mask0_12117_25665)">
<g filter="url(#filter0_f_12117_25665)">
<circle cx="5.77325" cy="7.65845" r="3.28302" fill="#92C6F0" />
</g>
<g filter="url(#filter1_f_12117_25665)">
<ellipse cx="8.98438" cy="9.0343" rx="4.29688" ry="3.51563" fill="#2896E1" />
</g>
<g filter="url(#filter2_f_12117_25665)">
<path d="M0.565145 5.70498C0.254187 5.73711 0 5.98743 0 6.30005C0 6.61266 0.254187 6.86299 0.565145 6.89512C3.11491 7.1586 5.14145 9.18514 5.40493 11.7349C5.43706 12.0459 5.68739 12.3 6 12.3C6.31261 12.3 6.56294 12.0459 6.59507 11.7349C6.85855 9.18514 8.88509 7.1586 11.4349 6.89512C11.7458 6.86299 12 6.61266 12 6.30005C12 5.98743 11.7458 5.73711 11.4349 5.70498C8.88509 5.4415 6.85855 3.41496 6.59507 0.865194C6.56294 0.554236 6.31261 0.300049 6 0.300049C5.68739 0.300049 5.43706 0.554236 5.40493 0.865194C5.14145 3.41496 3.11491 5.4415 0.565145 5.70498Z" fill="#1F80FF" fill-opacity="0.01" />
<path d="M0.565145 5.70498C0.254187 5.73711 0 5.98743 0 6.30005C0 6.61266 0.254187 6.86299 0.565145 6.89512C3.11491 7.1586 5.14145 9.18514 5.40493 11.7349C5.43706 12.0459 5.68739 12.3 6 12.3C6.31261 12.3 6.56294 12.0459 6.59507 11.7349C6.85855 9.18514 8.88509 7.1586 11.4349 6.89512C11.7458 6.86299 12 6.61266 12 6.30005C12 5.98743 11.7458 5.73711 11.4349 5.70498C8.88509 5.4415 6.85855 3.41496 6.59507 0.865194C6.56294 0.554236 6.31261 0.300049 6 0.300049C5.68739 0.300049 5.43706 0.554236 5.40493 0.865194C5.14145 3.41496 3.11491 5.4415 0.565145 5.70498Z" stroke="#58B0F7" stroke-width="0.905661" />
</g>
</g>
<defs>
<filter id="filter0_f_12117_25665" x="-0.226747" y="1.65845" width="12" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="1.35849" result="effect1_foregroundBlur_12117_25665" />
</filter>
<filter id="filter1_f_12117_25665" x="1.97052" y="2.8017" width="14.0277" height="12.4652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="1.35849" result="effect1_foregroundBlur_12117_25665" />
</filter>
<filter id="filter2_f_12117_25665" x="-1.81131" y="-1.51126" width="15.6226" height="15.6226" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="0.679245" result="effect1_foregroundBlur_12117_25665" />
</filter>
</defs>
</svg>
<span className="text-xs text-gray-900 leading-[18px]">AI Overview</span>
</div>
<span className="text-sm text-gray-800 leading-5">results.</span>
</div>
</div>
</div>
</div>
{/* Bing Section */}
<div className="flex items-start gap-3.5">
<div className="relative w-10 h-10 rounded-lg border border-gray-300 bg-white flex items-center justify-center overflow-hidden">
<img src="https://api.builder.io/api/v1/image/assets/TEMP/521fdffa35b4d9999ea9970dfad59c6ba2178292?width=78" alt="Bing" className="w-10 h-10 object-cover" />
</div>
<div className="flex flex-col items-start gap-6">
<div className="flex flex-col items-start gap-1.5 w-full">
<h3 className="text-sm font-semibold text-gray-950 leading-5">Bing</h3>
<div className="flex items-center gap-2.5">
<div className="flex items-center gap-0.5">
<span className="text-sm text-gray-800 leading-5">Bing</span>
<div className="inline-flex items-center px-1.5 py-0.5 rounded bg-[#F0F3FE]">
<span className="text-xs font-semibold text-[#3742D9] leading-[18px]">#4</span>
</div>
</div>
<div className="w-1 h-1 rounded-full bg-gray-300" />
<div className="flex items-center gap-0.5">
<span className="text-sm text-gray-800 leading-5">Bing Places</span>
<div className="inline-flex items-center px-1.5 py-0.5 rounded bg-[#F0F3FE]">
<span className="text-xs font-semibold text-[#3742D9] leading-[18px]">#6</span>
</div>
</div>
</div>
<div className="flex items-center gap-1.5 flex-wrap">
<span className="text-sm text-gray-800 leading-5">A key signal for</span>
<div className="flex items-center gap-0.5 px-1 py-0.5 rounded bg-gray-200">
<img src={ChatGPT} alt="ChatGPT" className="w-3 h-3" />
<span className="text-xs text-gray-900 leading-[18px]">ChatGPT's</span>
</div>
<span className="text-sm text-gray-800 leading-5">web results.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button className="flex items-center gap-0.5 px-4 py-[7px] rounded-[36px] border border-[#4C60E5] text-[#4C60E5] text-sm leading-5 hover:bg-[#ECF1FD] transition-colors">
Explore Full Keyword Visibility
<svg width="16" height="16" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.60152 9.26269C1.59998 8.96487 1.59998 8.64487 1.59998 8.30002C1.59998 5.90741 1.59998 4.7111 2.11444 3.82002C2.45147 3.23627 2.93622 2.75152 3.51998 2.41449C4.41105 1.90002 5.60736 1.90002 7.99998 1.90002C10.3926 1.90002 11.5889 1.90002 12.48 2.41449C13.0637 2.75152 13.5485 3.23627 13.8855 3.82002C14.4 4.7111 14.4 5.90741 14.4 8.30002C14.4 10.6926 14.4 11.8889 13.8855 12.78C13.5485 13.3638 13.0637 13.8485 12.48 14.1856C11.5889 14.7 10.3926 14.7 7.99998 14.7C7.64684 14.7 7.31977 14.7 7.01589 14.6984" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
<path d="M6.21765 5.90002H10.4M10.4 5.90002V10.083M10.4 5.90002L2.40002 13.9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>
</div>
);
}
export default RankingsCard;

8
src/components/Analysis/SourcesChart.tsx
عرض الملف

@@ -15,7 +15,7 @@ const SourcesChart = () => {
<h2 className="text-2xl font-semibold text-gray-900 mb-8">
AI Frequently Cited Sources in Healthcare
</h2>
<div className="grid md:grid-cols-2 gap-8 items-center">
<div className="h-80 flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
@@ -66,9 +66,9 @@ const SourcesChart = () => {
How AI and LLMs Choose Their Sources
</h3>
<p className="text-gray-700 leading-relaxed">
Our analysis reveals distinct patterns in how leading AIs source and prioritize
industry information. For example, ChatGPT leans heavily on user-generated content,
while Google's AI Overviews favors authoritative tech review sites. Across the
Our analysis reveals distinct patterns in how leading AIs source and prioritize
industry information. For example, ChatGPT leans heavily on user-generated content,
while Google's AI Overviews favors authoritative tech review sites. Across the
board, backlink quality plays a crucial role, with...{' '}
<button className="text-blue-600 font-medium hover:text-blue-700">
read more

159
src/components/Analysis/StrategyHero.tsx Normal file
عرض الملف

@@ -0,0 +1,159 @@
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;

8
src/components/DashboardGrid.tsx
عرض الملف

@@ -476,13 +476,11 @@ export default function DashboardGrid() {
}
}}
>
{/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
<img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
{isHovered && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
{/* Tooltip triangle */}
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
<div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
{tooltipText}
</div>
)}
@@ -585,7 +583,7 @@ export default function DashboardGrid() {
<div className="absolute top-8 -right-10 w-48 bg-[#0CAA75] text-white font-bold py-2 text-center shadow-lg transform rotate-45">
<div className="flex items-center justify-center gap-2 text-xs whitespace-nowrap px-8">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none">
<path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" stroke-width="1.625" />
<path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" strokeWidth="1.625" />
</svg>
<span>{card.badge}</span>
</div>

63
src/components/KeywordRow.tsx Normal file
عرض الملف

@@ -0,0 +1,63 @@
import { type KeywordRow as KeywordRowType } from "../assets/keyword-data";
import { StatusBadge } from "./StatusBadge";
import { VisibilityIndicator } from "./shared/VisibilityIndicator";
import { MetricBadge } from "./shared/MetricBadge";
import { ActionBadge } from "./shared/ActionBadge";
interface KeywordRowProps {
keyword: KeywordRowType;
}
export function KeywordRow({ keyword }: KeywordRowProps) {
return (
<div className="grid grid-cols-12 gap-4 justify-items-cente px-6 pr-[52px] py-3 border-t border-grey-300 min-h-[54px] hover:bg-gray-100 transition-colors">
<div className="flex items-center gap-1 mr-20 col-span-2" >
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
<path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#787B91" />
</svg>
<span className="text-sm font-semibold text-grey-900 leading-5 whitespace-nowrap">{keyword.keyword}</span>
</div>
<div>
<span className="text-sm font-semibold text-grey-900 leading-5">{keyword.searchVolume}</span>
</div>
<div>
<MetricBadge type="google" value={keyword.googlePos} />
</div>
<div>
{keyword.mapsPos && <MetricBadge type="maps" value={keyword.mapsPos} />}
</div>
<div>
<VisibilityIndicator platform="aiOverview" visible={keyword.aiOverview === "visible"} />
</div>
<div>
<VisibilityIndicator platform="chatGPT" visible={keyword.chatGPT === "visible"} />
</div>
<div>
<VisibilityIndicator platform="gemini" visible={keyword.gemini === "visible"} />
</div>
<div>
<VisibilityIndicator platform="perplexity" visible={keyword.perplexity === "visible"} />
</div>
<div>
<StatusBadge type={keyword.competition} />
</div>
<div>
<span className="text-xs text-grey-700 leading-[18px]">Coming Soon</span>
</div>
<div>
<ActionBadge type={keyword.status} />
</div>
</div>
);
}

92
src/components/KeywordSection.tsx Normal file
عرض الملف

@@ -0,0 +1,92 @@
import { useState } from "react";
import { type KeywordSection as KeywordSectionType } from "../assets/keyword-data";
import { KeywordRow } from "./KeywordRow";
import MetricCard from "./shared/MetricCard";
import MetricTooltip from "./shared/MetricTooltip";
interface KeywordSectionProps {
section: KeywordSectionType;
}
export function KeywordSection({ section }: KeywordSectionProps) {
const [isExpanded, setIsExpanded] = useState(section.expanded);
return (
<div className="flex flex-col border border-grey-300 bg-white">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="flex items-start gap-3 p-4 border-b border-grey-300 w-full text-left hover:bg-grey-50 transition-colors"
>
<div className="w-6 h-6 flex items-center justify-center shrink-0">
{isExpanded ? (
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none">
<path d="M1 1L7 7L13 0.999999" stroke="#65677D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
<path d="M1 1L7 7L1 13" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)}
</div>
<div className="flex flex-col flex-1">
<h2 className="text-base font-semibold text-grey-950 leading-[22px]">{section.title}</h2>
<p className="text-sm text-grey-700 leading-5">{section.subtitle}</p>
</div>
</button>
{isExpanded && section.keywords.length > 0 && (
<>
<div className="grid grid-cols-12 gap-4 items-center px-6 pr-[52px] py-1.5 bg-grey-100 border-b border-grey-300">
<div className="col-span-2">
<span className="text-xs font-semibold text-grey-800 leading-[18px] ">Keyword</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">G Search Vol</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">G Pos #</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Maps</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">AI Overview</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Chat GPT</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Gemini</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Perplexity</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Competition</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Prompt Explorer</span>
</div>
<div className="flex items-center gap-0.5">
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Beacons</span>
<MetricTooltip extraTooltipText="Save to projects" tooltipText="first to enable monitoring and signal for Keywords" />
</div>
</div>
<div className="bg-grey-50">
{section.keywords.map((keyword) => (
<KeywordRow key={keyword.id} keyword={keyword} />
))}
</div>
<div className="flex items-center justify-center gap-2 py-3.5 px-2 bg-[#FAFAFC]">
<button className="text-sm font-medium text-[#4C60E5] underline leading-[17px] hover:text-primary/80 transition-colors">
Load 10 More Keywords
</button>
</div>
</>
)}
</div>
);
}

40
src/components/StatusBadge.tsx Normal file
عرض الملف

@@ -0,0 +1,40 @@
import { cn } from "../cn";
interface StatusBadgeProps {
type: "light" | "medium" | "hard";
}
export function StatusBadge({ type }: StatusBadgeProps) {
const variants = {
light: {
container: "border-[#A3DEC6] bg-[#E2F8EF]",
text: "text-[#0D6F39]",
label: "Light",
},
medium: {
container: "border-[#FEE2BB] bg-[#FCF3E7]",
text: "text-[#79470B]",
label: "Medium",
},
hard: {
container: "border-[#F7D2DF] bg-[#FCEDF2]",
text: "text-[#8B0E3A]",
label: "Hard",
},
};
const variant = variants[type];
return (
<div
className={cn(
"inline-flex items-center justify-center gap-1.5 px-1.5 py-0 rounded-md border h-[18px]",
variant.container
)}
>
<span className={cn("text-xs font-semibold leading-[18px]", variant.text)}>
{variant.label}
</span>
</div>
);
}

22
src/components/Strategy/ProgressMetrics.tsx
عرض الملف

@@ -90,23 +90,23 @@ function ProgressMetrics() {
<g mask="url(#mask0_11446_9597)">
<path opacity="0.25" d="M5.64839 59.4745C5.29307 59.7785 4.46667 60.91 3.91667 61.6963C3.72884 61.9648 3.61438 62.2769 3.57864 62.6027L3.55778 62.7928C3.42792 63.9766 4.35494 65.0109 5.54585 65.0109H114.083C115.188 65.0109 116.083 64.1155 116.083 63.0109V16.0255C116.083 15.4493 115.636 14.9719 115.061 14.934C114.829 14.9188 114.599 14.9775 114.403 15.1023C112.937 16.0346 110.351 17.6811 109.718 18.0872C109.167 18.4407 108.066 18.4994 107.312 18.4766C107.01 18.4675 106.719 18.3693 106.46 18.2136L103.127 16.2099C102.995 16.1305 102.855 16.0663 102.708 16.0216C101.784 15.7416 100.103 15.3214 99.3215 15.4551C98.591 15.5801 96.2357 15.6692 94.692 15.7109C94.2539 15.7228 93.8331 15.8756 93.4868 16.1443C91.7797 17.469 88.8717 19.5764 87.6522 19.9024C86.5415 20.1994 84.0776 20.5975 82.3852 20.8485C81.7609 20.9411 81.215 21.3178 80.9044 21.8672C79.6244 24.1311 77.4575 27.7623 76.195 29.1601C74.3915 31.1569 74.0733 31.1569 72.5881 32.246C71.9827 32.6899 71.3517 32.9171 70.8128 33.0212C70.0865 33.1614 69.3307 33.4254 68.8715 34.0053L67.3899 35.8765L65.7132 38.0624C65.4137 38.4528 64.848 38.5121 64.4741 38.1922C64.0007 37.7872 63.2643 38.005 63.0646 38.5952C62.7133 39.6334 62.2713 40.7595 61.9796 40.9591C61.4491 41.3222 60.7065 42.5928 60.1761 42.9559C58.9735 43.779 57.176 42.0663 56.7175 43.4496L56.2693 44.8018C56.1204 45.2508 55.817 45.6318 55.416 45.8826C54.8935 46.2093 54.2641 46.6112 53.9171 46.8586C53.2806 47.3124 51.265 48.7646 50.6284 48.8553C49.9919 48.9461 46.4911 49.6722 45.4303 50.0353C44.7386 50.272 43.765 51.6502 43.1413 52.6761C42.8982 53.0761 42.5398 53.3957 42.1055 53.5702C40.685 54.1409 38.5819 55.0196 38.0043 55.3902C37.1556 55.9348 34.0792 55.6625 32.9122 55.3902C31.7453 55.1179 28.6688 54.5733 26.9714 54.5733C25.2741 54.5733 26.1228 56.5701 25.2741 57.1147C24.5951 57.5503 22.5866 58.1433 21.6672 58.3853L17.8781 58.9527C17.5791 58.9974 17.2942 59.1094 17.0447 59.2802L15.9357 60.0392C15.5278 60.3184 15.031 60.437 14.5414 60.3695C13.3133 60.2004 11.6093 59.9553 11.0587 59.8375C10.21 59.656 9.99782 59.2022 7.55786 58.6576C5.1179 58.113 6.17875 59.0207 5.64839 59.4745Z" fill="url(#paint1_linear_11446_9597)"/>
</g>
<path d="M3.63379 62.1066C4.12877 61.3805 5.22481 59.8376 5.6491 59.4745C6.17946 59.0207 5.11862 58.113 7.55857 58.6576C9.99851 59.2022 10.2107 59.656 11.0594 59.8375C11.6099 59.9553 13.3139 60.2004 14.542 60.3695C15.0317 60.437 15.5285 60.3184 15.9364 60.0392L17.0453 59.2802C17.2948 59.1094 17.5798 58.9974 17.8788 58.9527L21.6678 58.3853C22.5872 58.1433 24.5958 57.5503 25.2747 57.1147C26.1234 56.5701 25.2747 54.5733 26.9721 54.5733C28.6694 54.5733 31.7459 55.1179 32.9128 55.3902C34.0797 55.6625 37.1562 55.9348 38.0049 55.3902C38.5825 55.0196 40.6855 54.1409 42.106 53.5702C42.5404 53.3957 42.8987 53.0761 43.1419 52.6761C43.7655 51.6502 44.7391 50.272 45.4308 50.0353C46.4917 49.6722 49.9924 48.9461 50.629 48.8553C51.2655 48.7646 53.2811 47.3124 53.9176 46.8586C54.2646 46.6112 54.894 46.2093 55.4165 45.8826C55.8175 45.6318 56.1209 45.2508 56.2698 44.8018L56.718 43.4496C57.1765 42.0663 58.974 43.779 60.1766 42.9559C60.707 42.5928 61.4496 41.3222 61.98 40.9591C62.2717 40.7595 62.7138 39.6334 63.0651 38.5952C63.2647 38.005 64.0011 37.7872 64.4746 38.1922C64.8484 38.5121 65.4142 38.4528 65.7136 38.0624L67.3903 35.8765L68.8719 34.0053C69.3311 33.4254 70.0869 33.1614 70.8132 33.0212C71.3521 32.9171 71.9832 32.6899 72.5885 32.246C74.0737 31.1569 74.3919 31.1569 76.1954 29.1601C77.4579 27.7623 79.6248 24.1312 80.9048 21.8672C81.2153 21.3178 81.7613 20.9411 82.3856 20.8485C84.078 20.5975 86.5419 20.1994 87.6525 19.9024C88.872 19.5764 91.78 17.469 93.4871 16.1443C93.8334 15.8756 94.2542 15.7228 94.6923 15.7109C96.236 15.6692 98.5913 15.5801 99.3218 15.4551C100.103 15.3214 101.784 15.7416 102.708 16.0216C102.855 16.0663 102.995 16.1305 103.127 16.2099L106.46 18.2136C106.719 18.3693 107.01 18.4675 107.312 18.4766C108.067 18.4994 109.167 18.4407 109.718 18.0872C110.316 17.7033 112.66 16.211 114.153 15.2614C114.511 15.0332 114.933 14.9256 115.357 14.9535L116.083 15.0013" stroke="url(#paint2_linear_11446_9597)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.63379 62.1066C4.12877 61.3805 5.22481 59.8376 5.6491 59.4745C6.17946 59.0207 5.11862 58.113 7.55857 58.6576C9.99851 59.2022 10.2107 59.656 11.0594 59.8375C11.6099 59.9553 13.3139 60.2004 14.542 60.3695C15.0317 60.437 15.5285 60.3184 15.9364 60.0392L17.0453 59.2802C17.2948 59.1094 17.5798 58.9974 17.8788 58.9527L21.6678 58.3853C22.5872 58.1433 24.5958 57.5503 25.2747 57.1147C26.1234 56.5701 25.2747 54.5733 26.9721 54.5733C28.6694 54.5733 31.7459 55.1179 32.9128 55.3902C34.0797 55.6625 37.1562 55.9348 38.0049 55.3902C38.5825 55.0196 40.6855 54.1409 42.106 53.5702C42.5404 53.3957 42.8987 53.0761 43.1419 52.6761C43.7655 51.6502 44.7391 50.272 45.4308 50.0353C46.4917 49.6722 49.9924 48.9461 50.629 48.8553C51.2655 48.7646 53.2811 47.3124 53.9176 46.8586C54.2646 46.6112 54.894 46.2093 55.4165 45.8826C55.8175 45.6318 56.1209 45.2508 56.2698 44.8018L56.718 43.4496C57.1765 42.0663 58.974 43.779 60.1766 42.9559C60.707 42.5928 61.4496 41.3222 61.98 40.9591C62.2717 40.7595 62.7138 39.6334 63.0651 38.5952C63.2647 38.005 64.0011 37.7872 64.4746 38.1922C64.8484 38.5121 65.4142 38.4528 65.7136 38.0624L67.3903 35.8765L68.8719 34.0053C69.3311 33.4254 70.0869 33.1614 70.8132 33.0212C71.3521 32.9171 71.9832 32.6899 72.5885 32.246C74.0737 31.1569 74.3919 31.1569 76.1954 29.1601C77.4579 27.7623 79.6248 24.1312 80.9048 21.8672C81.2153 21.3178 81.7613 20.9411 82.3856 20.8485C84.078 20.5975 86.5419 20.1994 87.6525 19.9024C88.872 19.5764 91.78 17.469 93.4871 16.1443C93.8334 15.8756 94.2542 15.7228 94.6923 15.7109C96.236 15.6692 98.5913 15.5801 99.3218 15.4551C100.103 15.3214 101.784 15.7416 102.708 16.0216C102.855 16.0663 102.995 16.1305 103.127 16.2099L106.46 18.2136C106.719 18.3693 107.01 18.4675 107.312 18.4766C108.067 18.4994 109.167 18.4407 109.718 18.0872C110.316 17.7033 112.66 16.211 114.153 15.2614C114.511 15.0332 114.933 14.9256 115.357 14.9535L116.083 15.0013" stroke="url(#paint2_linear_11446_9597)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
<defs>
<linearGradient id="paint0_linear_11446_9597" x1="59.6985" y1="14.9105" x2="59.6985" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#DF8D2D"/>
<stop offset="1" stop-color="#794D18" stop-opacity="0"/>
<stop stopColor="#DF8D2D"/>
<stop offset="1" stopColor="#794D18" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_11446_9597" x1="3.31445" y1="39.9607" x2="142.824" y2="39.942" gradientUnits="userSpaceOnUse">
<stop stop-color="#2F82F8"/>
<stop offset="0.348569" stop-color="#0EB65E"/>
<stop offset="0.67237" stop-color="#F6CA09"/>
<stop offset="1" stop-color="#F5484A"/>
<stop stopColor="#2F82F8"/>
<stop offset="0.348569" stopColor="#0EB65E"/>
<stop offset="0.67237" stopColor="#F6CA09"/>
<stop offset="1" stopColor="#F5484A"/>
</linearGradient>
<linearGradient id="paint2_linear_11446_9597" x1="3.63379" y1="38.5085" x2="142.748" y2="38.4888" gradientUnits="userSpaceOnUse">
<stop stop-color="#2F82F8"/>
<stop offset="0.348569" stop-color="#0EB65E"/>
<stop offset="0.67237" stop-color="#F6CA09"/>
<stop offset="1" stop-color="#F5484A"/>
<stop stopColor="#2F82F8"/>
<stop offset="0.348569" stopColor="#0EB65E"/>
<stop offset="0.67237" stopColor="#F6CA09"/>
<stop offset="1" stopColor="#F5484A"/>
</linearGradient>
</defs>
</svg>

4
src/components/Strategy/RoadmapSidebar.tsx
عرض الملف

@@ -1,8 +1,8 @@
// بسم الله الرحمن الرحيم
// بسم الله الرحمن الرحيم
import Vector from "../../assets/icons/Vector.png"
import Vector2 from "../../assets/icons/Vector2.png"
import Vector from "../../assets/icons/Vector.svg"
import Vector2 from "../../assets/icons/Vector2.svg"
// Roadmap sidebar component
const RoadmapSidebar = ({

88
src/components/icons/icons-header.tsx Normal file
عرض الملف

@@ -0,0 +1,88 @@
export const AnalysisIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" >
<path d="M1.26221 5.3836C1.26221 3.17446 3.05307 1.38361 5.26221 1.38361H11.1999C13.409 1.38361 15.1999 3.17447 15.1999 5.38361V11.1825C15.1999 13.3917 13.409 15.1825 11.1999 15.1825H8.04315H5.26221C3.05307 15.1825 1.26221 13.3917 1.26221 11.1825V5.3836Z" stroke="#2B2D3B" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.45459 10.4872L6.30202 8.02894C6.41515 7.87756 6.581 7.77418 6.76674 7.73927C6.95247 7.70435 7.14454 7.74046 7.30491 7.84042L9.1071 8.97905C9.27364 9.0851 9.47513 9.1216 9.6683 9.08072C9.86146 9.03983 10.0309 8.92481 10.1402 8.76037L11.9951 5.96283" stroke="#2B2D3B" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
export const AnalysisIconLight = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M1.26233 5.3836C1.26233 3.17446 3.05319 1.38361 5.26233 1.38361H11.2C13.4092 1.38361 15.2 3.17447 15.2 5.38361V11.1825C15.2 13.3917 13.4092 15.1825 11.2 15.1825H8.04327H5.26233C3.05319 15.1825 1.26233 13.3917 1.26233 11.1825V5.3836Z" stroke="#4C60E5" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.45477 10.4872L6.3022 8.02894C6.41534 7.87756 6.58119 7.77418 6.76692 7.73927C6.95265 7.70435 7.14472 7.74046 7.3051 7.84042L9.10729 8.97905C9.27383 9.0851 9.47532 9.1216 9.66848 9.08072C9.86164 9.03983 10.0311 8.92481 10.1403 8.76037L11.9953 5.96283" stroke="#4C60E5" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
export const LayoutDashboard = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2127 14.5406C15.3937 14.5406 15.5619 14.4433 15.6439 14.2819C16.1591 13.2693 16.4495 12.123 16.4495 10.909C16.4495 6.79475 13.1142 3.45941 8.99987 3.45941C4.88559 3.45941 1.55029 6.79475 1.55029 10.909C1.55029 12.123 1.8407 13.2693 2.35581 14.2819C2.4379 14.4433 2.60602 14.5406 2.78708 14.5406H15.2127Z" stroke="#2B2D3B" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.76179 12.1088C9.31188 12.5587 8.58242 12.5587 8.13251 12.1088C7.6826 11.6589 7.6826 10.9294 8.13251 10.4795C8.43502 10.177 10.7947 8.55389 12.3084 7.52282C12.5809 7.33724 12.904 7.66043 12.7185 7.93288C11.6874 9.44659 10.0643 11.8063 9.76179 12.1088Z" fill="#2B2D3B" />
</svg>
)
}
export const LayoutDashboardLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2132 14.5406C15.3942 14.5406 15.5623 14.4433 15.6444 14.2819C16.1595 13.2693 16.4499 12.123 16.4499 10.909C16.4499 6.79475 13.1146 3.45941 9.00036 3.45941C4.88608 3.45941 1.55078 6.79475 1.55078 10.909C1.55078 12.123 1.84118 13.2693 2.3563 14.2819C2.43839 14.4433 2.60651 14.5406 2.78757 14.5406H15.2132Z" stroke="#4C60E5" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.76228 12.1088C9.31237 12.5587 8.58291 12.5587 8.133 12.1088C7.68309 11.6589 7.68308 10.9294 8.133 10.4795C8.43551 10.177 10.7952 8.55389 12.3089 7.52282C12.5813 7.33724 12.9045 7.66043 12.7189 7.93288C11.6879 9.44659 10.0648 11.8063 9.76228 12.1088Z" fill="#4C60E5" />
</svg>
)
}
export const BookOpen = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#2B2D3B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
export const BookOpenLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#4C60E5" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
export const CalendarDays = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#1D1D25" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#1D1D25" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="black" />
</svg>
)
}
export const CalendarDaysLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#4C60E5" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#4C60E5" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="#4C60E5" />
</svg>
)
}
export const KeywordsIcon = () => {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9861 11.0701L13.2186 11.325L12.1795 11.6697L12.9529 12.4432L15.6463 15.1356L15.1356 15.6463L12.4432 12.9529L11.6697 12.1795L11.325 13.2186L11.0701 13.9861L9.82013 9.82013L13.9861 11.0701ZM8.81427 2.07404C9.75105 2.07404 10.624 2.25173 11.4393 2.60333C12.2675 2.96054 12.9804 3.44186 13.5838 4.04572C14.1873 4.64976 14.669 5.36238 15.0272 6.19025C15.3497 6.93571 15.5223 7.73017 15.5486 8.57794L15.4158 8.53693C15.3537 6.82365 14.7133 5.34224 13.4998 4.12872C12.2213 2.85034 10.6454 2.20685 8.81427 2.20685C6.98308 2.20693 5.40726 2.85018 4.12872 4.12872C2.85018 5.40726 2.20693 6.98308 2.20685 8.81427C2.20685 10.6454 2.85034 12.2213 4.12872 13.4998C5.34224 14.7133 6.82365 15.3537 8.53693 15.4158L8.57794 15.5486C7.72957 15.5212 6.93533 15.3479 6.19025 15.0262C5.36307 14.669 4.65029 14.1878 4.04572 13.5838C3.44133 12.9799 2.96 12.2668 2.60333 11.4393C2.25222 10.6245 2.07449 9.75176 2.07404 8.81427C2.07359 7.87716 2.25142 7.00469 2.60333 6.19025C2.96106 5.3624 3.44218 4.64975 4.04572 4.04572C4.64912 3.44186 5.36204 2.96054 6.19025 2.60333C7.00531 2.25183 7.87771 2.07408 8.81427 2.07404ZM8.81427 5.04083C9.84234 5.04083 10.7007 5.38354 11.4256 6.07697C11.9011 6.53181 12.2285 7.04807 12.4139 7.63458L12.2459 7.5838C12.0192 6.9425 11.6334 6.39698 11.0906 5.96173C10.4353 5.43624 9.66731 5.17427 8.81525 5.17365H8.81427C7.81828 5.17373 6.94837 5.53564 6.242 6.242C5.53564 6.94837 5.17373 7.81828 5.17365 8.81427C5.17365 9.66662 5.43566 10.4352 5.96173 11.0906C6.39725 11.6331 6.94286 12.0191 7.5838 12.2459L7.63458 12.4139C7.04807 12.2285 6.53181 11.9011 6.07697 11.4256C5.38354 10.7007 5.04083 9.84234 5.04083 8.81427C5.04091 7.75551 5.40342 6.87746 6.14044 6.14044C6.87746 5.40342 7.75551 5.04091 8.81427 5.04083Z" fill="#2B2D3B" stroke="#2B2D3B" strokeWidth="1.35" />
</svg>
)
}
export const KeywordsIconLight = () => {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9861 11.0701L13.2185 11.325L12.1794 11.6697L12.9529 12.4432L15.6462 15.1356L15.1355 15.6463L12.4431 12.9529L11.6697 12.1795L11.325 13.2186L11.0701 13.9861L9.82007 9.82013L13.9861 11.0701ZM8.81421 2.07404C9.75099 2.07404 10.624 2.25173 11.4392 2.60333C12.2674 2.96054 12.9803 3.44186 13.5837 4.04572C14.1873 4.64976 14.6689 5.36238 15.0271 6.19025C15.3496 6.93571 15.5223 7.73017 15.5486 8.57794L15.4158 8.53693C15.3536 6.82365 14.7133 5.34224 13.4998 4.12872C12.2212 2.85034 10.6454 2.20685 8.81421 2.20685C6.98302 2.20693 5.4072 2.85018 4.12866 4.12872C2.85012 5.40726 2.20687 6.98308 2.20679 8.81427C2.20679 10.6454 2.85028 12.2213 4.12866 13.4998C5.34218 14.7133 6.82359 15.3537 8.53687 15.4158L8.57788 15.5486C7.72951 15.5212 6.93527 15.3479 6.19019 15.0262C5.36301 14.669 4.65023 14.1878 4.04565 13.5838C3.44127 12.9799 2.95994 12.2668 2.60327 11.4393C2.25215 10.6245 2.07443 9.75176 2.07397 8.81427C2.07353 7.87716 2.25136 7.00469 2.60327 6.19025C2.961 5.3624 3.44212 4.64975 4.04565 4.04572C4.64906 3.44186 5.36198 2.96054 6.19019 2.60333C7.00525 2.25183 7.87765 2.07408 8.81421 2.07404ZM8.81421 5.04083C9.84228 5.04083 10.7006 5.38354 11.4255 6.07697C11.901 6.53181 12.2284 7.04807 12.4138 7.63458L12.2458 7.5838C12.0191 6.9425 11.6334 6.39698 11.0906 5.96173C10.4352 5.43624 9.66725 5.17427 8.81519 5.17365H8.81421C7.81822 5.17373 6.94831 5.53564 6.24194 6.242C5.53558 6.94837 5.17367 7.81828 5.17358 8.81427C5.17358 9.66662 5.4356 10.4352 5.96167 11.0906C6.39718 11.6331 6.9428 12.0191 7.58374 12.2459L7.63452 12.4139C7.04801 12.2285 6.53175 11.9011 6.0769 11.4256C5.38348 10.7007 5.04077 9.84234 5.04077 8.81427C5.04085 7.75551 5.40336 6.87746 6.14038 6.14044C6.8774 5.40342 7.75545 5.04091 8.81421 5.04083Z" fill="#2B2D3B" stroke="#4C60E5" strokeWidth="1.35" />
</svg>
)
}

12
src/components/icons/shared-icon.tsx Normal file
عرض الملف

@@ -0,0 +1,12 @@
const SharedIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none" >
<path d="M1.80154 10.583C1.7998 10.2479 1.7998 9.88794 1.7998 9.49999C1.7998 6.80829 1.7998 5.46245 2.37857 4.45999C2.75773 3.80327 3.30308 3.25792 3.95981 2.87876C4.96226 2.29999 6.30811 2.29999 8.9998 2.29999C11.6915 2.29999 13.0373 2.29999 14.0398 2.87876C14.6965 3.25792 15.2419 3.80327 15.621 4.45999C16.1998 5.46245 16.1998 6.80829 16.1998 9.49999C16.1998 12.1917 16.1998 13.5375 15.621 14.54C15.2419 15.1967 14.6965 15.7421 14.0398 16.1212C13.0373 16.7 11.6915 16.7 8.9998 16.7C8.60253 16.7 8.23457 16.7 7.8927 16.6981" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" />
<path d="M6.99503 6.79999H11.7002M11.7002 6.79999V11.5059M11.7002 6.79999L2.7002 15.8" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
export default SharedIcon

37
src/components/shared/ActionBadge.tsx Normal file
عرض الملف

@@ -0,0 +1,37 @@
import { Plus } from "lucide-react";
interface ActionBadgeProps {
type: "active" | "pause" | 'Add-Keyword';
}
export function ActionBadge({ type }: ActionBadgeProps) {
if (type === "Add-Keyword") {
return (
<button className="flex items-center justify-center gap-0.5 px-1.5 py-0.5 rounded-md border border-grey-300 bg-white shadow-[0_1px_1px_0_rgba(5,19,65,0.07),0_1px_4px_-2px_rgba(24,39,75,0.02),0_0_2px_0_#E0E0E0] h-7 hover:bg-grey-50 transition-colors shrink-0 w-1/11">
<Plus className="w-4 h-4 text-grey-800" strokeWidth={1.5} />
<span className="text-xs font-semibold text-grey-900 leading-[18px]">Add Keyword</span>
</button>
);
}
if (type === "active") {
return (
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7 w-fit cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.63665 3.23881L2.14908 7.97092H3.26257C3.28232 7.97092 3.3511 7.97018 3.41648 7.97908C3.50774 7.99243 3.678 8.03322 3.83191 8.18824C3.98514 8.344 4.03554 8.52572 4.05393 8.62362C4.06755 8.69409 4.07232 8.769 4.07368 8.79051V8.79422L4.35154 12.8432L8.087 8.16821H6.75286C6.73379 8.16821 6.66569 8.16895 6.59963 8.16005C6.44539 8.13921 6.30092 8.06663 6.18624 7.95238C6.07249 7.83718 5.99443 7.68633 5.96286 7.5207C5.95318 7.46578 5.94636 7.41031 5.94243 7.35456V7.35011L5.63665 3.23881ZM9.02955 8.17711C9.03409 8.17761 9.03409 8.17761 9.02955 8.17711V8.17711ZM8.69993 7.38868C8.7022 7.38423 8.7022 7.38423 8.69993 7.38868V7.38868ZM5.60396 0.934321C5.65163 0.885369 5.93494 0.59536 6.34288 0.731835C6.7515 0.868309 6.83663 1.28144 6.85093 1.35116C6.87068 1.4461 6.87817 1.55587 6.88294 1.61595L6.88362 1.63153L7.25955 6.68479H8.71832C8.88177 6.68479 9.07109 6.68479 9.22432 6.70927C9.37415 6.73226 9.75893 6.81756 9.93941 7.24998C10.1206 7.68239 9.92647 8.05399 9.84406 8.19195C9.74819 8.34356 9.64283 8.48779 9.52874 8.62362L9.50695 8.65107L4.5218 14.8896C4.4671 14.9602 4.40842 15.0271 4.34609 15.0898C4.29161 15.141 4.00694 15.4051 3.6133 15.2627C3.21966 15.1195 3.13658 14.7227 3.12091 14.647C3.10649 14.5612 3.09671 14.4745 3.09163 14.3874L3.09027 14.3719L2.75316 9.45434H1.54909C1.39382 9.45434 1.20994 9.45434 1.06011 9.4306C0.908241 9.40613 0.539802 9.32157 0.356605 8.90696C0.174088 8.4916 0.344346 8.12594 0.421983 7.98204C0.49894 7.83964 0.614035 7.68388 0.711422 7.55185L0.731853 7.52441L5.43166 1.14645L5.44119 1.13384C5.47524 1.08711 5.53858 1.00108 5.60396 0.934321Z" fill="#2D6BEB" />
</svg>
<span className="text-xs font-semibold text-[#163981] leading-[18px]">Active</span>
</div>
);
}
return (
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7 w-fit cursor-pointer">
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.275146 2.71305C0.275146 1.67985 0.275146 1.1638 0.596173 0.84277C0.917199 0.521744 1.43325 0.521744 2.46645 0.521744C3.49965 0.521744 4.0157 0.521744 4.33673 0.84277C4.65776 1.1638 4.65776 1.67985 4.65776 2.71305V9.28696C4.65776 10.3202 4.65776 10.8362 4.33673 11.1572C4.0157 11.4783 3.49965 11.4783 2.46645 11.4783C1.43325 11.4783 0.917199 11.4783 0.596173 11.1572C0.275146 10.8362 0.275146 10.3202 0.275146 9.28696V2.71305ZM6.84906 2.71305C6.84906 1.67985 6.84906 1.1638 7.17009 0.84277C7.49111 0.521744 8.00716 0.521744 9.04036 0.521744C10.0736 0.521744 10.5896 0.521744 10.9106 0.84277C11.2317 1.1638 11.2317 1.67985 11.2317 2.71305V9.28696C11.2317 10.3202 11.2317 10.8362 10.9106 11.1572C10.5896 11.4783 10.0736 11.4783 9.04036 11.4783C8.00716 11.4783 7.49111 11.4783 7.17009 11.1572C6.84906 10.8362 6.84906 10.3202 6.84906 9.28696V2.71305Z" fill="#2D6BEB" />
</svg>
<span className="text-xs font-semibold text-[#163981] leading-[18px]">Pause</span>
</div>
);
}

370
src/components/shared/Header.tsx
عرض الملف

@@ -19,62 +19,10 @@ import logo from "../../assets/logo.png";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import Logo from "./Logo";
import Vector from "../../assets/icons/Vector.svg";
import Vector2 from "../../assets/icons/Vector2.svg";
import { LayoutDashboard, LayoutDashboardLight, BookOpen, BookOpenLight, CalendarDays, CalendarDaysLight, KeywordsIcon, KeywordsIconLight, AnalysisIcon, AnalysisIconLight } from '../icons/icons-header.tsx';
const LayoutDashboard = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2127 14.5406C15.3937 14.5406 15.5619 14.4433 15.6439 14.2819C16.1591 13.2693 16.4495 12.123 16.4495 10.909C16.4495 6.79475 13.1142 3.45941 8.99987 3.45941C4.88559 3.45941 1.55029 6.79475 1.55029 10.909C1.55029 12.123 1.8407 13.2693 2.35581 14.2819C2.4379 14.4433 2.60602 14.5406 2.78708 14.5406H15.2127Z" stroke="#2B2D3B" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.76179 12.1088C9.31188 12.5587 8.58242 12.5587 8.13251 12.1088C7.6826 11.6589 7.6826 10.9294 8.13251 10.4795C8.43502 10.177 10.7947 8.55389 12.3084 7.52282C12.5809 7.33724 12.904 7.66043 12.7185 7.93288C11.6874 9.44659 10.0643 11.8063 9.76179 12.1088Z" fill="#2B2D3B" />
</svg>
)
}
const LayoutDashboardLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2132 14.5406C15.3942 14.5406 15.5623 14.4433 15.6444 14.2819C16.1595 13.2693 16.4499 12.123 16.4499 10.909C16.4499 6.79475 13.1146 3.45941 9.00036 3.45941C4.88608 3.45941 1.55078 6.79475 1.55078 10.909C1.55078 12.123 1.84118 13.2693 2.3563 14.2819C2.43839 14.4433 2.60651 14.5406 2.78757 14.5406H15.2132Z" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.76228 12.1088C9.31237 12.5587 8.58291 12.5587 8.133 12.1088C7.68309 11.6589 7.68308 10.9294 8.133 10.4795C8.43551 10.177 10.7952 8.55389 12.3089 7.52282C12.5813 7.33724 12.9045 7.66043 12.7189 7.93288C11.6879 9.44659 10.0648 11.8063 9.76228 12.1088Z" fill="#4C60E5" />
</svg>
)
}
const BookOpen = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#2B2D3B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
const BookOpenLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
const CalendarDays = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#1D1D25" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#1D1D25" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="black" />
</svg>
)
}
const CalendarDaysLight = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7524 8.99998C16.7524 10.018 16.5519 11.0261 16.1623 11.9666C15.7727 12.9071 15.2017 13.7617 14.4818 14.4816C13.762 15.2014 12.9074 15.7725 11.9668 16.162C11.0263 16.5516 10.0182 16.7521 9.00022 16.7521C7.98219 16.7521 6.97413 16.5516 6.03359 16.162C5.09305 15.7725 4.23846 15.2014 3.51861 14.4816C2.79875 13.7617 2.22773 12.9071 1.83815 11.9666C1.44856 11.0261 1.24805 10.018 1.24805 8.99998C1.24805 6.94397 2.06479 4.97218 3.51861 3.51836C4.97242 2.06455 6.94422 1.2478 9.00022 1.2478C11.0562 1.2478 13.028 2.06455 14.4818 3.51836C15.9356 4.97218 16.7524 6.94397 16.7524 8.99998Z" stroke="#4C60E5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.03701 12.1269C6.23143 12.4315 5.82864 12.5838 5.62311 12.3778C5.41758 12.1717 5.57096 11.7693 5.87773 10.9645L6.70482 8.79481C6.98729 8.05378 7.12853 7.68327 7.40012 7.41139C7.6717 7.13951 8.04207 6.99788 8.78279 6.7146L10.9673 5.87919C11.7709 5.57189 12.1726 5.41825 12.3789 5.62335C12.5852 5.82846 12.4339 6.23111 12.1313 7.03642L11.3181 9.20007C11.0361 9.95064 10.895 10.3259 10.6208 10.6008C10.3465 10.8756 9.97148 11.0174 9.22149 11.301L7.03701 12.1269Z" stroke="#4C60E5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<ellipse cx="9.00012" cy="9" rx="0.746218" ry="0.746218" fill="#4C60E5" />
</svg>
)
}
// const CalendarDays = () => {
// return (
@@ -84,24 +32,18 @@ const Header = () => {
const location = useLocation();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
const isHeaderVisible = location.pathname !== '/';
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
const AnalysisIcon = () => {
return (
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2127 14.5406C15.3937 14.5406 15.5619 14.4433 15.6439 14.2819C16.1591 13.2693 16.4495 12.123 16.4495 10.909C16.4495 6.79475 13.1142 3.45941 8.99987 3.45941C4.88559 3.45941 1.55029 6.79475 1.55029 10.909C1.55029 12.123 1.8407 13.2693 2.35581 14.2819C2.4379 14.4433 2.60602 14.5406 2.78708 14.5406H15.2127Z" stroke="#2B2D3B" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.76179 12.1088C9.31188 12.5587 8.58242 12.5587 8.13251 12.1088C7.6826 11.6589 7.6826 10.9294 8.13251 10.4795C8.43502 10.177 10.7947 8.55389 12.3084 7.52282C12.5809 7.33724 12.904 7.66043 12.7185 7.93288C11.6874 9.44659 10.0643 11.8063 9.76179 12.1088Z" fill="#2B2D3B" />
</svg>
)
}
const navLinks = [
{ name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
{ name: 'Dashboard', to: '/dashboard', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
{ name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
{ name: 'Strategy', to: '/strategy', icon: CalendarDays, iconLight: CalendarDaysLight },
{ name: 'Analysis', to: '/analysis', icon: AnalysisIcon, iconLight: AnalysisIcon },
];
{ name: 'Analysis', to: '/analysis', icon: AnalysisIcon, iconLight: AnalysisIconLight },
{ name: 'Keywords', to: '/keywords', icon: KeywordsIcon, iconLight: KeywordsIconLight },
];
const menuItems = [
@@ -118,185 +60,183 @@ const Header = () => {
return (
<header className="pb-20">
<nav className="bg-[#E6ECFB] backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
{/* Left: Logo */}
<div className="flex items-center justify-between w-full md:w-auto">
<Link to="/" className="flex items-center space-x-2">
{/* <img
src={logo}
alt="logo"
className="w-auto h-8 sm:h-10 hover:scale-105 transition-all duration-300"
/> */}
<Logo />
</Link>
{/* Mobile menu toggle */}
<div className="md:hidden">
<button onClick={toggleMobileNav}>
{isMobileNavOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
{/* Center Nav Links - Hidden on Mobile */}
<div className="hidden md:flex md:justify-center md:items-center md:flex-grow">
<div className="p-1 rounded-full bg-blue-100/70 shadow-inner flex">
{navLinks.map((link, index) => (
<Link
key={index}
to={link.to}
className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
? 'bg-white blue-500/80 text-[#4C60E5] shadow-md'
: 'text-black/80 hover:bg-blue-200/50'
}`}
>
{
location.pathname === link.to ?
<link.iconLight />
:
<link.icon />
}
<span>{link.name}</span>
<>
{isHeaderVisible && (
<header className="pb-20">
<nav className="bg-[#E6ECFB] backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
<div className="flex items-center justify-between w-full md:w-auto">
<Link to="/" className="flex items-center space-x-2">
<Logo />
</Link>
))}
{/* Mobile menu toggle */}
<div className="md:hidden">
<button onClick={toggleMobileNav}>
{isMobileNavOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
{/* Center Nav Links - Hidden on Mobile */}
<div className="hidden md:flex md:justify-center md:items-center md:flex-grow">
<div className="p-1 rounded-full bg-blue-100/70 shadow-inner flex">
{navLinks.map((link, index) => (
<Link
key={index}
to={link.to}
className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
? 'bg-white blue-500/80 text-[#4C60E5] shadow-md'
: 'text-black/80 hover:bg-blue-200/50'
}`}
>
{
location.pathname === link.to ?
<link.iconLight />
:
<link.icon />
}
<span>{link.name}</span>
</Link>
))}
</div>
</div>
{/* Right Side - Desktop Only */}
<div className="hidden md:flex items-center space-x-4 relative">
{/* Add Keyword Button */}
<button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-xl font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
<Plus size={18} />
<span>Add Keywords</span>
</button>
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Profile Dropdown */}
<div className="relative">
<button
onClick={toggleMenu}
className="flex items-center space-x-2 rounded-full focus:outline-none"
>
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full "
/>
<ChevronDown
size={16}
className={`text-gray-500 transition-transform duration-200 ${isMenuOpen ? 'rotate-180' : 'rotate-0'
}`}
/>
</button>
{/* Dropdown Menu */}
{isMenuOpen && (
<div className="absolute right-0 mt-3 w-64 bg-white rounded-xl shadow-2xl overflow-hidden py-2 text-gray-700 z-50">
<div className="px-4 py-3 flex items-center space-x-3 border-b border-gray-200">
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
</div>
</div>
<div className="py-2">
{menuItems.map((item, index) => (
<Link
key={index}
to={item.to}
className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200"
>
<item.icon size={20} className="text-gray-500" />
<span>{item.name}</span>
</Link>
))}
</div>
<div className="border-t border-gray-200 pt-2">
<button className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200">
<LogOut size={20} className="text-gray-500" />
<span>Log Out</span>
</button>
</div>
</div>
)}
</div>
</div>
</div>
</div>
{/* Right Side - Desktop Only */}
<div className="hidden md:flex items-center space-x-4 relative">
{/* Add Keyword Button */}
{/* Mobile nav - visible when toggled */}
{isMobileNavOpen && (
<div className="md:hidden px-4 pb-4">
{/* Nav links */}
<div className="flex flex-col gap-2 rounded-xl bg-blue-100/30 p-3 mt-2">
{navLinks.map((link, index) => (
<Link
key={index}
to={link.to}
className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${location.pathname === link.to
? 'bg-blue-500/80 text-white shadow-md'
: 'text-black/80 hover:bg-blue-200/50'
}`}
>
<link.icon size={18} className="mr-2" />
<span>{link.name}</span>
</Link>
))}
</div>
<button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-xl font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
{/* Add Keyword Button */}
{/* <button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
<Plus size={18} />
<span>Add Keywords</span>
</button>
<span>Add Keyword</span>
</button> */}
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Profile Dropdown */}
<div className="relative">
<button
onClick={toggleMenu}
className="flex items-center space-x-2 rounded-full focus:outline-none"
>
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full "
/>
<ChevronDown
size={16}
className={`text-gray-500 transition-transform duration-200 ${isMenuOpen ? 'rotate-180' : 'rotate-0'
}`}
/>
</button>
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Dropdown Menu */}
{isMenuOpen && (
<div className="absolute right-0 mt-3 w-64 bg-white rounded-xl shadow-2xl overflow-hidden py-2 text-gray-700 z-50">
<div className="px-4 py-3 flex items-center space-x-3 border-b border-gray-200">
{/* Profile menu */}
<div className="mt-4 p-3 bg-white rounded-xl shadow-md">
<div className="flex items-center space-x-3 border-b pb-3 mb-2">
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
<p className="font-semibold text-sm text-gray-800">Mohammed Sukkar</p>
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
</div>
</div>
<div className="py-2">
<div className="flex flex-col space-y-2">
{menuItems.map((item, index) => (
<Link
key={index}
to={item.to}
className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200"
className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100"
>
<item.icon size={20} className="text-gray-500" />
<item.icon size={18} />
<span>{item.name}</span>
</Link>
))}
</div>
<div className="border-t border-gray-200 pt-2">
<button className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200">
<LogOut size={20} className="text-gray-500" />
<button className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100">
<LogOut size={18} />
<span>Log Out</span>
</button>
</div>
</div>
)}
</div>
</div>
</div>
{/* Mobile nav - visible when toggled */}
{isMobileNavOpen && (
<div className="md:hidden px-4 pb-4">
{/* Nav links */}
<div className="flex flex-col gap-2 rounded-xl bg-blue-100/30 p-3 mt-2">
{navLinks.map((link, index) => (
<Link
key={index}
to={link.to}
className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${location.pathname === link.to
? 'bg-blue-500/80 text-white shadow-md'
: 'text-black/80 hover:bg-blue-200/50'
}`}
>
<link.icon size={18} className="mr-2" />
<span>{link.name}</span>
</Link>
))}
</div>
{/* Add Keyword Button */}
{/* <button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
<Plus size={18} />
<span>Add Keyword</span>
</button> */}
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Profile menu */}
<div className="mt-4 p-3 bg-white rounded-xl shadow-md">
<div className="flex items-center space-x-3 border-b pb-3 mb-2">
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-semibold text-sm text-gray-800">Mohammed Sukkar</p>
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
</div>
</div>
<div className="flex flex-col space-y-2">
{menuItems.map((item, index) => (
<Link
key={index}
to={item.to}
className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100"
>
<item.icon size={18} />
<span>{item.name}</span>
</Link>
))}
<button className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100">
<LogOut size={18} />
<span>Log Out</span>
</button>
</div>
</div>
</div>
)}
</nav>
</header>
)}
</nav>
</header>
)}
</>
);
};

39
src/components/shared/HeaderPage.tsx
عرض الملف

@@ -1,36 +1,36 @@
import MetricCard from "./MetricCard"
import UrlDropdown from "./UrlDropdown"
const HeaderPage = ({ title }: { title: string }) => {
const HeaderPage = ({ title, buttonShow = false }: { title: string, buttonShow?: boolean }) => {
return (
<div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
<div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4 justify-between">
<div className="flex items-baseline gap-4 flex-wrap">
<h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
{/* First SVG dot */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
className="flex-shrink-0 -translate-y-1"
>
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
<circle cx="2" cy="2" r="2" fill="#E9EAF1" />
</svg>
<UrlDropdown />
{/* Second SVG dot */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
className="flex-shrink-0 -translate-y-1"
>
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
<circle cx="2" cy="2" r="2" fill="#E9EAF1" />
</svg>
<div className="flex gap-1 flex-wrap">
@@ -38,7 +38,18 @@ const HeaderPage = ({ title }: { title: string }) => {
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
</div>
</div>
{
buttonShow &&
<button className='bg-[#fff] border px-2 sm:px-3 py-2 rounded-lg text-sm sm:text-md font-medium transition-colors flex items-center gap-2'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M2.25 12.5735V14.1618C2.25 14.583 2.42779 14.987 2.74426 15.2848C3.06072 15.5827 3.48995 15.75 3.9375 15.75H14.0625C14.5101 15.75 14.9393 15.5827 15.2557 15.2848C15.5722 14.987 15.75 14.583 15.75 14.1618V12.5735M4.78125 6.22059L9 2.25M9 2.25L13.2187 6.22059M9 2.25V11.7794" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Export to Slides</span>
</button>
}
</div>
)
}

36
src/components/shared/Logo.tsx
عرض الملف

@@ -17,40 +17,40 @@ const Logo = () => {
<path d="M27.2229 17.9943L14.2678 13.3806L18.5946 26.6153C18.735 27.0447 19.3327 27.0713 19.5104 26.6556L21.0487 23.0575C21.1031 22.9303 21.2688 22.8982 21.3668 22.9962L24.6862 26.3156C24.9243 26.5537 25.3104 26.5537 25.5489 26.3156L27.0226 24.842C27.2606 24.6039 27.2606 24.2177 27.0226 23.9793L23.6993 20.656C23.6004 20.5571 23.6343 20.3897 23.7636 20.3366L27.2448 18.9083C27.6605 18.7379 27.6464 18.1445 27.2229 17.9938V17.9943Z" fill="#49A7FF" />
<defs>
<linearGradient id="paint0_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint1_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint2_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint3_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint4_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint5_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint6_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint7_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
<linearGradient id="paint8_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
<stop stop-color="#4C60E5" />
<stop offset="1" stop-color="#498FFF" />
<stop stopColor="#4C60E5" />
<stop offset="1" stopColor="#498FFF" />
</linearGradient>
</defs>
</svg>

41
src/components/shared/MetricBadge.tsx Normal file
عرض الملف

@@ -0,0 +1,41 @@
interface MetricBadgeProps {
type: "google" | "maps";
value: number;
}
export function MetricBadge({ type, value }: MetricBadgeProps) {
if (type === "google") {
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_google)">
<path d="M14.3291 8.15431C14.3291 7.67081 14.2857 7.2059 14.2052 6.75958H7.7832V9.40027H11.4529C11.2917 10.2495 10.8082 10.9686 10.083 11.4521V13.1691H12.2959C13.5853 11.979 14.3291 10.2309 14.3291 8.15431Z" fill="#4285F4"/>
<path d="M7.78253 14.8186C9.62357 14.8186 11.1671 14.2111 12.2952 13.1697L10.0823 11.4527C9.4748 11.8618 8.69995 12.1097 7.78253 12.1097C6.00967 12.1097 4.50337 10.9134 3.96407 9.3017H1.69531V11.0622C2.81729 13.2875 5.11705 14.8186 7.78253 14.8186Z" fill="#34A853"/>
<path d="M3.96482 9.29494C3.82844 8.88582 3.74786 8.45191 3.74786 7.99939C3.74786 7.54688 3.82844 7.11297 3.96482 6.70385V4.94339H1.69606C1.23115 5.86081 0.9646 6.89601 0.9646 7.99939C0.9646 9.10278 1.23115 10.138 1.69606 11.0554L3.46271 9.67927L3.96482 9.29494Z" fill="#FBBC05"/>
<path d="M7.78253 3.89567C8.78673 3.89567 9.67936 4.24281 10.3922 4.91228L12.3448 2.95966C11.1609 1.85627 9.62357 1.1806 7.78253 1.1806C5.11705 1.1806 2.81729 2.71171 1.69531 4.94327L3.96407 6.70373C4.50337 5.09204 6.00967 3.89567 7.78253 3.89567Z" fill="#EA4335"/>
</g>
<defs>
<clipPath id="clip0_google">
<rect width="14.8771" height="14.8771" fill="white" transform="translate(0.34375 0.561462)"/>
</clipPath>
</defs>
</svg>
<span className="text-sm font-semibold text-grey-900">{value}</span>
</div>
);
}
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.15063 13.5217C3.60189 14.086 4.06148 14.7957 4.30199 15.2243C4.59489 15.7815 4.71634 16.1578 4.93422 16.8317C5.06162 17.2008 5.18307 17.3127 5.43787 17.3127C5.71648 17.3127 5.84388 17.1246 5.94151 16.8317C6.14511 16.1994 6.30228 15.7184 6.55112 15.26C7.51078 13.4502 9.0753 12.1643 9.95637 10.4022C9.95637 10.4022 10.5362 9.32582 10.5362 7.81846C10.5362 6.41349 9.96471 5.43716 9.96471 5.43716L3.15421 13.5336L3.15063 13.5217Z" fill="#34A853"/>
<path d="M0.839878 10.2128C1.38877 11.4629 2.43535 12.5583 3.14973 13.5228L6.93599 9.03402C6.93599 9.03402 6.40139 9.73412 5.43578 9.73412C4.35943 9.73412 3.48311 8.87686 3.48311 7.79337C3.48311 7.04802 3.92723 6.53128 3.92723 6.53128C1.14111 6.94563 1.2959 7.62072 0.831543 10.2104L0.839878 10.2128Z" fill="#FBBC04"/>
<path d="M6.98467 2.92209C8.24676 3.3281 9.31834 4.18417 9.96129 5.43435L6.93704 9.04202C6.93704 9.04202 7.38116 8.52289 7.38116 7.77993C7.38116 6.67382 6.44769 5.83917 5.4404 5.83917C4.48431 5.83917 3.94019 6.53094 3.94019 6.53094C4.17236 6.00229 6.57152 3.10188 6.98824 2.92328L6.98467 2.92209Z" fill="#4285F4"/>
<path d="M1.53101 4.50895C2.2835 3.61358 3.60273 2.68726 5.42442 2.68726C6.30431 2.68726 6.97226 2.92062 6.97226 2.92062L3.93611 6.52828C3.73132 6.4172 1.73342 4.86138 1.53101 4.50418V4.50895Z" fill="#1A73E8"/>
<path d="M0.840494 10.2133C0.840494 10.2133 0.343994 9.22741 0.343994 7.80816C0.343994 6.46273 0.87026 5.28399 1.53464 4.52197L3.93975 6.54607L0.844066 10.2133H0.840494Z" fill="#EA4335"/>
</svg>
<span className="text-sm font-semibold text-grey-900">{value}</span>
</div>
);
}

20
src/components/shared/MetricCard.tsx
عرض الملف

@@ -5,7 +5,7 @@ import { useState } from "react";
// Reusable Metric Card Component
const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => {
const [isHovered, setIsHovered] = useState(false);
console.log(Img);
if (Img) {
return (
<div className="relative cursor-pointer"
@@ -15,15 +15,11 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
<img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} `} />
</div>
<div className="">
{tooltipText && (
<div className="relative">
{isHovered && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 min-w-28 text-center bg-gray-800 text-white text-lg rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100 ">
{/* Tooltip triangle */}
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800 "></div>
{tooltipText}
</div>
)}
{isHovered && (
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
{/* Tooltip triangle */}
<div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
{tooltipText}
</div>
)}
</div>
@@ -64,9 +60,9 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
<div className="relative">
<Info size={16} className="text-gray-400 cursor-pointer" />
{isHovered && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
{/* Tooltip triangle */}
<div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
<div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
{tooltipText}
</div>
)}

39
src/components/shared/MetricTooltip.tsx Normal file
عرض الملف

@@ -0,0 +1,39 @@
import { useState } from "react";
interface MetricTooltipProps {
tooltipText: string;
extraTooltipText?: string;
widthfit?: boolean;
}
const MetricTooltip = ({ tooltipText, extraTooltipText, widthfit }: MetricTooltipProps) => {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="flex items-center space-x-1 mt- text-gray-500 "
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* <span className="text-sm">{label}</span> */}
<div className="relative">
<svg className="cursor-pointer" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="6.125" fill="#999BAD" />
<path d="M7.96232 6.06532L7.12232 9.4737C7.12232 9.4737 7.12232 9.547 7.08732 9.6203C7.08732 9.6936 7.05232 9.76689 7.05232 9.76689C7.05232 9.87684 7.08732 9.91349 7.19232 9.91349C7.47232 9.91349 7.75232 9.547 8.03232 8.85066L8.31232 9.07056C7.96232 10.0234 7.43732 10.4999 6.66732 10.4999C6.00232 10.4999 5.68732 10.2433 5.68732 9.76689C5.68732 9.6203 5.72232 9.43705 5.75732 9.21716L6.45732 6.43182H5.86232L5.93232 6.10197H6.63232C6.84232 6.10197 7.08732 6.10197 7.36732 6.06532L7.71732 6.02867H7.96232V6.06532ZM6.73732 4.26951C6.73732 4.04962 6.80732 3.86637 6.94732 3.71977C7.08732 3.57318 7.26232 3.49988 7.47232 3.49988C7.68232 3.49988 7.85732 3.57318 7.99732 3.71977C8.13732 3.86637 8.20732 4.04962 8.20732 4.26951C8.20732 4.48941 8.13732 4.67265 7.99732 4.81925C7.85732 4.96585 7.68232 5.03914 7.47232 5.03914C7.26232 5.03914 7.08732 4.96585 6.94732 4.81925C6.80732 4.67265 6.73732 4.48941 6.73732 4.26951Z" fill="white" />
</svg>
{isHovered && (
<div className={`absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 max-w-[400px] ${widthfit ? "w-fit whitespace-nowrap" : "min-w-[280px]"} bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100`}>
{/* Tooltip triangle */}
<div className={`absolute ${!extraTooltipText ? '-bottom-[40%]' : '-bottom-[20%]'} left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800`}></div>
{extraTooltipText && <span className="text-[#9DB1F3] underline mr-1">{extraTooltipText} </span>}
{tooltipText}
</div>
)}
</div>
</div>
)
}
export default MetricTooltip;

8
src/components/shared/UrlDropdown.tsx
عرض الملف

@@ -22,18 +22,18 @@ export default function UrlDropdown() {
<div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
{/* Input box */}
<div
className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
className={`flex justify-between items-center border-2 bg-white px-1 py-0.5 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
onClick={toggleDropdown}
>
<span className="truncate text-gray-800">{selected}</span>
<div className="flex items-center gap-2">
{isOpen ? (
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L5 1L1 5" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9 5L5 1L1 5" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
) : (
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 1L5 5L9 1" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)}
</div>
@@ -52,7 +52,7 @@ export default function UrlDropdown() {
<span className="truncate">{url}</span>
{selected === url && (
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
<path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)}

34
src/components/shared/VisibilityIndicator.tsx Normal file
عرض الملف

@@ -0,0 +1,34 @@
import { cn } from "../../cn";
interface VisibilityIndicatorProps {
platform: "aiOverview" | "chatGPT" | "gemini" | "perplexity";
visible: boolean;
}
export function VisibilityIndicator({ platform, visible }: VisibilityIndicatorProps) {
const platformIcons = {
aiOverview: (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className={visible ? "" : "opacity-30"}>
<path d="M1.36404 8.12824C0.908505 8.17531 0.536133 8.54203 0.536133 8.99999C0.536133 9.45796 0.908505 9.82467 1.36404 9.87174C5.09934 10.2577 8.06812 13.2265 8.45411 16.9618C8.50118 17.4173 8.86789 17.7897 9.32586 17.7897C9.78382 17.7897 10.1505 17.4173 10.1976 16.9618C10.5836 13.2265 13.5524 10.2577 17.2877 9.87174C17.7432 9.82467 18.1156 9.45796 18.1156 8.99999C18.1156 8.54203 17.7432 8.17531 17.2877 8.12824C13.5524 7.74226 10.5836 4.77347 10.1976 1.03818C10.1505 0.582638 9.78382 0.210266 9.32586 0.210266C8.86789 0.210266 8.50118 0.582638 8.45411 1.03818C8.06812 4.77347 5.09934 7.74226 1.36404 8.12824Z" fill="#B5BEFF"/>
</svg>
),
chatGPT: (
<img src="https://api.builder.io/api/v1/image/assets/TEMP/e5bb71947e57a10140eeb1244144893923423624?width=35" alt="" className={cn("w-4 h-4", visible ? "" : "opacity-30")} />
),
gemini: (
<img src="https://api.builder.io/api/v1/image/assets/TEMP/d25443ec16f0e88d6473a5e0a08f6ecba5a4501b?width=37" alt="" className={cn("w-[18px] h-[18px]", visible ? "" : "opacity-30")} />
),
perplexity: (
<img src="https://api.builder.io/api/v1/image/assets/TEMP/0c29c362f8bf14651c91712166ccd885a8c5e83b?width=33" alt="" className={cn("w-4 h-4", visible ? "" : "opacity-30")} />
),
};
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
{platformIcons[platform]}
<span className={cn("text-xs leading-[18px]", visible ? "text-grey-900 font-normal" : "text-grey-700 font-normal")}>
{visible ? "Visible" : "Invisible"}
</span>
</div>
);
}

547
src/pages/Analysis.tsx
عرض الملف

@@ -1,22 +1,543 @@
import ContainerPage from "../components/shared/ContainerPage";
import SourcesChart from "../components/Analysis/SourcesChart";
import AnalysisSearch from "../components/Analysis/AnalysisSearch";
import BecomeTheSource from "../components/Analysis/BecomeTheSource";
import VisibilityAnalysis from "../components/Analysis/VisibilityAnalysis";
import { ArrowLeft, ChevronDown, Info, Search, Zap } from "lucide-react";
import { Lightbulb, Share2 } from "lucide-react";
import StrategyHero from "../components/Analysis/StrategyHero";
import RankingsCard from "../components/Analysis/RankingsCard";
import BacklinksCard from "../components/Analysis/BacklinksCard";
import Preplextiy from "../assets/icons/perplextiy-light.svg"
import ChatGPT from "../assets/icons/gpt.svg"
import Gemini from "../assets/icons/gemini2.svg"
import Google from "../assets/icons/google-original-logo.svg"
import Map from "../assets/icons/maps.svg"
import SharedIcon from "../components/icons/shared-icon";
import { useState } from "react";
import MetricTooltip from "../components/shared/MetricTooltip";
const Analysis = () => {
{/* <BecomeTheSource /> */ }
// <SourcesChart />
const healthcareSegments = [
{ percentage: 40, color: "#4C60E5" },
{ percentage: 20, color: "#9CCCFa" },
{ percentage: 24, color: "#93B3FE" },
{ percentage: 7, color: "#a2c4f1" },
{ percentage: 9, color: "#82d4fd" },
];
const sourceSegments = [
{ percentage: 30, color: "#4285f4" },
{ percentage: 30, color: "#34A853" },
{ percentage: 25, color: "#fbbc05" },
{ percentage: 10, color: "#4285f4" },
{ percentage: 5, color: "#EA4335" },
];
const healthcareItems = [
{ label: "40% Consumer Health Giants", color: "#4C60E5", highlighted: true },
{ label: "30% Mainstream Media Sections", color: "#4285F4", highlighted: false },
{ label: "20% Elite Midical Journals", color: "#34A853", highlighted: false, subtitle: "(Forbes, Inc.)" },
{ label: "10% Specialty Platforms", color: "#FBBC05", highlighted: false },
{ label: "3% Professional/Academic Crossovers", color: "#EA4335", highlighted: false },
];
const sourceItems = [
{ label: "30% Branded Aesthetics Social Signals", color: "#4C60E5", icons: ["🎯", "📌", "🎨"] },
{ label: "30% Local + Medical-Cosmetic Citations", color: "#4285F4", icons: ["🏥", "📍", "⚕️"] },
{ label: "20% Web 2.0 Microblogging Sites", color: "#34A853", icons: ["✍️", "💬", "📱"] },
{ label: "20% Multimedia Content & Beauty Visuals", color: "#FBBC05", icons: ["📹", "📷", "🎬"] },
{ label: "10% Community and UGC Signals", color: "#EA4335", icons: ["👥", "💭", "⭐"] },
];
interface TableRow {
id: number;
source: {
name: string;
icon: string;
link: string;
};
aiq: number;
howToGetCited: string;
difficulty: string;
}
const tableData: TableRow[] = [
{
id: 1,
source: {
name: "Healthline",
icon: "https://api.builder.io/api/v1/image/assets/TEMP/b15602913e63eb3520fb41cd31ec6bc43267262c?width=47",
link: "#",
},
aiq: 81,
howToGetCited: "Submit expert commentary, pass credential sniff test, and wait 9 months. Then get buried beneath 14 'updated' versions of the same article.",
difficulty: "You'll see your quote once. In cached Google snippets.",
},
{
id: 2,
source: {
name: "Local NBC News Health\nStory",
icon: "https://api.builder.io/api/v1/image/assets/TEMP/df61dae6a5530ed011c41ccfeafd08399739dd3c?width=36",
link: "#",
},
aiq: 79,
howToGetCited: "Sponsor a blood drive. Save a puppy. Cure a rash on live TV. Boom! 'Local doctor says...' and you're famous for 5 minutes.",
difficulty: "Surprisingly realistic. But fleeting.",
},
{
id: 3,
source: {
name: "Local NBC News Health\nStory",
icon: "https://api.builder.io/api/v1/image/assets/TEMP/a043d044048cc5b543593793ddb419fe940bdd67?width=36",
link: "#",
},
aiq: 78,
howToGetCited: "Convince 400 patients to leave glowing reviews. They won't. Your 1-star client will, though.",
difficulty: "Takes a village. A very vain village.",
},
];
const SortIcon = () => (
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
<path d="M7.3018 7.72026C7.3018 7.83808 7.2538 7.95589 7.18179 8.05014L4.13336 11.2546C3.98934 11.4195 3.7253 11.4431 3.55727 11.3017C3.53327 11.2782 3.53327 11.2782 3.50927 11.2546L0.460837 8.02657C0.388827 7.95589 0.34082 7.83808 0.34082 7.72026C0.34082 7.48464 0.532847 7.27258 0.772881 7.24902H6.86974C7.10977 7.24902 7.3018 7.46108 7.3018 7.72026ZM7.3018 4.1411C7.3018 4.37672 7.10977 4.58878 6.86974 4.61234H0.772881C0.532847 4.61234 0.34082 4.40028 0.34082 4.1411C0.34082 4.02329 0.388827 3.90547 0.460837 3.81123L3.50927 0.60675C3.65329 0.441814 3.91732 0.418252 4.08535 0.559626C4.10935 0.583188 4.10935 0.583188 4.13336 0.60675L7.18179 3.83479C7.2538 3.90547 7.3018 4.02329 7.3018 4.1411Z" fill="#999BAD" />
</svg>
);
const [selectedItem, setSelectedItem] = useState<any>(null);
const [showDetails, setShowDetails] = useState<any>(true);
return (
<ContainerPage>
<div className="space-y-8">
<AnalysisSearch />
<VisibilityAnalysis />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<SourcesChart />
<BecomeTheSource />
<>
<Header />
<ContainerPage>
<div className="mb-5">
<div className="mb-2 flex justify-between items-center">
<h1 className="text-xl font-bold text-gray-950 mb-1">Analysis of Visibility</h1>
<div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-gray-700 mt-1">
<div className="w-22 flex items-center gap-2">
<span className="w-full">
AIO Health
</span>
<MetricTooltip tooltipText="AIO Health" widthfit={true} />
</div>
<div className="w-20 flex items-center gap-2">Backlinks
<MetricTooltip tooltipText="Backlinks" widthfit={true} />
</div>
<div className="w-14 text-[#65677D]">G Pos #</div>
<div className="w-10 text-[#65677D]">Maps</div>
<div className="w-20 text-[#65677D]">Ai Overview</div>
<div className="w-16 text-[#65677D]">Chat GPT</div>
<div className="w-16 text-[#65677D]">Gemini</div>
<div className="w-16 text-[#65677D]">Perplexity</div>
</div>
</div>
<div className="flex items-center justify-between border border-gray-300 rounded-lg bg-white p-3">
<div>
<h2 className="text-sm font-semibold text-gray-950">BH Medical Spa of Beverly Hills</h2>
<div className="flex items-center gap-4 mt-1 text-xs">
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#17171B]">Sector:</span>
<span className="text-[#65677D] font-normal">Healthcare</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#17171B]">Industry:</span>
<span className="text-[#65677D] font-normal">Medical Spa</span>
</div>
</div>
</div>
<div className="flex items-center gap-[2.3rem] w-[60%]">
<div className="flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
<circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<span className="text-sm font-semibold text-gray-900">24%</span>
</div>
<div className="flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
<circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<div className="flex flex-col">
<span className="text-sm font-semibold text-gray-900">14%</span>
<span className="text-[11px] font-semibold text-gray-700">50/370 links</span>
</div>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
<svg width="15" height="15" viewBox="0 0 15 16">
<path d="M13.9853 8.15431C13.9853 7.67081 13.9419 7.2059 13.8613 6.75958H7.43933V9.40027H11.109C10.9478 10.2495 10.4643 10.9686 9.73908 11.4521V13.1691H11.9521C13.2414 11.979 13.9853 10.2309 13.9853 8.15431Z" fill="#4285F4" />
<path d="M7.43878 14.8186C9.27982 14.8186 10.8233 14.2111 11.9515 13.1697L9.73853 11.4527C9.13105 11.8618 8.3562 12.1097 7.43878 12.1097C5.66592 12.1097 4.15962 10.9134 3.62032 9.3017H1.35156V11.0622C2.47354 13.2875 4.7733 14.8186 7.43878 14.8186Z" fill="#34A853" />
<path d="M3.62113 9.29494C3.48475 8.88582 3.40417 8.45191 3.40417 7.99939C3.40417 7.54688 3.48475 7.11297 3.62113 6.70385V4.94339H1.35237C0.887459 5.86081 0.620911 6.89601 0.620911 7.99939C0.620911 9.10278 0.887459 10.138 1.35237 11.0554L3.11902 9.67927L3.62113 9.29494Z" fill="#FBBC05" />
<path d="M7.43878 3.89567C8.44298 3.89567 9.33561 4.24281 10.0485 4.91228L12.0011 2.95966C10.8171 1.85627 9.27982 1.1806 7.43878 1.1806C4.7733 1.1806 2.47354 2.71171 1.35156 4.94327L3.62032 6.70373C4.15962 5.09204 5.66592 3.89567 7.43878 3.89567Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-gray-900">5</span>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
<path d="M2.80688 11.5217C3.25814 12.086 3.71773 12.7957 3.95824 13.2243C4.25114 13.7815 4.37259 14.1578 4.59047 14.8317C4.71787 15.2008 4.83932 15.3127 5.09412 15.3127C5.37273 15.3127 5.50013 15.1246 5.59776 14.8317C5.80136 14.1994 5.95853 13.7184 6.20737 13.26C7.16703 11.4502 8.73155 10.1643 9.61262 8.40216C9.61262 8.40216 10.1925 7.32582 10.1925 5.81846C10.1925 4.41349 9.62096 3.43716 9.62096 3.43716L2.81046 11.5336L2.80688 11.5217Z" fill="#34A853" />
<path d="M0.49625 8.21276C1.04514 9.46294 2.09172 10.5583 2.80611 11.5228L6.59236 7.03402C6.59236 7.03402 6.05776 7.73412 5.09215 7.73412C4.0158 7.73412 3.13949 6.87686 3.13949 5.79337C3.13949 5.04802 3.5836 4.53128 3.5836 4.53128C0.797483 4.94563 0.952267 5.62072 0.487915 8.21038L0.49625 8.21276Z" fill="#FBBC04" />
<path d="M6.64104 0.922089C7.90313 1.3281 8.97471 2.18417 9.61766 3.43435L6.59342 7.04202C6.59342 7.04202 7.03753 6.52289 7.03753 5.77993C7.03753 4.67382 6.10406 3.83917 5.09677 3.83917C4.14068 3.83917 3.59656 4.53094 3.59656 4.53094C3.82873 4.00229 6.22789 1.10188 6.64462 0.923279L6.64104 0.922089Z" fill="#4285F4" />
<path d="M1.18726 2.50895C1.93975 1.61358 3.25898 0.687256 5.08067 0.687256C5.96056 0.687256 6.62851 0.920623 6.62851 0.920623L3.59236 4.52828C3.38757 4.4172 1.38967 2.86138 1.18726 2.50418V2.50895Z" fill="#1A73E8" />
<path d="M0.496744 8.21327C0.496744 8.21327 0.000244141 7.22741 0.000244141 5.80816C0.000244141 4.46273 0.52651 3.28399 1.19089 2.52197L3.596 4.54607L0.500316 8.21327H0.496744Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-gray-900">8</span>
</div>
<div className="flex items-center gap-5">
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="G" className="w-4 h-4" />
Invisible
</div>
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={ChatGPT} alt="ChatGPT" className="w-4 h-4" />
Invisible</div>
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="Gemini" className="w-4 h-4" />Invisible</div>
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Preplextiy} alt="Perplexity" className="w-4 h-4" />
Invisible</div>
</div>
<button className="flex items-center gap-1 px-1.5 py-1 rounded-md border border-gray-300 bg-white shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M6.59226 2H5.69226C3.75926 2 2.19226 3.567 2.19226 5.5V10.5C2.19226 12.433 3.75926 14 5.69226 14H10.6923C12.6253 14 14.1923 12.4333 14.1923 10.5003C14.1923 10.2415 14.1923 9.95005 14.1923 9.6" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
<path d="M10.1923 2H14.1923M14.1923 2V6M14.1923 2L8.19128 8" stroke="#65677D" stroke-width="1.5" stroke-linejoin="round" />
</svg>
<span className="text-xs font-semibold text-gray-900">Share</span>
</button>
</div>
</div>
</div>
</div>
</ContainerPage>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-4">
{showDetails ?
<div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden justify-between">
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-300 h-[60px]">
<h2 className="text-base font-semibold text-gray-950">Ai Frequently Cited Sources in Healthcare</h2>
</div>
<div className="flex flex-col justify-between h-full gap-8 px-6 pb-6">
<div className="flex items-center gap-5">
<DonutChart segments={healthcareSegments} size={200} strokeWidth={53} />
<div className="flex flex-col gap-1.5 flex-1">
{healthcareItems.map((item, index) => (
<div
key={index}
className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md border hover:border-[#C9D7FB] hover:bg-[#ECF1FD] cursor-pointer ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-gray-300"
}`}
onClick={() => {
setSelectedItem(item);
setShowDetails(false);
}}
>
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: item.color }} />
<div className="flex items-center gap-0.5 flex-1">
<span className="text-sm">
<span className="font-bold text-gray-900">{item.label.split(" ")[0]}</span>
<span className="text-gray-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
</span>
{item.subtitle && (
<span className="text-sm text-gray-700 ml-1">{item.subtitle}</span>
)}
</div>
</div>
))}
</div>
</div>
<div className="flex flex-col px-3 py-3 rounded-xl bg-[#ECF1FD]">
<div className="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
<path d="M7.05074 3.62323C5.68916 3.62323 4.49145 4.39338 3.86719 5.52409" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.27642 14.6968C4.55366 14.6212 4.83089 14.5456 5.10813 14.47C9.24146 13.2854 9.03984 13.3862 9.11545 13.2098C9.72033 11.1936 10.1236 11.748 11.2073 10.2106C11.7114 9.47974 12.0894 8.64804 12.2407 7.76592C12.3163 7.41308 12.3415 7.03503 12.3415 6.65698C12.3415 3.50657 9.79594 0.961044 6.67073 0.961044C3.54553 0.961044 1 3.50657 1 6.63178C1 7.51389 1.17642 8.42121 1.55447 9.22771C1.83171 9.83259 2.23496 10.3871 2.68862 10.8659C3.08885 11.2852 3.58998 11.6613 3.90862 12.1576" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.28516 17.039L8.81361 16.0056" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span className="text-sm font-semibold text-gray-950">How Ai and LLMs Choose Their Sources</span>
</div>
<p className="text-xs text-gray-900 leading-[18px]">
Our analysis reveals distinct patterns in how leading AIs source and prioritize industry information. For example, ChatGPT leans heavily on user-generated content, while Google's AI Overviews favors authoritative tech review sites. Across the board, backlink quality plays a crucial role, with...{" "}
<span className="text-[#4C60E5] underline cursor-pointer">read more</span>
</p>
</div>
</div>
</div>
:
(
<div className="w-full bg-white rounded-xl shadow-elevation flex flex-col border border-gray-300">
<div className="flex items-center gap-4 px-4 py-2 ">
<div className="flex items-center gap-2">
<button
className="flex items-center justify-center gap-1.5 w-7 h-6 rounded-md border border-gray-300 bg-transparent hover:bg-gray-200 transition-colors"
onClick={() => setShowDetails(true)}
>
<ArrowLeft className="w-4 h-4 text-gray-800" strokeWidth={1.275} />
</button>
<h1 className="text-sm font-semibold">
<span className="font-normal text-gray-800">Consumer Health Giants... </span>
<span className="font-bold text-[#2B2D3B]">Good Lick With That </span>
<span className="font-normal text-[#2B2D3B]">Tier</span>
</h1>
</div>
</div>
<div className="relative w-full mx-auto border-t border-[#d0d7d8] shadow-xl ">
<div className="h-1.5 bg-gradient-to-b from-[#0A2527]/8 to-transparent"></div>
</div>
<div className="flex flex-col flex-1 px-2 pb-2">
{/* Table Header */}
<div className="hidden md:flex items-center px-6 py-2 border-b border-gray-300 text-body-s font-semibold text-gray-800 gap-3">
<div className="flex items-center font-semibold gap-2 w-[160px] flex-shrink-0 text-[#65677D]">
<span>Source</span>
<SortIcon />
</div>
<div className="flex items-center font-semibold gap-2 w-[60px] flex-shrink-0 justify-center text-[#65677D]">
<span>AIQ</span>
<SortIcon />
</div>
<div className="flex items-center font-semibold gap-2 w-[233px] flex-shrink-0 text-[#65677D]">
<span>How to Get Cited</span>
<SortIcon />
</div>
<div className="flex items-center font-semibold gap-2 w-[180px] flex-shrink-0 text-[#65677D]">
<span>Difficulty</span>
<SortIcon />
</div>
</div>
{/* Table Body */}
<div className="overflow-y-auto h-full px-2">
{tableData.map((row) => (
<div
key={row.id}
className="flex flex-col md:flex-row items-start md:items-start border-b border-gray-200 bg-white px-6 pt-3 pb-6 hover:bg-gray-50 transition h-[30%] gap-3"
>
{/* Source */}
<div className="flex items-center gap-2 w-[160px] flex-shrink-0">
<div className="w-5 h-5 rounded-sm overflow-hidde">
<img
src={row.source.icon}
alt={row.source.name}
className="w-full h-full object-cover"
/>
</div>
<a
href={row.source.link}
className="text-sm text-[#4C60E5] underline hover:no-underline truncatse"
>
{row.source.name}
</a>
</div>
{/* AIQ */}
<div className="w-[60px] text-sm text-[#65677D] flex-shrink-0">
{row.aiq}
</div>
{/* How to Get Cited */}
<div className="w-[233px] text-sm text-[#65677D] leading-snug flex-shrink-0">
{row.howToGetCited}
</div>
{/* Difficulty */}
<div className="w-[180px] text-sm text-[#65677D] leading-snug flex-shrink-0">
{row.difficulty}
</div>
</div>
))}
</div>
{/* Footer */}
<div className="flex justify-center items-center py-3.5 px-2 rounded-lg bg-[#F2F3F7]">
<p className="text italic text-[#65677D] text-center max-w-[800px]">
"Mass SEO factories disguised as medical authorities."
</p>
</div>
</div>
</div>
)}
<div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden">
<div className="flex flex-col gap-7 px-4 py-3 border-b border-gray-300 h-[60px]">
<div>
<h2 className="text-base font-bold text-gray-950">Become the Source</h2>
<p className="text-xs text-gray-700">
Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-gray-950">Medical Spas</span>
</p>
</div>
</div>
<div className="flex flex-col gap-4 px-6 pb-6">
<div className="flex items-center gap-5">
<DonutChart segments={sourceSegments} size={200} strokeWidth={51.76} />
<div className="flex flex-col gap-2 flex-1">
{sourceItems.map((item, index) => (
<div key={index} className="flex items-start gap-1">
<div className="w-[10px] h-[10px] rounded-full flex-shrink-0 mt-[10px]" style={{ backgroundColor: item.color }} />
<div className="flex flex-col gap-0 flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center gap-0.5">
<span className="text-sm font-bold text-gray-900">{item.label.split(" ")[0]}</span>
<MetricTooltip tooltipText={item.label.split(" ").slice(1).join(" ")} />
</div>
<div className="flex items-center gap-1">
{item.icons.map((icon, i) => (
<div key={i} className="w-[30px] h-[30px] rounded-md border border-gray-300 bg-white flex items-center justify-center text-md">
{icon}
</div>
))}
</div>
</div>
<span className="text-sm text-gray-900">{item.label.split(" ").slice(1).join(" ")}</span>
</div>
</div>
))}
</div>
</div>
<div className="flex items-center justify-center">
<button className="w-[55%] px-2 py-6 rounded-full bg-white border-4 border-transparent bg-gradient-to-r from-blue-500 via-red-500 via-orange-400 via-yellow-400 to-green-500 bg-clip-padding relative group mx-auto hover:bg-[#ECF1FD] transition-colors">
<div className="absolute inset-0 bg-white rounded-full m-[3px] flex items-center justify-center gap-3 hover:bg-[#ECF1FD] transition-colors">
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
<Zap className="w-4 h-4 text-white fill-white" />
</div>
<span className="text-md font-semibold text-gray-900">
Add your Keywords and Become the Source
</span>
</div>
</button>
</div>
</div>
</div>
</div>
<StrategyHero />
<div className="flex items-start gap-5">
<RankingsCard />
<BacklinksCard />
</div>
</ContainerPage>
</>
);
};
export default Analysis;
interface DonutChartProps {
segments: {
percentage: number;
color: string;
}[];
size?: number;
strokeWidth?: number;
}
function Header() {
return (
<div className="w-full border-b border-gray-300 bg-[#F6F8FE] px-2 py-2.5 mt-[-8px]">
<div className="flex items-center justify-center gap-1.5">
<div className="flex h-[30px] w-[312px] items-center gap-1.5 rounded-lg border border-gray-300 bg-white p-0.5">
<div className="flex items-center gap-1.5 flex-1">
<div className="flex items-end rounded-lg">
<div className="flex px-1.5 items-center justify-center">
<span className="text-xs font-semibold text-gray-700">AIQ</span>
</div>
<div className="flex px-1.5 items-center justify-center rounded-[5px] bg-gray-300">
<span className="text-xs font-semibold text-gray-700">10</span>
</div>
</div>
<div className="w-px h-5 bg-gray-300" />
<div className="flex px-1.5 justify-between items-center flex-1 cursor-pointer">
<span className="text-sm text-gray-900 tracking-tight">mysite.com</span>
<ChevronDown className="w-3 h-3 text-gray-800" />
</div>
</div>
</div>
<button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-gray-300 bg-white shadow-sm">
<div className="flex px-1 items-center gap-1.25">
<Search className="w-4 h-4 text-gray-800" strokeWidth={1.5} />
<span className="text-xs font-semibold text-gray-900">Analyze</span>
</div>
</button>
</div>
</div>
);
}
function DonutChart({ segments, size = 200, strokeWidth = 53 }: DonutChartProps) {
const radius = size / 2 - strokeWidth / 2;
const centerX = size / 2;
const centerY = size / 2;
let accumulatedAngle = 0;
return (
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
{segments.map((segment, index) => {
const angle = (segment.percentage / 100) * 360;
const startAngle = accumulatedAngle - 90;
const endAngle = startAngle + angle;
const startRad = (startAngle * Math.PI) / 180;
const endRad = (endAngle * Math.PI) / 180;
const x1 = centerX + radius * Math.cos(startRad);
const y1 = centerY + radius * Math.sin(startRad);
const x2 = centerX + radius * Math.cos(endRad);
const y2 = centerY + radius * Math.sin(endRad);
const largeArcFlag = angle > 180 ? 1 : 0;
const pathData = [
`M ${x1} ${y1}`,
`A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`
].join(' ');
accumulatedAngle += angle;
return (
<path
key={index}
d={pathData}
fill="none"
stroke={segment.color}
strokeWidth={strokeWidth}
strokeLinecap="butt"
/>
);
})}
<circle
cx={centerX}
cy={centerY}
r={size * 0.268}
fill="none"
stroke="#0B246F"
strokeWidth={13.37}
opacity={0.07}
/>
</svg>
);
}

183
src/pages/HomePage.tsx Normal file
عرض الملف

@@ -0,0 +1,183 @@
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

22
src/pages/Keywords.tsx Normal file
عرض الملف

@@ -0,0 +1,22 @@
import React from 'react'
import { keywordSections } from "../assets/keyword-data";
import { KeywordSection } from "../components/KeywordSection";
import ContainerPage from '../components/shared/ContainerPage';
import HeaderPage from '../components/shared/HeaderPage';
const Keywords = () => {
return (
<ContainerPage>
<HeaderPage title="Keyword Visibility Matrix" buttonShow={true} />
<div className="flex flex-col">
{keywordSections.map((section) => (
<KeywordSection key={section.id} section={section} />
))}
</div>
</ContainerPage>
)
}
export default Keywords

11
src/pages/Portfolio.tsx
عرض الملف

@@ -9,12 +9,14 @@ import { CircleCheck } from 'lucide-react';
import Progress from "../assets/icons/InProgress.svg"
import No from "../assets/icons/NA.svg"
import Share2 from "../assets/icons/Share2.png"
import SharedIcon from '../components/icons/shared-icon';
const done = <div className='flex items-center gap-2 w-[100px]'> <CircleCheck className='w-6 h-6 text-[#fff] bg-green-500 rounded-full' /> <span className='text-green-500 font-bold text-md'>Done</span></div>
const progress = <div className='flex items-center gap-2 w-[100px]'>
<img src={Progress} alt="" className='w-6 h-6' />
<span className='text-blue-500 font-bold text-md'>In Progress</span></div>
<span className='text-blue-500 font-bold text-md'>In Progress</span>
</div>
// Category table data
const nA = <div className='flex items-center gap-2'>
@@ -87,7 +89,7 @@ function Portfolio() {
<span className='text-gray-500 rounded-md text-sm sm:text-md font-normal'>
<span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 text-xs sm:text-sm'>4%</b>
</span>
<span className='flex items-center font-normal gap-2 text-[#787B91] sm:text-md'>Content Publishing
@@ -107,10 +109,7 @@ function Portfolio() {
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
<button className='bg-[#fff] border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M1.80154 10.583C1.7998 10.2479 1.7998 9.88794 1.7998 9.49999C1.7998 6.80829 1.7998 5.46245 2.37857 4.45999C2.75773 3.80327 3.30308 3.25792 3.95981 2.87876C4.96226 2.29999 6.30811 2.29999 8.9998 2.29999C11.6915 2.29999 13.0373 2.29999 14.0398 2.87876C14.6965 3.25792 15.2419 3.80327 15.621 4.45999C16.1998 5.46245 16.1998 6.80829 16.1998 9.49999C16.1998 12.1917 16.1998 13.5375 15.621 14.54C15.2419 15.1967 14.6965 15.7421 14.0398 16.1212C13.0373 16.7 11.6915 16.7 8.9998 16.7C8.60253 16.7 8.23457 16.7 7.8927 16.6981" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
<path d="M6.99503 6.79999H11.7002M11.7002 6.79999V11.5059M11.7002 6.79999L2.7002 15.8" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<SharedIcon />
<span>Export</span>
</button>

4
src/pages/Strategy.tsx
عرض الملف

@@ -2,8 +2,8 @@
import { useState } from "react"
// import { Search, MessageSquare } from "lucide-react"
import IntegratedStrategy from "../components/IntegratedStrategy"
import Vector from "../assets/icons/Vector.png"
import Vector2 from "../assets/icons/Vector2.png"
import Vector from "../assets/icons/Vector.svg"
import Vector2 from "../assets/icons/Vector2.svg"
import ShowDetails from "../components/Strategy/ShowDetails"
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"