basic style & add mui and aos & banner style

app/component/ThemeRegistry.js

@@ -0,0 +1,60 @@
+// app/ThemeRegistry.tsx
+'use client';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider, ThemeProvider } from '@emotion/react';
+import React from 'react';
+import theme from '../theme/theme';
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry({
+    children
+}) {
+    const options = {key: 'mui'}
+    const [{ cache, flush }] = React.useState(() => {
+        const cache = createCache(options);
+        cache.compat = true;
+        const prevInsert = cache.insert;
+        let inserted = [];
+        cache.insert = (...args) => {
+            const serialized = args[1];
+            if (cache.inserted[serialized.name] === undefined) {
+                inserted.push(serialized.name);
+            }
+            return prevInsert(...args);
+        };
+        const flush = () => {
+            const prevInserted = inserted;
+            inserted = [];
+            return prevInserted;
+        };
+        return { cache, flush };
+    });
+
+    useServerInsertedHTML(() => {
+        const names = flush();
+        if (names.length === 0) {
+            return null;
+        }
+        let styles = '';
+        for (const name of names) {
+            styles += cache.inserted[name];
+        }
+        return (
+            <style
+                key={cache.key}
+                data-emotion={`${cache.key} ${names.join(' ')}`}
+                dangerouslySetInnerHTML={{
+                    __html: styles,
+                }}
+            />
+        );
+    });
+
+    return (
+        <CacheProvider value={cache}>
+            <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </CacheProvider>
+    );
+}

app/globals.css

@@ -7,55 +7,55 @@
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Thin.ttf);
-    font-family: 100;
+    font-weight: 100;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBlack.ttf);
-    font-family: 200;
+    font-weight: 200;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Light.ttf);
-    font-family: 300;
+    font-weight: 300;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Regular.ttf);
-    font-family: 400;
+    font-weight: 400;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Medium.ttf);
-    font-family: 500;
+    font-weight: 500;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-DemiBold.ttf);
-    font-family: 600;
+    font-weight: 600;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Bold.ttf);
-    font-family: 700;
+    font-weight: 700;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-ExtraBold.ttf);
-    font-family: 800;
+    font-weight: 800;
 }
 
 @font-face {
     font-family: iran-sans;
     src: url(../public/fonts/IranSansX/FarsiNumerals/IRANSansXFaNum-Black.ttf);
-    font-family: 900;
+    font-weight: 900;
 }
 
 /* Font Kalame */
@@ -118,8 +118,28 @@ body {
     font-family: iran-sans;
     padding: 0;
     margin: 0;
+    background: #F5F5F5;
 }
 
 .font-kalame {
     font-family: kalame;
+}
+
+.bg-banner-home {
+    background: url(../public/assets/images/banner-home.png);
+}
+
+.animate-open {
+    animation: openx;
+    animation-duration: 2s;
+}
+
+@keyframes openx {
+    0% {
+        width: 0;
+    }
+
+    100% {
+        width: 85%;
+    }
 }

app/layout.js

@@ -1,5 +1,5 @@
-import { Inter } from "next/font/google";
 import "./globals.css";
+import ThemeRegistry from './component/ThemeRegistry';
 
 export const metadata = {
   title: "Create Next App",
@@ -9,7 +9,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="fa" dir='rtl'>
-      <body className='bg-[#F5F5F5]'>{children}</body>
+      <ThemeRegistry>
+        <body className='bg-[#F5F5F5]'>{children}</body>
+      </ThemeRegistry>
     </html>
   );
 };

app/page.js

@@ -1,38 +1,20 @@
+'use client';
+
 import HomePage from "@/components/home";
 import Layout from "@/components/layout";
+import Aos from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
 
 export default function Home() {
+
+  useEffect(() => {
+    Aos.init({});
+  }, [])
+
   return (
     <Layout title='خانه'>
-      <div className="bg-[#E3E6EC] min-h-screen">
-        {/* <HomePage /> */}
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-        ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
-      </div>
+      <HomePage />
     </Layout>
   );
 }

app/theme/theme.js

@@ -0,0 +1,39 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    direction: 'rtl',
+    typography: {
+        fontFamily: 'iran-sans',
+    },
+    components: {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    whiteSpace: 'nowrap',
+                    minWidth: '0',
+                    padding: '9px 18px',
+                    fontSize: '16px',
+                    fontStyle: 'normal',
+                    fontWeight: '500',
+                },
+            },
+        },
+    },
+    palette: {
+        primary: {
+            main: "#526CAC",
+            contrastText: "#EFEFEF",
+        },
+        secondary: {
+            main: "#2F7BC6",
+            contrastText: "#FFF",
+        },
+        success: {
+            main: "#FFB800",
+            contrastText: "#FFF",
+        }
+    }
+});
+
+export default theme;