Add footer component

Implement a new footer component to enhance the application's layout and user experience.

src/components/Footer.tsx

@@ -0,0 +1,69 @@
+import { Github, Twitter, Linkedin } from "lucide-react";
+import { Button } from "./ui/button";
+
+const Footer = () => {
+  return (
+    <footer className="py-20 px-4 bg-background relative overflow-hidden">
+      <div className="absolute inset-0 bg-accent/5 backdrop-blur-3xl"></div>
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+          <div className="space-y-4">
+            <h3 className="text-2xl font-bold text-white">Cardo</h3>
+            <p className="text-white/60">
+              Redefining the future of financial management with innovative solutions.
+            </p>
+            <div className="flex space-x-4">
+              <Button variant="ghost" size="icon" className="hover:bg-white/10">
+                <Twitter className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="hover:bg-white/10">
+                <Github className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="hover:bg-white/10">
+                <Linkedin className="w-5 h-5" />
+              </Button>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-lg font-semibold text-white">Product</h4>
+            <ul className="space-y-2">
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Features</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Security</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Business</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Enterprise</a></li>
+            </ul>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-lg font-semibold text-white">Company</h4>
+            <ul className="space-y-2">
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">About</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Careers</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Press</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Blog</a></li>
+            </ul>
+          </div>
+          
+          <div className="space-y-4">
+            <h4 className="text-lg font-semibold text-white">Legal</h4>
+            <ul className="space-y-2">
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Terms</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Privacy</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Cookies</a></li>
+              <li><a href="#" className="text-white/60 hover:text-white transition-colors">Licenses</a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div className="mt-12 pt-8 border-t border-white/10">
+          <p className="text-center text-white/60">
+            © 2024 Cardo. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/Index.tsx

@@ -3,6 +3,7 @@ import Hero from "@/components/Hero";
 import Features from "@/components/Features";
 import Testimonials from "@/components/Testimonials";
 import Download from "@/components/Download";
+import Footer from "@/components/Footer";
 
 const Index = () => {
   return (
@@ -12,6 +13,7 @@ const Index = () => {
       <Features />
       <Testimonials />
       <Download />
+      <Footer />
     </div>
   );
 };