initial commit

components/footer.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import Link from '@/components/ui/Link'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Server, Mail, Github, Twitter, Linkedin } from 'lucide-react'
+import { Logo } from '@/components/Logo'
+
+export function Footer() {
+  const footerSections = [
+    {
+      title: 'Hosting',
+      links: [
+        { name: 'VPS Hosting', href: '/services' },
+        { name: 'Kubernetes', href: '/services' },
+        { name: 'Control Panels', href: '/services' },
+        { name: 'VPN Services', href: '/services' },
+      ],
+    },
+    {
+      title: 'Developer Services',
+      links: [
+        { name: 'SMTP Services', href: '/services' },
+        { name: 'Database Hosting', href: '/services' },
+        { name: 'API Services', href: '/services' },
+        { name: 'Consulting', href: '/services' },
+      ],
+    },
+    {
+      title: 'Web Tools',
+      links: [
+        { name: 'Speech-to-Text', href: '/tools' },
+        { name: 'Image Resize', href: '/tools' },
+        { name: 'Text-to-Speech', href: '/tools' },
+        { name: 'API Access', href: '/tools' },
+      ],
+    },
+    {
+      title: 'Company',
+      links: [
+        { name: 'About Us', href: '/about' },
+        { name: 'Contact', href: '/contact' },
+        { name: 'Legal Agreement', href: '/legal-agreement' },
+        { name: 'Privacy Policy', href: '/privacy' },
+      ],
+    },
+  ]
+
+  const socialLinks = [
+    { icon: Twitter, href: '#', label: 'Twitter' },
+    { icon: Github, href: '#', label: 'GitHub' },
+    { icon: Linkedin, href: '#', label: 'LinkedIn' },
+  ]
+
+  return (
+    <footer className="bg-card border-t border-border">
+      {/* Newsletter Section */}
+      {/* <div className="border-b border-border">
+        <div className="container mx-auto px-4 py-12">
+          <div className="max-w-2xl mx-auto text-center">
+            <h3 className="text-2xl font-bold mb-4">Stay Updated</h3>
+            <p className="text-muted-foreground mb-6">
+              Get the latest updates on new features, hosting tips, and developer resources.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+              <Input type="email" placeholder="Enter your email" className="flex-1" />
+              <Button variant="hero">
+                <Mail className="w-4 h-4 mr-2" />
+                Subscribe
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div> */}
+
+      {/* Main Footer */}
+      <div className="container mx-auto px-4 py-16">
+        <div className="grid md:grid-cols-2 lg:grid-cols-6 gap-8">
+          {/* Brand */}
+          <div className="lg:col-span-2">
+            <div className="flex items-center space-x-2 mb-6">
+              <div className="w-8 h-8 rounded-lg flex items-center justify-center">
+                <Logo size={32} />
+              </div>
+              <span className="text-xl font-bold font-heading tracking-tight">SiliconPin</span>
+            </div>
+            <p className="text-muted-foreground mb-6 leading-relaxed">
+              Professional web hosting and developer services platform. Built by developers, for
+              developers.
+            </p>
+            <div className="flex space-x-4">
+              {socialLinks.map((social, index) => {
+                const Icon = social.icon
+                return (
+                  <Button
+                    key={index}
+                    variant="ghost"
+                    size="icon"
+                    className="hover:bg-primary hover:text-primary-foreground"
+                    aria-label={social.label}
+                    asChild
+                  >
+                    <Link href={social.href}>
+                      <Icon className="w-4 h-4" />
+                    </Link>
+                  </Button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Footer Links */}
+          {footerSections.map((section, index) => (
+            <div key={index}>
+              <h4 className="font-semibold mb-4">{section.title}</h4>
+              <ul className="space-y-3">
+                {section.links.map((link, linkIndex) => (
+                  <li key={linkIndex}>
+                    <Link
+                      href={link.href}
+                      className="text-muted-foreground hover:text-primary transition-colors duration-300"
+                    >
+                      {link.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom Bar */}
+      <div className="border-t border-border">
+        <div className="container mx-auto px-4 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <div className="text-sm text-muted-foreground">
+              © {new Date().getFullYear()} SiliconPin. All rights reserved.
+            </div>
+            <div className="flex space-x-6 text-sm">
+              <Link
+                href="/privacy"
+                className="text-muted-foreground hover:text-primary transition-colors"
+              >
+                Privacy Policy
+              </Link>
+              <Link
+                href="/terms"
+                className="text-muted-foreground hover:text-primary transition-colors"
+              >
+                Terms of Service
+              </Link>
+              <Link
+                href="/refund-policy"
+                className="text-muted-foreground hover:text-primary transition-colors"
+              >
+                Refund Policy
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}