Initial commit: CHORUS Services marketing website
Complete Next.js website with Docker containerization: - Next.js 14 with TypeScript and Tailwind CSS - Responsive design with modern UI components - Hero section, features showcase, testimonials - FAQ section with comprehensive content - Contact forms and newsletter signup - Docker production build with Nginx - Health checks and monitoring support - SEO optimization and performance tuning Ready for integration as git submodule in main CHORUS project. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
244
components/layout/Footer.tsx
Normal file
244
components/layout/Footer.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Layout, Row, Col, Space, Typography, Divider } from 'antd';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
TwitterIcon,
|
||||
LinkedinIcon,
|
||||
GithubIcon,
|
||||
MailIcon,
|
||||
ArrowUpIcon
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { fadeInUp, staggerContainer } from '@/utils/animations';
|
||||
|
||||
const { Footer: AntFooter } = Layout;
|
||||
const { Title, Text, Link } = Typography;
|
||||
|
||||
interface FooterSection {
|
||||
title: string;
|
||||
links: Array<{
|
||||
label: string;
|
||||
href: string;
|
||||
external?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
const footerSections: FooterSection[] = [
|
||||
{
|
||||
title: 'Platform',
|
||||
links: [
|
||||
{ label: 'WHOOSH', href: '/components/whoosh' },
|
||||
{ label: 'BZZZ', href: '/components/bzzz' },
|
||||
{ label: 'SLURP', href: '/components/slurp' },
|
||||
{ label: 'COOEE + Monitoring', href: '/components/cooee' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Solutions',
|
||||
links: [
|
||||
{ label: 'Enterprise', href: '/solutions/enterprise' },
|
||||
{ label: 'Startups', href: '/solutions/startups' },
|
||||
{ label: 'Developers', href: '/solutions/developers' },
|
||||
{ label: 'Integration', href: '/solutions/integration' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
links: [
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Tutorials', href: '/tutorials' },
|
||||
{ label: 'Community', href: '/community' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
links: [
|
||||
{ label: 'About', href: '/about' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
{ label: 'Careers', href: '/careers' },
|
||||
{ label: 'Contact', href: '/contact' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: TwitterIcon, href: 'https://twitter.com/chorusservices', label: 'Twitter' },
|
||||
{ icon: LinkedinIcon, href: 'https://linkedin.com/company/chorusservices', label: 'LinkedIn' },
|
||||
{ icon: GithubIcon, href: 'https://github.com/chorusservices', label: 'GitHub' },
|
||||
{ icon: MailIcon, href: 'mailto:hello@chorus.services', label: 'Email' },
|
||||
];
|
||||
|
||||
export const Footer: React.FC = () => {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<AntFooter className="bg-chorus-charcoal-dark border-t border-gray-800 py-16">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={staggerContainer}
|
||||
>
|
||||
{/* Main Footer Content */}
|
||||
<Row gutter={[48, 48]} className="mb-12">
|
||||
{/* Brand Section */}
|
||||
<Col xs={24} lg={8}>
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gradient-chorus rounded-xl flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">C</span>
|
||||
</div>
|
||||
<Title level={3} className="text-white mb-0">
|
||||
CHORUS Services
|
||||
</Title>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<Text className="text-gray-300 text-base leading-relaxed">
|
||||
Orchestrate the future with distributed AI.
|
||||
CHORUS Services provides intelligent automation
|
||||
through seamless component integration.
|
||||
</Text>
|
||||
|
||||
{/* Social Links */}
|
||||
<Space size="middle">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 text-gray-400 hover:text-chorus-blue transition-colors duration-200 rounded-lg hover:bg-white/5"
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 + index * 0.1 }}
|
||||
>
|
||||
<social.icon size={20} />
|
||||
<span className="sr-only">{social.label}</span>
|
||||
</motion.a>
|
||||
))}
|
||||
</Space>
|
||||
</Space>
|
||||
</motion.div>
|
||||
</Col>
|
||||
|
||||
{/* Footer Links */}
|
||||
{footerSections.map((section, sectionIndex) => (
|
||||
<Col xs={12} sm={6} lg={4} key={section.title}>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
custom={sectionIndex}
|
||||
>
|
||||
<Space direction="vertical" size="middle" className="w-full">
|
||||
<Title level={5} className="text-white mb-0">
|
||||
{section.title}
|
||||
</Title>
|
||||
<div className="space-y-3">
|
||||
{section.links.map((link, linkIndex) => (
|
||||
<div key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
target={link.external ? '_blank' : undefined}
|
||||
rel={link.external ? 'noopener noreferrer' : undefined}
|
||||
className="text-gray-400 hover:text-chorus-blue transition-colors duration-200 text-sm block"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Space>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* Newsletter Signup */}
|
||||
<motion.div variants={fadeInUp} className="mb-12">
|
||||
<div className="glass-effect rounded-2xl p-8">
|
||||
<Row gutter={[24, 24]} align="middle">
|
||||
<Col xs={24} md={16}>
|
||||
<Space direction="vertical" size="small">
|
||||
<Title level={4} className="text-white mb-0">
|
||||
Stay Updated
|
||||
</Title>
|
||||
<Text className="text-gray-300">
|
||||
Get the latest updates on CHORUS Services and AI orchestration.
|
||||
</Text>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xs={24} md={8}>
|
||||
<Space.Compact className="w-full">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 px-4 py-3 bg-chorus-charcoal border border-gray-700 rounded-l-lg text-white placeholder-gray-400 focus:outline-none focus:border-chorus-blue transition-colors"
|
||||
/>
|
||||
<Button variant="primary" className="rounded-l-none">
|
||||
Subscribe
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Divider className="border-gray-800" />
|
||||
|
||||
{/* Bottom Footer */}
|
||||
<motion.div variants={fadeInUp}>
|
||||
<Row justify="space-between" align="middle" className="flex-wrap">
|
||||
<Col xs={24} md={12} className="text-center md:text-left mb-4 md:mb-0">
|
||||
<Text className="text-gray-400 text-sm">
|
||||
© {new Date().getFullYear()} CHORUS Services. All rights reserved.
|
||||
</Text>
|
||||
</Col>
|
||||
<Col xs={24} md={12} className="text-center md:text-right">
|
||||
<Space split={<span className="text-gray-600">•</span>} size="middle">
|
||||
<Link href="/privacy" className="text-gray-400 hover:text-white text-sm">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link href="/terms" className="text-gray-400 hover:text-white text-sm">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Link href="/cookies" className="text-gray-400 hover:text-white text-sm">
|
||||
Cookies
|
||||
</Link>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll to Top Button */}
|
||||
<motion.div
|
||||
className="fixed bottom-8 right-8 z-40"
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 1 }}
|
||||
>
|
||||
<Button
|
||||
variant="primary"
|
||||
shape="circle"
|
||||
size="large"
|
||||
icon={<ArrowUpIcon size={20} />}
|
||||
onClick={scrollToTop}
|
||||
className="shadow-lg hover:shadow-xl"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</AntFooter>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
Reference in New Issue
Block a user