dev

packages/newDocs/package.json

@@ -15,22 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/theme-live-codeblock": "3.0.0",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.5.0",
+    "@mdx-js/react": "^3.0.0",
     "@mui/lab": "^5.0.0-alpha.142",
     "@mui/material": "^5.15.5",
     "@mui/system": "^5.15.5",
     "@mui/x-data-grid": "^6.0.0",
     "@mui/x-date-pickers": "^6.0.0",
-    "@docusaurus/core": "3.0.0",
-    "@docusaurus/preset-classic": "3.0.0",
-    "@docusaurus/theme-live-codeblock": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
     "@types/react": "^18.0.0",
     "clsx": "^1.2.1",
     "color": "^4.2.3",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
+    "docusaurus-plugin-sass": "^0.2.5",
     "framer-motion": "^10.16.4",
     "monaco-editor": "^0.45.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
@@ -40,6 +41,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.0.0",
     "react-live": "^4.1.5",
+    "sass": "^1.70.0",
     "yup": "^1.2.0"
   },
   "devDependencies": {

packages/newDocs/src/pages/index.module.scss

@@ -0,0 +1,123 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+	.heroBanner {
+		padding: 2rem;
+	}
+}
+
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.title {
+	background: linear-gradient(
+		-45deg,
+		hsl(0 100% 60% / 80%),
+		hsl(15 100% 60% / 80%) 40%,
+		hsl(23 96% 62% / 80%) 45%,
+		hsl(0 100% 60% / 80%) 60%,
+		hsl(358 58% 47% / 80%)
+	);
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	font-size: 56px;
+	line-height: 64px;
+}
+
+.title2 {
+	font-size: 56px;
+	line-height: 64px;
+}
+
+.title3 {
+	line-height: 36px;
+	font-size: 24px;
+	font-weight: 500;
+	white-space: pre-wrap;
+	color: --ifm-color-primary-light;
+}
+
+.image {
+	height: 100%;
+	flex-grow: 1;
+	order: 2;
+	margin: 0;
+}
+
+.imageContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	margin: 0 auto;
+	transform: translate(100px, -100px);
+}
+
+.imageBg {
+	width: 320px;
+	height: 320px;
+	position: absolute;
+	border-radius: 50%;
+	background-image: linear-gradient(-45deg, #cf5256 50%, #15a5de 50%);
+	filter: blur(68px);
+}
+
+.logo {
+	position: absolute;
+	width: 320px;
+	height: 320px;
+}
+
+.btn {
+	border-radius: 20px;
+	padding: 0 20px;
+	line-height: 38px;
+	font-size: 14px;
+	border-color: "#4c67c6";
+	color: white;
+	background-color: #4c67c6;
+	width: 150px;
+	text-align: center;
+	font-weight: 700;
+	margin-top: 50px;
+}
+
+.header {
+	@media screen and (min-width: 14401px) {
+		display: flex;
+		height: 500px;
+		padding-top: 30px;
+	}
+
+	@media screen and (max-width: 1440px) {
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+.infoPart {
+	text-align: left;
+	flex: 1;
+	height: 100%;
+}
+
+.logoPart {
+	flex: 1;
+	height: 100%;
+	transform: translate(0px, 50px);
+}

packages/newDocs/src/pages/index.tsx

@@ -2,27 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Logo from "@site/static/img/logo.svg";
 import Layout from "@theme/Layout";
-import styles from "./index.module.css";
+import styles from "./index.module.scss";
 function HomepageHeader() {
 	const { siteConfig } = useDocusaurusContext();
-	debugger
+	debugger;
 	return (
 		<header className={styles.heroBanner}>
 			<div className="container">
-				<div
-					style={{
-						display: "flex",
-						height: "500px",
-						paddingTop: "30px",
-					}}
-				>
-					<div
-						style={{
-							textAlign: "left",
-							flex: 1,
-							height: "100%",
-						}}
-					>
+				<div className={styles.header}>
+					<div className={styles.infoPart}>
 						<h1>
 							<p className={styles.title}>MuiEazy</p>
 						</h1>
@@ -38,13 +26,7 @@ function HomepageHeader() {
 						</h1>
 						<div className={styles.btn}>Get Started</div>
 					</div>
-					<div
-						style={{
-							flex: 1,
-							height: "100%",
-							transform: "translate(0px,50px)",
-						}}
-					>
+					<div className={styles.logoPart}>
 						<div className={styles.image}>
 							<div className={styles.imageContainer}>
 								<div className={styles.imageBg}></div>