first commit, made homepage

This commit is contained in:
Alibek 2024-01-19 19:46:01 +06:00
parent 9fca4a7518
commit 3a04c6c1db
73 changed files with 1578 additions and 462 deletions

3
app/about-us/page.tsx Normal file
View File

@ -0,0 +1,3 @@
import AboutUsPage from "@/Pages/AboutUsPage/AboutUsPage";
export default AboutUsPage;

9
app/layout.tsx Normal file
View File

@ -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;

3
app/news/page.tsx Normal file
View File

@ -0,0 +1,3 @@
import NewsPage from "@/Pages/NewsPage/NewsPage";
export default NewsPage;

3
app/page.tsx Normal file
View File

@ -0,0 +1,3 @@
import Homepage from "@/Pages/Homepage/Homepage";
export default Homepage;

7
app/profile/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from "react";
const page = () => {
return <div>page</div>;
};
export default page;

7
app/sign-in/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from "react";
const page = () => {
return <div>page</div>;
};
export default page;

7
app/sign-up/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from "react";
const page = () => {
return <div>page</div>;
};
export default page;

3
app/statistics/page.tsx Normal file
View File

@ -0,0 +1,3 @@
import StatisticsPage from "@/Pages/StatisticsPage/StatisticsPage";
export default StatisticsPage;

3
app/volunteers/page.tsx Normal file
View File

@ -0,0 +1,3 @@
import VolunteersPage from "@/Pages/VolunteersPage/VolunteersPage";
export default VolunteersPage;

View File

@ -9,16 +9,17 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"next": "14.1.0" "sass": "^1.70.0"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.1.0" "eslint-config-next": "14.1.0",
"typescript": "^5"
} }
} }

22
src/App/App.tsx Normal file
View File

@ -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 (
<html lang="en">
<body className={montserrat.className}>
<Navbar />
{children}
<Footer />
</body>
</html>
);
}

28
src/App/globals.scss Normal file
View File

@ -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;
}

View File

@ -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;
}
}
}

View File

@ -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<string>("ru");
const [popUp, setPopUp] = useState<boolean>(false);
const languages = [
{ id: "ru", language: "Русский" },
{ id: "kg", language: "Кыргыз" },
{ id: "en", language: "English" },
];
return (
<div className="change-language">
<button
onClick={() => setPopUp((prev) => !prev)}
className="change-language__btn"
>
<Image src={lang_icon} alt="Language Icon" />
<Image src={chevron_icon} alt="Chevron Down Icon" />
</button>
{popUp && (
<ul className="change-language__popUp">
{languages.map((language) => (
<li
key={language.id}
className={
lang === language.id
? "change-language__item_active"
: "change-language__item"
}
>
<button onClick={() => setLang(language.id)}>
{language.language}
{language.id === lang ? (
<Image src={check_icon} alt="Check Icon" />
) : null}
</button>
</li>
))}
</ul>
)}
</div>
);
};
export default ChangeLanguage;

View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="check">
<path id="Icon" d="M16.6663 5L7.49967 14.1667L3.33301 10" stroke="#3695D8" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 270 B

View File

@ -0,0 +1,11 @@
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="IMAGE" clip-path="url(#clip0_1290_49928)">
<path id="Vector" d="M0.246139 1.97381C-0.0820464 1.63666 -0.0820464 1.09002 0.246139 0.752867C0.574324 0.415711 1.10642 0.415711 1.4346 0.752867L5.59423 5.02619C5.92241 5.36334 5.92241 5.90998 5.59423 6.24713C5.26604 6.58429 4.73395 6.58429 4.40576 6.24713L0.246139 1.97381Z" fill="#66727F"/>
<path id="Vector_2" d="M8.56495 0.752867C8.89313 0.415711 9.42523 0.415711 9.75341 0.752867C10.0816 1.09002 10.0816 1.63666 9.75341 1.97382L5.59378 6.247C5.26559 6.58416 4.7335 6.58416 4.40531 6.247C4.07713 5.90985 4.07714 5.36334 4.40532 5.02619L8.56495 0.752867Z" fill="#66727F"/>
</g>
<defs>
<clipPath id="clip0_1290_49928">
<rect width="10" height="6" fill="white" transform="translate(0 0.5)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 865 B

View File

@ -0,0 +1,7 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="globe">
<path id="Vector" d="M12 22.5C17.5228 22.5 22 18.0228 22 12.5C22 6.97715 17.5228 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0228 6.47715 22.5 12 22.5Z" stroke="#66727F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M2 12.5H22" stroke="#66727F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M12 2.5C14.5013 5.23835 15.9228 8.79203 16 12.5C15.9228 16.208 14.5013 19.7616 12 22.5C9.49872 19.7616 8.07725 16.208 8 12.5C8.07725 8.79203 9.49872 5.23835 12 2.5Z" stroke="#66727F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 750 B

View File

@ -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;
}
}

View File

@ -0,0 +1,18 @@
import Link from "next/link";
import "./NavAuthBtn.scss";
const NavAuthBtn = () => {
const auth = false;
return auth ? (
<Link href="/profile" className="nav-profile">
Профиль
</Link>
) : (
<Link href="/sign-in" className="nav-sign-in">
Войти
</Link>
);
};
export default NavAuthBtn;

View File

@ -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;
}

View File

@ -0,0 +1,33 @@
"use client";
import "./Switch.scss";
import { useState } from "react";
interface ISwitch {
color?: string;
onClick?: () => void;
}
const Switch: React.FC<ISwitch> = ({ color, onClick }) => {
const [toggle, setToggle] = useState(false);
return (
<button
style={{
backgroundColor: !toggle
? "#32303A"
: color
? color
: "#e64452",
}}
onClick={() => {
setToggle((prev) => !prev);
onClick && onClick();
}}
className={`switch ${toggle ? "switch-active" : ""}`}
>
<div className="switch__thumb"></div>
</button>
);
};
export default Switch;

View File

@ -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;
}
}

View File

