knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
73 lines
3.5 KiB
TypeScript
73 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const Footer: React.FC = () => {
|
|
return (
|
|
<footer className="bg-background-light dark:bg-background-dark border-t border-gray-200 dark:border-white/10 pt-16 pb-8">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
|
<div className="col-span-1 md:col-span-2">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<span className="material-symbols-outlined text-xl text-gray-900 dark:text-white">dns</span>
|
|
<span className="font-display font-bold text-lg tracking-tight text-gray-900 dark:text-white">Bay Area Affiliates</span>
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs mb-6">
|
|
Track every move, analyze your performance, and get real-time coaching. Your dedicated IT partner in the Bay Area.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
{['X', 'in', 'fb'].map((social) => (
|
|
<motion.a
|
|
key={social}
|
|
href="#"
|
|
whileHover={{ y: -5, borderColor: "#3b82f6", color: "#3b82f6" }}
|
|
className="w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-white/20 text-gray-600 dark:text-gray-400 transition-colors"
|
|
>
|
|
<span className="text-xs font-bold">{social}</span>
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Navigation</h4>
|
|
<ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{['About', 'Features', 'Testimonials', 'Pricing'].map((item) => (
|
|
<li key={item}>
|
|
<motion.a
|
|
href="#"
|
|
whileHover={{ x: 5, color: "#3b82f6" }}
|
|
className="inline-block transition-colors"
|
|
>
|
|
{item}
|
|
</motion.a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Contact</h4>
|
|
<ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
|
|
<li>support@bayareaaffiliates.com</li>
|
|
<li>(361) 765-8400</li>
|
|
<li>123 Market St, San Francisco, CA</li>
|
|
<li><motion.a whileHover={{ x: 5, color: "#3b82f6" }} href="#" className="inline-block transition-colors">FAQ</motion.a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-200 dark:border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p className="text-xs text-gray-500 dark:text-gray-600">
|
|
© 2024 Bay Area Affiliates, Inc. All rights reserved.
|
|
</p>
|
|
<div className="flex gap-6">
|
|
<motion.a whileHover={{ color: "#3b82f6" }} href="#" className="text-xs text-gray-500 dark:text-gray-600 transition-colors">Privacy Policy</motion.a>
|
|
<motion.a whileHover={{ color: "#3b82f6" }} href="#" className="text-xs text-gray-500 dark:text-gray-600 transition-colors">Terms of Service</motion.a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default Footer; |