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>
This commit is contained in:
Innei
parent
da24b8a37f
commit
3cd4eebddd
|
|
@ -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>
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
Loading…
Reference in New Issue