@ -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<boolean>(false);
const auth = false;
const pathname = usePathname();
return (
<>
<button
className="nav-menu-btn"
onClick={() => setMenu((prev) => !prev)}
>
{menu ? (
<Image src={cross_icon} alt="Cross Icon" />
) : (
<Image src={menu_icon} alt="Menu Icon" />
)}
</button>
{menu && (
<div className="nav-menu">
<ul className="nav-menu__pages">
{pages.map((page) => (
<li
key={page.id}
className={
page.path === pathname
? "nav-menu__pages-item_active"
: "nav-menu__pages-item"
}
>
<Link href={page.path}>{page.page}</Link>
</li>
))}
{auth ? (
<li
className={
pathname === "/sign-in"
? "nav-menu__pages-item_active"
: "nav-menu__pages-item"
}
>
<Link href="/sign-in">Войти</Link>
</li>
) : (
<li
className={
pathname === "/profile"
? "nav-menu__pages-item_active"
: "nav-menu__pages-item"
}
>
<Link href="/profile">Профиль</Link>
</li>
)}
</ul>
</div>
)}
</>
);
};
export default NavMenu;

View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="x">
<path id="Vector" d="M18 6L6 18" stroke="#32303A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M6 6L18 18" stroke="#32303A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 353 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="menu">
<path id="Icon" d="M3 12H21M3 6H21M3 18H21" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 249 B

View File

@ -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%;
}
}

View File

@ -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<ISearchBar> = ({
placeholder,
}: ISearchBar) => {
return (
<div className="search-bar">
<div className="search-bar__input">
<Image src={search_icon} alt="Search Icon" />
<input type="text" placeholder={placeholder} />
</div>
<button>Поиск</button>
</div>
);
};
export default SearchBar;

View File

@ -0,0 +1,6 @@
<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="search">
<path id="Vector" d="M11 20.2796C15.4183 20.2796 19 16.5547 19 11.9596C19 7.36464 15.4183 3.63965 11 3.63965C6.58172 3.63965 3 7.36464 3 11.9596C3 16.5547 6.58172 20.2796 11 20.2796Z" stroke="#C5C6C5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M20.9999 22.3599L16.6499 17.8359" stroke="#C5C6C5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 531 B

View File

View File

@ -0,0 +1,7 @@
import "./AboutUsPage.scss";
const AboutUsPage = () => {
return <div>AboutUsPage</div>;
};
export default AboutUsPage;

View File

@ -0,0 +1,9 @@
.home {
padding-top: 78px;
}
@media screen and (max-width: 768px) {
.home {
padding-top: 72px;
}
}

View File

@ -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 (
<div className="home">
<Header />
<StatisticsSection />
<MapSection />
<RatingSection />
<NewsSection />
</div>
);
};
export default Homepage;

View File

View File

@ -0,0 +1,7 @@
import "./NewsPage.scss";
const NewsPage = () => {
return <div>NewsPage</div>;
};
export default NewsPage;

View File

@ -0,0 +1,7 @@
import "./StatisticsPage.scss";
const StatisticsPage = () => {
return <div>StatisticsPage</div>;
};
export default StatisticsPage;

View File

@ -0,0 +1,7 @@
import "./VolunteersPage.scss";
const VolunteersPage = () => {
return <div>VolunteersPage</div>;
};
export default VolunteersPage;

View File

@ -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;
}
}
}

View File

@ -0,0 +1,20 @@
import "./SectionHeader.scss";
interface ISectionHeader {
children: React.ReactNode;
description?: string;
}
const SectionHeader: React.FC<ISectionHeader> = ({
children,
description,
}: ISectionHeader) => {
return (
<div className="section-header">
<h3>{children}</h3>
<p>{description}</p>
</div>
);
};
export default SectionHeader;

View File

@ -0,0 +1 @@
$light-blue: #489fe1;

View File

@ -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" },
];

View File

@ -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;
}
}

View File

@ -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 (
<footer className="footer">
<Image src={logo} alt="Logo" className="footer__logo" />
<div className="footer__links">
<h4>Навигация</h4>
<ul>
{pages.map((page) => (
<li key={page.id}>
<Link href={page.path}>{page.page}</Link>
</li>
))}
</ul>
</div>
<div className="footer__contacts">
<h4>Контакты</h4>
<ul>
<li>namename@gmail.com</li>
<li>+09646895467</li>
</ul>
<div className="footer__nets">
{[youtube, facebook, instagram].map((net) => (
<Image src={net} alt="Net Icon" key={net} />
))}
</div>
</div>
<div className="footer__app">
<h4>Скачивай наше приложение</h4>
<Image src={appStore} alt="App Store" />
</div>
</footer>
);
};
export default Footer;

View File

