Widget | feat: add layout, page, errors page

'use client';

import { ErrorPage } from '@/components';

const Error = () => {

  return <ErrorPage errorCode="500" />;

};

export default Error;

:root {

  --max-width: 1100px;

  --border-radius: 12px;

  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",

    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",

    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  --foreground-rgb: 0, 0, 0;

  --background-start-rgb: 214, 219, 220;

  --background-end-rgb: 255, 255, 255;

  --primary-glow: conic-gradient(

    from 180deg at 50% 50%,

    #16abff33 0deg,

    #0885ff33 55deg,

    #54d6ff33 120deg,

    #0071ff33 160deg,

    transparent 360deg

  );

  --secondary-glow: radial-gradient(

    rgba(255, 255, 255, 1),

    rgba(255, 255, 255, 0)

  );

  --tile-start-rgb: 239, 245, 249;

  --tile-end-rgb: 228, 232, 233;

  --tile-border: conic-gradient(

    #00000080,

    #00000040,

    #00000030,

    #00000020,

    #00000010,

    #00000010,

    #00000080

  );

  --callout-rgb: 238, 240, 241;

  --callout-border-rgb: 172, 175, 176;

  --card-rgb: 180, 185, 188;

  --card-border-rgb: 131, 134, 135;

}

@import url('../vendor/normalize/normalize.css');

@import url('../vendor/fonts/fonts.css');

@media (prefers-color-scheme: dark) {

:root {

    --foreground-rgb: 255, 255, 255;

    --background-start-rgb: 0, 0, 0;

    --background-end-rgb: 0, 0, 0;

  --family: Gilroy, sans-serif;

  --family-secondary: Comfortaa, sans-serif;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));

    --secondary-glow: linear-gradient(

      to bottom right,

      rgba(1, 65, 255, 0),

      rgba(1, 65, 255, 0),

      rgba(1, 65, 255, 0.3)

    );

    --tile-start-rgb: 2, 13, 46;

    --tile-end-rgb: 2, 5, 19;

    --tile-border: conic-gradient(

      #ffffff80,

      #ffffff40,

      #ffffff30,

      #ffffff20,

      #ffffff10,

      #ffffff10,

      #ffffff80

    );

    --callout-rgb: 20, 20, 20;

    --callout-border-rgb: 108, 108, 108;

    --card-rgb: 100, 100, 100;

    --card-border-rgb: 200, 200, 200;

  }

  --white: #f3f4f0;

  --gray-plus: #bebebe;

  --gray: #959595;

  --black-plus: #383838;

  --black-plus-rgb: 56, 56, 56;

  --black: #242424;

  --brown: #cb9666;

  --pink-plus: #f3b6d1;

  --pink: #f669a2;

  --red-plus: #fe6a69;

  --red: #fa5452;

  --yellow-plus: #ffc633;

  --yellow: #ffb92a;

  --aquamarine-plus: #a5dfdd;

  --aquamarine: #23bcc7;

  --pistachio: #b1d465;

  --green-plus: #5dd1b7;

  --green: #51c7a5;

  --green-minus: #14ad99;

  --violet-plus: #a36ebe;

  --violet: #9e50c7;

  --blue-plus: #01a9d5;

  --blue: #027ec2;

  --sky-blue: #a7c3f8;

}

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

h1,

h2,

h3 {

  margin: 0;

}

html,

body {

  max-width: 100vw;

  overflow-x: hidden;

ol,

ul {

  list-style: none;

}

body {

  color: rgb(var(--foreground-rgb));

  background: linear-gradient(

      to bottom,

      transparent,

      rgb(var(--background-end-rgb))

    )

    rgb(var(--background-start-rgb));

img {

  max-width: 100%;

  display: block;

}

a {

  color: inherit;

  text-decoration: none;

  color: inherit;

}

@media (prefers-color-scheme: dark) {

  html {

    color-scheme: dark;

table {

  border-collapse: collapse;

  border-spacing: 0;

}

button {

  cursor: pointer;

}

button,

input {

  border: none;

  background: none;

  box-shadow: none;

}

input[type='text'],

input[type='search'] {

  -webkit-appearance: none;

  appearance: none;

}

fieldset {

  border: none;

  padding: 0;

}

import React from 'react';

import { Inter } from 'next/font/google';

import { ReactNode } from 'react';

import 'swiper/swiper-bundle.css';

import {

  ContentMain,

  Footer,

  Header,

  MainContainer,

  SideBar,

  StylebookProvider,

  Widget,

} from '@/components';

import StoreProvider from './store-provider';

import './globals.css';

import StyledComponentsRegistry from './lib/registry';

import StyledComponentsRegistry from '../lib/registry';

import ReactQueryProvider from './query-provider';

import type { Metadata } from 'next';

const inter = Inter({ subsets: ['latin'] });

const RootLayout = ({

  children,

}: Readonly<{

  children: React.ReactNode;

  children: ReactNode;

}>) => (

  <html lang="en">

    <body className={ inter.className }>

      <StyledComponentsRegistry>{ children }</StyledComponentsRegistry>

  <html lang="ru">

    <body>

      <StyledComponentsRegistry>

        <StylebookProvider>

          <MainContainer>

            <SideBar />

            <ContentMain />

            <Widget>

              <StoreProvider>

                <ReactQueryProvider>

                  <Header />

                  {children}

                  <Footer />

                  <div id="modals" />

                </ReactQueryProvider>

              </StoreProvider>

            </Widget>

          </MainContainer>

        </StylebookProvider>

      </StyledComponentsRegistry>

    </body>

  </html>

);

export const metadata: Metadata = {

    title: 'Create Next App',

    description: 'Generated by create next app',

  title: 'IQ-coffee',

  description: 'coffee roasters',

};

export default RootLayout;

'use client';

import { Preloader } from '@/vendor';

const Loading = () => {

  return <Preloader colorItem="" />;

};

export default Loading;

import { ErrorPage } from '@/components';

const NotFound = () => {

  return <ErrorPage errorCode="404" />;

};

export default NotFound;