feat: few style changes

README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <h1 > Monarch </h1>
   <img height=80 src="./imgs/logo.png"/>
-  <h5 align="center"> Easy access to Morpho Blue.</h5>
+  <h5 align="center"> Customized lending on Morpho Blue.</h5>
 
   <!-- move badges here -->
   <img src="https://img.shields.io/github/license/antoncoding/monarch?style=flat-square" alt="LICENSE" />
@@ -16,7 +16,7 @@
 
 ## Overview
 
-Monarch is an unofficial user interface designed to facilitate access to [Morpho Blue](https://github.com/morpho-org/morpho-blue) markets. It provides a streamlined way to supply to any markets created on the Morpho Blue protocol, without the need for MetaMorpho vaults.
+Monarch is an unofficial user interface designed for composing custom lending strategies on [Morpho Blue](https://github.com/morpho-org/morpho-blue). It enables you to compose your own lending strategies by bundling multiple markets, each with your defined risk parameters. Access Morpho Blue directly without intermediaries, maintaining full control over your lending positions.
 
 ## Local Setup
 

app/global.css

@@ -56,6 +56,8 @@
 html {
   height: 100%;
   scroll-behavior: smooth;
+  /* Reserve space for scrollbar to prevent layout shifts */
+  scrollbar-gutter: stable;
 }
 
 body {
@@ -66,6 +68,8 @@ body {
   color: var(--color-text);
   font-family: Inter, sans-serif;
   overflow-x: hidden;
+  /* Add padding to account for scrollbar width in modern browsers */
+  padding-right: calc(100vw - 100%);
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
@@ -120,14 +124,18 @@ h1 {
   text-align: center;
 }
 
+.table-body tr:not(.no-hover-effect tr, .no-hover-effect tr) {
+  border-left: 2px solid transparent;
+}
+
 .table-body tr:not(.no-hover-effect tr, .no-hover-effect tr):hover {
   background-color: var(--palette-bg-hovered);
   border-left: 2px solid var(--palette-orange);
 }
 
 .table-body-focused {
   background-color: var(--palette-bg-hovered);
-  border-left: 2px solid var(--palette-orange);
+  border-left: 2px solid var(--palette-orange) !important;
 }
 
 svg {

app/home/HomePage.tsx

@@ -3,53 +3,117 @@
 import React, { useState, useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import PrimaryButton from '@/components/common/PrimaryButton';
-import Footer from '@/components/layout/footer/Footer';
-import HomeHeader from './_components/HomeHeader';
+import Header from '@/components/layout/header/Header';
 
 export default function HomePage() {
-  const [isMorphoBlue, setIsMorphoBlue] = useState(false);
+  const [showCustomized, setShowCustomized] = useState(true);
+  const [riskYieldIndex, setRiskYieldIndex] = useState(0);
+  const [secondCounter, setSecondCounter] = useState(0);
+
+  const riskYieldTerms = ['risk', 'yield'];
+  const secondPhrases = ['on Morpho Blue', 'with no intermediates'];
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setIsMorphoBlue((prev) => !prev);
+    // Toggle between customized and manage your own every 5 seconds
+    const customizedInterval = setInterval(() => {
+      setShowCustomized((prev) => !prev);
+    }, 5000);
+
+    // Change risk/yield every 3 seconds when showing manage your own
+    const riskYieldInterval = setInterval(() => {
+      if (!showCustomized) {
+        setRiskYieldIndex((prev) => (prev + 1) % riskYieldTerms.length);
+      }
     }, 3000);
-    return () => clearInterval(interval);
-  }, []);
+
+    // Second segment changes every 4 seconds
+    const secondInterval = setInterval(() => {
+      setSecondCounter((prev) => (prev + 1) % secondPhrases.length);
+    }, 4000);
+
+    return () => {
+      clearInterval(customizedInterval);
+      clearInterval(riskYieldInterval);
+      clearInterval(secondInterval);
+    };
+  }, [showCustomized]);
+
+  const renderFirstPhrase = () => {
+    if (showCustomized) {
+      return (
+        <span className="absolute inset-0 flex items-center justify-center text-primary transition-all duration-700 ease-in-out">
+          Customized lending
+        </span>
+      );
+    }
+    return (
+      <span className="absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out">
+        <span className="-ml-8 inline-flex items-center text-primary">
+          Manage your own
+          <span className="relative mx-2 inline-flex items-center md:mx-4">
+            {riskYieldTerms.map((term, index) => (
+              <span
+                key={term}
+                className={`absolute left-0 text-monarch-primary transition-all duration-700 ease-in-out ${
+                  index === riskYieldIndex
+                    ? 'transform-none opacity-100'
+                    : 'translate-y-3 transform opacity-0'
+                }`}
+              >
+                {term}
+              </span>
+            ))}
+          </span>
+        </span>
+      </span>
+    );
+  };
 
   const { address } = useAccount();
 
   return (
     <div className="bg-main flex min-h-screen flex-col">
-      <div className="flex flex-col items-center justify-center">
-        <HomeHeader />
-        <main className="container flex flex-col">
-          <section className="mt-4 flex flex-col items-center justify-center sm:mt-8">
-            <div className="h-40 w-full sm:h-32 sm:w-4/5 md:w-3/5">
-              {' '}
-              {/* Fixed height container */}
-              <h2 className="mb-2 px-4 text-center font-zen text-3xl leading-tight text-primary sm:mb-10 sm:text-4xl md:text-5xl">
-                <span className="block sm:inline">Direct access to</span>{' '}
-                <span
-                  className={`block transition-all duration-1000 sm:inline ${
-                    isMorphoBlue ? 'text-blue-500' : 'text-gray-500'
-                  }`}
-                >
-                  {isMorphoBlue ? '{Morpho Blue}' : 'the most decentralized lending protocol.'}
-                </span>
-              </h2>
-            </div>
-          </section>
-        </main>
-        <div className="flex w-full flex-col items-center justify-center gap-4 px-4 pb-12 pt-4 sm:w-4/5 sm:flex-row">
-          <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
-            Why Monarch
-          </PrimaryButton>
-          <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
-            View Portfolio
-          </PrimaryButton>
-        </div>
-      </div>
-      <Footer />
+      <Header ghost />
+      <main className="container mx-auto flex flex-1 flex-col items-center justify-center">
+        <section className="flex w-full flex-col items-center justify-center">
+          <div className="h-48 w-full sm:h-44 sm:w-4/5 md:w-3/5">
+            <h2 className="mb-2 flex flex-col gap-6 px-4 text-center font-zen text-3xl leading-tight text-secondary sm:mb-10 sm:text-4xl md:text-5xl">
+              <div className="relative h-[1.3em]">{renderFirstPhrase()}</div>
+              <div className="relative h-[1.3em]">
+                {secondPhrases.map((phrase, index) => (
+                  <span
+                    key={phrase}
+                    className={`absolute left-0 right-0 transform transition-all duration-700 ease-in-out ${
+                      index === secondCounter
+                        ? 'translate-y-0 opacity-100'
+                        : index ===
+                          (secondCounter - 1 + secondPhrases.length) % secondPhrases.length
+                        ? 'translate-y-2 opacity-0'
+                        : '-translate-y-2 opacity-0'
+                    }`}
+                  >
+                    {phrase.includes('Morpho Blue') ? (
+                      <span>
+                        on <span className="text-blue-500">Morpho Blue</span>
+                      </span>
+                    ) : (
+                      phrase
+                    )}
+                  </span>
+                ))}
+              </div>
+            </h2>
+          </div>
+          <div className="mt-8 flex w-full justify-center gap-4 px-4 sm:w-auto sm:flex-row">
+            <PrimaryButton isSecondary href="/info" className="w-full sm:w-auto">
+              Why Monarch
+            </PrimaryButton>
+            <PrimaryButton href={`/positions/${address ?? ''}`} className="w-full sm:w-auto">
+              Get Started
+            </PrimaryButton>
+          </div>
+        </section>
+      </main>
     </div>
   );
 }