feature/keyword-actions-ui
هذا الالتزام موجود في:
@@ -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 |
@@ -9,6 +9,7 @@ import Settings from './pages/Settings';
|
|||||||
import Strategy from './pages/Strategy';
|
import Strategy from './pages/Strategy';
|
||||||
import Login from './pages/login';
|
import Login from './pages/login';
|
||||||
import ProtectedRoute from './components/ProtectedRoute';
|
import ProtectedRoute from './components/ProtectedRoute';
|
||||||
|
import Keywords from './pages/Keywords';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@@ -31,6 +32,7 @@ function App() {
|
|||||||
<Route path="/strategy" element={<Strategy />} />
|
<Route path="/strategy" element={<Strategy />} />
|
||||||
<Route path="/settings" element={<Settings />} />
|
<Route path="/settings" element={<Settings />} />
|
||||||
<Route path="/analysis" element={<Analysis />} />
|
<Route path="/analysis" element={<Analysis />} />
|
||||||
|
<Route path="/keywords" element={<Keywords />} />
|
||||||
|
|
||||||
|
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
ثنائية
src/assets/bgMap.png
Normal file
ثنائية
src/assets/bgMap.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 12 MiB |
ثنائية
src/assets/bgMapOpacity.png
Normal file
ثنائية
src/assets/bgMapOpacity.png
Normal file
ملف ثنائي غير معروض.
|
بعد العرض: | الارتفاع: | الحجم: 872 KiB |
@@ -1,5 +1,5 @@
|
|||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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="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>
|
</svg>
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 681 B بعد العرض: | الارتفاع: | الحجم: 677 B |
@@ -1,4 +1,4 @@
|
|||||||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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="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" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M12.1987 2.59314L4.80078 15.4069" stroke="#999BAD" strokeWidth="1.875" stroke-miterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 505 B بعد العرض: | الارتفاع: | الحجم: 499 B |
3
src/assets/icons/Vector.svg
Normal file
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
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 |
@@ -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 |
@@ -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">
|
<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)"/>
|
<rect x="4.60156" y="3.30972" width="20.7884" height="20.7884" fill="url(#pattern0_11479_10636)"/>
|
||||||
<defs>
|
<defs>
|
||||||
<pattern id="pattern0_11479_10636" patternContentUnits="objectBoundingBox" width="1" height="1">
|
<pattern id="pattern0_11479_10636" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 399 KiB بعد العرض: | الارتفاع: | الحجم: 399 KiB |
@@ -1,6 +1,6 @@
|
|||||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" fill="white"/>
|
||||||
<rect x="0.5" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
|
<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="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" 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" strokeWidth="1.625" strokeLinecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 1.6 KiB بعد العرض: | الارتفاع: | الحجم: 1.6 KiB |
@@ -1,6 +1,6 @@
|
|||||||
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" fill="white"/>
|
||||||
<rect x="1.1665" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
|
<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="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" stroke-width="1.63" 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" strokeWidth="1.63" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 1.3 KiB بعد العرض: | الارتفاع: | الحجم: 1.3 KiB |
@@ -1,6 +1,6 @@
|
|||||||
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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" fill="white"/>
|
||||||
<rect x="0.833252" y="0.5" width="41" height="41" rx="6.5" stroke="#DFE1EB"/>
|
<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="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" stroke-width="1.62495" stroke-linecap="round"/>
|
<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>
|
</svg>
|
||||||
|
|||||||
|
قبل العرض: | الارتفاع: | الحجم: 1.2 KiB بعد العرض: | الارتفاع: | الحجم: 1.2 KiB |
ثنائية
src/assets/image.png
ثنائية
src/assets/image.png
ملف ثنائي غير معروض.
|
قبل العرض: | الارتفاع: | الحجم: 96 KiB |
118
src/assets/keyword-data.ts
Normal file
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
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
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
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-primary/5 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;
|
||||||
159
src/components/Analysis/StrategyHero.tsx
Normal file
159
src/components/Analysis/StrategyHero.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import WorldMap from "../../assets/bgMap.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-[158px] 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;
|
||||||
@@ -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" />
|
<img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
|
||||||
{isHovered && (
|
{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 */}
|
{/* 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}
|
{tooltipText}
|
||||||
</div>
|
</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="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">
|
<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">
|
<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>
|
</svg>
|
||||||
<span>{card.badge}</span>
|
<span>{card.badge}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
63
src/components/KeywordRow.tsx
Normal file
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]">
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1 mr-20">
|
||||||
|
<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
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";
|
||||||
|
|
||||||
|
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 width="6" height="12" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" className="rotate-180">
|
||||||
|
<path d="M1 1L7 7L13 0.999999" stroke="#65677D" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg width="6" height="12" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1 1L7 7L1 13" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="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-11 gap-4 items-center px-6 pr-[52px] py-1.5 bg-grey-100 border-b border-grey-300">
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.43555" cy="7" r="6.125" fill="#999BAD" />
|
||||||
|
<path d="M8.39805 6.06532L7.55805 9.4737C7.55805 9.4737 7.55805 9.547 7.52305 9.6203C7.52305 9.6936 7.48805 9.76689 7.48805 9.76689C7.48805 9.87684 7.52305 9.91349 7.62805 9.91349C7.90805 9.91349 8.18805 9.547 8.46805 8.85066L8.74805 9.07056C8.39805 10.0234 7.87305 10.4999 7.10305 10.4999C6.43805 10.4999 6.12305 10.2433 6.12305 9.76689C6.12305 9.6203 6.15805 9.43705 6.19305 9.21716L6.89305 6.43182H6.29805L6.36805 6.10197H7.06805C7.27805 6.10197 7.52305 6.10197 7.80305 6.06532L8.15305 6.02867H8.39805V6.06532ZM7.17305 4.26951C7.17305 4.04962 7.24305 3.86637 7.38305 3.71977C7.52305 3.57318 7.69805 3.49988 7.90805 3.49988C8.11805 3.49988 8.29305 3.57318 8.43305 3.71977C8.57305 3.86637 8.64305 4.04962 8.64305 4.26951C8.64305 4.48941 8.57305 4.67265 8.43305 4.81925C8.29305 4.96585 8.11805 5.03914 7.90805 5.03914C7.69805 5.03914 7.52305 4.96585 7.38305 4.81925C7.24305 4.67265 7.17305 4.48941 7.17305 4.26951Z" fill="white" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-grey-50">
|
||||||
|
{section.keywords.map((keyword) => {
|
||||||
|
return <KeywordRow key={keyword.id} keyword={keyword} />;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-2 py-2.5 px-2">
|
||||||
|
<button className="text-sm font-medium text-primary underline leading-[17px] hover:text-primary/80 transition-colors">
|
||||||
|
Load 10 More Keywords
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
src/components/StatusBadge.tsx
Normal file
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -90,23 +90,23 @@ function ProgressMetrics() {
|
|||||||
<g mask="url(#mask0_11446_9597)">
|
<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)"/>
|
<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>
|
</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>
|
<defs>
|
||||||
<linearGradient id="paint0_linear_11446_9597" x1="59.6985" y1="14.9105" x2="59.6985" y2="65.0109" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#DF8D2D"/>
|
||||||
<stop offset="1" stop-color="#794D18" stop-opacity="0"/>
|
<stop offset="1" stopColor="#794D18" stop-opacity="0"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint1_linear_11446_9597" x1="3.31445" y1="39.9607" x2="142.824" y2="39.942" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#2F82F8"/>
|
||||||
<stop offset="0.348569" stop-color="#0EB65E"/>
|
<stop offset="0.348569" stopColor="#0EB65E"/>
|
||||||
<stop offset="0.67237" stop-color="#F6CA09"/>
|
<stop offset="0.67237" stopColor="#F6CA09"/>
|
||||||
<stop offset="1" stop-color="#F5484A"/>
|
<stop offset="1" stopColor="#F5484A"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint2_linear_11446_9597" x1="3.63379" y1="38.5085" x2="142.748" y2="38.4888" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#2F82F8"/>
|
||||||
<stop offset="0.348569" stop-color="#0EB65E"/>
|
<stop offset="0.348569" stopColor="#0EB65E"/>
|
||||||
<stop offset="0.67237" stop-color="#F6CA09"/>
|
<stop offset="0.67237" stopColor="#F6CA09"/>
|
||||||
<stop offset="1" stop-color="#F5484A"/>
|
<stop offset="1" stopColor="#F5484A"/>
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
// بسم الله الرحمن الرحيم
|
// بسم الله الرحمن الرحيم
|
||||||
// بسم الله الرحمن الرحيم
|
// بسم الله الرحمن الرحيم
|
||||||
|
|
||||||
import Vector from "../../assets/icons/Vector.png"
|
import Vector from "../../assets/icons/Vector.svg"
|
||||||
import Vector2 from "../../assets/icons/Vector2.png"
|
import Vector2 from "../../assets/icons/Vector2.svg"
|
||||||
|
|
||||||
// Roadmap sidebar component
|
// Roadmap sidebar component
|
||||||
const RoadmapSidebar = ({
|
const RoadmapSidebar = ({
|
||||||
|
|||||||
88
src/components/icons/icons-header.tsx
Normal file
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
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
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">
|
||||||
|
<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fillRule="evenodd" clipRule="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.23881Z" 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">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -19,62 +19,10 @@ import logo from "../../assets/logo.png";
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import Logo from "./Logo";
|
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 = () => {
|
// const CalendarDays = () => {
|
||||||
// return (
|
// return (
|
||||||
|
|
||||||
@@ -87,20 +35,13 @@ const Header = () => {
|
|||||||
|
|
||||||
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
|
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
|
||||||
const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
|
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 = [
|
const navLinks = [
|
||||||
{ name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
|
{ name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
|
||||||
{ name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
|
{ name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
|
||||||
{ name: 'Strategy', to: '/strategy', icon: CalendarDays, iconLight: CalendarDaysLight },
|
{ 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 },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import UrlDropdown from "./UrlDropdown"
|
|||||||
|
|
||||||
const HeaderPage = ({ title }: { title: string }) => {
|
const HeaderPage = ({ title }: { title: string }) => {
|
||||||
return (
|
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">
|
<div className="flex items-baseline gap-4 flex-wrap">
|
||||||
<h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
|
<h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
|
||||||
|
|
||||||
@@ -16,7 +16,7 @@ const HeaderPage = ({ title }: { title: string }) => {
|
|||||||
fill="none"
|
fill="none"
|
||||||
className="flex-shrink-0 -translate-y-1"
|
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>
|
</svg>
|
||||||
|
|
||||||
<UrlDropdown />
|
<UrlDropdown />
|
||||||
@@ -30,7 +30,7 @@ const HeaderPage = ({ title }: { title: string }) => {
|
|||||||
fill="none"
|
fill="none"
|
||||||
className="flex-shrink-0 -translate-y-1"
|
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>
|
</svg>
|
||||||
|
|
||||||
<div className="flex gap-1 flex-wrap">
|
<div className="flex gap-1 flex-wrap">
|
||||||
@@ -38,7 +38,16 @@ const HeaderPage = ({ title }: { title: string }) => {
|
|||||||
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
|
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
|
||||||
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
|
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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" />
|
<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>
|
<defs>
|
||||||
<linearGradient id="paint0_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint1_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint2_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint3_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint4_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint5_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint6_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint7_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="paint8_linear_11900_10493" x1="31.2275" y1="15.2133" x2="146.919" y2="15.2133" gradientUnits="userSpaceOnUse">
|
<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 stopColor="#4C60E5" />
|
||||||
<stop offset="1" stop-color="#498FFF" />
|
<stop offset="1" stopColor="#498FFF" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
41
src/components/shared/MetricBadge.tsx
Normal file
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]">
|
||||||
|
<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]">
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -5,7 +5,7 @@ import { useState } from "react";
|
|||||||
// Reusable Metric Card Component
|
// 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 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);
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
console.log(Img);
|
|
||||||
if (Img) {
|
if (Img) {
|
||||||
return (
|
return (
|
||||||
<div className="relative cursor-pointer"
|
<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' : ""} `} />
|
<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>
|
||||||
<div className="">
|
<div className="">
|
||||||
{tooltipText && (
|
{isHovered && (
|
||||||
<div className="relative">
|
<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">
|
||||||
{isHovered && (
|
{/* Tooltip triangle */}
|
||||||
<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 ">
|
<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>
|
||||||
{/* Tooltip triangle */}
|
{tooltipText}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -64,9 +60,9 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
|
|||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Info size={16} className="text-gray-400 cursor-pointer" />
|
<Info size={16} className="text-gray-400 cursor-pointer" />
|
||||||
{isHovered && (
|
{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 */}
|
{/* 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}
|
{tooltipText}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
33
src/components/shared/MetricTooltip.tsx
Normal file
33
src/components/shared/MetricTooltip.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
function MetricTooltip({ tooltipText }: { tooltipText: string, }) {
|
||||||
|
|
||||||
|
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 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>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MetricTooltip;
|
||||||
@@ -29,11 +29,11 @@ export default function UrlDropdown() {
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{isOpen ? (
|
{isOpen ? (
|
||||||
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<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>
|
||||||
) : (
|
) : (
|
||||||
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/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>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -52,7 +52,7 @@ export default function UrlDropdown() {
|
|||||||
<span className="truncate">{url}</span>
|
<span className="truncate">{url}</span>
|
||||||
{selected === url && (
|
{selected === url && (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
|
<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>
|
</svg>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
|
|||||||
34
src/components/shared/VisibilityIndicator.tsx
Normal file
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]">
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,22 +1,396 @@
|
|||||||
import ContainerPage from "../components/shared/ContainerPage";
|
import ContainerPage from "../components/shared/ContainerPage";
|
||||||
import SourcesChart from "../components/Analysis/SourcesChart";
|
|
||||||
import AnalysisSearch from "../components/Analysis/AnalysisSearch";
|
import { ChevronDown, Info, Search, Zap } from "lucide-react";
|
||||||
import BecomeTheSource from "../components/Analysis/BecomeTheSource";
|
|
||||||
import VisibilityAnalysis from "../components/Analysis/VisibilityAnalysis";
|
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 = () => {
|
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: ["👥", "💭", "⭐"] },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContainerPage>
|
<>
|
||||||
<div className="space-y-8">
|
<Header />
|
||||||
|
<ContainerPage>
|
||||||
|
|
||||||
|
<div className="mb-5">
|
||||||
|
<div className="mb-2 flex justify-between items-center">
|
||||||
|
<h1 className="text-xl font-bold text-grey-950 mb-1">Analysis of Visibility</h1>
|
||||||
|
<div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-grey-700 mt-1">
|
||||||
|
<div className="w-22 flex items-center gap-2">
|
||||||
|
<span className="w-full">
|
||||||
|
AIO Health
|
||||||
|
</span>
|
||||||
|
<MetricTooltip tooltipText="AIO Health" />
|
||||||
|
</div>
|
||||||
|
<div className="w-20 flex items-center gap-2">Backlinks
|
||||||
|
<MetricTooltip tooltipText="Backlinks" />
|
||||||
|
</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-grey-300 rounded-lg bg-white p-3">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-sm font-semibold text-grey-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-grey-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-grey-900">14%</span>
|
||||||
|
<span className="text-[11px] font-semibold text-grey-700">50/370 links</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-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-grey-900">5</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-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-grey-900">8</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-5">
|
||||||
|
<div className="text-xs text-grey-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-grey-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-grey-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-grey-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-grey-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-grey-900">Share</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-4">
|
||||||
|
<div className="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden justify-between">
|
||||||
|
<div className="flex items-center gap-2 px-4 py-3 border-b border-grey-300 h-[60px]">
|
||||||
|
<h2 className="text-base font-semibold text-grey-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] ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-grey-300"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<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-grey-900">{item.label.split(" ")[0]}</span>
|
||||||
|
<span className="text-grey-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
|
||||||
|
</span>
|
||||||
|
{item.subtitle && (
|
||||||
|
<span className="text-sm text-grey-700 ml-1">{item.subtitle}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-1.5 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-grey-950">How Ai and LLMs Choose Their Sources</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-grey-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="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden">
|
||||||
|
<div className="flex flex-col gap-7 px-4 py-3 border-b border-grey-300 h-[60px]">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-base font-bold text-grey-950">Become the Source</h2>
|
||||||
|
<p className="text-xs text-grey-700">
|
||||||
|
Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-grey-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-grey-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-grey-300 bg-white flex items-center justify-center text-md">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-grey-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">
|
||||||
|
<div className="absolute inset-0 bg-white rounded-full m-[3px] flex items-center justify-center gap-3">
|
||||||
|
<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>
|
||||||
|
{/* <button className="relative flex items-center gap-2 px-3 py-2.5 rounded-full border-2 border-[#4C60E5] bg-white">
|
||||||
|
<div className="w-6 h-6 rounded-full bg-[#4C60E5] flex items-center justify-center">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 17 16" fill="none">
|
||||||
|
<path d="M9.21967 6.45829L9.28321 2.02145C9.28861 1.64492 8.81816 1.47023 8.5765 1.75901L3.07231 8.33635C2.85614 8.59467 3.03653 8.98819 3.37334 8.99302L6.68243 9.04041C6.90333 9.04357 7.07983 9.2252 7.07667 9.44609L7.01049 14.0671C7.00499 14.4511 7.49125 14.6214 7.72657 14.3179L13.2691 7.16853C13.4729 6.90569 13.2855 6.52345 12.953 6.52345L11.45 6.52345" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-semibold text-grey-950">Add your Keywords and Become the Source</span>
|
||||||
|
</button> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="space-y-8">
|
||||||
<AnalysisSearch />
|
<AnalysisSearch />
|
||||||
<VisibilityAnalysis />
|
<VisibilityAnalysis />
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
<SourcesChart />
|
<SourcesChart />
|
||||||
<BecomeTheSource />
|
<BecomeTheSource />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</ContainerPage>
|
|
||||||
|
<StrategyHero />
|
||||||
|
|
||||||
|
<div className="flex items-start gap-5">
|
||||||
|
<RankingsCard />
|
||||||
|
<BacklinksCard />
|
||||||
|
</div>
|
||||||
|
</ContainerPage>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Analysis;
|
export default Analysis;
|
||||||
|
|
||||||
|
|
||||||
|
interface DonutChartProps {
|
||||||
|
segments: {
|
||||||
|
percentage: number;
|
||||||
|
color: string;
|
||||||
|
}[];
|
||||||
|
size?: number;
|
||||||
|
strokeWidth?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
return (
|
||||||
|
<div className="w-full border-b border-grey-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-grey-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-grey-700">AIQ</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex px-1.5 items-center justify-center rounded-[5px] bg-grey-300">
|
||||||
|
<span className="text-xs font-semibold text-grey-700">10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-px h-5 bg-grey-300" />
|
||||||
|
<div className="flex px-1.5 justify-between items-center flex-1">
|
||||||
|
<span className="text-sm text-grey-900 tracking-tight">mysite.com</span>
|
||||||
|
<ChevronDown className="w-3 h-3 text-grey-800" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-grey-300 bg-white shadow-sm">
|
||||||
|
<div className="flex px-1 items-center gap-1.25">
|
||||||
|
<Search className="w-4 h-4 text-grey-800" strokeWidth={1.5} />
|
||||||
|
<span className="text-xs font-semibold text-grey-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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
21
src/pages/Keywords.tsx
Normal file
21
src/pages/Keywords.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
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" />
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{keywordSections.map((section) => (
|
||||||
|
<KeywordSection key={section.id} section={section} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ContainerPage>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Keywords
|
||||||
@@ -9,12 +9,14 @@ import { CircleCheck } from 'lucide-react';
|
|||||||
import Progress from "../assets/icons/InProgress.svg"
|
import Progress from "../assets/icons/InProgress.svg"
|
||||||
import No from "../assets/icons/NA.svg"
|
import No from "../assets/icons/NA.svg"
|
||||||
import Share2 from "../assets/icons/Share2.png"
|
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 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]'>
|
const progress = <div className='flex items-center gap-2 w-[100px]'>
|
||||||
<img src={Progress} alt="" className='w-6 h-6' />
|
<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
|
// Category table data
|
||||||
|
|
||||||
const nA = <div className='flex items-center gap-2'>
|
const nA = <div className='flex items-center gap-2'>
|
||||||
@@ -107,10 +109,7 @@ function Portfolio() {
|
|||||||
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
|
<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'>
|
<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">
|
<SharedIcon />
|
||||||
<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>
|
|
||||||
|
|
||||||
<span>Export</span>
|
<span>Export</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
// import { Search, MessageSquare } from "lucide-react"
|
// import { Search, MessageSquare } from "lucide-react"
|
||||||
import IntegratedStrategy from "../components/IntegratedStrategy"
|
import IntegratedStrategy from "../components/IntegratedStrategy"
|
||||||
import Vector from "../assets/icons/Vector.png"
|
import Vector from "../assets/icons/Vector.svg"
|
||||||
import Vector2 from "../assets/icons/Vector2.png"
|
import Vector2 from "../assets/icons/Vector2.svg"
|
||||||
import ShowDetails from "../components/Strategy/ShowDetails"
|
import ShowDetails from "../components/Strategy/ShowDetails"
|
||||||
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
|
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
|
||||||
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
|
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
|
||||||
|
|||||||
المرجع في مشكلة جديدة
حظر مستخدم