Refactor ContactUs component: update layout and styles for improved responsiveness, enhance typography, and streamline structure for better readability.

frontend/vite-template-master/src/components/ContactUs/Contact.module.css

@@ -1,12 +1,63 @@
 .wrapper {
-    padding: var(--mantine-spacing-xl);
+  position: relative;
-    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
+  box-sizing: border-box;
-    border-radius: var(--mantine-radius-md);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
-    box-shadow: var(--mantine-shadow-lg);
+}
-    margin-top: 20px;
+
+.inner {
+  position: relative;
+  padding-top: 120px;
+  padding-bottom: 120px;
+  width: 80%;
+}
+
+/* Small screen styles */
+@media (max-width: 755px) {
+  .inner {
+    padding-bottom: 80px;
+    padding-top: 80px;
   }
-  
+}
+
+.title {
+  font-family:
+    "Greycliff CF",
+    var(--mantine-font-family);
+  font-size: 62px;
+  font-weight: 900;
+  line-height: 1.1;
+  margin: 0;
+  padding: 0;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
+
+/* Small screen styles */
+@media (max-width: 755px) {
   .title {
+    font-size: 42px;
     line-height: 1.2;
   }
+}
+
+.description {
+  margin-top: var(--mantine-spacing-xl);
+  font-size: 24px;
+}
+
+/* Small screen styles */
+@media (max-width: 755px) {
+  .description {
+    font-size: 18px;
+  }
+}
+
+.link {
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
   

frontend/vite-template-master/src/components/ContactUs/Contact.tsx

@@ -1,25 +1,36 @@
-import { Anchor, Container, Stack, Text, Title } from '@mantine/core';
+import { Anchor, Container, Text, Stack } from '@mantine/core';
 import classes from './Contact.module.css';
 
 export function Contact() {
   return (
-    <Container className={classes.wrapper}>
+    <div className={classes.wrapper}>
-      <Stack gap="md">
+      <Container fluid size={700} className={classes.inner}>
-        <Title className={classes.title}>Get in Touch</Title>
+        <h1 className={classes.title}>
-        <Text className={classes.description}>
+          <Text component="span" variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} inherit>
+            Get in Touch
+          </Text>
+        </h1>
+
+        <Text className={classes.description} c="dimmed">
           If you'd like to collaborate, have any questions, or just want to say hello, feel free to
           reach out!
         </Text>
-        <Text>
+
-          Email: <Anchor href="mailto:cdmacfadyen@proton.me">cdmacfadyen@proton.me</Anchor>
+        <Stack gap="lg" mt="xl">
-        </Text>
+          <Text size="lg">
-        <Text>
+            Email:{' '}
-          LinkedIn:{' '}
+            <Anchor href="mailto:cdmacfadyen@proton.me" className={classes.link}>
-          <Anchor href="https://www.linkedin.com/in/craig-macfadyen-9a2041197" target="_blank">
+              cdmacfadyen@proton.me
-            linkedin.com/in/craigmacfadyen
+            </Anchor>
-          </Anchor>
+          </Text>
-        </Text>
+          <Text size="lg">
-      </Stack>
+            LinkedIn:{' '}
-    </Container>
+            <Anchor href="https://www.linkedin.com/in/craig-macfadyen-9a2041197" target="_blank" className={classes.link}>
+              linkedin.com/in/craigmacfadyen
+            </Anchor>
+          </Text>
+        </Stack>
+      </Container>
+    </div>
   );
 }

frontend/vite-template-master/src/components/Testimonial/Testimonial.module.css

@@ -1,4 +1,8 @@
 .card {
     padding-left: 4rem; /* Add more padding to the left */
     padding-right: 4rem; /* Add more padding to the right */
-  }
+  }
+
+.wrapper {
+  margin-bottom: 80px;
+}

frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx

@@ -27,7 +27,7 @@ function TestimonialsCarousel({ testimonials = defaultTestimonials }: Testimonia
   const autoplay = Autoplay();
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <Title ta="center" mb="xl">
         Testimonials
       </Title>
@@ -62,7 +62,7 @@ function TestimonialsCarousel({ testimonials = defaultTestimonials }: Testimonia
           </Carousel.Slide>
         ))}
       </Carousel>
-    </>
+    </div>
   );
 }