diff --git a/package.json b/package.json index 8b70972..1b6425c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,12 @@ "test:watch": "jest --watch" }, "dependencies": { + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "@fontsource/roboto": "^5.0.13", + "@mui/material": "^5.16.4", "next": "14.2.4", + "normalize.css": "^8.0.1", "react": "^18", "react-dom": "^18", "ts-node": "^10.9.2" diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..3c6e7c7 Binary files /dev/null and b/public/logo.png differ diff --git a/src/app/globals.css b/src/app/globals.css index 875c01e..178cca9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,31 +3,6 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } + --global-bg-color: #e5ecf9; + --global-border-color: #c3d9ff; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3314e47..f29fd19 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,22 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./globals.css"; +import type { Metadata, Viewport } from 'next'; +import { Inter } from 'next/font/google'; +import './globals.css'; +import CssBaseline from '@mui/material/CssBaseline'; +import '@fontsource/roboto/300.css'; +import '@fontsource/roboto/400.css'; +import '@fontsource/roboto/500.css'; +import '@fontsource/roboto/700.css'; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ subsets: ['latin'] }); + +export const viewport: Viewport = { + width: 'device-width', + initialScale: 1, +}; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: 'Create Next App', + description: 'Generated by create next app', }; export default function RootLayout({ @@ -15,8 +25,10 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - {children} + + + {children} + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 2acfd44..1b84d63 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,113 +1,18 @@ -import Image from "next/image"; +import Footer from '@/components/Footer'; +import Header from '@/components/Header'; +import Navigation from '@/components/Navigation'; +import Index from '@/components/Index'; +import { Container } from '@mui/material'; export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{" "} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
+ +
+ +
+ +
+