@ -0,0 +1,45 @@
<svg width="120" height="40" viewBox="0 0 120 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="App Store - Filled">
<g id="Group">
<g id="Group_2">
<path id="Vector" d="M110.135 0.00013H9.53468C9.16798 0.00013 8.80568 0.00013 8.43995 0.00213C8.1338 0.00413 7.83009 0.00994 7.521 0.01483C6.84951 0.0227318 6.17961 0.0818063 5.5171 0.19154C4.85552 0.303663 4.21467 0.515046 3.61622 0.81854C3.0185 1.1246 2.47235 1.5223 1.99757 1.9972C1.5203 2.47077 1.12246 3.01815 0.81935 3.61829C0.5154 4.21724 0.304641 4.85907 0.19435 5.52161C0.0830109 6.18332 0.0230984 6.85265 0.01515 7.52361C0.00587 7.83021 0.00489 8.13783 0 8.44447V31.5587C0.00489 31.8692 0.00587 32.17 0.01515 32.4806C0.0231008 33.1516 0.0830134 33.8209 0.19435 34.4825C0.304336 35.1455 0.515108 35.7877 0.81935 36.3868C1.12233 36.985 1.52022 37.5302 1.99757 38.0011C2.47054 38.4781 3.01705 38.8761 3.61622 39.1798C4.21467 39.4841 4.85545 39.6968 5.5171 39.8106C6.17972 39.9195 6.84956 39.9786 7.521 39.9874C7.83009 39.9942 8.1338 39.9981 8.43995 39.9981C8.80567 40.0001 9.168 40.0001 9.53468 40.0001H110.135C110.494 40.0001 110.859 40.0001 111.219 39.9981C111.523 39.9981 111.836 39.9942 112.141 39.9874C112.811 39.9791 113.479 39.92 114.141 39.8106C114.804 39.696 115.448 39.4834 116.049 39.1798C116.647 38.8759 117.193 38.478 117.666 38.0011C118.142 37.5284 118.541 36.9836 118.848 36.3868C119.15 35.7872 119.358 35.1451 119.467 34.4825C119.578 33.8208 119.64 33.1516 119.652 32.4806C119.656 32.17 119.656 31.8692 119.656 31.5587C119.664 31.1954 119.664 30.8341 119.664 30.4649V9.53626C119.664 9.17005 119.664 8.80677 119.656 8.44447C119.656 8.13783 119.656 7.83021 119.652 7.52357C119.64 6.85255 119.578 6.18337 119.467 5.52157C119.358 4.85941 119.149 4.21763 118.848 3.61825C118.23 2.41533 117.252 1.43616 116.049 0.81845C115.448 0.515697 114.804 0.30437 114.141 0.19145C113.48 0.0812328 112.811 0.0221378 112.141 0.01469C111.836 0.00981 111.523 0.00395 111.219 0.002C110.859 0 110.494 0 110.135 0V0.00013Z" fill="#A6A6A6"/>
<path id="Vector_2" d="M8.44487 39.125C8.14019 39.125 7.84287 39.1211 7.54058 39.1143C6.91436 39.1061 6.2896 39.0516 5.67144 38.9512C5.09503 38.8519 4.53664 38.6673 4.0147 38.4033C3.49754 38.1415 3.02585 37.7983 2.6177 37.3867C2.20364 36.98 1.85891 36.5082 1.59719 35.9902C1.33258 35.4688 1.14945 34.9099 1.05419 34.333C0.951311 33.7131 0.895651 33.0863 0.887687 32.458C0.881347 32.2471 0.873047 31.5449 0.873047 31.5449V8.44434C0.873047 8.44434 0.881887 7.75293 0.887737 7.5498C0.895363 6.92248 0.950699 6.29665 1.05327 5.67773C1.14871 5.09925 1.33197 4.53875 1.59673 4.01563C1.85749 3.49794 2.2003 3.02586 2.61187 2.61768C3.02297 2.20562 3.49617 1.8606 4.01421 1.59521C4.53495 1.33209 5.09228 1.14873 5.66753 1.05127C6.28772 0.949836 6.91465 0.894996 7.54304 0.88721L8.44536 0.875H111.214L112.127 0.8877C112.75 0.895099 113.371 0.94945 113.985 1.05029C114.566 1.14898 115.13 1.33362 115.656 1.59814C116.694 2.13299 117.539 2.97916 118.071 4.01807C118.332 4.53758 118.512 5.09351 118.607 5.66699C118.71 6.29099 118.768 6.92174 118.78 7.5542C118.783 7.8374 118.783 8.1416 118.783 8.44434C118.791 8.81934 118.791 9.17627 118.791 9.53613V30.4648C118.791 30.8281 118.791 31.1826 118.783 31.54C118.783 31.8652 118.783 32.1631 118.779 32.4697C118.768 33.0909 118.711 33.7104 118.608 34.3232C118.515 34.9043 118.333 35.4675 118.068 35.9932C117.805 36.5056 117.462 36.9733 117.053 37.3789C116.644 37.7927 116.172 38.1379 115.653 38.4014C115.128 38.6674 114.566 38.8527 113.985 38.9512C113.367 39.0522 112.742 39.1067 112.116 39.1143C111.823 39.1211 111.517 39.125 111.219 39.125L110.135 39.127L8.44487 39.125Z" fill="black"/>
</g>
<g id="&#60;Group&#62;">
<g id="&#60;Group&#62;_2">
<g id="&#60;Group&#62;_3">
<path id="&#60;Path&#62;" d="M24.769 20.3013C24.7797 19.4666 25.0014 18.6483 25.4135 17.9223C25.8255 17.1964 26.4145 16.5864 27.1256 16.1492C26.6738 15.5041 26.0779 14.9731 25.385 14.5986C24.6922 14.224 23.9216 14.0162 23.1344 13.9916C21.4552 13.8153 19.8272 14.9964 18.9715 14.9964C18.0992 14.9964 16.7817 14.0091 15.363 14.0383C14.4453 14.0679 13.551 14.3348 12.7671 14.8128C11.9832 15.2909 11.3365 15.9638 10.8901 16.7661C8.95607 20.1145 10.3987 25.0356 12.2513 27.7422C13.1782 29.0676 14.2615 30.548 15.6789 30.4955C17.066 30.438 17.584 29.611 19.2583 29.611C20.9171 29.611 21.4031 30.4955 22.8493 30.4621C24.3377 30.438 25.2754 29.1309 26.1698 27.793C26.8358 26.8486 27.3483 25.8049 27.6882 24.7005C26.8235 24.3347 26.0856 23.7226 25.5665 22.9403C25.0474 22.158 24.77 21.2402 24.769 20.3013Z" fill="white"/>
<path id="&#60;Path&#62;_2" d="M22.0376 12.2113C22.8491 11.2371 23.2489 9.98494 23.1521 8.7207C21.9123 8.85092 20.767 9.44348 19.9445 10.3803C19.5424 10.838 19.2344 11.3704 19.0381 11.9472C18.8419 12.524 18.7612 13.1337 18.8008 13.7417C19.4209 13.7481 20.0344 13.6137 20.5951 13.3486C21.1558 13.0835 21.649 12.6946 22.0376 12.2113Z" fill="white"/>
</g>
</g>
<g id="Group_3">
<path id="Vector_3" d="M42.3022 27.1397H37.5688L36.4321 30.4961H34.4272L38.9106 18.0781H40.9936L45.477 30.4961H43.438L42.3022 27.1397ZM38.0591 25.5908H41.8111L39.9615 20.1436H39.9097L38.0591 25.5908Z" fill="white"/>
<path id="Vector_4" d="M55.1597 25.9695C55.1597 28.7829 53.6538 30.5905 51.3814 30.5905C50.8057 30.6207 50.2332 30.4881 49.7294 30.2079C49.2256 29.9278 48.8109 29.5114 48.5327 29.0065H48.4897V33.4909H46.6313V21.4421H48.4302V22.948H48.4644C48.7553 22.4455 49.1771 22.0313 49.6847 21.7495C50.1923 21.4676 50.7669 21.3287 51.3472 21.3474C53.645 21.3474 55.1597 23.1638 55.1597 25.9695ZM53.2495 25.9695C53.2495 24.1365 52.3023 22.9314 50.857 22.9314C49.437 22.9314 48.482 24.1618 48.482 25.9695C48.482 27.7937 49.437 29.0154 50.857 29.0154C52.3023 29.0154 53.2495 27.8191 53.2495 25.9695Z" fill="white"/>
<path id="Vector_5" d="M65.1245 25.9694C65.1245 28.7829 63.6187 30.5905 61.3462 30.5905C60.7706 30.6206 60.1981 30.488 59.6943 30.2079C59.1905 29.9278 58.7758 29.5114 58.4976 29.0065H58.4546V33.4909H56.5962V21.4421H58.395V22.948H58.4292C58.7201 22.4455 59.1419 22.0313 59.6495 21.7495C60.1571 21.4676 60.7317 21.3287 61.312 21.3474C63.6099 21.3474 65.1245 23.1638 65.1245 25.9694ZM63.2144 25.9694C63.2144 24.1364 62.2671 22.9314 60.8218 22.9314C59.4019 22.9314 58.4468 24.1618 58.4468 25.9694C58.4468 27.7937 59.4019 29.0153 60.8218 29.0153C62.2671 29.0153 63.2144 27.8191 63.2144 25.9694H63.2144Z" fill="white"/>
<path id="Vector_6" d="M71.7105 27.0362C71.8482 28.2676 73.0445 29.0762 74.6792 29.0762C76.2456 29.0762 77.3726 28.2676 77.3726 27.1572C77.3726 26.1934 76.6929 25.6162 75.0835 25.2207L73.4742 24.833C71.1939 24.2822 70.1353 23.2158 70.1353 21.4854C70.1353 19.3428 72.0025 17.8711 74.6538 17.8711C77.2778 17.8711 79.0767 19.3428 79.1372 21.4854H77.2612C77.1489 20.2461 76.1245 19.4981 74.6274 19.4981C73.1304 19.4981 72.106 20.2549 72.106 21.3565C72.106 22.2344 72.7603 22.751 74.3608 23.1465L75.729 23.4824C78.2769 24.0849 79.3355 25.1084 79.3355 26.9248C79.3355 29.248 77.4849 30.7031 74.5415 30.7031C71.7876 30.7031 69.9282 29.2822 69.8081 27.0361L71.7105 27.0362Z" fill="white"/>
<path id="Vector_7" d="M83.3462 19.2998V21.4424H85.0679V22.9141H83.3462V27.9053C83.3462 28.6807 83.6909 29.042 84.4477 29.042C84.6521 29.0384 84.8562 29.0241 85.0591 28.999V30.4619C84.7188 30.5255 84.3729 30.5543 84.0268 30.5478C82.1938 30.5478 81.479 29.8593 81.479 28.1035V22.9141H80.1626V21.4424H81.479V19.2998H83.3462Z" fill="white"/>
<path id="Vector_8" d="M86.0649 25.9697C86.0649 23.1211 87.7427 21.3311 90.3589 21.3311C92.9839 21.3311 94.6538 23.1211 94.6538 25.9697C94.6538 28.8262 92.9927 30.6084 90.3589 30.6084C87.726 30.6084 86.0649 28.8262 86.0649 25.9697ZM92.7602 25.9697C92.7602 24.0156 91.8647 22.8623 90.3589 22.8623C88.853 22.8623 87.9585 24.0244 87.9585 25.9697C87.9585 27.9316 88.853 29.0762 90.3589 29.0762C91.8647 29.0762 92.7602 27.9316 92.7602 25.9697H92.7602Z" fill="white"/>
<path id="Vector_9" d="M96.186 21.442H97.9585V22.983H98.0015C98.1214 22.5017 98.4034 22.0764 98.8 21.7785C99.1966 21.4806 99.6836 21.3284 100.179 21.3473C100.393 21.3465 100.607 21.3698 100.816 21.4166V23.1549C100.546 23.0723 100.264 23.0343 99.981 23.0426C99.711 23.0316 99.4418 23.0792 99.192 23.1821C98.9421 23.285 98.7175 23.4408 98.5335 23.6386C98.3496 23.8365 98.2106 24.0719 98.1262 24.3286C98.0417 24.5852 98.0139 24.8571 98.0444 25.1256V30.4957H96.186L96.186 21.442Z" fill="white"/>
<path id="Vector_10" d="M109.384 27.8369C109.134 29.4805 107.534 30.6084 105.486 30.6084C102.852 30.6084 101.217 28.8437 101.217 26.0127C101.217 23.1729 102.861 21.3311 105.408 21.3311C107.913 21.3311 109.488 23.0518 109.488 25.7969V26.4336H103.093V26.5459C103.064 26.8791 103.105 27.2148 103.216 27.5306C103.326 27.8464 103.502 28.1352 103.732 28.3778C103.963 28.6203 104.242 28.8111 104.552 28.9374C104.861 29.0637 105.195 29.1226 105.529 29.1103C105.968 29.1515 106.409 29.0498 106.785 28.8203C107.162 28.5909 107.455 28.246 107.62 27.8369L109.384 27.8369ZM103.102 25.1348H107.628C107.645 24.8352 107.6 24.5354 107.495 24.2541C107.39 23.9729 107.229 23.7164 107.02 23.5006C106.812 23.2849 106.561 23.1145 106.283 23.0003C106.006 22.8861 105.708 22.8305 105.408 22.8369C105.105 22.8351 104.805 22.8933 104.525 23.008C104.245 23.1227 103.99 23.2918 103.776 23.5054C103.562 23.7191 103.392 23.973 103.276 24.2527C103.16 24.5323 103.101 24.8321 103.102 25.1348V25.1348Z" fill="white"/>
</g>
</g>
</g>
<g id="&#60;Group&#62;_4">
<g id="Group_4">
<path id="Vector_11" d="M37.8262 8.7304C38.2158 8.70244 38.6067 8.7613 38.9709 8.90274C39.335 9.04417 39.6632 9.26465 39.9317 9.54828C40.2003 9.8319 40.4026 10.1716 40.524 10.5429C40.6454 10.9141 40.6829 11.3077 40.6338 11.6952C40.6338 13.6015 39.6035 14.6972 37.8262 14.6972H35.6709V8.7304H37.8262ZM36.5976 13.8534H37.7226C38.0011 13.87 38.2797 13.8244 38.5382 13.7198C38.7967 13.6152 39.0287 13.4542 39.2172 13.2487C39.4057 13.0431 39.546 12.7981 39.6278 12.5315C39.7097 12.2648 39.7311 11.9833 39.6904 11.7074C39.7281 11.4326 39.7046 11.1528 39.6215 10.8881C39.5383 10.6235 39.3977 10.3805 39.2096 10.1765C39.0216 9.97261 38.7907 9.8128 38.5337 9.70856C38.2766 9.60433 37.9996 9.55824 37.7226 9.57361H36.5976V13.8534Z" fill="white"/>
<path id="Vector_12" d="M41.6805 12.4438C41.6521 12.1479 41.686 11.8493 41.7798 11.5672C41.8737 11.2852 42.0254 11.0258 42.2254 10.8059C42.4253 10.5859 42.669 10.4101 42.9409 10.2898C43.2127 10.1696 43.5067 10.1074 43.804 10.1074C44.1013 10.1074 44.3952 10.1696 44.6671 10.2898C44.939 10.4101 45.1827 10.5859 45.3826 10.8059C45.5825 11.0258 45.7343 11.2852 45.8281 11.5672C45.922 11.8493 45.9558 12.1479 45.9275 12.4438C45.9564 12.74 45.9229 13.039 45.8293 13.3215C45.7357 13.6041 45.5841 13.8639 45.3841 14.0843C45.1841 14.3047 44.9402 14.4808 44.6681 14.6014C44.3959 14.7219 44.1016 14.7842 43.804 14.7842C43.5064 14.7842 43.212 14.7219 42.9399 14.6014C42.6678 14.4808 42.4239 14.3047 42.2239 14.0843C42.0239 13.8639 41.8722 13.6041 41.7786 13.3215C41.6851 13.039 41.6516 12.74 41.6805 12.4438ZM45.0135 12.4438C45.0135 11.4677 44.575 10.8969 43.8055 10.8969C43.033 10.8969 42.5985 11.4677 42.5985 12.4438C42.5985 13.4277 43.033 13.9941 43.8055 13.9941C44.575 13.9941 45.0135 13.4238 45.0135 12.4438H45.0135Z" fill="white"/>
<path id="Vector_13" d="M51.5732 14.6973H50.6514L49.7207 11.3809H49.6504L48.7236 14.6973H47.8105L46.5693 10.1943H47.4707L48.2773 13.6303H48.3438L49.2695 10.1943H50.1221L51.0479 13.6303H51.1182L51.9209 10.1943H52.8096L51.5732 14.6973Z" fill="white"/>
<path id="Vector_14" d="M53.8535 10.1939H54.709V10.9092H54.7754C54.888 10.6523 55.0781 10.4369 55.3189 10.2931C55.5598 10.1493 55.8395 10.0842 56.1191 10.107C56.3382 10.0905 56.5582 10.1235 56.7628 10.2036C56.9674 10.2837 57.1514 10.4088 57.3011 10.5697C57.4508 10.7305 57.5623 10.923 57.6275 11.1328C57.6927 11.3426 57.7099 11.5644 57.6777 11.7818V14.6968H56.7891V12.0049C56.7891 11.2813 56.4746 10.9214 55.8174 10.9214C55.6686 10.9145 55.5201 10.9398 55.3821 10.9957C55.244 11.0515 55.1197 11.1365 55.0175 11.2449C54.9154 11.3533 54.8379 11.4825 54.7904 11.6236C54.7429 11.7647 54.7264 11.9145 54.7422 12.0625V14.6968H53.8535L53.8535 10.1939Z" fill="white"/>
<path id="Vector_15" d="M59.0938 8.43652H59.9824V14.6973H59.0938V8.43652Z" fill="white"/>
<path id="Vector_16" d="M61.2175 12.4439C61.1893 12.1479 61.2231 11.8494 61.317 11.5673C61.4109 11.2852 61.5626 11.0259 61.7626 10.8059C61.9626 10.5859 62.2063 10.4101 62.4782 10.2898C62.75 10.1696 63.044 10.1074 63.3413 10.1074C63.6386 10.1074 63.9326 10.1696 64.2045 10.2898C64.4764 10.4101 64.7201 10.5859 64.92 10.8059C65.12 11.0259 65.2718 11.2852 65.3656 11.5673C65.4595 11.8494 65.4934 12.1479 65.4651 12.4439C65.4939 12.7401 65.4604 13.0391 65.3668 13.3216C65.2732 13.6042 65.1215 13.864 64.9215 14.0844C64.7215 14.3048 64.4776 14.4809 64.2054 14.6014C63.9333 14.722 63.639 14.7842 63.3413 14.7842C63.0437 14.7842 62.7493 14.722 62.4772 14.6014C62.2051 14.4809 61.9612 14.3048 61.7612 14.0844C61.5611 13.864 61.4095 13.6042 61.3158 13.3216C61.2222 13.0391 61.1887 12.7401 61.2175 12.4439ZM64.5505 12.4439C64.5505 11.4678 64.1121 10.897 63.3425 10.897C62.5701 10.897 62.1355 11.4678 62.1355 12.4439C62.1355 13.4278 62.5701 13.9942 63.3425 13.9942C64.1121 13.9942 64.5505 13.4239 64.5505 12.4439H64.5505Z" fill="white"/>
<path id="Vector_17" d="M66.4009 13.4238C66.4009 12.6133 67.0044 12.146 68.0757 12.0796L69.2954 12.0093V11.6206C69.2954 11.145 68.981 10.8765 68.3735 10.8765C67.8774 10.8765 67.5337 11.0586 67.4351 11.377H66.5747C66.6655 10.6035 67.3931 10.1074 68.4146 10.1074C69.5435 10.1074 70.1802 10.6694 70.1802 11.6206V14.6973H69.3247V14.0645H69.2544C69.1117 14.2914 68.9113 14.4765 68.6737 14.6007C68.436 14.7249 68.1697 14.7838 67.9019 14.7715C67.7128 14.7911 67.5218 14.7709 67.341 14.7122C67.1602 14.6536 66.9938 14.5576 66.8524 14.4307C66.711 14.3037 66.5977 14.1485 66.52 13.9751C66.4422 13.8017 66.4016 13.6139 66.4009 13.4238ZM69.2954 13.0391V12.6626L68.1958 12.7329C67.5757 12.7744 67.2944 12.9853 67.2944 13.3823C67.2944 13.7876 67.646 14.0234 68.1294 14.0234C68.2711 14.0378 68.4142 14.0235 68.5502 13.9814C68.6862 13.9393 68.8123 13.8703 68.9211 13.7784C69.0299 13.6866 69.1191 13.5738 69.1834 13.4468C69.2477 13.3198 69.2858 13.1811 69.2954 13.0391Z" fill="white"/>
<path id="Vector_18" d="M71.3481 12.4439C71.3481 11.021 72.0796 10.1196 73.2173 10.1196C73.4987 10.1067 73.778 10.1741 74.0225 10.314C74.267 10.4539 74.4667 10.6605 74.5981 10.9096H74.6646V8.43652H75.5532V14.6973H74.7017V13.9858H74.6314C74.4897 14.2333 74.2831 14.4374 74.0339 14.5758C73.7846 14.7143 73.5022 14.782 73.2173 14.7715C72.0718 14.7715 71.3481 13.8701 71.3481 12.4439ZM72.2661 12.4439C72.2661 13.3989 72.7163 13.9737 73.4693 13.9737C74.2183 13.9737 74.6812 13.3907 74.6812 12.4478C74.6812 11.5093 74.2134 10.918 73.4693 10.918C72.7212 10.918 72.2661 11.4966 72.2661 12.4439H72.2661Z" fill="white"/>
<path id="Vector_19" d="M79.2298 12.4438C79.2015 12.1479 79.2353 11.8493 79.3292 11.5672C79.423 11.2852 79.5748 11.0258 79.7747 10.8059C79.9746 10.5859 80.2183 10.4101 80.4902 10.2898C80.762 10.1696 81.056 10.1074 81.3533 10.1074C81.6506 10.1074 81.9446 10.1696 82.2164 10.2898C82.4883 10.4101 82.732 10.5859 82.9319 10.8059C83.1319 11.0258 83.2836 11.2852 83.3775 11.5672C83.4713 11.8493 83.5052 12.1479 83.4768 12.4438C83.5057 12.74 83.4722 13.039 83.3786 13.3215C83.2851 13.6041 83.1334 13.8639 82.9334 14.0843C82.7334 14.3047 82.4895 14.4808 82.2174 14.6014C81.9453 14.7219 81.6509 14.7842 81.3533 14.7842C81.0557 14.7842 80.7613 14.7219 80.4892 14.6014C80.2171 14.4808 79.9732 14.3047 79.7732 14.0843C79.5732 13.8639 79.4216 13.6041 79.328 13.3215C79.2344 13.039 79.2009 12.74 79.2298 12.4438ZM82.5628 12.4438C82.5628 11.4677 82.1243 10.8969 81.3548 10.8969C80.5823 10.8969 80.1478 11.4677 80.1478 12.4438C80.1478 13.4277 80.5823 13.9941 81.3548 13.9941C82.1243 13.9941 82.5628 13.4238 82.5628 12.4438Z" fill="white"/>
<path id="Vector_20" d="M84.6694 10.1939H85.5249V10.9092H85.5913C85.704 10.6523 85.894 10.4369 86.1348 10.2931C86.3757 10.1493 86.6555 10.0842 86.9351 10.107C87.1542 10.0905 87.3742 10.1235 87.5788 10.2036C87.7834 10.2837 87.9673 10.4088 88.117 10.5697C88.2667 10.7305 88.3783 10.923 88.4435 11.1328C88.5087 11.3426 88.5258 11.5644 88.4937 11.7818V14.6968H87.605V12.0049C87.605 11.2813 87.2905 10.9214 86.6333 10.9214C86.4846 10.9145 86.336 10.9398 86.198 10.9957C86.0599 11.0515 85.9356 11.1365 85.8335 11.2449C85.7313 11.3533 85.6539 11.4825 85.6063 11.6236C85.5588 11.7647 85.5423 11.9145 85.5581 12.0625V14.6968H84.6694V10.1939Z" fill="white"/>
<path id="Vector_21" d="M93.5151 9.07324V10.2148H94.4907V10.9634H93.5151V13.2788C93.5151 13.7505 93.7095 13.957 94.1519 13.957C94.2651 13.9567 94.3783 13.9498 94.4907 13.9365V14.6768C94.3311 14.7053 94.1694 14.7205 94.0073 14.7222C93.019 14.7222 92.6255 14.3745 92.6255 13.5063V10.9633H91.9106V10.2148H92.6255V9.07324H93.5151Z" fill="white"/>
<path id="Vector_22" d="M95.7046 8.43652H96.5854V10.918H96.6558C96.7739 10.6587 96.9691 10.4421 97.2148 10.2977C97.4605 10.1534 97.7447 10.0883 98.0288 10.1113C98.2467 10.0995 98.4646 10.1359 98.6669 10.2179C98.8692 10.2999 99.0508 10.4256 99.199 10.586C99.3471 10.7463 99.458 10.9373 99.5238 11.1455C99.5896 11.3536 99.6086 11.5737 99.5795 11.79V14.6973H98.69V12.0093C98.69 11.29 98.355 10.9258 97.7271 10.9258C97.5743 10.9132 97.4207 10.9342 97.2769 10.9873C97.1332 11.0404 97.0027 11.1242 96.8947 11.2329C96.7867 11.3417 96.7038 11.4727 96.6517 11.6168C96.5997 11.761 96.5797 11.9147 96.5933 12.0674V14.6973H95.7046L95.7046 8.43652Z" fill="white"/>
<path id="Vector_23" d="M104.761 13.4815C104.641 13.8931 104.379 14.249 104.022 14.4872C103.666 14.7253 103.237 14.8305 102.81 14.7842C102.514 14.7921 102.219 14.7353 101.946 14.6177C101.674 14.5002 101.43 14.3248 101.232 14.1036C101.034 13.8825 100.887 13.6209 100.8 13.3371C100.713 13.0533 100.69 12.754 100.73 12.46C100.691 12.1652 100.715 11.8652 100.801 11.5805C100.888 11.2959 101.035 11.0331 101.231 10.81C101.428 10.587 101.671 10.4088 101.943 10.2876C102.214 10.1664 102.509 10.105 102.806 10.1075C104.059 10.1075 104.815 10.9635 104.815 12.3775V12.6876H101.635V12.7374C101.621 12.9026 101.642 13.069 101.696 13.2257C101.751 13.3825 101.837 13.5262 101.95 13.6476C102.063 13.7691 102.2 13.8656 102.352 13.931C102.504 13.9964 102.669 14.0292 102.835 14.0274C103.047 14.0529 103.263 14.0146 103.453 13.9174C103.644 13.8202 103.802 13.6685 103.906 13.4815L104.761 13.4815ZM101.635 12.0303H103.91C103.921 11.8792 103.9 11.7274 103.85 11.5847C103.799 11.442 103.718 11.3115 103.614 11.2016C103.51 11.0918 103.383 11.005 103.243 10.9468C103.103 10.8886 102.953 10.8604 102.801 10.8638C102.648 10.8619 102.495 10.8908 102.353 10.9487C102.21 11.0067 102.081 11.0925 101.972 11.2012C101.864 11.3099 101.778 11.4393 101.72 11.5817C101.662 11.7241 101.633 11.8766 101.635 12.0303H101.635Z" fill="white"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon / jam-icons / outline &#38; logos / facebook">
<path id="Vector" d="M9.04623 5.865V8.613H7.03223V11.973H9.04623V21.959H13.1802V11.974H15.9552C15.9552 11.974 16.2152 10.363 16.3412 8.601H13.1972V6.303C13.1972 5.96 13.6472 5.498 14.0932 5.498H16.3472V2H13.2832C8.94323 2 9.04623 5.363 9.04623 5.865Z" fill="#E2E8F0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 436 B

