src/components/aboutus/aboutus.tsx

@@ -1,23 +1,110 @@
 import { Box, Typography, Button } from "@mui/material";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { motion } from "framer-motion";
 
 const AboutUs = () => {
+  // Animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        duration: 0.6,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.6,
+        ease: "easeOut" as const,
+      },
+    },
+    hover: {
+      scale: 1.02,
+      transition: { duration: 0.3 },
+    },
+  };
+
   return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
+    <Box
-      <Box textAlign="center" maxWidth={800} mx="auto">
+      component={motion.div}
-        <Typography variant="h4" fontWeight="bold" gutterBottom>
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: "-100px" }}
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: { xs: 8, md: 12 },
+        px: 3,
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        component={motion.div}
+        variants={containerVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        textAlign="center"
+        maxWidth={800}
+        mx="auto"
+      >
+        <Box component={motion.div} variants={itemVariants} whileHover="hover">
+          <Typography
+            variant="h2"
+            gutterBottom
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 600,
+              fontSize: { xs: "2.5rem", md: "3rem" },
+              letterSpacing: "1px",
+              mb: 4,
+              position: "relative",
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "3px",
+                background: "linear-gradient(90deg, #00FFD1, transparent)",
+                margin: "20px auto 0",
+                borderRadius: "2px",
+              },
+            }}
+          >
             About Us
           </Typography>
-        <Typography variant="body1" paragraph>
+        </Box>
-          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
+
-          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
+        <Box component={motion.div} variants={itemVariants}>
-          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
+          <Typography
-          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
+            paragraph
-          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
+            sx={{
-          luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
+              fontFamily: "'Montserrat', sans-serif",
-          parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
+              fontSize: { xs: "1rem", md: "1.1rem" },
-          commodo cras leo gravida.
+              lineHeight: 1.9,
+              fontWeight: 300,
+              mb: 4,
+              color: "rgba(255,255,255,0.85)",
+            }}
+          >
+            Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros.
+            Enim hendrerit elit interdum malesuada sit dis est pharetra
+            suspendisse. In dolor venenatis ultricies aliquet lacinia. Faucibus
+            commodo eu gravida auctor eu et sit ut. Sed praesent sed odio
+            aliquam in fermentum. Sit vitae morbi sodales sem velit eu tempus
+            velit nunc. Turpis in in luctus et nulla purus nibh ut. Enim sed
+            fermentum purus molestie parturient morbi nunc aliquet. Aliquam sed
+            etiam turpis non lectus commodo cras leo gravida.
           </Typography>
+        </Box>
+
+        <Box component={motion.div} variants={itemVariants} whileHover="hover">
           <Button
             variant="outlined"
             endIcon={<ArrowOutwardIcon />}
@@ -26,11 +113,17 @@ const AboutUs = () => {
               borderColor: "#00FFD1",
               color: "#00FFD1",
               borderRadius: "30px",
-            fontWeight: "bold",
+              fontWeight: 500,
               px: 4,
+              py: 1.5,
+              fontFamily: "'Montserrat', sans-serif",
+              letterSpacing: "1px",
+              fontSize: "0.9rem",
+              transition: "all 0.3s ease",
               "&:hover": {
                 backgroundColor: "#00FFD1",
                 color: "#000",
+                boxShadow: "0 5px 15px rgba(0, 255, 209, 0.4)",
               },
             }}
           >
@@ -38,6 +131,7 @@ const AboutUs = () => {
           </Button>
         </Box>
       </Box>
+    </Box>
   );
 };