landing page

src/app/page.tsx

-import ECommerce from "@/components/Dashboard/E-commerce";
+
+"use client";
 import { Metadata } from "next";
 import DefaultLayout from "@/components/Layouts/DefaultLayout";
 import LandingPage from "@/components/Dashboard/Landing-Page";
 import { Card, CardContent, Grid, makeStyles, Typography } from "@mui/material";
 import { Button } from "@mui/material";
-import React from "react";
+import React, { use } from "react";
+
 
-export const metadata: Metadata = {
-  title: "Simple Charts",
-  description: "This is simple charts Dashboard",
-};
 
 export default function Home() {
   return (

src/components/Dashboard/Landing-Page.tsx

-"use client";
 import React from "react";
+import Image from "next/image";
 import { Button, Card, CardContent, Grid, Typography } from "@mui/material";
 
 const LandingPage: React.FC = () => {
@@ -8,65 +8,101 @@ const LandingPage: React.FC = () => {
       <div>
         <Grid container spacing={10}>
           <Grid item xs={4}>
-            <h1 className="text-9xl font-semibold dark:text-white">
-              Simple charts
-            </h1>
+             {/* Make the most beutiful heading */}
+            <Typography variant="h2" component="h2" style={{ textAlign: "center", fontWeight: "bold", fontSize: "3.5rem", padding: "10px 20px",   transition: "all 0.3s ease"}}>
+              SimpleCharts
+            </Typography>
           </Grid>
           <Grid item xs={6}>
-            <img src={"landing/landingImage.jpeg"} alt="Landing Page Logo" />
+            <div style={{ position: "relative" }}>
+              <Image
+                src="/images/landing/landingImage.jpeg"
+                width={500}
+                height={500}
+                style={{
+                  width: "auto",
+                  height: "auto",
+                  borderRadius: "50%",
+                }}
+                alt="User"
+              />
+              <Button
+                variant="contained"
+                color="primary"
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "25%",
+                  transform: "translate(-50%, -50%)",
+                  borderRadius: 20, // Adjust border radius
+                  padding: "10px 20px", // Adjust padding
+                  fontSize: "1.2rem", // Adjust font size
+                  fontWeight: "bold", // Adjust font weight
+                  boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)", // Add box shadow
+                  transition: "all 0.3s ease", // Add transition effect
+                 
+                }}
+              >
+                Create A Chart
+              </Button>
+            </div>
           </Grid>
         </Grid>
         <br />
         <Grid container spacing={3}>
           <Grid item xs={4}>
-            <Card>
-              <CardContent>
-                <img src={"landing/ChooseData.svg"} alt="Step 1 Choose Data" />
-                <Typography variant="h5" component="h2">
+          <Card style={{borderRadius: 20, padding: "10px 20px", fontSize: "1.2rem", fontWeight: "bold", boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)", transition: "all 0.3s ease"}}>
+              <CardContent style={{ textAlign: "center" }}>
+                <Image
+                  src="/images/landing/ChooseData.svg"
+                  width={500}
+                  height={500}
+                  style={{
+                    width: "auto",
+                    height: "auto",
+                    borderRadius: "50%",
+                  }}
+                  alt="User"
+                />
+          <Typography variant="h5" component="h2" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }}>
                   Step 1
                 </Typography>
-                <Typography color="textSecondary">Choose Data</Typography>
+                <Typography color="textSecondary" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem"
+               }}>Choose Data</Typography>
               </CardContent>
+              
             </Card>
           </Grid>
           <Grid item xs={4}>
-            <Card>
-              <CardContent>
+            <Card style={{borderRadius: 20, padding: "10px 20px", fontSize: "1.2rem", fontWeight: "bold", boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)", transition: "all 0.3s ease"}}>
+              <CardContent style={{ textAlign: "center"}}>
                 <img
-                  src={"landing/SelectChart.svg"}
+                  src="/images/landing/SelectChart.svg"
                   alt="Step 2 Select Chart"
                 />
-                <Typography variant="h5" component="h2">
+                <Typography variant="h5" component="h2" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }}>
                   Step 2
                 </Typography>
-                <Typography color="textSecondary">Select a Chart</Typography>
+                <Typography color="textSecondary" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem"
+               }}>Select Chart</Typography>
+              
+
               </CardContent>
             </Card>
           </Grid>
           <Grid item xs={4}>
-            <Card>
-              <CardContent>
-                <img src={"landing/Customize.svg"} alt="Step 3 Customize" />
-                <Typography variant="h5" component="h2">
+          <Card style={{borderRadius: 20, padding: "10px 20px", fontSize: "1.2rem", fontWeight: "bold", boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)", transition: "all 0.3s ease"}}>
+              <CardContent style={{ textAlign: "center" }}>
+                <img src="/images/landing/Customise.svg" alt="Step 3 Customize" />
+                <Typography variant="h5" component="h2" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem" }}>
                   Step 3
                 </Typography>
-                <Typography color="textSecondary">Customize</Typography>
+                <Typography color="textSecondary" style={{ textAlign: "center", fontWeight: "bold", fontSize: "1.2rem"
+               }}>Customise</Typography>
               </CardContent>
             </Card>
           </Grid>
         </Grid>
-        <br />
-        <br />
-        <Button
-          variant="contained"
-          color="primary"
-          style={{
-            width: "50em",
-            height: "10em",
-          }}
-        >
-          Create A Chart
-        </Button>
       </div>
     </>
   );