View File

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon / jam-icons / outline &#38; logos / instagram">
<path id="Vector" d="M16.017 2H7.947C6.37015 2.00185 4.85844 2.62914 3.74353 3.74424C2.62862 4.85933 2.00159 6.37115 2 7.948L2 16.018C2.00185 17.5948 2.62914 19.1066 3.74424 20.2215C4.85933 21.3364 6.37115 21.9634 7.948 21.965H16.018C17.5948 21.9631 19.1066 21.3359 20.2215 20.2208C21.3364 19.1057 21.9634 17.5938 21.965 16.017V7.947C21.9631 6.37015 21.3359 4.85844 20.2208 3.74353C19.1057 2.62862 17.5938 2.00159 16.017 2V2ZM19.957 16.017C19.957 16.5344 19.8551 17.0468 19.6571 17.5248C19.4591 18.0028 19.1689 18.4371 18.803 18.803C18.4371 19.1689 18.0028 19.4591 17.5248 19.6571C17.0468 19.8551 16.5344 19.957 16.017 19.957H7.947C6.90222 19.9567 5.90032 19.5415 5.16165 18.8026C4.42297 18.0638 4.008 17.0618 4.008 16.017V7.947C4.00827 6.90222 4.42349 5.90032 5.16235 5.16165C5.90122 4.42297 6.90322 4.008 7.948 4.008H16.018C17.0628 4.00827 18.0647 4.42349 18.8034 5.16235C19.542 5.90122 19.957 6.90322 19.957 7.948V16.018V16.017Z" fill="#E2E8F0"/>
<path id="Vector_2" d="M11.9818 6.81934C10.6133 6.82145 9.30136 7.36612 8.33372 8.33394C7.36609 9.30176 6.82168 10.6138 6.81982 11.9823C6.82141 13.3513 7.36585 14.6637 8.33372 15.6317C9.3016 16.5998 10.6139 17.1445 11.9828 17.1463C13.3519 17.1447 14.6645 16.6002 15.6326 15.6321C16.6007 14.664 17.1452 13.3514 17.1468 11.9823C17.1447 10.6134 16.5998 9.30122 15.6315 8.33353C14.6633 7.36584 13.3507 6.82166 11.9818 6.82034V6.81934ZM11.9818 15.1383C11.1451 15.1383 10.3426 14.8059 9.7509 14.2143C9.15922 13.6226 8.82682 12.8201 8.82682 11.9833C8.82682 11.1466 9.15922 10.3441 9.7509 9.75241C10.3426 9.16074 11.1451 8.82834 11.9818 8.82834C12.8186 8.82834 13.6211 9.16074 14.2127 9.75241C14.8044 10.3441 15.1368 11.1466 15.1368 11.9833C15.1368 12.8201 14.8044 13.6226 14.2127 14.2143C13.6211 14.8059 12.8186 15.1383 11.9818 15.1383Z" fill="#E2E8F0"/>
<path id="Vector_3" d="M17.1559 8.09509C17.8391 8.09509 18.3929 7.54127 18.3929 6.85809C18.3929 6.17492 17.8391 5.62109 17.1559 5.62109C16.4728 5.62109 15.9189 6.17492 15.9189 6.85809C15.9189 7.54127 16.4728 8.09509 17.1559 8.09509Z" fill="#E2E8F0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon / jam-icons / outline &#38; logos / youtube">
<path id="Vector" d="M17.812 5.01663H6.145C3.855 5.01663 2 6.85163 2 9.11563V14.8836C2 17.1476 3.856 18.9836 6.145 18.9836H17.812C20.102 18.9836 21.957 17.1476 21.957 14.8836V9.11563C21.957 6.85163 20.101 5.01562 17.812 5.01562V5.01663ZM15.009 12.2796L9.552 14.8546C9.51872 14.8707 9.48192 14.878 9.44503 14.876C9.40815 14.874 9.37237 14.8626 9.34103 14.8431C9.3097 14.8235 9.28382 14.7964 9.2658 14.7641C9.24779 14.7318 9.23822 14.6956 9.238 14.6586V9.34963C9.23867 9.3125 9.24872 9.27614 9.26722 9.24395C9.28573 9.21176 9.31208 9.18477 9.34382 9.1655C9.37556 9.14624 9.41167 9.13532 9.44877 9.13377C9.48587 9.13221 9.52276 9.14008 9.556 9.15663L15.014 11.8916C15.0504 11.9098 15.0809 11.9378 15.102 11.9725C15.1232 12.0071 15.1341 12.0471 15.1336 12.0877C15.1331 12.1283 15.1211 12.168 15.0991 12.2021C15.077 12.2362 15.0458 12.2634 15.009 12.2806V12.2796Z" fill="#E2E8F0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -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;
}
}

