fix the logo container

Signed-off-by: Naymul Islam <[email protected]>

Author: ai-naymul

frontend/src/components/Header.tsx

@@ -1,6 +1,23 @@
 import React, { useState } from 'react';
 import { Activity, Settings, User, Moon, Sun } from 'lucide-react';
 
+
+
+const BrowserPilotLogo = ({ className = "" }) => (
+  <svg 
+    viewBox="0 0 1024 1024" 
+    className={`w-full h-full ${className}`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M0 0 C337.92 0 675.84 0 1024 0 C1024 337.92 1024 675.84 1024 1024 C686.08 1024 348.16 1024 0 1024 C0 686.08 0 348.16 0 0 Z " fill="#FEFEFE" transform="translate(0,0)"/>
+    <path d="M0 0 C16.75287235 2.39326748 30.16084399 9.09518011 43 20 C43.73605469 20.59167969 44.47210938 21.18335938 45.23046875 21.79296875 C51.60190269 27.11163563 60.6873028 35.38542461 62 44 C62.66 44 63.32 44 64 44 C64.23074219 44.53367187 64.46148437 45.06734375 64.69921875 45.6171875 C66.52384312 49.78569693 68.43494069 53.85197877 70.5625 57.875 C76.24387517 69.13286341 77.15074725 80.84522004 77.14526367 93.24267578 C77.14862228 94.34301651 77.1519809 95.44335724 77.15544128 96.57704163 C77.16490742 100.19981021 77.16689239 103.82253233 77.16796875 107.4453125 C77.17118495 109.9786684 77.1745493 112.51202412 77.17805481 115.04537964 C77.18403568 120.35284937 77.18593884 125.66030199 77.18530273 130.96777344 C77.18470347 137.06841877 77.1952304 143.16897524 77.2110464 149.26959813 C77.22579799 155.17383676 77.22928804 161.07804081 77.22869301 166.98229599 C77.2298664 169.4771244 77.23425185 171.9719536 77.24202538 174.46677017 C77.33350568 206.8656192 77.33350568 206.8656192 72 220 C71.72414063 220.68964844 71.44828125 221.37929688 71.1640625 222.08984375 C62.12427406 243.45310447 48.26244954 259.85812387 30.66748047 274.58789062 C27.45311344 277.30998417 24.34998247 280.15493026 21.23046875 282.984375 C18.52203531 285.43192606 15.77680541 287.83430427 13.01953125 290.2265625 C11.52433695 291.5395571 10.04488349 292.87052487 8.57421875 294.2109375 C7.76597656 294.94570313 6.95773437 295.68046875 6.125 296.4375 C5.38507813 297.11683594 4.64515625 297.79617188 3.8828125 298.49609375 C2 300 2 300 0 300 C0 201 0 102 0 0 Z " fill="#0F2F52" transform="translate(383,295)"/>
+    <path d="M0 0 C1.18980469 -0.01224609 2.37960937 -0.02449219 3.60546875 -0.03710938 C11.31114451 -0.04974163 18.57212145 0.6583843 26.125 2.1875 C26.125 2.8475 26.125 3.5075 26.125 4.1875 C26.99511719 4.29835938 27.86523438 4.40921875 28.76171875 4.5234375 C39.13498909 6.57158611 48.41756383 13.36524831 55.6875 20.8125 C57.48053543 23.77490636 57.85613932 24.78039077 57.125 28.1875 C54.74691804 30.58153675 51.98239531 32.37537509 49.1875 34.25 C48.3728125 34.81654297 47.558125 35.38308594 46.71875 35.96679688 C45.02303097 37.14488915 43.32258798 38.31620863 41.61767578 39.48095703 C37.9246459 42.00928993 34.27695515 44.60039306 30.625 47.1875 C29.21876709 48.17710762 27.81251696 49.16669077 26.40625 50.15625 C21.95413946 53.29891627 17.5377812 56.48994254 13.125 59.6875 C6.62441517 64.39790657 0.0863612 69.05047608 -6.48046875 73.66796875 C-11.6406672 77.30204566 -16.7642894 80.98421401 -21.875 84.6875 C-28.37558483 89.39790657 -34.9136388 94.05047608 -41.48046875 98.66796875 C-46.6406672 102.30204566 -51.7642894 105.98421401 -56.875 109.6875 C-63.372616 114.39575531 -69.90723693 119.04685192 -76.47167969 123.66137695 C-81.7204449 127.35704787 -86.92785214 131.10717754 -92.125 134.875 C-97.5209089 138.77947503 -102.92150187 142.67620283 -108.375 146.5 C-109.3959375 147.21800781 -110.416875 147.93601562 -111.46875 148.67578125 C-113.875 150.1875 -113.875 150.1875 -115.875 150.1875 C-115.92533329 144.96290409 -115.96114875 139.73845654 -115.98486328 134.51367188 C-115.99477398 132.74509211 -116.00830643 130.97652804 -116.02587891 129.20800781 C-116.11596352 119.89219849 -116.01276084 110.67978965 -115.00390625 101.41015625 C-114.92749908 100.69997345 -114.85109192 99.98979065 -114.77236938 99.25808716 C-111.70639993 74.07592452 -97.38310532 50.87093685 -79.875 33.1875 C-78.97201172 32.19363281 -78.97201172 32.19363281 -78.05078125 31.1796875 C-66.51677462 18.68693472 -50.02619612 9.65117207 -34.125 4.25 C-33.26189209 3.95520752 -32.39878418 3.66041504 -31.50952148 3.35668945 C-21.11573359 0.01650263 -10.84289408 0.00583579 0 0 Z " fill="#102F53" transform="translate(498.875,574.8125)"/>
+    <path d="M0 0 C0.94994742 -0.00170885 1.89989484 -0.0034177 2.87862855 -0.00517833 C6.07551821 -0.00848393 9.27219998 0.00254812 12.46907043 0.01345825 C14.75519811 0.01402213 17.04132615 0.01370626 19.32745361 0.01257324 C25.54611742 0.01199783 31.76470457 0.02378258 37.98335052 0.03772116 C44.47763544 0.05019719 50.97192198 0.05139654 57.46621704 0.05377197 C68.37050244 0.05928817 79.27475943 0.07179293 90.17903137 0.08963013 C101.41112629 0.10798449 112.64321355 0.12214316 123.87532043 0.13064575 C124.91361264 0.13143392 124.91361264 0.13143392 125.97288045 0.13223802 C129.44537302 0.13484807 132.91786566 0.13737549 136.39035833 0.13986182 C165.20413064 0.16059966 194.01787428 0.1959784 222.83161926 0.24050903 C222.83161926 1.56050903 222.83161926 2.88050903 222.83161926 4.24050903 C221.16941346 5.24790649 219.50141252 6.24573858 217.83161926 7.24050903 C216.15506823 8.9638911 214.63734271 10.79442599 213.08552551 12.63113403 C210.24993653 15.91393029 207.29812799 19.07617856 204.33161926 22.24050903 C203.73397766 22.87843384 203.13633606 23.51635864 202.52058411 24.1736145 C201.26870151 25.50910956 200.01641404 26.8442252 198.76374817 28.1789856 C196.80738954 30.26636141 194.85607132 32.35834787 192.90583801 34.45144653 C191.61031149 35.83951067 190.3147398 37.22753265 189.01911926 38.61550903 C188.43388489 39.24457153 187.84865051 39.87363403 187.24568176 40.52175903 C186.10679542 41.73962854 184.95567059 42.9462009 183.79099655 44.13943291 C181.79295443 46.21616339 181.79295443 46.21616339 180.05415726 48.54667854 C176.87732802 52.35217221 174.37178145 54.86006777 169.47389984 56.06991196 C165.35698172 56.38321585 161.32587844 56.41337311 157.20173645 56.34158325 C155.63216869 56.34723826 154.06261089 56.35678465 152.49308777 56.36990356 C148.25296424 56.39373816 144.01497207 56.36161102 139.77507687 56.31771231 C135.33050187 56.27990013 130.88599918 56.28944137 126.44129944 56.2925415 C118.9831574 56.29061857 111.5258405 56.25359574 104.06794739 56.19412231 C95.44877937 56.12568506 86.83060875 56.10646044 78.21119571 56.11489093 C69.90888518 56.1224174 61.60690894 56.10145438 53.30467987 56.06534195 C49.7752578 56.05011771 46.24598352 56.04373239 42.71652985 56.04424667 C38.56288216 56.04311567 34.41013393 56.01667327 30.2567482 55.97068787 C28.7334108 55.95769299 27.2099744 55.95313748 25.68658829 55.95766068 C23.60560981 55.96236383 21.52720472 55.9362782 19.44654846 55.90234375 C18.28295177 55.89526335 17.11935509 55.88818295 15.92049789 55.88088799 C11.21022401 54.90436524 9.02666672 51.98612036 6.39021301 48.13504028 C3.97239561 43.64480797 1.9587493 39.15619574 0.13630676 34.39675903 C-3.25606544 26.19006221 -7.08179858 18.00385367 -11.27531433 10.1736145 C-12.55220416 7.40969606 -12.4942862 5.23883925 -12.16838074 2.24050903 C-8.16063356 -0.43132242 -4.65265941 -0.03032001 0 0 Z " fill="#113054" transform="translate(504.1683807373047,413.7594909667969)"/>
+    <path d="M0 0 C1.22506288 0.00276538 1.22506288 0.00276538 2.4748745 0.00558662 C3.41159492 0.0028373 4.34831535 0.00008797 5.31342125 -0.00274467 C6.34416267 0.00444588 7.3749041 0.01163643 8.43688011 0.01904488 C9.5198185 0.01875282 10.60275688 0.01846077 11.71851158 0.01815987 C15.31140108 0.01955738 18.90408527 0.03513848 22.49693871 0.05078316 C24.98272653 0.05451179 27.46851583 0.05735947 29.95430565 0.0593586 C35.83686706 0.0662244 41.71935222 0.08200019 47.60188234 0.10205758 C54.95490879 0.12658579 62.30794434 0.13734311 69.66100121 0.14843941 C82.78083057 0.16991035 95.90059871 0.20367798 109.02037621 0.24609566 C107.22505512 4.12559282 104.91970566 6.5157086 101.83287621 9.49609566 C97.95694142 13.24735002 94.35376225 17.10489378 90.82579613 21.18457222 C87.8919369 24.53460701 84.8294053 27.76069229 81.77037621 30.99609566 C76.25656484 36.84912361 70.79324027 42.74233414 65.38756371 48.69531441 C64.60639183 49.53707222 63.82521996 50.37883003 63.02037621 51.24609566 C61.98324486 52.54196602 61.98324486 52.54196602 60.92516136 53.86401558 C56.97099627 57.10664365 54.14497315 56.97211761 49.17662621 56.91015816 C47.90655724 56.9173336 47.90655724 56.9173336 46.61083031 56.92465401 C44.8256144 56.92804741 43.04033589 56.91888406 41.25523949 56.89795113 C38.52840198 56.87117447 35.80568001 56.89771464 33.07896996 56.92968941 C31.34067965 56.92638521 29.60239191 56.91997875 27.86412621 56.91015816 C27.05254051 56.92027931 26.24095482 56.93040047 25.40477562 56.94082832 C21.19320196 56.85397974 19.50458267 56.62668178 16.08727074 53.94067574 C14.41550033 51.76121318 13.13666206 49.98637697 12.10631371 47.46875191 C11.82014183 46.7900605 11.53396996 46.11136909 11.23912621 45.41211128 C10.96068871 44.71795113 10.68225121 44.02379097 10.39537621 43.30859566 C9.82131787 41.92387387 9.24581725 40.53974904 8.66881371 39.15625191 C8.39649925 38.49383492 8.1241848 37.83141792 7.84361839 37.14892769 C7.07568897 35.37394492 6.19613562 33.64842383 5.30943871 31.92968941 C4.02037621 29.24609566 4.02037621 29.24609566 4.02037621 26.24609566 C3.36037621 26.24609566 2.70037621 26.24609566 2.02037621 26.24609566 C1.67104027 25.31925972 1.32170433 24.39242378 0.96178246 23.43750191 C0.50674339 22.23996284 0.05170433 21.04242378 -0.41712379 19.80859566 C-0.86958473 18.61363472 -1.32204567 17.41867378 -1.78821754 16.18750191 C-2.69410639 13.40163842 -2.69410639 13.40163842 -3.97962379 12.24609566 C-4.1041724 10.60379201 -4.15530904 8.9555729 -4.16712379 7.30859566 C-4.18130348 6.41269722 -4.19548317 5.51679878 -4.21009254 4.59375191 C-3.91152265 1.55238735 -3.10866164 0.38645127 0 0 Z " fill="#0F2F52" transform="translate(536.9796237945557,501.75390434265137)"/>
+  </svg>
+);
+
+
 export const Header: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -16,17 +33,9 @@ export const Header: React.FC = () => {
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center space-x-4 group">
             {/* Logo Placeholder - You can replace this with your SVG */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 1024 1024"
-              className="w-10 h-10 rounded-xl shadow-md group-hover:shadow-lg transition-all duration-300 group-hover:scale-105"
-            >
-              <path d="M0 0 C337.92 0 675.84 0 1024 0 C1024 337.92 1024 675.84 1024 1024 C686.08 1024 348.16 1024 0 1024 C0 686.08 0 348.16 0 0 Z" fill="#FEFEFE"/>
-              <path d="M0 0 C16.75287235 2.39326748 30.16084399 9.09518011 43 20 ... Z" fill="#0F2F52" transform="translate(383,295)" />
-              <path d="M0 0 C1.18980469 -0.01224609 2.37960937 -0.02449219 ... Z" fill="#102F53" transform="translate(498.875,574.8125)" />
-              <path d="M0 0 C0.94994742 -0.00170885 1.89989484 -0.0034177 ... Z" fill="#113054" transform="translate(504.1683807373047,413.7594909667969)" />
-              <path d="M0 0 C1.22506288 0.00276538 1.22506288 0.00276538 ... Z" fill="#0F2F52" transform="translate(536.9796237945557,501.75390434265137)" />
-            </svg>
+            <div className="w-10 h-10 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800 rounded-xl flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300 group-hover:scale-105 p-1">
+            <BrowserPilotLogo className="group-hover:scale-110 transition-transform duration-300" />
+            </div>
             <div className="transform group-hover:translate-x-1 transition-transform duration-300">
               <h1 className="text-xl font-medium text-stone-800 dark:text-stone-200 tracking-wide">BrowserPilot</h1>
               <p className="text-xs text-stone-500 dark:text-stone-400 -mt-1 font-light">Open-source alternative to Perplexity Comet</p>