first commit

src/components/Layouts/Footer.tsx

@@ -0,0 +1,136 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <footer className="text-gray-100" style={{ backgroundColor: '#012068'}}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {/* Company Info */}
+          <div className="lg:col-span-1">
+            <Link href="/" className="inline-block mb-4">
+              <div className="flex items-center">
+                
+                <span className="text-2xl font-bold text-gray-100">Department of <br></br>Trauma Surgery</span>
+              </div>
+            </Link>
+            <div className="space-y-3 mb-6">
+              <a 
+                href="mailto:traumasurg@cmcvellore.ac.in" 
+                className="block transition-colors duration-200 text-gray-100 hover:text-red-600"
+              >
+                traumasurg@cmcvellore.ac.in
+              </a>
+              <p className="text-sm leading-relaxed text-gray-300">
+                Department of Trauma Surgery<br />
+                Room A601, 6th Floor, A Block<br />
+                CMC Vellore Ranipet Campus<br />
+                Kilminnal Village, Ranipet – 632517,<br />
+                Tamil Nadu
+              </p>
+              <p className="text-gray-100">0417-2224626</p>
+            </div>
+          </div>
+
+          {/* Company Links */}
+          <div className="md:col-span-1">
+            <h3 className="font-semibold text-lg mb-4 text-gray-100">Company</h3>
+            <ul className="space-y-3">
+              {[
+                { label: 'About CMC', href: '/about' },
+                { label: 'Contact us', href: '/contact' },
+                { label: 'Events', href: '/events' },
+                { label: 'Education', href: '/education-training' },
+                { label: 'Career', href: '/career' },
+                { label: 'Team Member', href: '/teamMember' },
+              ].map((link) => (
+                <li key={link.label}>
+                  <Link 
+                    href={link.href}
+                    className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Additional Links */}
+          <div className="md:col-span-1">
+            <h3 className="font-semibold text-lg mb-4 text-gray-100">Links</h3>
+            <ul className="space-y-3">
+              {[
+                { label: 'Help Center', href: '/contact' },
+                { label: 'Privacy Policy', href: '#' },
+                { label: 'Terms & Conditions', href: '#' },
+                { label: 'Blogs', href: '/blogs' },
+              ].map((link) => (
+                <li key={link.label}>
+                  <Link 
+                    href={link.href}
+                    className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Newsletter */}
+          <div className="md:col-span-2 lg:col-span-1">
+            <h3 className="font-semibold text-lg mb-4 text-gray-100">Stay Updated</h3>
+            <p className="text-sm mb-4 text-gray-300">
+              Follow us on social media for the latest updates and news.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-2">
+              <input
+                type="email"
+                placeholder="Enter your email"
+                className="flex-1 px-4 py-2 rounded-md bg-blue-800 bg-opacity-20 border border-blue-600 text-white placeholder-white transition-all"
+              />
+              <button className="px-4 py-2 rounded-md bg-red-600 text-gray-100 hover:bg-red-700 transition-all duration-200 whitespace-nowrap">
+                Subscribe
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Bottom */}
+      <div className="border-t border-gray-600 border-opacity-30">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <p className="text-sm text-gray-300">
+              © {new Date().getFullYear()} Copyright by{" "}
+              <a 
+                href="#" 
+                className="text-red-600 hover:text-red-700"
+              >
+                CMC
+              </a>
+              . All Rights Reserved.
+            </p>
+            <div className="flex flex-wrap justify-center md:justify-end space-x-6">
+              {[
+                { label: 'Privacy Policy', href: '#' },
+                { label: 'Terms of Service', href: '#' },
+                { label: 'Contact', href: '/contact' },
+              ].map((link) => (
+                <Link
+                  key={link.label}
+                  href={link.href}
+                  className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
+                >
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}