footer01

Single block view - Copy and use this block in your project: footer01

Category

Subcategory

Block

marketing/footer/footer01.tsx

const Footer01 = () => {
  return (
    <footer className="bg-gray-800 text-white py-8">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <p className="text-sm">&copy; 2026 ACME.INC. No rights reserved.</p>
          <div className="mt-4 md:mt-0">
            <a href="#" className="text-gray-400 hover:text-white mx-2">
              Privacy Policy
            </a>
            <a href="#" className="text-gray-400 hover:text-white mx-2">
              Terms of Service
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer01;

Footer 01 – Simple Centered Footer with only essential links

Component Data

Name:: Footer 01 – Simple Centered Footer with only essential links
Access:: Pro
Created:: 2026-01-20
Updated:: 2026-01-01
Released:: N/A
Type:: Block

marketingfooterminimallinksrechartstailwindreact

Footer 01 – Simple Centered Footer

A sample product detail page for an e-commerce site, showcasing a product image, description, price, and key metrics with embedded area sparklines. Built with React and Tailwind CSS for modern online store interfaces.

Key Features

Three Business Metrics – Revenue, New Customers, Active Users.
Embedded Sparklines – Compact area charts within each card.
Icon Indicators – CircleDollarSign, UserPlus, TrendingUp icons.
Gradient Fills – Color-matched gradients for visual appeal.
Timestamp Display – Shows when data was last updated.

Visual Design

Color Scheme – Emerald (Revenue), Blue (Customers), Violet (Users).
Gradient Areas – Smooth transitions from line to transparent.
Minimal Layout – Focus on key metrics and trends.

Use Cases

Dashboard Headers – Quick KPI overview sections.
Admin Panels – Business health at a glance.
Executive Summaries – Key metrics for decision makers.
SaaS Dashboards – Monitor growth indicators.

Technical Stack

Recharts – AreaChart with ResponsiveContainer.
Tailwind CSS – Emerald, blue, violet color palette.
Radix UI – Card component structure.
Lucide Icons – Business metric indicators.

Didn't find what you were looking for?

Suggest block