Footer Exemple 3

bagui/footer-3

FreeBlock

bagUi publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by bagUi on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.bagui.pro/r/footer-3.json

Source

registry/default/blocks/Footer/footer3.tsxwww.bagui.pro/r/footer-3.json · first 6 KB

1"use client";
2
3/**
4 * Footer3
5 * ────────────────────────────────────────────────────────────────────────
6 * A CTA banner + footer section, reproduced from the provided screenshot,
7 * restyled with BagUI's design tokens (bagui.vercel.app):
8 *   - Font: Geist (next/font/google) — falls back to Inter/system-ui if
9 *     the project hasn't wired up the --font-geist-sans CSS variable yet.
10 *   - Colors: BagUI's monochrome shadcn "neutral" system — near-black
11 *     (#09090b / zinc-950) surfaces, white, and the zinc gray scale.
12 *     No blue — the original hero gradient is reinterpreted as a
13 *     monochrome ambient light on a zinc-950 panel.
14 *
15 * Dependencies (already present in a standard BagUI/shadcn setup):
16 *   npm install framer-motion lucide-react
17 *
18 * Font setup (in app/layout.tsx), same as BagUI:
19 *   import { Geist } from "next/font/google";
20 *   const geistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
21 *   <body className={`${geistSans.variable} font-sans`}>...
22 */
23
24import { useState } from "react";
25import Image from "next/image";
26import { motion, useReducedMotion, type Variants } from "framer-motion";
27import { ChevronRight } from "lucide-react";
28import {
29  FaXTwitter, // X
30  FaInstagram, // Instagram
31  FaLinkedin, // LinkedIn
32  FaFacebook,
33} from "react-icons/fa6";
34
35// ─── Font stack (Geist first, graceful fallback) ──────────────────────────
36const font = {
37  fontFamily: "var(--font-geist-sans), Geist, Inter, system-ui, sans-serif",
38} as const;
39
40// ─── Motion variants ───────────────────────────────────────────────────────
41const stagger: Variants = {
42  hidden: {},
43  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
44};
45
46const fadeUp: Variants = {
47  hidden: { opacity: 0, y: 16 },
48  visible: {
49    opacity: 1,
50    y: 0,
51    transition: { duration: 0.5, ease: "easeOut" },
52  },
53};
54
55const heroVariant: Variants = {
56  hidden: { opacity: 0, scale: 0.97 },
57  visible: {
58    opacity: 1,
59    scale: 1,
60    transition: { duration: 0.6, ease: "easeOut" },
61  },
62};
63
64// … truncated

What it pulls in

npm packages

framer-motion
lucide-react

Files it writes

registry/default/blocks/Footer/footer3.tsx

More from bagUi

All 25 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Dashboard Chat Appchat-app1	bagUi	Blocks	Free	2 deps
Contact Exemple 1contact-1	bagUi	Blocks	Free	2 deps
Contact Exemple 2contact-2	bagUi	Blocks	Free	2 deps
CTA Exemple 1cta-1	bagUi	Blocks	Free	2 deps
CTA Exemple 2cta-2	bagUi	Blocks	Free	2 deps
Modern Store Dashboarddashboard-store	bagUi	Blocks	Free	2 deps
FAQ Exemple 1faq1	bagUi	Blocks	Free	2 deps
Feature Exemple 1feature-1	bagUi	Blocks	Free	2 deps