View File

@ -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 (
<nav className="nav">
<Link href="/" className="nav__logo">
<Image src={logo} alt="Logo Icon" />
</Link>
<ul className="nav__pages">
{pages.map((page) => (
<li
key={page.id}
className={
page.path === pathname
? "nav__pages-item_active"
: "nav__pages-item"
}
>
<Link href={page.path}>{page.page}</Link>
</li>
))}
</ul>
<div className="nav__lang-auth">
<ChangeLanguage />
<NavAuthBtn />
</div>
<NavMenu />
</nav>
);
};
export default Navbar;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -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%;
}
}
}

View File

@ -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 (
<header className="header">
<Image
className="header__background"
src={background}
alt="Background Image"
/>
<div className="header__text">
<h1>
Borem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
<p>
Borem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<Link href="/send-report" className="header__report">
Отметить разбитую дорогу
<Image src={arrow_icon} alt="Arrow Right Icon" />
</Link>
</header>
);
};
export default Header;

Binary file not shown.

After

Width:  |  Height:  |  Size: 515 KiB

View File

@ -0,0 +1,7 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right-circle">
<path id="Vector" d="M16.4998 29.3337C23.8636 29.3337 29.8332 23.3641 29.8332 16.0003C29.8332 8.63653 23.8636 2.66699 16.4998 2.66699C9.13604 2.66699 3.1665 8.63653 3.1665 16.0003C3.1665 23.3641 9.13604 29.3337 16.4998 29.3337Z" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M16.5 21.3337L21.8333 16.0003L16.5 10.667" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M11.1665 16H21.8332" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 724 B

