fix: make contact section visible and improve styling

Author: MahalakshmiPFW

src/App.css

@@ -133,6 +133,19 @@ body[data-theme="dark"] {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+/* Contact section specific styles */
+.contact-section {
+  min-height: 80vh;
+  padding: 4rem 0;
+  background: linear-gradient(135deg, var(--bg) 0%, var(--secondary-bg) 100%);
+}
+
+.contact-container {
+  background: linear-gradient(135deg, var(--component-bg) 0%, var(--secondary-bg) 100%);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
 .hero-section {
   margin-top: 120px;
 }

src/App.js

@@ -62,8 +62,8 @@ function App() {
           </Suspense>
         </LazySection>
         <DecorativeElement type="corner" position="right" />
-        <LazySection>
-          <Suspense fallback={null}>
+        <LazySection rootMargin="100px">
+          <Suspense fallback={<div className="text-center py-5">Loading contact section...</div>}>
             <Contact />
           </Suspense>
         </LazySection>

src/components/Contact.jsx

@@ -46,6 +46,16 @@ const Contact = () => {
   return (
     <section id="contact" className="contact-section py-5">
       <Container>
+        <motion.div
+          className="text-center mb-5"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="display-5 fw-bold mb-3">Get In Touch</h2>
+          <p className="lead text-secondary">Ready to collaborate? Let's start a conversation!</p>
+        </motion.div>
         <motion.div
           className="contact-container rounded-4 p-4 p-md-5"
           initial={{ opacity: 0, y: 40 }}