Merge pull request #2302 from oasisprotocol/mz/homepage

Implement new homepage

Author: buberdds

.changelog/2302.feature.md

@@ -0,0 +1 @@
+Implement new homepage

package.json

@@ -70,11 +70,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "14.1.3",
-    "react-quick-pinch-zoom": "5.1.0",
     "react-router-dom": "6.30.0",
     "recharts": "2.15.1",
-    "swiper": "11.2.5",
-    "use-resize-observer": "9.1.0",
     "viem": "^2.31.4"
   },
   "devDependencies": {

src/app/components/CustomIcons/Navigate.tsx

@@ -31,7 +31,7 @@ export const LayerPicker: FC<LayerPickerProps> = ({ onClose, onConfirm, open, is
   <>
     <Drawer direction="top" open={open} onClose={onClose}>
       {/* Match MUI md breakpoint during migration */}
-      <DrawerContent className="py-4 px-[5%] z-[1200] max-lg:h-dvh max-lg:!max-h-dvh max-lg:mb-0">
+      <DrawerContent className="py-4 px-6 z-[1200] max-lg:h-dvh max-lg:!max-h-dvh max-lg:mb-0">
         <LayerPickerContent onClose={onClose} onConfirm={onConfirm} isOutOfDate={isOutOfDate} />
       </DrawerContent>
     </Drawer>

src/app/components/CustomIcons/Pinch.tsx

@@ -7,8 +7,13 @@ import { useScopeParam } from '../../hooks/useScopeParam'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { isScopeSelectorNeeded } from '../../utils/route-utils'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-export const Header: FC = () => {
+type HeaderProps = {
+  sticky?: boolean
+}
+
+export const Header: FC<HeaderProps> = ({ sticky = true }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const { isDesktop } = useScreenSize()
@@ -17,11 +22,18 @@ export const Header: FC = () => {
   const scrolled = useScrolled()
 
   return (
-    <header className="flex flex-col w-full box-border flex-shrink-0 sticky z-[1100] top-0 right-0 left-auto shadow-md bg-theme-layout-accent">
-      <div className="px-4">
-        <div className="grid grid-cols-12 pt-3 pb-4 px-0 md:px-[4%]">
+    <header
+      className={cn(
+        'h-17 flex flex-col w-full box-border flex-shrink-0 bg-theme-layout-accent justify-center',
+        {
+          'sticky z-[1100] top-0 right-0 left-auto shadow-md': sticky,
+        },
+      )}
+    >
+      <div className="px-2 md:px-6">
+        <div className="grid grid-cols-12">
           <div className="col-span-6 xl:col-span-3 flex items-center">
-            <HomePageLink showText={!scrolled && !isMobile} />
+            <HomePageLink showText={!sticky || (!scrolled && !isMobile)} />
           </div>
 
           {withScopeSelector && (