diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx
new file mode 100644
index 0000000..7c7697c
--- /dev/null
+++ b/app/about-us/page.tsx
@@ -0,0 +1,3 @@
+import AboutUsPage from "@/Pages/AboutUsPage/AboutUsPage";
+
+export default AboutUsPage;
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..31838fa
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,9 @@
+import RootLayout from "@/App/App";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "KG Road",
+ description: "Road in Kyrgyzstan",
+};
+
+export default RootLayout;
diff --git a/app/news/page.tsx b/app/news/page.tsx
new file mode 100644
index 0000000..955b210
--- /dev/null
+++ b/app/news/page.tsx
@@ -0,0 +1,3 @@
+import NewsPage from "@/Pages/NewsPage/NewsPage";
+
+export default NewsPage;
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..3095677
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,3 @@
+import Homepage from "@/Pages/Homepage/Homepage";
+
+export default Homepage;
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
new file mode 100644
index 0000000..a54c709
--- /dev/null
+++ b/app/profile/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+ return
page
;
+};
+
+export default page;
diff --git a/app/sign-in/page.tsx b/app/sign-in/page.tsx
new file mode 100644
index 0000000..a54c709
--- /dev/null
+++ b/app/sign-in/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+ return page
;
+};
+
+export default page;
diff --git a/app/sign-up/page.tsx b/app/sign-up/page.tsx
new file mode 100644
index 0000000..a54c709
--- /dev/null
+++ b/app/sign-up/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+ return page
;
+};
+
+export default page;
diff --git a/app/statistics/page.tsx b/app/statistics/page.tsx
new file mode 100644
index 0000000..2ea4a18
--- /dev/null
+++ b/app/statistics/page.tsx
@@ -0,0 +1,3 @@
+import StatisticsPage from "@/Pages/StatisticsPage/StatisticsPage";
+
+export default StatisticsPage;
diff --git a/app/volunteers/page.tsx b/app/volunteers/page.tsx
new file mode 100644
index 0000000..8bc622c
--- /dev/null
+++ b/app/volunteers/page.tsx
@@ -0,0 +1,3 @@
+import VolunteersPage from "@/Pages/VolunteersPage/VolunteersPage";
+
+export default VolunteersPage;
diff --git a/package.json b/package.json
index 84ce1a5..8e8148e 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,17 @@
"lint": "next lint"
},
"dependencies": {
+ "next": "14.1.0",
"react": "^18",
"react-dom": "^18",
- "next": "14.1.0"
+ "sass": "^1.70.0"
},
"devDependencies": {
- "typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
- "eslint-config-next": "14.1.0"
+ "eslint-config-next": "14.1.0",
+ "typescript": "^5"
}
}
diff --git a/src/App/App.tsx b/src/App/App.tsx
new file mode 100644
index 0000000..fd75142
--- /dev/null
+++ b/src/App/App.tsx
@@ -0,0 +1,22 @@
+import { Montserrat } from "next/font/google";
+import "./globals.scss";
+import Navbar from "@/Widgets/general/Navbar/Navbar";
+import Footer from "@/Widgets/general/Footer/Footer";
+
+const montserrat = Montserrat({ subsets: ["latin"] });
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/App/globals.scss b/src/App/globals.scss
new file mode 100644
index 0000000..310b34e
--- /dev/null
+++ b/src/App/globals.scss
@@ -0,0 +1,28 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+button {
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+input {
+ outline: none;
+}
+
+a {
+ color: black;
+ text-decoration: none;
+ background-color: transparent;
+}
+
+ul {
+ list-style-type: none;
+}
diff --git a/src/Entities/ChangeLanguage/ChangeLanguage.scss b/src/Entities/ChangeLanguage/ChangeLanguage.scss
new file mode 100644
index 0000000..fdb1c74
--- /dev/null
+++ b/src/Entities/ChangeLanguage/ChangeLanguage.scss
@@ -0,0 +1,61 @@
+.change-language {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ &__btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ &__popUp {
+ position: absolute;
+ top: 35px;
+ }
+ &__item,
+ &__item_active {
+ button {
+ width: 150px;
+ padding: 10px 14px;
+ justify-content: flex-start;
+ gap: 8px;
+ background-color: #fff;
+ line-height: 24px;
+
+ color: #101828;
+ font-size: 16px;
+ font-weight: 600;
+ }
+ }
+
+ &__item:first-child,
+ &__item_active:first-child {
+ button {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ }
+ }
+
+ &__item:last-child,
+ &__item_active:last-child {
+ button {
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ }
+ }
+
+ &__item_active {
+ button {
+ background-color: #f9fafb;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .change-language {
+ &__popUp {
+ right: 0;
+ }
+ }
+}
diff --git a/src/Entities/ChangeLanguage/ChangeLanguage.tsx b/src/Entities/ChangeLanguage/ChangeLanguage.tsx
new file mode 100644
index 0000000..ca726a0
--- /dev/null
+++ b/src/Entities/ChangeLanguage/ChangeLanguage.tsx
@@ -0,0 +1,50 @@
+import "./ChangeLanguage.scss";
+import Image from "next/image";
+import lang_icon from "./icons/lang-icon.svg";
+import chevron_icon from "./icons/chevron-down-icon.svg";
+import check_icon from "./icons/check-icon.svg";
+import { useState } from "react";
+
+const ChangeLanguage = () => {
+ const [lang, setLang] = useState("ru");
+ const [popUp, setPopUp] = useState(false);
+ const languages = [
+ { id: "ru", language: "Русский" },
+ { id: "kg", language: "Кыргыз" },
+ { id: "en", language: "English" },
+ ];
+ return (
+
+
+ {popUp && (
+
+ {languages.map((language) => (
+ -
+
+
+ ))}
+
+ )}
+
+ );
+};
+
+export default ChangeLanguage;
diff --git a/src/Entities/ChangeLanguage/icons/check-icon.svg b/src/Entities/ChangeLanguage/icons/check-icon.svg
new file mode 100644
index 0000000..2532884
--- /dev/null
+++ b/src/Entities/ChangeLanguage/icons/check-icon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/Entities/ChangeLanguage/icons/chevron-down-icon.svg b/src/Entities/ChangeLanguage/icons/chevron-down-icon.svg
new file mode 100644
index 0000000..cd439ce
--- /dev/null
+++ b/src/Entities/ChangeLanguage/icons/chevron-down-icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/Entities/ChangeLanguage/icons/lang-icon.svg b/src/Entities/ChangeLanguage/icons/lang-icon.svg
new file mode 100644
index 0000000..4e72469
--- /dev/null
+++ b/src/Entities/ChangeLanguage/icons/lang-icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/Entities/NavAuthBtn/NavAuthBtn.scss b/src/Entities/NavAuthBtn/NavAuthBtn.scss
new file mode 100644
index 0000000..a800478
--- /dev/null
+++ b/src/Entities/NavAuthBtn/NavAuthBtn.scss
@@ -0,0 +1,18 @@
+@import "../../Shared/variables.scss";
+
+.nav-sign-in,
+.nav-profile {
+ padding: 8px 16px;
+ background-color: $light-blue;
+ color: white;
+ border-radius: 5px;
+ font-size: 14px;
+ font-weight: 700;
+}
+
+@media screen and (max-width: 768px) {
+ .nav-sign-in,
+ .nav-profile {
+ display: none;
+ }
+}
diff --git a/src/Entities/NavAuthBtn/NavAuthBtn.tsx b/src/Entities/NavAuthBtn/NavAuthBtn.tsx
new file mode 100644
index 0000000..3a52323
--- /dev/null
+++ b/src/Entities/NavAuthBtn/NavAuthBtn.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import "./NavAuthBtn.scss";
+
+const NavAuthBtn = () => {
+ const auth = false;
+
+ return auth ? (
+
+ Профиль
+
+ ) : (
+
+ Войти
+
+ );
+};
+
+export default NavAuthBtn;
diff --git a/src/Entities/Switch/Switch.scss b/src/Entities/Switch/Switch.scss
new file mode 100644
index 0000000..015fa7d
--- /dev/null
+++ b/src/Entities/Switch/Switch.scss
@@ -0,0 +1,23 @@
+.switch {
+ padding: 2px;
+ min-width: 40px;
+ width: 40px;
+ height: 20px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+
+ border-radius: 32px;
+
+ &__thumb {
+ min-width: 16px;
+ width: 16px;
+ height: 16px;
+ background-color: #fff;
+ border-radius: 50%;
+ }
+}
+
+.switch-active {
+ justify-content: flex-end;
+}
diff --git a/src/Entities/Switch/Switch.tsx b/src/Entities/Switch/Switch.tsx
new file mode 100644
index 0000000..033f444
--- /dev/null
+++ b/src/Entities/Switch/Switch.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import "./Switch.scss";
+import { useState } from "react";
+
+interface ISwitch {
+ color?: string;
+ onClick?: () => void;
+}
+
+const Switch: React.FC = ({ color, onClick }) => {
+ const [toggle, setToggle] = useState(false);
+ return (
+
+ );
+};
+
+export default Switch;
diff --git a/src/Features/NavMenu/NavMenu.scss b/src/Features/NavMenu/NavMenu.scss
new file mode 100644
index 0000000..e9be1ce
--- /dev/null
+++ b/src/Features/NavMenu/NavMenu.scss
@@ -0,0 +1,52 @@
+@import "../../Shared/variables.scss";
+
+.nav-menu-btn,
+.nav-menu {
+ display: none;
+}
+
+.nav-menu {
+ padding: 48px 30px;
+ width: 100%;
+ height: 100vh;
+ position: fixed;
+ top: 72px;
+ left: 0;
+ background-color: #fff;
+
+ &__pages {
+ display: flex;
+ flex-direction: column;
+ gap: 26px;
+
+ &-item,
+ &-item_active {
+ a {
+ font-size: 24px;
+ font-weight: 500;
+ }
+ }
+
+ &-item_active {
+ a {
+ color: $light-blue;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .nav-menu-btn {
+ display: flex;
+ }
+
+ .nav-menu {
+ display: block;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .nav-menu {
+ padding: 40px 16px;
+ }
+}
diff --git a/src/Features/NavMenu/NavMenu.tsx b/src/Features/NavMenu/NavMenu.tsx
new file mode 100644
index 0000000..e174b2a
--- /dev/null
+++ b/src/Features/NavMenu/NavMenu.tsx
@@ -0,0 +1,70 @@
+import "./NavMenu.scss";
+import Image from "next/image";
+import menu_icon from "./icons/menu-icon.svg";
+import cross_icon from "./icons/cross-icon.svg";
+import { useState } from "react";
+import { pages } from "@/Shared/variables/pages";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavMenu = () => {
+ const [menu, setMenu] = useState(false);
+ const auth = false;
+ const pathname = usePathname();
+ return (
+ <>
+
+
+ {menu && (
+
+
+ {pages.map((page) => (
+ -
+ {page.page}
+
+ ))}
+ {auth ? (
+ -
+ Войти
+
+ ) : (
+ -
+ Профиль
+
+ )}
+
+
+ )}
+ >
+ );
+};
+
+export default NavMenu;
diff --git a/src/Features/NavMenu/icons/cross-icon.svg b/src/Features/NavMenu/icons/cross-icon.svg
new file mode 100644
index 0000000..3ed95aa
--- /dev/null
+++ b/src/Features/NavMenu/icons/cross-icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/Features/NavMenu/icons/menu-icon.svg b/src/Features/NavMenu/icons/menu-icon.svg
new file mode 100644
index 0000000..b237acd
--- /dev/null
+++ b/src/Features/NavMenu/icons/menu-icon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/Features/SearchBar/SearchBar.scss b/src/Features/SearchBar/SearchBar.scss
new file mode 100644
index 0000000..f54a2d6
--- /dev/null
+++ b/src/Features/SearchBar/SearchBar.scss
@@ -0,0 +1,44 @@
+@import "../../Shared/variables.scss";
+
+.search-bar {
+ height: 52px;
+ width: 645px;
+ display: flex;
+
+ button {
+ width: 101px;
+ border-radius: 0px 6px 6px 0px;
+ background-color: $light-blue;
+ color: white;
+ }
+
+ &__input {
+ display: flex;
+ align-items: center;
+ flex: 1;
+
+ border-radius: 6px 0px 0px 6px;
+ border: 1px solid var(--grey-for-mask, #c5c6c5);
+
+ img {
+ width: 50px;
+ }
+
+ input {
+ width: 100%;
+ height: 100%;
+ border: none;
+ font-size: 18px;
+ }
+ ::placeholder {
+ color: #c5c6c5;
+ font-size: 16px;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .search-bar {
+ width: 100%;
+ }
+}
diff --git a/src/Features/SearchBar/SearchBar.tsx b/src/Features/SearchBar/SearchBar.tsx
new file mode 100644
index 0000000..7eeca92
--- /dev/null
+++ b/src/Features/SearchBar/SearchBar.tsx
@@ -0,0 +1,23 @@
+import "./SearchBar.scss";
+import Image from "next/image";
+import search_icon from "./icons/search-icon.svg";
+
+interface ISearchBar {
+ placeholder?: string;
+}
+
+const SearchBar: React.FC = ({
+ placeholder,
+}: ISearchBar) => {
+ return (
+
+ );
+};
+
+export default SearchBar;
diff --git a/src/Features/SearchBar/icons/search-icon.svg b/src/Features/SearchBar/icons/search-icon.svg
new file mode 100644
index 0000000..ded58d7
--- /dev/null
+++ b/src/Features/SearchBar/icons/search-icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/Pages/AboutUsPage/AboutUsPage.scss b/src/Pages/AboutUsPage/AboutUsPage.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/AboutUsPage/AboutUsPage.tsx b/src/Pages/AboutUsPage/AboutUsPage.tsx
new file mode 100644
index 0000000..64e7abb
--- /dev/null
+++ b/src/Pages/AboutUsPage/AboutUsPage.tsx
@@ -0,0 +1,7 @@
+import "./AboutUsPage.scss";
+
+const AboutUsPage = () => {
+ return AboutUsPage
;
+};
+
+export default AboutUsPage;
diff --git a/src/Pages/Homepage/Homepage.scss b/src/Pages/Homepage/Homepage.scss
new file mode 100644
index 0000000..dba3251
--- /dev/null
+++ b/src/Pages/Homepage/Homepage.scss
@@ -0,0 +1,9 @@
+.home {
+ padding-top: 78px;
+}
+
+@media screen and (max-width: 768px) {
+ .home {
+ padding-top: 72px;
+ }
+}
diff --git a/src/Pages/Homepage/Homepage.tsx b/src/Pages/Homepage/Homepage.tsx
new file mode 100644
index 0000000..b8851db
--- /dev/null
+++ b/src/Pages/Homepage/Homepage.tsx
@@ -0,0 +1,20 @@
+import "./Homepage.scss";
+import Header from "@/Widgets/home/Header/Header";
+import MapSection from "@/Widgets/home/MapSection/MapSection";
+import RatingSection from "@/Widgets/home/RatingSection/RatingSection";
+import StatisticsSection from "@/Widgets/home/StatisticsSection/StatisticsSection";
+import NewsSection from "@/Widgets/home/NewsSection/NewsSection";
+
+const Homepage = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default Homepage;
diff --git a/src/Pages/NewsPage/NewsPage.scss b/src/Pages/NewsPage/NewsPage.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/NewsPage/NewsPage.tsx b/src/Pages/NewsPage/NewsPage.tsx
new file mode 100644
index 0000000..224df72
--- /dev/null
+++ b/src/Pages/NewsPage/NewsPage.tsx
@@ -0,0 +1,7 @@
+import "./NewsPage.scss";
+
+const NewsPage = () => {
+ return NewsPage
;
+};
+
+export default NewsPage;
diff --git a/src/Pages/StatisticsPage/StatisticsPage.scss b/src/Pages/StatisticsPage/StatisticsPage.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/StatisticsPage/StatisticsPage.tsx b/src/Pages/StatisticsPage/StatisticsPage.tsx
new file mode 100644
index 0000000..9ebcd69
--- /dev/null
+++ b/src/Pages/StatisticsPage/StatisticsPage.tsx
@@ -0,0 +1,7 @@
+import "./StatisticsPage.scss";
+
+const StatisticsPage = () => {
+ return StatisticsPage
;
+};
+
+export default StatisticsPage;
diff --git a/src/Pages/VolunteersPage/VolunteersPage.scss b/src/Pages/VolunteersPage/VolunteersPage.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/VolunteersPage/VolunteersPage.tsx b/src/Pages/VolunteersPage/VolunteersPage.tsx
new file mode 100644
index 0000000..62368a4
--- /dev/null
+++ b/src/Pages/VolunteersPage/VolunteersPage.tsx
@@ -0,0 +1,7 @@
+import "./VolunteersPage.scss";
+
+const VolunteersPage = () => {
+ return VolunteersPage
;
+};
+
+export default VolunteersPage;
diff --git a/src/Shared/UI/SectionHeader/SectionHeader.scss b/src/Shared/UI/SectionHeader/SectionHeader.scss
new file mode 100644
index 0000000..705cb5e
--- /dev/null
+++ b/src/Shared/UI/SectionHeader/SectionHeader.scss
@@ -0,0 +1,39 @@
+.section-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ text-align: center;
+ h3 {
+ font-size: 42px;
+ font-weight: 500;
+ color: #32303a;
+ }
+
+ p {
+ font-size: 24px;
+ font-weight: 300;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .section-header {
+ gap: 20px;
+ h3 {
+ font-size: 36px;
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .section-header {
+ gap: 16px;
+ h3 {
+ font-size: 24px;
+ }
+
+ p {
+ font-size: 18px;
+ }
+ }
+}
diff --git a/src/Shared/UI/SectionHeader/SectionHeader.tsx b/src/Shared/UI/SectionHeader/SectionHeader.tsx
new file mode 100644
index 0000000..e06accc
--- /dev/null
+++ b/src/Shared/UI/SectionHeader/SectionHeader.tsx
@@ -0,0 +1,20 @@
+import "./SectionHeader.scss";
+
+interface ISectionHeader {
+ children: React.ReactNode;
+ description?: string;
+}
+
+const SectionHeader: React.FC = ({
+ children,
+ description,
+}: ISectionHeader) => {
+ return (
+
+
{children}
+
{description}
+
+ );
+};
+
+export default SectionHeader;
diff --git a/src/Shared/variables.scss b/src/Shared/variables.scss
new file mode 100644
index 0000000..56e5e97
--- /dev/null
+++ b/src/Shared/variables.scss
@@ -0,0 +1 @@
+$light-blue: #489fe1;
diff --git a/src/Shared/variables/pages.ts b/src/Shared/variables/pages.ts
new file mode 100644
index 0000000..cd9e592
--- /dev/null
+++ b/src/Shared/variables/pages.ts
@@ -0,0 +1,7 @@
+export const pages = [
+ { id: 1, page: "Главная", path: "/" },
+ { id: 2, page: "О нас", path: "/about-us" },
+ { id: 3, page: "Статистика", path: "/statistics" },
+ { id: 4, page: "Новости", path: "/news" },
+ { id: 5, page: "Волонтеры", path: "/volunteers" },
+];
diff --git a/src/Widgets/general/Footer/Footer.scss b/src/Widgets/general/Footer/Footer.scss
new file mode 100644
index 0000000..ef6768f
--- /dev/null
+++ b/src/Widgets/general/Footer/Footer.scss
@@ -0,0 +1,54 @@
+.footer {
+ padding: 48px 90px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 50px;
+ background-color: #0f172a;
+ color: white;
+
+ &__links,
+ &__contacts,
+ &__app {
+ display: flex;
+ flex-direction: column;
+
+ h4 {
+ margin-bottom: 14px;
+ font-weight: 600;
+ }
+
+ ul {
+ li {
+ margin: 24px 0;
+
+ a {
+ color: white;
+ }
+ }
+ }
+ }
+
+ &__nets {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .footer {
+ padding: 48px 30px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .footer {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .footer {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/Widgets/general/Footer/Footer.tsx b/src/Widgets/general/Footer/Footer.tsx
new file mode 100644
index 0000000..4bda8ea
--- /dev/null
+++ b/src/Widgets/general/Footer/Footer.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+import "./Footer.scss";
+import logo from "./assets/logo.png";
+import instagram from "./icons/instagram.svg";
+import facebook from "./icons/facebook.svg";
+import youtube from "./icons/youtube.svg";
+import appStore from "./assets/appstore.svg";
+import Link from "next/link";
+
+const Footer = () => {
+ const pages = [
+ { id: 1, page: "Отметить дорогу", path: "/report" },
+ { id: 2, page: "О нас", path: "/about-us" },
+ { id: 3, page: "Волонтеры", path: "/volunteers" },
+ { id: 4, page: "Статистика", path: "/statistics" },
+ { id: 5, page: "Новости", path: "/news" },
+ ];
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/Widgets/general/Footer/assets/appstore.svg b/src/Widgets/general/Footer/assets/appstore.svg
new file mode 100644
index 0000000..04eaf8a
--- /dev/null
+++ b/src/Widgets/general/Footer/assets/appstore.svg
@@ -0,0 +1,45 @@
+
diff --git a/src/Widgets/general/Footer/assets/logo.png b/src/Widgets/general/Footer/assets/logo.png
new file mode 100644
index 0000000..00dd48c
Binary files /dev/null and b/src/Widgets/general/Footer/assets/logo.png differ
diff --git a/src/Widgets/general/Footer/icons/facebook.svg b/src/Widgets/general/Footer/icons/facebook.svg
new file mode 100644
index 0000000..4273c16
--- /dev/null
+++ b/src/Widgets/general/Footer/icons/facebook.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/Widgets/general/Footer/icons/instagram.svg b/src/Widgets/general/Footer/icons/instagram.svg
new file mode 100644
index 0000000..9c3d808
--- /dev/null
+++ b/src/Widgets/general/Footer/icons/instagram.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/Widgets/general/Footer/icons/youtube.svg b/src/Widgets/general/Footer/icons/youtube.svg
new file mode 100644
index 0000000..776b9e7
--- /dev/null
+++ b/src/Widgets/general/Footer/icons/youtube.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/Widgets/general/Navbar/Navbar.scss b/src/Widgets/general/Navbar/Navbar.scss
new file mode 100644
index 0000000..c81847f
--- /dev/null
+++ b/src/Widgets/general/Navbar/Navbar.scss
@@ -0,0 +1,81 @@
+@import "../../../Shared/variables.scss";
+
+.nav {
+ position: fixed;
+ z-index: 15;
+ width: 100%;
+ padding: 0 90px;
+ height: 78px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #fff;
+
+ &__pages {
+ display: flex;
+ gap: 44px;
+
+ &-item {
+ display: flex;
+ align-items: center;
+ a {
+ font-size: 14px;
+ color: #32303a;
+ font-weight: 500;
+ }
+ }
+
+ &-item_active {
+ a {
+ font-weight: 700;
+ line-height: 48px;
+ }
+ border-bottom: 2px solid black;
+ }
+ }
+
+ &__lang-auth {
+ display: flex;
+ align-items: center;
+ gap: 25px;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .nav {
+ padding: 0 30px;
+
+ &__pages {
+ display: none;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .nav {
+ height: 72px;
+ gap: 10px;
+ &__logo {
+ flex: 1;
+ }
+
+ &__pages {
+ display: none;
+ }
+
+ &__profile,
+ &__sign-in {
+ display: none;
+ }
+
+ &__menu {
+ display: flex;
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .nav {
+ padding: 16px;
+ }
+}
diff --git a/src/Widgets/general/Navbar/Navbar.tsx b/src/Widgets/general/Navbar/Navbar.tsx
new file mode 100644
index 0000000..07d7347
--- /dev/null
+++ b/src/Widgets/general/Navbar/Navbar.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import "./Navbar.scss";
+import Link from "next/link";
+import logo from "./assets/logo.svg";
+import Image from "next/image";
+import menu_icon from "./icons/menu-icon.svg";
+import { usePathname } from "next/navigation";
+import NavMenu from "@/Features/NavMenu/NavMenu";
+import { pages } from "@/Shared/variables/pages";
+import ChangeLanguage from "@/Entities/ChangeLanguage/ChangeLanguage";
+import NavAuthBtn from "@/Entities/NavAuthBtn/NavAuthBtn";
+
+const Navbar = () => {
+ const pathname = usePathname();
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/src/Widgets/general/Navbar/assets/logo.svg b/src/Widgets/general/Navbar/assets/logo.svg
new file mode 100644
index 0000000..96eeab2
--- /dev/null
+++ b/src/Widgets/general/Navbar/assets/logo.svg
@@ -0,0 +1,18 @@
+
diff --git a/src/Widgets/home/Header/Header.scss b/src/Widgets/home/Header/Header.scss
new file mode 100644
index 0000000..7eccb1d
--- /dev/null
+++ b/src/Widgets/home/Header/Header.scss
@@ -0,0 +1,99 @@
+.header {
+ height: 386px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ &__background {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ &__text {
+ padding: 0px 90px;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 26px;
+ color: white;
+ text-wrap: balance;
+ h1 {
+ font-size: 52px;
+ }
+
+ p {
+ font-size: 24px;
+ font-weight: 300;
+ }
+ }
+
+ &__report {
+ padding: 10px 20px;
+ background-color: #fff;
+ position: absolute;
+ bottom: -50px;
+ z-index: 10;
+ width: 480px;
+ height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 33px;
+
+ font-size: 20px;
+ font-weight: 500;
+
+ border-radius: 13px;
+ box-shadow: 0px 12px 16px 0px rgba(58, 69, 75, 0.1),
+ 0px 4px 6px 0px rgba(58, 69, 75, 0.15);
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .header {
+ &__text {
+ padding: 0px 30px;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .header {
+ &__text {
+ h1 {
+ font-size: 40px;
+ }
+
+ p {
+ font-size: 20px;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .header {
+ height: 250px;
+ &__text {
+ justify-content: flex-start;
+ gap: 10px;
+ padding: 40px 16px 0 16px;
+ h1 {
+ font-size: 24px;
+ }
+ }
+
+ &__report {
+ width: 98%;
+ }
+ }
+}
diff --git a/src/Widgets/home/Header/Header.tsx b/src/Widgets/home/Header/Header.tsx
new file mode 100644
index 0000000..a7bddd3
--- /dev/null
+++ b/src/Widgets/home/Header/Header.tsx
@@ -0,0 +1,33 @@
+import "./Header.scss";
+import Image from "next/image";
+import background from "./assets/background.jpg";
+import arrow_icon from "./icons/arrow-right-icon.svg";
+import Link from "next/link";
+
+const Header = () => {
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/src/Widgets/home/Header/assets/background.jpg b/src/Widgets/home/Header/assets/background.jpg
new file mode 100644
index 0000000..195496e
Binary files /dev/null and b/src/Widgets/home/Header/assets/background.jpg differ
diff --git a/src/Widgets/home/Header/icons/arrow-right-icon.svg b/src/Widgets/home/Header/icons/arrow-right-icon.svg
new file mode 100644
index 0000000..1879501
--- /dev/null
+++ b/src/Widgets/home/Header/icons/arrow-right-icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/Widgets/home/MapSection/MapSection.scss b/src/Widgets/home/MapSection/MapSection.scss
new file mode 100644
index 0000000..ad901a6
--- /dev/null
+++ b/src/Widgets/home/MapSection/MapSection.scss
@@ -0,0 +1,72 @@
+@import "../../../Shared/variables.scss";
+
+.map-section {
+ padding: 0px 90px;
+ width: 100%;
+ margin-top: 110px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+
+ text-align: center;
+
+ &__filters {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 23px;
+ margin-bottom: 30px;
+ }
+
+ &__switch {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+
+ h4 {
+ font-size: 18px;
+ font-weight: 400;
+ }
+ }
+
+ &__map {
+ height: 580px;
+ width: 100%;
+ border-radius: 10px;
+
+ object-fit: cover;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .map-section {
+ padding: 0px 30px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .map-section {
+ margin-top: 85px;
+
+ &__map {
+ height: 416px;
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .map-section {
+ padding: 0px 16px;
+ margin-top: 70px;
+
+ &__filters {
+ width: 100%;
+ grid-template-columns: 1fr;
+ margin-bottom: 0;
+ }
+
+ &__map {
+ height: 370px;
+ }
+ }
+}
diff --git a/src/Widgets/home/MapSection/MapSection.tsx b/src/Widgets/home/MapSection/MapSection.tsx
new file mode 100644
index 0000000..083e361
--- /dev/null
+++ b/src/Widgets/home/MapSection/MapSection.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+import "./MapSection.scss";
+import search_icon from "./icons/search-icon.svg";
+import Switch from "@/Entities/Switch/Switch";
+import map_image from "./assets/map.jpg";
+import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
+import SearchBar from "@/Features/SearchBar/SearchBar";
+
+const MapSection = () => {
+ return (
+
+
+ Карта дорог
+
+
+
+
+
+
+
+
Разбитая дорога
+
+
+
+
В планах ремонта
+
+
+
+
Очаг аварийности
+
+
+
+
Локальный дефект исправлен
+
+
+
+
Локальный дефект
+
+
+
+
Отремонтировано
+
+
+
+
+
+ );
+};
+
+export default MapSection;
diff --git a/src/Widgets/home/MapSection/assets/map.jpg b/src/Widgets/home/MapSection/assets/map.jpg
new file mode 100644
index 0000000..2fbfd02
Binary files /dev/null and b/src/Widgets/home/MapSection/assets/map.jpg differ
diff --git a/src/Widgets/home/NewsSection/NewsSection.scss b/src/Widgets/home/NewsSection/NewsSection.scss
new file mode 100644
index 0000000..46ff8c9
--- /dev/null
+++ b/src/Widgets/home/NewsSection/NewsSection.scss
@@ -0,0 +1,105 @@
+@import "../../../Shared/variables.scss";
+
+.news-section {
+ margin-top: 110px;
+ padding: 0 90px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+ &__list {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 30px;
+ }
+
+ .news-card {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ img {
+ width: 100%;
+ height: 160px;
+ object-fit: cover;
+ }
+
+ &__date {
+ width: fit-content;
+ padding: 8px 12px;
+ background-color: $light-blue;
+ font-size: 14px;
+ font-weight: 500;
+ color: white;
+ border-radius: 3px;
+ }
+
+ &__text {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ h4 {
+ font-size: 24px;
+ font-weight: 500;
+ }
+
+ p {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 150%;
+ }
+ }
+
+ &__more-btn {
+ width: fit-content;
+ padding: 8px 12px;
+ border: 2px solid #3b3b3b;
+ border-radius: 3px;
+ color: #3b3b3b;
+ font-weight: 600;
+ }
+ }
+
+ &__read-more-btn {
+ width: fit-content;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-self: flex-end;
+ gap: 10px;
+ font-size: 20px;
+ font-weight: 600;
+ color: $light-blue;
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .news-section {
+ padding: 0px 30px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .news-section {
+ margin-top: 80px;
+
+ &__list {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ &__read-more-btn {
+ width: 100%;
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .news-section {
+ padding: 0px 16px;
+ margin-top: 70px;
+
+ &__list {
+ grid-template-columns: 1fr;
+ }
+ }
+}
diff --git a/src/Widgets/home/NewsSection/NewsSection.tsx b/src/Widgets/home/NewsSection/NewsSection.tsx
new file mode 100644
index 0000000..382350f
--- /dev/null
+++ b/src/Widgets/home/NewsSection/NewsSection.tsx
@@ -0,0 +1,41 @@
+import "./NewsSection.scss";
+import Image from "next/image";
+import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
+import image from "./assets/image.jpg";
+import arrow_icon from "./icons/arrow-right-icon.svg";
+import Link from "next/link";
+
+const NewsSection = () => {
+ return (
+
+
Новости
+
+
+ {[0, 1, 2, 3].map((card) => (
+ -
+
+
+
+
23/09/2023
+
+ Short title of the card describing the main content
+
+
+ Short paragraph description of the article, outlining
+ main story and focus.
+
+
+
+
+
+ ))}
+
+
+ Читать
+
+
+
+ );
+};
+
+export default NewsSection;
diff --git a/src/Widgets/home/NewsSection/assets/image.jpg b/src/Widgets/home/NewsSection/assets/image.jpg
new file mode 100644
index 0000000..6b2b6d4
Binary files /dev/null and b/src/Widgets/home/NewsSection/assets/image.jpg differ
diff --git a/src/Widgets/home/NewsSection/icons/arrow-right-icon.svg b/src/Widgets/home/NewsSection/icons/arrow-right-icon.svg
new file mode 100644
index 0000000..d4df0c7
--- /dev/null
+++ b/src/Widgets/home/NewsSection/icons/arrow-right-icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/Widgets/home/RatingSection/RatingSection.scss b/src/Widgets/home/RatingSection/RatingSection.scss
new file mode 100644
index 0000000..2bfc29c
--- /dev/null
+++ b/src/Widgets/home/RatingSection/RatingSection.scss
@@ -0,0 +1,19 @@
+.rating-section {
+ margin-top: 110px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 30px;
+}
+
+@media screen and (max-width: 768px) {
+ .rating-section {
+ margin-top: 80px;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .rating-section {
+ margin-top: 70px;
+ }
+}
diff --git a/src/Widgets/home/RatingSection/RatingSection.tsx b/src/Widgets/home/RatingSection/RatingSection.tsx
new file mode 100644
index 0000000..7a095c9
--- /dev/null
+++ b/src/Widgets/home/RatingSection/RatingSection.tsx
@@ -0,0 +1,16 @@
+import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
+import "./RatingSection.scss";
+import SearchBar from "@/Features/SearchBar/SearchBar";
+
+const RatingSection = () => {
+ return (
+
+
+ Рейтинг
+
+
+
+ );
+};
+
+export default RatingSection;
diff --git a/src/Widgets/home/StatisticsSection/StatisticsSection.scss b/src/Widgets/home/StatisticsSection/StatisticsSection.scss
new file mode 100644
index 0000000..b766a61
--- /dev/null
+++ b/src/Widgets/home/StatisticsSection/StatisticsSection.scss
@@ -0,0 +1,55 @@
+@import "../../../Shared/variables.scss";
+
+.statistics-section {
+ margin-top: 128px;
+ padding: 0px 90px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 30px;
+
+ &__item {
+ padding: 20px;
+ min-height: 128px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 20px;
+ border-radius: 10px;
+ border: 1px solid #d4d4d4;
+
+ h4 {
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ p {
+ font-size: 24px;
+ font-weight: 700;
+ color: $light-blue;
+ }
+ }
+}
+
+@media screen and (max-width: 1024px) {
+ .statistics-section {
+ padding: 0 30px;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .statistics-section {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 550px) {
+ .statistics-section {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ padding: 0 16px;
+
+ &__item {
+ padding: 20px;
+ }
+ }
+}
diff --git a/src/Widgets/home/StatisticsSection/StatisticsSection.tsx b/src/Widgets/home/StatisticsSection/StatisticsSection.tsx
new file mode 100644
index 0000000..449d706
--- /dev/null
+++ b/src/Widgets/home/StatisticsSection/StatisticsSection.tsx
@@ -0,0 +1,28 @@
+import "./StatisticsSection.scss";
+
+const StatisticsSection = () => {
+ const stats = [
+ { id: 1, statName: "Разбитых дорог", statCount: 231 },
+ { id: 2, statName: "Очагов аварийности", statCount: 31 },
+ { id: 3, statName: "Локальных дефектов", statCount: 211 },
+ { id: 4, statName: "В планах ремонта", statCount: 101 },
+ { id: 5, statName: "Отремонтировано", statCount: 14 },
+ {
+ id: 6,
+ statName: "Локальных дефектов исправлено",
+ statCount: 12,
+ },
+ ];
+ return (
+
+ {stats.map((stat) => (
+
+
{stat.statName}
+
{stat.statCount}
+
+ ))}
+
+ );
+};
+
+export default StatisticsSection;
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index f4bd77c..0000000
--- a/src/app/globals.css
+++ /dev/null
@@ -1,107 +0,0 @@
-: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;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
-
- --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;
- }
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
deleted file mode 100644
index 3314e47..0000000
--- a/src/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
-};
-
-export default function RootLayout({
- children,
-}: Readonly<{
- children: React.ReactNode;
-}>) {
- return (
-
- {children}
-
- );
-}
diff --git a/src/app/page.module.css b/src/app/page.module.css
deleted file mode 100644
index 5c4b1e6..0000000
--- a/src/app/page.module.css
+++ /dev/null
@@ -1,230 +0,0 @@
-.main {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- padding: 6rem;
- min-height: 100vh;
-}
-
-.description {
- display: inherit;
- justify-content: inherit;
- align-items: inherit;
- font-size: 0.85rem;
- max-width: var(--max-width);
- width: 100%;
- z-index: 2;
- font-family: var(--font-mono);
-}
-
-.description a {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
-}
-
-.description p {
- position: relative;
- margin: 0;
- padding: 1rem;
- background-color: rgba(var(--callout-rgb), 0.5);
- border: 1px solid rgba(var(--callout-border-rgb), 0.3);
- border-radius: var(--border-radius);
-}
-
-.code {
- font-weight: 700;
- font-family: var(--font-mono);
-}
-
-.grid {
- display: grid;
- grid-template-columns: repeat(4, minmax(25%, auto));
- max-width: 100%;
- width: var(--max-width);
-}
-
-.card {
- padding: 1rem 1.2rem;
- border-radius: var(--border-radius);
- background: rgba(var(--card-rgb), 0);
- border: 1px solid rgba(var(--card-border-rgb), 0);
- transition: background 200ms, border 200ms;
-}
-
-.card span {
- display: inline-block;
- transition: transform 200ms;
-}
-
-.card h2 {
- font-weight: 600;
- margin-bottom: 0.7rem;
-}
-
-.card p {
- margin: 0;
- opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.5;
- max-width: 30ch;
- text-wrap: balance;
-}
-
-.center {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- padding: 4rem 0;
-}
-
-.center::before {
- background: var(--secondary-glow);
- border-radius: 50%;
- width: 480px;
- height: 360px;
- margin-left: -400px;
-}
-
-.center::after {
- background: var(--primary-glow);
- width: 240px;
- height: 180px;
- z-index: -1;
-}
-
-.center::before,
-.center::after {
- content: "";
- left: 50%;
- position: absolute;
- filter: blur(45px);
- transform: translateZ(0);
-}
-
-.logo {
- position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- .card:hover {
- background: rgba(var(--card-rgb), 0.1);
- border: 1px solid rgba(var(--card-border-rgb), 0.15);
- }
-
- .card:hover span {
- transform: translateX(4px);
- }
-}
-
-@media (prefers-reduced-motion) {
- .card:hover span {
- transform: none;
- }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
- .content {
- padding: 4rem;
- }
-
- .grid {
- grid-template-columns: 1fr;
- margin-bottom: 120px;
- max-width: 320px;
- text-align: center;
- }
-
- .card {
- padding: 1rem 2.5rem;
- }
-
- .card h2 {
- margin-bottom: 0.5rem;
- }
-
- .center {
- padding: 8rem 0 6rem;
- }
-
- .center::before {
- transform: none;
- height: 300px;
- }
-
- .description {
- font-size: 0.8rem;
- }
-
- .description a {
- padding: 1rem;
- }
-
- .description p,
- .description div {
- display: flex;
- justify-content: center;
- position: fixed;
- width: 100%;
- }
-
- .description p {
- align-items: center;
- inset: 0 0 auto;
- padding: 2rem 1rem 1.4rem;
- border-radius: 0;
- border: none;
- border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
- background: linear-gradient(
- to bottom,
- rgba(var(--background-start-rgb), 1),
- rgba(var(--callout-rgb), 0.5)
- );
- background-clip: padding-box;
- backdrop-filter: blur(24px);
- }
-
- .description div {
- align-items: flex-end;
- pointer-events: none;
- inset: auto 0 0;
- padding: 2rem;
- height: 200px;
- background: linear-gradient(
- to bottom,
- transparent 0%,
- rgb(var(--background-end-rgb)) 40%
- );
- z-index: 1;
- }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
- .grid {
- grid-template-columns: repeat(2, 50%);
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .vercelLogo {
- filter: invert(1);
- }
-
- .logo {
- filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
- }
-}
-
-@keyframes rotate {
- from {
- transform: rotate(360deg);
- }
- to {
- transform: rotate(0deg);
- }
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index d2c63a4..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-
-export default function Home() {
- return (
-
-
-
- Get started by editing
- src/app/page.tsx
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/yarn.lock b/yarn.lock
index b596a00..00e3b50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -303,6 +303,14 @@ ansi-styles@^6.1.0:
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+anymatch@~3.1.2:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+ integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -428,6 +436,11 @@ balanced-match@^1.0.0:
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+binary-extensions@^2.0.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+ integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -443,7 +456,7 @@ brace-expansion@^2.0.1:
dependencies:
balanced-match "^1.0.0"
-braces@^3.0.2:
+braces@^3.0.2, braces@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -484,6 +497,21 @@ chalk@^4.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
+"chokidar@>=3.0.0 <4.0.0":
+ version "3.5.3"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+ integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+ dependencies:
+ anymatch "~3.1.2"
+ braces "~3.0.2"
+ glob-parent "~5.1.2"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.6.0"
+ optionalDependencies:
+ fsevents "~2.3.2"
+
client-only@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -1001,6 +1029,11 @@ fs.realpath@^1.0.0:
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+fsevents@~2.3.2:
+ version "2.3.3"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+ integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
function-bind@^1.1.1, function-bind@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
@@ -1046,7 +1079,7 @@ get-tsconfig@^4.5.0:
dependencies:
resolve-pkg-maps "^1.0.0"
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -1172,6 +1205,11 @@ ignore@^5.2.0:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
+immutable@^4.0.0:
+ version "4.3.4"
+ resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+ integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -1230,6 +1268,13 @@ is-bigint@^1.0.1:
dependencies:
has-bigints "^1.0.1"
+is-binary-path@~2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+ integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+ dependencies:
+ binary-extensions "^2.0.0"
+
is-boolean-object@^1.1.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -1281,7 +1326,7 @@ is-generator-function@^1.0.10:
dependencies:
has-tostringtag "^1.0.0"
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1588,6 +1633,11 @@ next@14.1.0:
"@next/swc-win32-ia32-msvc" "14.1.0"
"@next/swc-win32-x64-msvc" "14.1.0"
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+ integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1736,7 +1786,7 @@ picocolors@^1.0.0:
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -1794,6 +1844,13 @@ react@^18:
dependencies:
loose-envify "^1.1.0"
+readdirp@~3.6.0:
+ version "3.6.0"
+ resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+ integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+ dependencies:
+ picomatch "^2.2.1"
+
reflect.getprototypeof@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
@@ -1886,6 +1943,15 @@ safe-regex-test@^1.0.0:
get-intrinsic "^1.2.2"
is-regex "^1.1.4"
+sass@^1.70.0:
+ version "1.70.0"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75"
+ integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==
+ dependencies:
+ chokidar ">=3.0.0 <4.0.0"
+ immutable "^4.0.0"
+ source-map-js ">=0.6.2 <2.0.0"
+
scheduler@^0.23.0:
version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -1956,7 +2022,7 @@ slash@^3.0.0:
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -1967,6 +2033,7 @@ streamsearch@^1.1.0:
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+ name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==