Footer Minimal
Footer Minimal é um componente de layout para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.
UI Layouts
MIT
layout
O que é
Footer Minimal é um componente de layout para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Precisa de
npm i motion
Licença
Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Footer Minimal
import React from 'react'
import { Mail, Twitter, Github, Linkedin } from 'lucide-react'
export const MinimalFooter = () => {
return (
<footer className="w-full bg-white border-t border-zinc-200 min-h-screen">
<div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
{/* Main Content */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
{/* Brand Section */}
<div className="space-y-4">
<div className="flex items-center gap-2">
<div className="size-6 rounded-sm bg-zinc-900" />
<span className="text-sm font-semibold tracking-tight uppercase">
Minimal Inc.
</span>
</div>
<p className="text-sm text-zinc-600 leading-relaxed max-w-xs">
Creating beautiful, functional digital experiences with attention
to detail and user-centric design.
</p>
<div className="flex items-center gap-3">
<a
href="#"
className="text-zinc-400 hover:text-zinc-900 transition-colors"
>
<Twitter className="size-4" />
</a>
<a
href="#"
className="text-zinc-400 hover:text-zinc-900 transition-colors"
>
<Github className="size-4" />
</a>
<a
href="#"
className="text-zinc-400 hover:text-zinc-900 transition-colors"
>
<Linkedin className="size-4" />
</a>
<a
href="#"
className="text-zinc-400 hover:text-zinc-900 transition-colors"
>
<Mail className="size-4" />
</a>
</div>
</div>
{/* Navigation Links */}
<div className="space-y-4">
<h4 className="text-xs font-semibold uppercase tracking-wider text-zinc-900">
Explore
</h4>
<nav className="grid grid-cols-2 gap-2">
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
About
</a>
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
Journal
</a>
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
Works
</a>
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
Services
</a>
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
Contact
</a>
<a
href="#"
className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors"
>
Careers
</a>
</nav>
</div>
{/* Newsletter */}
<div className="space-y-4">
<h4 className="text-xs font-semibold uppercase tracking-wider text-zinc-900">
Stay Updated
</h4>
<p className="text-sm text-zinc-600">
Get the latest insights and updates delivered to your inbox.
</p>
<div className="relative">
<input
type="email"
placeholder="Enter your email"
className="w-full bg-zinc-50 border border-zinc-200 rounded-lg px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-1 focus:ring-zinc-400 transition-all"
/>
<button className="absolute right-1 top-1/2 -translate-y-1/2 bg-zinc-900 text-white size-6 rounded flex items-center justify-center hover:bg-zinc-800 transition-colors">
<svg
className="size-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
</button>
</div>
</div>
</div>
{/* Bottom Bar */}
<div className="pt-8 border-t border-zinc-200 flex flex-col md:flex-row justify-between items-center gap-4">
<div className="flex items-center gap-6">
<span className="text-xs text-zinc-400">© 2026 Minimal Inc.</span>
<div className="flex items-center gap-4">
<a
href="#"
className="text-xs text-zinc-400 hover:text-zinc-900 transition-colors"
>
Privacy
</a>
<a
href="#"
className="text-xs text-zinc-400 hover:text-zinc-900 transition-colors"
>
Terms
</a>
<a
href="#"
className="text-xs text-zinc-400 hover:text-zinc-900 transition-colors"
>
Cookies
</a>
</div>
</div>
<span className="text-xs text-zinc-400">Crafted with intention</span>
</div>
</div>
</footer>
)
}
import type { Variants } from 'motion/react';
import { type HTMLMotionProps, motion, useInView } from 'motion/react';
import type React from 'react';
type TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {
children?: React.ReactNode;
animationNum: number;
className?: string;
timelineRef: React.RefObject<HTMLElement | null>;
as?: T;
customVariants?: Variants;
once?: boolean;
} & HTMLMotionProps<T>;
export const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({
children,
animationNum,
timelineRef,
className,
as,
customVariants,
once = true,
...props
}: TimelineContentProps<T>) => {
const defaultSequenceVariants = {
visible: (i: number) => ({
filter: 'blur(0px)',
y: 0,
opacity: 1,
transition: {
delay: i * 0.5,
duration: 0.5,
},
}),
hidden: {
filter: 'blur(20px)',
y: 0,
opacity: 0,
},
};
const sequenceVariants = customVariants || defaultSequenceVariants;
const isInView = useInView(timelineRef, {
once,
});
const MotionComponent = motion[as || 'div'] as React.ElementType;
return (
<MotionComponent
initial='hidden'
animate={isInView ? 'visible' : 'hidden'}
custom={animationNum}
variants={sequenceVariants}
className={className}
{...props}
>
{children}
</MotionComponent>
);
};