View File

@ -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;
}
}
}

View File

@ -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 (
<div className="map-section">
<SectionHeader description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
Карта дорог
</SectionHeader>
<SearchBar placeholder="Введите город, село или регион" />
<div className="map-section__filters">
<div className="map-section__switch">
<Switch color="#E64452" />
<h4>Разбитая дорога</h4>
</div>
<div className="map-section__switch">
<Switch color="#FFAC33" />
<h4>В планах ремонта</h4>
</div>
<div className="map-section__switch">
<Switch color="#C288E2" />
<h4>Очаг аварийности</h4>
</div>
<div className="map-section__switch">
<Switch color="#FED363" />
<h4>Локальный дефект исправлен</h4>
</div>
<div className="map-section__switch">
<Switch color="#87289D" />
<h4>Локальный дефект</h4>
</div>
<div className="map-section__switch">
<Switch color="#8FDE6A" />
<h4>Отремонтировано</h4>
</div>
</div>
<Image
className="map-section__map"
src={map_image}
alt="Map Image"
/>
</div>
);
};
export default MapSection;

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 KiB

View File

@ -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;
}
}
}

View File

@ -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 (
<div className="news-section">
<SectionHeader>Новости</SectionHeader>
<ul className="news-section__list">
{[0, 1, 2, 3].map((card) => (
<li key={card} className="news-card">
<Image src={image} alt="Card Image" />
<div className="news-card__text">
<h5 className="news-card__date">23/09/2023</h5>
<h4>
Short title of the card describing the main content
</h4>
<p>
Short paragraph description of the article, outlining
main story and focus.
</p>
</div>
<button className="news-card__more-btn">Подробнее</button>
</li>
))}
</ul>
<Link href="/news" className="news-section__read-more-btn">
Читать
<Image src={arrow_icon} alt="Arrow Right Icon" />
</Link>
</div>
);
};
export default NewsSection;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrow-right">
<path id="Vector" d="M4.1665 10H15.8332" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M10 4.16797L15.8333 10.0013L10 15.8346" stroke="#489FE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 399 B

