basic style & add mui and aos & banner style

2024-05-16 03:44:17 +03:30
parent 4d71481738
commit ae1c7dd70c
11 changed files with 270 additions and 71 deletions
@@ -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>
+    );
+}
@@ -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%;
+    }
 }
@@ -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>
  );
 };
@@ -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>
  );
 }
@@ -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;
@@ -1,6 +1,33 @@
 function HomePage() {
    return (
-        <div>HomePage</div>
+        <div className="bg-banner-home pt-[120px] min-h-screen !bg-center !bg-no-repeat !bg-cover">
+            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>
    )
 }

@@ -5,36 +5,40 @@ import Link from "next/link";

 function Header() {
    return (
-        <div className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] h-20 px-4 py-8 flex justify-between items-center">
-            <div className="flex items-center justify-start gap-[5px]">
-                <Image
-                    src='/assets/images/logo.png'
-                    width={30}
-                    height={30}
-                    alt="logo"
-                />
-                <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
-            </div>
-            <ul className="flex items-center justify-center gap-10">
-                {listNav.map(nav => (
-                    <li
-                        key={nav.id}
-                    >
-                        <Link
-                            href={nav.link}
-                            className={`
-                                ${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
-                                text-[16px] font-bold
-                            `}
+        <div
+            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-[85%] mx-auto"
+        >
+            <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
+                <div className="flex items-center justify-start gap-[5px]">
+                    <Image
+                        src='/assets/images/logo.png'
+                        width={30}
+                        height={30}
+                        alt="logo"
+                    />
+                    <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
+                </div>
+                <ul className="flex items-center justify-center gap-10">
+                    {listNav.map(nav => (
+                        <li
+                            key={nav.id}
                        >
-                            {nav.name}
-                        </Link>
-                    </li>
-                ))}
-            </ul>
-            <Button>
-                ورود | ثبت نام
-            </Button>
+                            <Link
+                                href={nav.link}
+                                className={`
+                                ${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
+                                text-[16px] font-medium
+                            `}
+                            >
+                                {nav.name}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+                <Button variant="contained" color="primary">
+                    ورود | ثبت نام
+                </Button>
+            </div>
        </div>
    )
 }
@@ -8,7 +8,7 @@ function Layout({ children, title }) {
                <title>{`${title} | نوبت ۷۲۴`}</title>
            </head> */}
            <main className="w-full min-h-screen">
-                <header className="sticky top-0 w-full z-[60]">
+                <header className="w-full fixed top-10 right-0">
                    <Header />
                </header>
                <section>
@@ -8,10 +8,13 @@
      "name": "nobat",
      "version": "0.1.0",
      "dependencies": {
+        "@emotion/cache": "^11.11.0",
        "@emotion/react": "^11.11.4",
        "@emotion/styled": "^11.11.5",
        "@mui/material": "^5.15.17",
+        "@mui/material-nextjs": "^5.15.11",
        "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+        "aos": "^2.3.4",
        "next": "14.2.3",
        "react": "^18",
        "react-dom": "^18",
@@ -427,6 +430,40 @@
        }
      }
    },
+    "node_modules/@mui/material-nextjs": {
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/material-nextjs/-/material-nextjs-5.15.11.tgz",
+      "integrity": "sha512-cp5RWYbBngyi7NKP91R9QITllfxumCVPFjqe4AKzNROVuCot0VpgkafxXqfbv0uFsyUU0ROs0O2M3r17q604Aw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/server": "^11.11.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "next": "^13.0.0 || ^14.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/cache": {
+          "optional": true
+        },
+        "@emotion/server": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@mui/private-theming": {
      "version": "5.15.14",
      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
@@ -867,6 +904,16 @@
        "node": ">= 8"
      }
    },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
    "node_modules/arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1062,6 +1109,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
    "node_modules/client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1533,6 +1585,16 @@
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -9,10 +9,13 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.15.17",
+    "@mui/material-nextjs": "^5.15.11",
    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "aos": "^2.3.4",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",