Footer Component Implementation

This project contains a pixel-perfect implementation of a footer design using React and TailwindCSS.

• main.tsx - HTTP server using Hono to serve the application
• index.html - Main HTML template with TailwindCSS setup
• index.tsx - React application entry point with demo content
• footer.tsx - The main footer component implementation

The footer component includes:

• Responsive design - Adapts from single column on mobile to 3-column layout on desktop
• Dark theme - Uses slate-800 background with proper contrast
• Proper spacing - Matches the original design spacing and padding

1. Company Description (Left side)

   • Mission statement text
   • "More about us" link with yellow indicator dot
   • Navigation links (About, Testimonials, Pricing, Contacts)

2. Contact Information (Right side)

   • Contact Us section with phone and email
   • Location information
   • Language selector (En/Am with En highlighted in yellow)

3. Bottom Section

   • Social media icons (Facebook and Instagram) with yellow background
   • Copyright notice

• Colors:

  • Background: bg-slate-800
  • Text: White and gray variants for hierarchy
  • Accent: Yellow (bg-yellow-400) for highlights and social icons

• Typography:

  • Proper font weights and sizes
  • Good contrast ratios for accessibility

• Interactive Elements:

  • Hover effects on links and social icons
  • Proper focus states for accessibility

The footer component can be imported and used in any React application:

Create val
import Footer from './footer.tsx';

function App() {
  return (
    <div>
      {/* Your app content */}
      <Footer />
    </div>
  );
}

Visit the deployed application to see the footer in action with demo content above it.