src/components/aboutus/aboutus.tsx

@@ -1,41 +1,135 @@
 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 }}
-          About Us
+      whileInView={{ opacity: 1 }}
-        </Typography>
+      viewport={{ once: true, margin: "-100px" }}
-        <Typography variant="body1" paragraph>
+      sx={{
-          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
+        backgroundColor: "#1d2733",
-          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
+        color: "#fff",
-          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
+        py: { xs: 8, md: 12 },
-          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
+        px: 3,
-          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
+        overflow: "hidden",
-          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.
+      <Box
-        </Typography>
+        component={motion.div}
-        <Button
+        variants={containerVariants}
-          variant="outlined"
+        initial="hidden"
-          endIcon={<ArrowOutwardIcon />}
+        whileInView="visible"
-          sx={{
+        viewport={{ once: true, margin: "-100px" }}
-            mt: 2,
+        textAlign="center"
-            borderColor: "#00FFD1",
+        maxWidth={800}
-            color: "#00FFD1",
+        mx="auto"
-            borderRadius: "30px",
+      >
-            fontWeight: "bold",
+        <Box component={motion.div} variants={itemVariants} whileHover="hover">
-            px: 4,
+          <Typography
-            "&:hover": {
+            variant="h2"
-              backgroundColor: "#00FFD1",
+            gutterBottom
-              color: "#000",
+            sx={{
-            },
+              fontFamily: "'Cormorant Garamond', serif",
-          }}
+              fontWeight: 600,
-        >
+              fontSize: { xs: "2.5rem", md: "3rem" },
-          GET IN TOUCH
+              letterSpacing: "1px",
-        </Button>
+              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>
+        </Box>
+
+        <Box component={motion.div} variants={itemVariants}>
+          <Typography
+            paragraph
+            sx={{
+              fontFamily: "'Montserrat', sans-serif",
+              fontSize: { xs: "1rem", md: "1.1rem" },
+              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 />}
+            sx={{
+              mt: 2,
+              borderColor: "#00FFD1",
+              color: "#00FFD1",
+              borderRadius: "30px",
+              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)",
+              },
+            }}
+          >
+            GET IN TOUCH
+          </Button>
+        </Box>
       </Box>
     </Box>
   );