View File

@ -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;
}
}

View File

@ -0,0 +1,16 @@
import SectionHeader from "@/Shared/UI/SectionHeader/SectionHeader";
import "./RatingSection.scss";
import SearchBar from "@/Features/SearchBar/SearchBar";
const RatingSection = () => {
return (
<div className="rating-section">
<SectionHeader description="Yorem ipsum dolor sit amet, consectetur adipiscing elit.">
Рейтинг
</SectionHeader>
<SearchBar placeholder="Введите адрес" />
</div>
);
};
export default RatingSection;

View File

@ -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;
}
}
}

View File

@ -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 (
<div className="statistics-section">
{stats.map((stat) => (
<div key={stat.id} className="statistics-section__item">
<h4>{stat.statName}</h4>
<p>{stat.statCount}</p>
</div>
))}
</div>
);
};
export default StatisticsSection;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

View File

@ -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;
}
}

View File

@ -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 (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

View File

@ -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);
}
}

View File

@ -1,95 +0,0 @@
import Image from "next/image";
import styles from "./page.module.css";
export default function Home() {
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing&nbsp;
<code className={styles.code}>src/app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className={styles.grid}>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Docs <span>-&gt;</span>
</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Learn <span>-&gt;</span>
</h2>
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Templates <span>-&gt;</span>
</h2>
<p>Explore starter templates for Next.js.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Deploy <span>-&gt;</span>
</h2>
<p>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
);
}

