Components : Footer Component

Preview content adapted to proportion

Footer Component

Footer

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing access to important resources.

This component provides a structured and visually appealing footer for a website, featuring navigation links, contact information, and social media icons.

Users can navigate through different sections of the website by clicking on the provided links. The hover effects on the links and icons make the interaction intuitive and engaging.


The footer is designed to be responsive, adjusting its layout based on the screen size. It stacks vertically on smaller screens and arranges into columns on larger screens for better readability and accessibility.

Date : June 18, 2025
Views : 10
Copys : 0

fa-tags

Corporate websites, E-commerce platforms, Blogs, Portfolio sites

Code

<footer class="bg-[#2A2A3A] animate-fade-in-up">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8 md:space-y-4">
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6 lg:gap-8">
   <div class="lg:col-span-2 space-y-4">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Product
    </h3>
    <nav class="grid grid-cols-2 gap-2">
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Features
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Pricing
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Documentation
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Status
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Company
    </h3>
    <nav class="space-y-2">
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      About
     </a>
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Blog
     </a>
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Careers
     </a>
    </nav>
   </div>
   <div class="lg:col-span-2 space-y-4 bg-gradient-to-r from-[#F5F5F5]/10 to-transparent p-6 rounded-xl shadow-lg">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Contact
    </h3>
    <div class="space-y-3">
     <div class="flex items-center space-x-2 text-gray-300">
      <span>
       📧
      </span>
      <span>
       [email protected]
      </span>
     </div>
     <div class="flex items-center space-x-2 text-gray-300">
      <span>
       📞
      </span>
      <span>
       +1 (555) 123-4567
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="border-t border-[#F5F5F5]/20 pt-8 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
   <div class="text-gray-400 text-sm">
    © 2024 Company Name. All rights reserved.
   </div>
   <div class="flex space-x-6">
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     🕊️
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     🐦
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     📘
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     📸
    </a>
   </div>
  </div>
 </div>
</footer>


<template>
 <footer class="bg-[#2A2A3A] animate-fade-in-up">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8 md:space-y-4">
   <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6 lg:gap-8">
    <div class="lg:col-span-2 space-y-4">
     <h3 class="text-lg font-semibold text-[#F5F5F5]">
      Product
     </h3>
     <nav class="grid grid-cols-2 gap-2">
      <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Features
      </a>
      <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Pricing
      </a>
      <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Documentation
      </a>
      <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Status
      </a>
     </nav>
    </div>
    <div class="space-y-4">
     <h3 class="text-lg font-semibold text-[#F5F5F5]">
      Company
     </h3>
     <nav class="space-y-2">
      <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       About
      </a>
      <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Blog
      </a>
      <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
       Careers
      </a>
     </nav>
    </div>
    <div class="lg:col-span-2 space-y-4 bg-gradient-to-r from-[#F5F5F5]/10 to-transparent p-6 rounded-xl shadow-lg">
     <h3 class="text-lg font-semibold text-[#F5F5F5]">
      Contact
     </h3>
     <div class="space-y-3">
      <div class="flex items-center space-x-2 text-gray-300">
       <span>
        📧
       </span>
       <span>
        [email protected]
       </span>
      </div>
      <div class="flex items-center space-x-2 text-gray-300">
       <span>
        📞
       </span>
       <span>
        +1 (555) 123-4567
       </span>
      </div>
     </div>
    </div>
   </div>
   <div class="border-t border-[#F5F5F5]/20 pt-8 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
    <div class="text-gray-400 text-sm">
     © 2024 Company Name. All rights reserved.
    </div>
    <div class="flex space-x-6">
     <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
      🕊️
     </a>
     <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
      🐦
     </a>
     <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
      📘
     </a>
     <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
      📸
     </a>
    </div>
   </div>
  </div>
 </footer>
</template>
<script>
 export default {
    name: 'MyFooterComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFooterComponent = () => {
    return (
<div>
<footer class="bg-[#2A2A3A] animate-fade-in-up">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-8 md:space-y-4">
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6 lg:gap-8">
   <div class="lg:col-span-2 space-y-4">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Product
    </h3>
    <nav class="grid grid-cols-2 gap-2">
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Features
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Pricing
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Documentation
     </a>
     <a class="text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Status
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Company
    </h3>
    <nav class="space-y-2">
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      About
     </a>
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Blog
     </a>
     <a class="block text-gray-300 hover:text-white transition-colors hover:scale-105 transform" href="#">
      Careers
     </a>
    </nav>
   </div>
   <div class="lg:col-span-2 space-y-4 bg-gradient-to-r from-[#F5F5F5]/10 to-transparent p-6 rounded-xl shadow-lg">
    <h3 class="text-lg font-semibold text-[#F5F5F5]">
     Contact
    </h3>
    <div class="space-y-3">
     <div class="flex items-center space-x-2 text-gray-300">
      <span>
       📧
      </span>
      <span>
       [email protected]
      </span>
     </div>
     <div class="flex items-center space-x-2 text-gray-300">
      <span>
       📞
      </span>
      <span>
       +1 (555) 123-4567
      </span>
     </div>
    </div>
   </div>
  </div>
  <div class="border-t border-[#F5F5F5]/20 pt-8 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
   <div class="text-gray-400 text-sm">
    © 2024 Company Name. All rights reserved.
   </div>
   <div class="flex space-x-6">
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     🕊️
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     🐦
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     📘
    </a>
    <a class="text-gray-400 hover:text-white transition-colors hover:scale-125 transform" href="#">
     📸
    </a>
   </div>
  </div>
 </div>
</footer>

</div>
    )
}
export default MyFooterComponent;

Recommended Related Components

More+

Footer Component

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing additional <span style="color:red !important">nav</span>igation options.

39
0

Footer Component

It is used to display essential information and <span style="color:red !important">nav</span>igation options at the bottom of a webpage.

36
0

Footer Component

The footer is used to display essential information and navigation options at the bottom of a webpage, helping users find important links and contact details easily.

17
0

Footer Component

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing access to important resources.

10
0