Skip to main content

​
Overview

The Footer component renders a minimalist copyright notice that dynamically displays the current year. It’s absolutely positioned at the bottom of the page.

​
Props Interface

interface FooterProps {}
This component has no props - it’s completely self-contained.

​
Features

​
Dynamic Year

The footer automatically displays the current year: 
const today = new Date();
const year = today.getFullYear();

​
Absolute Positioning

The footer is positioned at the bottom left of its parent container: 
<div className="absolute bottom-0 left-0 w-full">
  {/* Footer content */}
</div>

​
Usage Example

From page.tsx:393: 
import Footer from '@/components/Footer';

function ContactPage() {
  const [mobile, setMobile] = useState(false);
  
  return (
    <div className="relative bg-dark-green min-h-screen">
      <div className="flex flex-col items-center">
        {/* Page content */}
      </div>
      
      {/* Footer only renders on desktop */}
      {!mobile && <Footer />}
    </div>
  );
}
The footer only renders on desktop screens. On mobile devices (isMobile === true), the copyright is rendered inline within the contact section instead.

​
Component Structure

import React from 'react';

const Footer: React.FC = () => {
  const today = new Date();
  const year = today.getFullYear();

  return (
    <div className="absolute bottom-0 left-0 w-full">
      <div className="flex flex-row justify-center items-center w-full gap-6 h-20 sm:h-24 px-4 sm:px-8" id="footer">
        <div className="flex items-center text-center p-4 bg-dark-green rounded-md">
          <h1 className="font-bitter-italic text-offwhite text-b2xl sm:text-b3xs lg:text-b2xs xl:text-bxs 2xl:text-bsm">
            © Sunflower Capital {year}
          </h1>
        </div>
      </div>
    </div>
  );
};

export default Footer;

​
Styling Details

Container:
  • Position: absolute bottom-0 left-0
  • Width: Full width (w-full)
  • Height: h-20 on mobile, sm:h-24 on small screens+
Inner Wrapper:
  • Display: flex flex-row
  • Alignment: justify-center items-center
  • Padding: px-4 sm:px-8
  • Gap: gap-6

​
Responsive Behavior

Height Scaling: 
h-20      /* 80px on mobile */
sm:h-24   /* 96px on small screens and up */
Horizontal Padding: 
px-4      /* 16px on mobile */
sm:px-8   /* 32px on small screens and up */
Text Size (progressive enhancement): 
text-b2xl        /* Mobile: smallest */
sm:text-b3xs     /* Small screens */
lg:text-b2xs     /* Large screens */
xl:text-bxs      /* Extra large */
2xl:text-bsm     /* 2X large: largest */

​
Desktop vs Mobile Rendering

Desktop

Location: Absolutely positioned at bottomComponent: <Footer /> componentContainer: Separate div with dark green badgeVisibility: Always visible when scrolled to bottom

Mobile

Location: Inline within contact sectionComponent: Inline <h1> tagStyling: Same font and color, no badgeText: Identical copyright message

​
Context: Contact Page Footer

The footer appears on the contact page, which has:
  • Background image: bg-[url('/images/footer-bg.svg')]
  • Dark green background: bg-dark-green
  • LinkedIn link
  • Newsletter subscription link
  • Copyright footer (this component)
From page.tsx:334-394: 
<div id="footer" className="relative bg-dark-green bg-[url('/images/footer-bg.svg')] min-h-screen">
  <div className="flex flex-col items-center w-[85%] min-h-screen gap-32">
    <div className="w-[85%] flex flex-col pt-36">
      <div className="flex flex-col gap-6 md:gap-12">
        <h1 className="font-arya text-offwhite text-tmd md:text-txl">Contact</h1>
        
        {/* LinkedIn */}
        <a href="https://www.linkedin.com/company/sunflowercapital/">
          <div className="flex flex-row gap-3 md:gap-6">
            <Image src="/images/linkedin.svg" alt="LinkedIn" />
            <span>Sunflower Capital</span>
          </div>
        </a>
        
        {/* Newsletter */}
        <a href="https://sunflowercapital.substack.com/">
          <div className="flex flex-row gap-3 md:gap-6">
            <Image src="/images/email.svg" alt="Newsletter" />
            <span>Subscribe to our newsletter</span>
          </div>
        </a>
        
        {/* Mobile copyright */}
        {mobile && <h1 className="font-bitter-italic text-offwhite">© Sunflower Capital {year}</h1>}
      </div>
    </div>
  </div>
  
  {/* Desktop footer component */}
  {!mobile && <Footer />}
</div>

​
Visual Hierarchy

Z-Index Layers:
  1. Background image (footer-bg.svg)
  2. Page content (LinkedIn, newsletter links)
  3. Footer component (absolute positioned, appears on top)
Spacing:
  • Footer sits at bottom with absolute bottom-0
  • Page content has pt-36 (top padding)
  • Gap between elements: gap-32

​
Color Palette

/* Footer badge */
bg-dark-green     /* Background of pill badge */
text-offwhite     /* Copyright text color */

/* Page context */
bg-dark-green     /* Page background */
The footer badge uses the same dark green as the page background but stands out due to the pill shape and centered positioning.

​
Source Reference

Component: src/components/Footer.tsx (21 lines) Key Features:
  • Dynamic year from Date() object
  • Absolute positioning at bottom
  • Responsive text sizing
  • Desktop-only rendering (mobile uses inline version)
  • Minimalist design with dark green badge

Build docs developers (and LLMs) love

Get started for freeTalk to us