site enhancements and add missing parts

src/app/components/Footer/Footer.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import {
+    ArrowRightOutlined,
+    BulbOutlined,
+    EnvironmentOutlined,
+    FacebookOutlined,
+    InstagramOutlined,
+    LinkedinOutlined,
+    MailOutlined,
+    PhoneOutlined,
+    TeamOutlined,
+    TrophyOutlined,
+    TwitterOutlined
+} from '@ant-design/icons';
+import { Typography } from 'antd';
+import { motion } from 'framer-motion';
+import React from 'react';
+import styles from './Footer.module.css';
+
+const { Paragraph } = Typography;
+
+const Footer: React.FC = () => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 }
+    }
+  };
+
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerBackground}>
+        <div className={styles.footerOrb1}></div>
+        <div className={styles.footerOrb2}></div>
+      </div>
+      
+      <div className={styles.footerContainer}>
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className={styles.footerContent}
+        >
+          <motion.div variants={itemVariants} className={styles.footerColumn}>
+            <div className={styles.footerColumnTitle}>
+              <TeamOutlined className={styles.footerColumnIcon} />
+              Company
+            </div>
+            <ul className={styles.footerLinks}>
+              <li className={styles.footerLink}>
+                <a href="/about">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  About Us
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/services">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Our Services
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/projects">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Portfolio
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/contact">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </motion.div>
+
+          <motion.div variants={itemVariants} className={styles.footerColumn}>
+            <div className={styles.footerColumnTitle}>
+              <BulbOutlined className={styles.footerColumnIcon} />
+              Services
+            </div>
+            <ul className={styles.footerLinks}>
+              <li className={styles.footerLink}>
+                <a href="/services#webdev">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Web Development
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/services#mobile">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Mobile Apps
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/services#ai">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  AI Solutions
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/services#cloud">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Cloud Services
+                </a>
+              </li>
+            </ul>
+          </motion.div>
+
+          <motion.div variants={itemVariants} className={styles.footerColumn}>
+            <div className={styles.footerColumnTitle}>
+              <TrophyOutlined className={styles.footerColumnIcon} />
+              Resources
+            </div>
+            <ul className={styles.footerLinks}>
+              <li className={styles.footerLink}>
+                <a href="/blog">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Blog & Insights
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/case-studies">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Case Studies
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/whitepapers">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Whitepapers
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/webinars">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  Webinars
+                </a>
+              </li>
+            </ul>
+          </motion.div>
+
+          <motion.div variants={itemVariants} className={styles.footerColumn}>
+            <div className={styles.footerColumnTitle}>
+              <MailOutlined className={styles.footerColumnIcon} />
+              Contact Info
+            </div>
+            <ul className={styles.footerLinks}>
+              <li className={styles.footerLink}>
+                <a href="mailto:info@techmaster.com">
+                  <MailOutlined className={styles.footerLinkIcon} />
+                  info@techmaster.com
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="tel:+15551234567">
+                  <PhoneOutlined className={styles.footerLinkIcon} />
+                  +1 (555) 123-4567
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="#">
+                  <EnvironmentOutlined className={styles.footerLinkIcon} />
+                  San Francisco, CA
+                </a>
+              </li>
+              <li className={styles.footerLink}>
+                <a href="/support">
+                  <ArrowRightOutlined className={styles.footerLinkIcon} />
+                  24/7 Support
+                </a>
+              </li>
+            </ul>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true }}
+          className={styles.footerBottom}
+        >
+          <Paragraph className={styles.footerBottomText}>
+            Ready to transform your business? Let's discuss your next project.
+          </Paragraph>
+          
+          <div className={styles.socialLinks}>
+            <a href="#" className={styles.socialLink}>
+              <FacebookOutlined />
+            </a>
+            <a href="#" className={styles.socialLink}>
+              <TwitterOutlined />
+            </a>
+            <a href="#" className={styles.socialLink}>
+              <LinkedinOutlined />
+            </a>
+            <a href="#" className={styles.socialLink}>
+              <InstagramOutlined />
+            </a>
+          </div>
+          
+          <div className={styles.copyright}>
+            © 2024 Tech Master. All rights reserved. | Privacy Policy | Terms of Service
+          </div>
+        </motion.div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;