From 3cd4eebddda189f7e0f15ede9df3e4d1cdd8a668 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 12 Aug 2025 23:18:59 +0800
Subject: [PATCH] feat(footer): add PoweredByFooter component for enhanced
 branding

- Introduced a new PoweredByFooter component to display copyright information and social media links.
- Updated layout and styling for better responsiveness and visual appeal.
- Removed the old PoweredByFooter implementation from the internal components.

These changes collectively enhance the user experience by providing a consistent branding element across the application.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../components/common/PoweredByFooter.tsx     | 63 +++++++++++++++++++
 .../client/components/layout/header/index.tsx | 63 +++++++++----------
 apps/ssr/client/pages/layout.tsx              |  2 +-
 .../components/src/common/PoweredByFooter.tsx | 49 ---------------
 4 files changed, 94 insertions(+), 83 deletions(-)
 create mode 100644 apps/ssr/client/components/common/PoweredByFooter.tsx
 delete mode 100644 packages/internal/components/src/common/PoweredByFooter.tsx

diff --git a/apps/ssr/client/components/common/PoweredByFooter.tsx b/apps/ssr/client/components/common/PoweredByFooter.tsx
new file mode 100644
index 000000000..0fa0a5986
--- /dev/null
+++ b/apps/ssr/client/components/common/PoweredByFooter.tsx
@@ -0,0 +1,63 @@
+import { SocialMediaLinks } from "@follow/constants"
+import { cn } from "@follow/utils/utils"
+
+export const PoweredByFooter: Component = ({ className }) => (
+  <footer className={cn("border-border/40 bg-background/60 border-t backdrop-blur-sm", className)}>
+    <div className="mx-auto w-full max-w-[var(--container-max-width)] px-6 py-10 lg:px-8">
+      {/* Main row */}
+      <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+        {/* Left: copyright + legal */}
+        <div className="flex flex-col items-center gap-3 sm:items-start">
+          <p className="text-text-tertiary text-center text-xs md:text-left">
+            © {new Date().getFullYear()} <a href="https://app.folo.is">Folo</a>. All rights
+            reserved.
+          </p>
+          <div className="flex items-center justify-center gap-4 md:justify-start">
+            <a
+              href="https://app.folo.is/privacy-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-text-secondary hover:text-text text-xs transition-colors"
+            >
+              Privacy Policy
+            </a>
+            <a
+              href="https://app.folo.is/terms"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-text-secondary hover:text-text text-xs transition-colors"
+            >
+              Terms of Service
+            </a>
+          </div>
+        </div>
+
+        {/* Right: social links */}
+        <div className="flex items-center justify-center gap-2 md:justify-end">
+          {SocialMediaLinks.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noreferrer"
+              className={cn(
+                "group relative flex items-center justify-center rounded-lg",
+                "hover:bg-fill/40 active:bg-fill/60",
+                "size-9",
+              )}
+              aria-label={link.label}
+            >
+              <i
+                className={cn(
+                  link.iconClassName,
+                  "transition-transform duration-200 group-hover:scale-110",
+                )}
+              />
+              <div className="from-blue/10 to-purple/10 absolute inset-0 rounded-lg bg-gradient-to-r opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  </footer>
+)
diff --git a/apps/ssr/client/components/layout/header/index.tsx b/apps/ssr/client/components/layout/header/index.tsx
index b2a1a87a5..f7c4857bd 100644
--- a/apps/ssr/client/components/layout/header/index.tsx
+++ b/apps/ssr/client/components/layout/header/index.tsx
@@ -1,6 +1,5 @@
 import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.jsx"
-import { SocialMediaLinks } from "@follow/constants"
 import { cn } from "@follow/utils/utils"
 import type { MotionValue } from "motion/react"
 import { m, useMotionValueEvent, useScroll } from "motion/react"
@@ -42,7 +41,7 @@ const HeaderWrapper: Component = (props) => {
           className={cn(
             "rounded-full border border-transparent px-6 transition-all duration-300 ease-out",
             "relative flex items-center",
-            isCompact ? "py-2" : "py-3",
+            isCompact ? "py-2 pl-5 pr-2" : "py-3",
             isHeaderElevated && [
               "border-border/50 bg-background/80 shadow-sm backdrop-blur-xl",
               "supports-[backdrop-filter]:bg-background/60",
@@ -90,41 +89,39 @@ export const Header = () => {
             </a>
           </m.div>
 
-          {/* Enhanced Social Links Section */}
-          <div className="flex shrink-0 items-center">
-            <div
+          {/* Right actions */}
+          <div className="flex shrink-0 items-center gap-2">
+            {/* GitHub stars pill */}
+            <m.a
+              href="https://github.com/RSSNext/Folo"
+              target="_blank"
+              rel="noreferrer"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
               className={cn(
-                "flex items-center gap-2 transition-all duration-300",
-                isCompact ? "gap-1 text-xl" : "gap-2 text-2xl",
+                "inline-flex items-center gap-2 rounded-full border px-3 font-medium",
+                "bg-fill/60 text-text hover:bg-fill/80 text-sm",
+                isCompact ? "h-8" : "h-10",
               )}
             >
-              {SocialMediaLinks.map((link) => (
-                <m.a
-                  key={link.url}
-                  href={link.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  whileHover={{ scale: 1.1, y: -1 }}
-                  whileTap={{ scale: 0.95 }}
-                  className={cn(
-                    "group relative flex items-center justify-center rounded-lg",
-                    "text-text-secondary hover:text-text",
-                    "hover:bg-fill/40 active:bg-fill/60",
-                    isCompact ? "size-8" : "size-10",
-                  )}
-                >
-                  <i
-                    className={cn(
-                      link.iconClassName,
-                      "transition-transform duration-200 group-hover:scale-110",
-                    )}
-                  />
+              <i className="i-mgc-github-cute-fi text-base" />
+              GitHub
+            </m.a>
 
-                  {/* Subtle hover effect */}
-                  <div className="from-blue/10 to-purple/10 absolute inset-0 rounded-lg bg-gradient-to-r opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
-                </m.a>
-              ))}
-            </div>
+            {/* Sign in pill */}
+            <m.a
+              href="/login"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              className={cn(
+                "inline-flex items-center justify-center rounded-full px-4 font-medium",
+                "bg-white text-sm text-black shadow-sm hover:shadow",
+                "dark:bg-zinc-50 dark:text-zinc-900",
+                isCompact ? "h-8" : "h-10",
+              )}
+            >
+              Sign in
+            </m.a>
           </div>
         </nav>
       </Container>
diff --git a/apps/ssr/client/pages/layout.tsx b/apps/ssr/client/pages/layout.tsx
index 14345fa83..28cf2938d 100644
--- a/apps/ssr/client/pages/layout.tsx
+++ b/apps/ssr/client/pages/layout.tsx
@@ -1,6 +1,6 @@
+import { PoweredByFooter } from "@client/components/common/PoweredByFooter"
 import { Header } from "@client/components/layout/header"
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.jsx"
-import { PoweredByFooter } from "@follow/components/common/PoweredByFooter.jsx"
 import { Outlet } from "react-router"
 
 export const Component = () => {
diff --git a/packages/internal/components/src/common/PoweredByFooter.tsx b/packages/internal/components/src/common/PoweredByFooter.tsx
deleted file mode 100644
index 190cd1d55..000000000
--- a/packages/internal/components/src/common/PoweredByFooter.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { cn } from "@follow/utils/utils"
-
-export const PoweredByFooter: Component = ({ className }) => (
-  <footer className={cn("border-border/40 bg-background/60 border-t backdrop-blur-sm", className)}>
-    <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
-      {/* Bottom Section */}
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-6">
-          <p className="text-text-tertiary text-center text-xs md:text-left">
-            © {new Date().getFullYear()} Folo. All rights reserved.
-          </p>
-          <div className="flex items-center justify-center gap-4 md:justify-start">
-            <a
-              href="https://app.folo.is/privacy-policy"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-text-secondary hover:text-text text-xs transition-colors"
-            >
-              Privacy Policy
-            </a>
-            <a
-              href="https://app.folo.is/terms"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-text-secondary hover:text-text text-xs transition-colors"
-            >
-              Terms of Service
-            </a>
-          </div>
-        </div>
-
-        <div className="text-text-tertiary flex items-center justify-center gap-2 text-xs md:justify-start">
-          <span>Made with</span>
-          <span className="text-red">♥</span>
-          <span>by the</span>
-          <a
-            href="https://github.com/RSSNext"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-accent hover:text-accent/80 font-medium transition-colors"
-          >
-            RSSNext
-          </a>
-          <span>team</span>
-        </div>
-      </div>
-    </div>
-  </footer>
-)