src/components/hero/hero.tsx

@@ -1,24 +1,63 @@
 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 spacing={4} alignItems="center">
+            <Grid item xs={12} md={6}>
+              <Box>
+                <Typography
+                  variant="h2"
+                  fontWeight="bold"
+                  gutterBottom
+                  sx={{
+                    fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
+                    lineHeight: 1.2,
+                  }}
                 >
-          <Grid container>
-            <Grid item md={6}>
-              <Typography variant="h3" fontWeight="bold" gutterBottom>
                   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}>
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 1, duration: 1 }}
+              >
+                <Typography
+                  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.
@@ -29,6 +68,11 @@ export default function Hero() {
                     mt: 4,
                     borderColor: "#00E0FF",
                     color: "#00E0FF",
+                    borderRadius: "24px",
+                    px: 4,
+                    py: 1.5,
+                    textTransform: "none",
+                    fontWeight: 600,
                     "&:hover": {
                       backgroundColor: "#00E0FF",
                       color: "#000",
@@ -37,12 +81,21 @@ export default function Hero() {
                 >
                   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>
   );