src/components/hero/hero.tsx

@@ -1,48 +1,101 @@
 import { Box, Button, Container, Grid, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import backgroundImg from "../hero/Frame 22.png";
+
 export default function Hero() {
   return (
     <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
       <Container maxWidth="lg">
         <motion.div
-          initial={{ opacity: 0, y: -20 }}
+          initial={{ opacity: 0, y: -30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
+          transition={{ duration: 1 }}
         >
-          <Grid container>
+          <Grid container spacing={4} alignItems="center">
-            <Grid item md={6}>
+            <Grid item xs={12} md={6}>
-              <Typography variant="h3" fontWeight="bold" gutterBottom>
+              <Box>
-                We Create <br />
+                <Typography
-                Brands That Stick
+                  variant="h2"
-              </Typography>
+                  fontWeight="bold"
+                  gutterBottom
+                  sx={{
+                    fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
+                    lineHeight: 1.2,
+                  }}
+                >
+                  We Create <br />
+                  Brands That Stick
+                </Typography>
+
+                {/* Sliding second line after 7s */}
+                <motion.div
+                  initial={{ opacity: 0, x: 50 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 7, duration: 1 }}
+                >
+                  <Typography
+                    variant="h5"
+                    sx={{
+                      mt: 2,
+                      fontWeight: 300,
+                      color: "#00E0FF",
+                      fontStyle: "italic",
+                    }}
+                  >
+                    "Let your brand speak before you do."
+                  </Typography>
+                </motion.div>
+              </Box>
             </Grid>
-            <Grid item md={6}>
+
-              <Typography variant="body1" maxWidth="sm">
+            <Grid item xs={12} md={6}>
-                We help founders grow through bold design, sharp strategy, and
+              <motion.div
-                smart marketing that drives recognition, engagement and
+                initial={{ opacity: 0, y: 20 }}
-                long-term brand loyalty.
+                animate={{ opacity: 1, y: 0 }}
-              </Typography>
+                transition={{ delay: 1, duration: 1 }}
-              <Button
-                variant="outlined"
-                sx={{
-                  mt: 4,
-                  borderColor: "#00E0FF",
-                  color: "#00E0FF",
-                  "&:hover": {
-                    backgroundColor: "#00E0FF",
-                    color: "#000",
-                  },
-                }}
               >
-                Get in Touch
+                <Typography
-              </Button>
+                  variant="body1"
+                  sx={{ maxWidth: "500px", fontSize: "1.1rem", color: "#ccc" }}
+                >
+                  We help founders grow through bold design, sharp strategy, and
+                  smart marketing that drives recognition, engagement and
+                  long-term brand loyalty.
+                </Typography>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    mt: 4,
+                    borderColor: "#00E0FF",
+                    color: "#00E0FF",
+                    borderRadius: "24px",
+                    px: 4,
+                    py: 1.5,
+                    textTransform: "none",
+                    fontWeight: 600,
+                    "&:hover": {
+                      backgroundColor: "#00E0FF",
+                      color: "#000",
+                    },
+                  }}
+                >
+                  Get in Touch
+                </Button>
+              </motion.div>
             </Grid>
           </Grid>
         </motion.div>
       </Container>
-      <Box width="100%">
+
-        <img src={backgroundImg} alt="" width={"100%"} />
+      <Box width="100%" mt={8}>
+        <motion.img
+          src={backgroundImg}
+          alt="Hero Background"
+          width="100%"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.5, duration: 1 }}
+        />
       </Box>
     </Box>
   );