View File

@ -303,6 +303,14 @@ ansi-styles@^6.1.0:
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug== 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: argparse@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" 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" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== 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: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -443,7 +456,7 @@ brace-expansion@^2.0.1:
dependencies: dependencies:
balanced-match "^1.0.0" balanced-match "^1.0.0"
braces@^3.0.2: braces@^3.0.2, braces@~3.0.2:
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@ -484,6 +497,21 @@ chalk@^4.0.0:
ansi-styles "^4.1.0" ansi-styles "^4.1.0"
supports-color "^7.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: client-only@0.0.1:
version "0.0.1" version "0.0.1"
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" 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" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== 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: function-bind@^1.1.1, function-bind@^1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
@ -1046,7 +1079,7 @@ get-tsconfig@^4.5.0:
dependencies: dependencies:
resolve-pkg-maps "^1.0.0" 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" version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== 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" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg== 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: import-fresh@^3.2.1:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -1230,6 +1268,13 @@ is-bigint@^1.0.1:
dependencies: dependencies:
has-bigints "^1.0.1" 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: is-boolean-object@^1.1.0:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719" 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: dependencies:
has-tostringtag "^1.0.0" 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" version "4.0.3"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@ -1588,6 +1633,11 @@ next@14.1.0:
"@next/swc-win32-ia32-msvc" "14.1.0" "@next/swc-win32-ia32-msvc" "14.1.0"
"@next/swc-win32-x64-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: object-assign@^4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 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" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== 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" version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -1794,6 +1844,13 @@ react@^18:
dependencies: dependencies:
loose-envify "^1.1.0" 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: reflect.getprototypeof@^1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3" 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" get-intrinsic "^1.2.2"
is-regex "^1.1.4" 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: scheduler@^0.23.0:
version "0.23.0" version "0.23.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" 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" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== 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" version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@ -1967,6 +2033,7 @@ streamsearch@^1.1.0:
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg== integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3" version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==