├── .eslintrc.json
├── netlify.toml
├── nextjs-setup-wizard.png
├── nextjs-blog-theme-preview.png
├── public
    ├── images
    │   ├── random-image.jpeg
    │   └── nextjs.svg
    └── favicon.svg
├── .prettierrc.js
├── renovate.json
├── components
    ├── CustomLink.js
    ├── SEO.js
    ├── CustomImage.js
    ├── Header.js
    ├── ArrowIcon.js
    ├── Layout.js
    ├── Layout.module.css
    └── Footer.js
├── postcss.config.js
├── next-env.d.ts
├── pages
    ├── _app.js
    ├── _document.js
    ├── index.js
    └── posts
    │   └── [slug].js
├── utils
    ├── global-data.js
    ├── theme-utils.js
    └── mdx-utils.js
├── .gitignore
├── styles
    └── globals.css
├── tsconfig.json
├── posts
    ├── example-post-4.mdx
    ├── example-post-2.mdx
    ├── example-post-3.mdx
    ├── example-post-5.mdx
    └── example-post-1.mdx
├── LICENSE
├── stackbit.config.ts
├── package.json
├── themes.js
├── README.md
└── github-banner.svg


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "prettier"]
3 | }
4 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   publish = ".next"
4 | 


--------------------------------------------------------------------------------
/nextjs-setup-wizard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-templates/nextjs-blog-theme/HEAD/nextjs-setup-wizard.png


--------------------------------------------------------------------------------
/nextjs-blog-theme-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-templates/nextjs-blog-theme/HEAD/nextjs-blog-theme-preview.png


--------------------------------------------------------------------------------
/public/images/random-image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-templates/nextjs-blog-theme/HEAD/public/images/random-image.jpeg


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   printWidth: 80,
3 |   semi: true,
4 |   singleQuote: true,
5 |   tabWidth: 2,
6 |   useTabs: false,
7 | };
8 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "local>netlify-templates/renovate-config"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/components/CustomLink.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | 
3 | export default function CustomLink({ as, href, ...otherProps }) {
4 |   return <Link as={as} href={href} {...otherProps}></Link>;
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // If you want to use other PostCSS plugins, see the following:
2 | // https://tailwindcss.com/docs/using-with-preprocessors
3 | module.exports = {
4 |   plugins: {
5 |     '@tailwindcss/postcss': {},
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | import "./.next/dev/types/routes.d.ts";
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css';
 2 | import 'prismjs/themes/prism-tomorrow.css';
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <>
 7 |       <span className="theme-bejamas" />
 8 |       <Component {...pageProps} />
 9 |     </>
10 |   );
11 | }
12 | 
13 | export default MyApp;
14 | 


--------------------------------------------------------------------------------
/components/SEO.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | 
 3 | export default function SEO({ title, description }) {
 4 |   return (
 5 |     <Head>
 6 |       <title>{title}</title>
 7 |       <meta name="description" content={description} />
 8 |       <meta property="og:title" content={title} />
 9 |     </Head>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/CustomImage.js:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | 
 3 | export default function CustomImage({ src, alt, ...otherProps }) {
 4 |   return (
 5 |     <figure className="aspect-4/3 relative">
 6 |       <Image
 7 |         className="object-cover object-top"
 8 |         src={src}
 9 |         alt={alt || ''}
10 |         fill={true}
11 |         {...otherProps}
12 |       />
13 |     </figure>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | export default function Header({ name }) {
 4 |   return (
 5 |     <header className="pt-20 pb-12">
 6 |       <div className="block w-12 h-12 mx-auto mb-4 rounded-full bg-conic-180 from-gradient-3 from-0% to-gradient-4 to-100%" />
 7 |       <p className="text-2xl text-center dark:text-white">
 8 |         <Link href="/">{name}</Link>
 9 |       </p>
10 |     </header>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/utils/global-data.js:
--------------------------------------------------------------------------------
 1 | export const getGlobalData = () => {
 2 |   const name = process.env.BLOG_NAME
 3 |     ? decodeURI(process.env.BLOG_NAME)
 4 |     : 'Jay Doe';
 5 |   const blogTitle = process.env.BLOG_TITLE
 6 |     ? decodeURI(process.env.BLOG_TITLE)
 7 |     : 'Next.js Blog Theme';
 8 |   const footerText = process.env.BLOG_FOOTER_TEXT
 9 |     ? decodeURI(process.env.BLOG_FOOTER_TEXT)
10 |     : 'All rights reserved.';
11 | 
12 |   return {
13 |     name,
14 |     blogTitle,
15 |     footerText,
16 |   };
17 | };
18 | 


--------------------------------------------------------------------------------
/components/ArrowIcon.js:
--------------------------------------------------------------------------------
 1 | export default function ArrowIcon({ className, color = 'text-primary' }) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       width="24"
 6 |       height="24"
 7 |       fill="none"
 8 |       viewBox="0 0 24 24"
 9 |       className={className}
10 |     >
11 |       <path
12 |         className={`stroke-current ${color}`}
13 |         strokeLinecap="round"
14 |         strokeLinejoin="round"
15 |         strokeWidth="2"
16 |         d="M5 12h14M12 19l7-7-7-7"
17 |       ></path>
18 |     </svg>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # Netlify Visual Editor (formerly Stackbit)
 9 | .sourcebit-nextjs-cache.json
10 | .stackbit/cache
11 | .cache
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | 
32 | # local env files
33 | .env.local
34 | .env.development.local
35 | .env.test.local
36 | .env.production.local
37 | 
38 | # vercel
39 | .vercel
40 | 
41 | # netlify
42 | .netlify


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import 'tailwindcss';
 2 | @plugin '@tailwindcss/typography';
 3 | 
 4 | @theme static {
 5 |   --color-primary: var(--theme-primary);
 6 |   --color-gradient-1: var(--theme-gradient-1);
 7 |   --color-gradient-2: var(--theme-gradient-2);
 8 |   --color-gradient-3: var(--theme-gradient-3);
 9 |   --color-gradient-4: var(--theme-gradient-4);
10 |   --font-primary: var(--theme-headings);
11 |   --font-secondary: var(--theme-body);
12 | }
13 | 
14 | @custom-variant dark (&:where(.dark, .dark *));
15 | 
16 | @layer base {
17 |   h1,
18 |   h2,
19 |   h3,
20 |   h4,
21 |   h5,
22 |   h6 {
23 |     font-family: var(--font-primary);
24 |   }
25 | 
26 |   body {
27 |     font-family: var(--font-secondary);
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Document, { Html, Head, Main, NextScript } from 'next/document';
 3 | import { generateCssVariables } from '../utils/theme-utils';
 4 | 
 5 | class MyDocument extends Document {
 6 |   render() {
 7 |     const cssVars = generateCssVariables();
 8 | 
 9 |     return (
10 |       <Html lang="en" className="theme-compiled">
11 |         <Head>
12 |           <style>{`:root{${cssVars}}`}</style>
13 |         </Head>
14 |         <body
15 |           className={`antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base`}
16 |         >
17 |           <Main />
18 |           <NextScript />
19 |         </body>
20 |       </Html>
21 |     );
22 |   }
23 | }
24 | 
25 | export default MyDocument;
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2019",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": false,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "noEmit": true,
14 |     "esModuleInterop": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "jsx": "react-jsx",
20 |     "incremental": true,
21 |     "paths": {
22 |       "@/*": [
23 |         "./src/*"
24 |       ]
25 |     },
26 |     "baseUrl": "."
27 |   },
28 |   "include": [
29 |     "next-env.d.ts",
30 |     "**/*.ts",
31 |     "**/*.tsx"
32 |   ],
33 |   "exclude": [
34 |     "node_modules"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/utils/theme-utils.js:
--------------------------------------------------------------------------------
 1 | const { COLOR_THEMES, FONT_THEMES } = require('../themes');
 2 | 
 3 | const THEME = process.env.BLOG_THEME || 'default';
 4 | const FONT_HEADINGS = process.env.BLOG_FONT_HEADINGS || 'sans-serif';
 5 | const FONT_BODY = process.env.BLOG_FONT_BODY || 'sans-serif';
 6 | 
 7 | export function generateCssVariables() {
 8 |   const cssVars = {};
 9 |   const themeColors = COLOR_THEMES[THEME]?.colors || {};
10 |   for (const [key, value] of Object.entries(themeColors)) {
11 |     cssVars[`--theme-${key}`] = value;
12 |   }
13 |   cssVars['--theme-headings'] = FONT_THEMES[FONT_HEADINGS] || 'sans-serif';
14 |   cssVars['--theme-body'] = FONT_THEMES[FONT_BODY] || 'sans-serif';
15 | 
16 |   const cssVarsString = Object.entries(cssVars)
17 |     .map(([key, value]) => `${key}: ${value};`)
18 |     .join('\n');
19 | 
20 |   return cssVarsString;
21 | }
22 | 


--------------------------------------------------------------------------------
/posts/example-post-4.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: Post
 3 | title: Mental models for designers
 4 | description: "Consider that for a moment: everything we see around us is assumed to have had a cause and is contingent upon."
 5 | date: '2024-08-05'
 6 | ---
 7 | 
 8 | Mental models are frameworks people create in their minds to understand how something should work. They’re the expectations users carry with them when they encounter a new app, website, or product. For example, a user expects that clicking on a logo will take them back to the homepage, or that clicking a shopping cart icon will show them a list of items they’ve added.
 9 | 
10 | Mental models vary from user to user, depending on factors like cultural background, experience level, and personal habits. However, successful designs usually align with widely shared expectations, allowing for intuitive interactions.
11 | 
12 | This is an example post. There's another one [here](/posts/example-post).
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 nextjs-blog-theme
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/stackbit.config.ts:
--------------------------------------------------------------------------------
 1 | // stackbit.config.ts
 2 | import { defineStackbitConfig } from '@stackbit/types';
 3 | import { GitContentSource } from '@stackbit/cms-git';
 4 | 
 5 | export default defineStackbitConfig({
 6 |     stackbitVersion: '~0.6.0',
 7 |     ssgName: 'nextjs',
 8 |     nodeVersion: '18',
 9 |     contentSources: [
10 |         new GitContentSource({
11 |             rootPath: __dirname,
12 |             contentDirs: ['posts'],
13 |             models: [
14 |                 {
15 |                     name: "Post",
16 |                     type: "page",
17 |                     urlPath: "/posts/{slug}",
18 |                     filePath: "posts/{slug}.mdx",
19 |                     fields: [
20 |                         { name: "title", type: "string", required: true, default: 'Post Title' }, 
21 |                         { name: "description", type: "string", default: 'Post description goes here' },
22 |                         { name: "date", type: "date", required: true },
23 |                     ]
24 |                   }
25 |             ],
26 |             assetsConfig: {
27 |                 referenceType: 'static',
28 |                 staticDir: 'public',
29 |                 uploadDir: 'images',
30 |                 publicPath: '/'
31 |             }
32 |         })
33 |     ]
34 | });


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <style>
 3 |     .favicon-center-dot {
 4 |       fill: #014847;
 5 |     }
 6 | 
 7 |     .favicon-lines {
 8 |       fill: #05BDBA;
 9 |     }
10 | 
11 |     @media (prefers-color-scheme: dark) {
12 |       .favicon-center-dot {
13 |         fill: #fff;
14 |       }
15 | 
16 |       .favicon-lines {
17 |         fill: #05BDBA;
18 |       }
19 |     }
20 |   </style>
21 |   <path class="favicon-center-dot" stroke="none" d="M17.9922 18.3225H14.005L13.6746 17.9921V14.005L14.005 13.6746H17.9922L18.3226 14.005V17.9921L17.9922 18.3225Z" />
22 |   <g class="favicon-lines" stroke="none">
23 |     <path d="M9.6958 24.3311H9.35705L7.6661 22.6401V22.3041L10.2511 19.7164L12.042 19.7191L12.2808 19.9552V21.7461L9.6958 24.3311Z" />
24 |     <path d="M7.6661 9.69576V9.35701L9.35705 7.66606H9.6958L12.2808 10.2511V12.0392L12.042 12.2808H10.2511L7.6661 9.69576Z" />
25 |     <path d="M10.0457 17.4369H0.205466L0 17.2314V14.7658L0.205466 14.5603H10.0457L10.2511 14.7658V17.2314L10.0457 17.4369Z" />
26 |     <path d="M31.7945 17.4369H21.9544L21.7489 17.2314V14.7658L21.9544 14.5603H31.7945L32 14.7658V17.2314L31.7945 17.4369Z" />
27 |     <path d="M14.5631 10.0456V2.66547L14.7686 2.46001H17.2343L17.4396 2.66547V10.0456L17.2343 10.2511H14.7686L14.5631 10.0456Z" />
28 |     <path d="M14.5631 29.3316V21.9515L14.7686 21.746H17.2343L17.4396 21.9515V29.3316L17.2343 29.5371H14.7686L14.5631 29.3316Z" />
29 |   </g>
30 | </svg>
31 | 


--------------------------------------------------------------------------------
/posts/example-post-2.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: Post
 3 | title: Next.js and Netlify - The Perfect Duo for Modern Web Development
 4 | description: >-
 5 |   Consider that for a moment: everything we see around us is assumed to have had
 6 |   a cause and is contingent upon.
 7 | date: '2024-10-05'
 8 | ---
 9 | 
10 | **This is an example post. There's another one [here](/posts/example-post-1).**
11 | 
12 | Combining **Next.js** and **Netlify** offers a powerful solution for building and deploying modern web applications with ease. Next.js, known for its versatility in handling both static and dynamic content, is a favorite for developers who need a React-based framework that supports server-side rendering, static site generation, and API routes—all essential for dynamic, SEO-friendly sites.
13 | 
14 | Pairing this with Netlify’s streamlined deployment workflow, continuous integration, and serverless functions provides a smooth, fast, and secure development-to-deployment process. Netlify’s built-in features for **automatic deployment** from Git, **CDN distribution**, and **edge functions** mean Next.js apps can scale easily while maintaining high performance.
15 | 
16 | For UI designers and developers, this combo enables rapid iteration, easier A/B testing, and optimized performance without the DevOps overhead. Plus, the ability to leverage **dynamic routing and API integrations** means more control over design and functionality.
17 | 
18 | ## Additional resources
19 | 
20 | - [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
21 | - [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs-blog-theme",
 3 |   "description": "A customizable Next.js and Tailwind blog starter. Designed by the Bejamas agency.",
 4 |   "author": "Bejamas and Netlify Inc.",
 5 |   "contributors": [
 6 |     "Charlie Gerard",
 7 |     "Prince Wilson",
 8 |     "Tara Manicsic",
 9 |     "Thom Krupa",
10 |     "Tomas Bankauskas"
11 |   ],
12 |   "homepage": "https://github.com/netlify-templates/nextjs-blog-theme",
13 |   "bugs": {
14 |     "url": "https://github.com/netlify-templates/nextjs-blog-theme/issues"
15 |   },
16 |   "scripts": {
17 |     "dev": "next",
18 |     "dev:watch": "next-remote-watch ./posts",
19 |     "build": "next build",
20 |     "start": "next start",
21 |     "export": "next build && next export",
22 |     "lint": "next lint"
23 |   },
24 |   "dependencies": {
25 |     "@mapbox/rehype-prism": "^0.9.0",
26 |     "@tailwindcss/typography": "^0.5.19",
27 |     "classnames": "^2.3.1",
28 |     "gray-matter": "^4.0.3",
29 |     "next": "^16.0.8",
30 |     "next-mdx-remote": "^5.0.0",
31 |     "next-remote-watch": "2.0.0",
32 |     "prismjs": "^1.29.0",
33 |     "react": "^19.2.1",
34 |     "react-dom": "^19.2.1",
35 |     "rehype-unwrap-images": "^1.0.0",
36 |     "remark-gfm": "^4.0.0"
37 |   },
38 |   "devDependencies": {
39 |     "@stackbit/cms-git": "^1.0.32",
40 |     "@stackbit/types": "^2.0.1",
41 |     "@tailwindcss/postcss": "^4.0.16",
42 |     "eslint": "^9.0.0",
43 |     "eslint-config-next": "^16.0.8",
44 |     "eslint-config-prettier": "^9.1.0",
45 |     "postcss": "^8.4.38",
46 |     "tailwindcss": "^4.0.16",
47 |     "typescript": "^5.1.3"
48 |   },
49 |   "license": "MIT"
50 | }
51 | 


--------------------------------------------------------------------------------
/themes.js:
--------------------------------------------------------------------------------
 1 | exports.COLOR_THEMES = {
 2 |   default: {
 3 |     colors: {
 4 |       primary: '#7D7AFF',
 5 |       'gradient-1': '#7d7aff',
 6 |       'gradient-2': '#2121e2',
 7 |       'gradient-3': '#00fff0',
 8 |       'gradient-4': '#8785FF',
 9 |     },
10 |   },
11 |   bejamas: {
12 |     colors: {
13 |       primary: '#FF8585',
14 |       'gradient-1': '#7d7aff',
15 |       'gradient-2': '#2121E2',
16 |       'gradient-3': '#FF76B8',
17 |       'gradient-4': '#001AFF',
18 |     },
19 |   },
20 |   netlify: {
21 |     colors: {
22 |       primary: '#00A354',
23 |       'gradient-1': '#00F0FF',
24 |       'gradient-2': '#00F0FF',
25 |       'gradient-3': '#FAFF00',
26 |       'gradient-4': '#00F0FF',
27 |     },
28 |   },
29 |   reddie: {
30 |     colors: {
31 |       primary: '#FF4D4D',
32 |       'gradient-1': '#FFC700',
33 |       'gradient-2': '#FF85DD',
34 |       'gradient-3': '#FF85DD',
35 |       'gradient-4': '#FF8585',
36 |     },
37 |   },
38 |   greenie: {
39 |     colors: {
40 |       primary: '#C78500',
41 |       'gradient-1': '#FFCC81',
42 |       'gradient-2': '#00F37F',
43 |       'gradient-3': '#00F37F',
44 |       'gradient-4': '#FFCC81',
45 |     },
46 |   },
47 | };
48 | 
49 | exports.FONT_THEMES = {
50 |   'sans-serif': `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
51 |   serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
52 |   monospace: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
53 | };
54 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import classNames from 'classnames';
 2 | import { useEffect } from 'react';
 3 | import styles from './Layout.module.css';
 4 | 
 5 | export function GradientBackground({ variant, className }) {
 6 |   const classes = classNames(
 7 |     {
 8 |       [styles.colorBackground]: variant === 'large',
 9 |       [styles.colorBackgroundBottom]: variant === 'small',
10 |     },
11 |     className
12 |   );
13 | 
14 |   return <div className={classes} />;
15 | }
16 | 
17 | export default function Layout({ children }) {
18 |   const setAppTheme = () => {
19 |     const darkMode = localStorage.getItem('theme') === 'dark';
20 |     const lightMode = localStorage.getItem('theme') === 'light';
21 | 
22 |     if (darkMode) {
23 |       document.documentElement.classList.add('dark');
24 |     } else if (lightMode) {
25 |       document.documentElement.classList.remove('dark');
26 |     }
27 |     return;
28 |   };
29 | 
30 |   const handleSystemThemeChange = () => {
31 |     var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
32 | 
33 |     darkQuery.onchange = (e) => {
34 |       if (e.matches) {
35 |         document.documentElement.classList.add('dark');
36 |         localStorage.setItem('theme', 'dark');
37 |       } else {
38 |         document.documentElement.classList.remove('dark');
39 |         localStorage.setItem('theme', 'light');
40 |       }
41 |     };
42 |   };
43 | 
44 |   useEffect(() => {
45 |     setAppTheme();
46 |   }, []);
47 | 
48 |   useEffect(() => {
49 |     handleSystemThemeChange();
50 |   }, []);
51 | 
52 |   return (
53 |     <div className="relative pb-24 overflow-hidden">
54 |       <div className="flex flex-col items-center w-full max-w-2xl mx-auto">
55 |         {children}
56 |       </div>
57 |     </div>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/components/Layout.module.css:
--------------------------------------------------------------------------------
 1 | .colorBackground {
 2 |   left: 50%;
 3 |   transform: translateX(-50%);
 4 |   background: radial-gradient(
 5 |       at 71% 77%,
 6 |       var(--color-gradient-1) 0,
 7 |       transparent 21%
 8 |     ),
 9 |     radial-gradient(at 36% 47%, var(--color-gradient-3) 0, transparent 50%),
10 |     radial-gradient(at 54% 29%, var(--color-gradient-3) 0, transparent 28%),
11 |     radial-gradient(at 45% 51%, var(--color-gradient-1) 0, transparent 53%),
12 |     radial-gradient(at 73% 44%, var(--color-gradient-2) 0, transparent 54%),
13 |     radial-gradient(at 24% 7%, var(--color-gradient-2) 0, transparent 40%),
14 |     radial-gradient(at 76% 46%, var(--color-gradient-1) 0, transparent 50%);
15 |   /* mix-blend-mode: normal; */
16 |   max-height: 800px;
17 |   height: 80vh;
18 |   max-width: 1400px;
19 |   width: 70vw;
20 |   width: 100%;
21 |   filter: blur(44px);
22 |   z-index: -1;
23 | }
24 | 
25 | .colorBackgroundBottom {
26 |   left: 50%;
27 |   transform: translateX(-50%) rotate(190deg);
28 |   background: radial-gradient(
29 |       at 83% 25%,
30 |       var(--color-gradient-1) 0,
31 |       transparent 21%
32 |     ),
33 |     radial-gradient(at 36% 47%, var(--color-gradient-3) 0, transparent 50%),
34 |     radial-gradient(at 79% 45%, var(--color-gradient-3) 0, transparent 28%),
35 |     radial-gradient(at 66% 38%, var(--color-gradient-1) 0, transparent 53%),
36 |     radial-gradient(at 89% 13%, var(--color-gradient-2) 0, transparent 54%),
37 |     radial-gradient(at 24% 7%, var(--color-gradient-2) 0, transparent 40%),
38 |     radial-gradient(at 76% 46%, var(--color-gradient-1) 0, transparent 50%);
39 |   /* mix-blend-mode: normal; */
40 |   height: 600px;
41 |   max-width: 900px;
42 |   width: 55vw;
43 |   width: 100%;
44 |   filter: blur(44px);
45 |   z-index: -1;
46 | }
47 | 


--------------------------------------------------------------------------------
/posts/example-post-3.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: Post
 3 | title: Why Next.js Works Great with Netlify 
 4 | description: "If you're using Next.js and Netlify, you’re tapping into a powerhouse combination for fast, reliable, and scalable web applications."
 5 | date: '2024-09-05'
 6 | ---
 7 | 
 8 | If you're using **Next.js** and **Netlify**, you’re tapping into a powerhouse combination for fast, reliable, and scalable web applications. 
 9 | 
10 | **This is an example post. There's another one [here](/posts/example-post-1).**
11 | 
12 | Here’s why they work so well together:
13 | 
14 | 1. **Seamless Deployment**: With Netlify’s Git-based deployment, pushing updates to a Next.js site is automatic and effortless. Every change pushed to GitHub or GitLab triggers a fresh build and deploys your site without any manual effort, perfect for fast-paced projects.
15 | 
16 | 2. **Static and Dynamic Content Flexibility**: Next.js shines by allowing both static generation (SSG) and server-side rendering (SSR), and Netlify makes deploying either easy. Static content is globally cached on Netlify’s CDN, making your site lightning-fast, while Netlify Functions handle any server-side needs with zero configuration.
17 | 
18 | 3. **Serverless Functions**: Netlify’s serverless functions work beautifully with Next.js API routes, enabling dynamic features (like forms, authentication, and data fetching) without additional servers. This lets you build interactive, backend-supported sites with just front-end code.
19 | 
20 | 4. **Edge Caching and CDNs**: Next.js’s pages are distributed across Netlify’s global CDN, ensuring that your users get a fast experience no matter where they are. This setup optimizes load times and enhances site performance.
21 | 
22 | 5. **Developer-Friendly Workflow**: Both Next.js and Netlify focus on a developer-friendly experience. Local development, previews, and rollbacks are simple, so you can focus on building a better user experience without worrying about the infrastructure.
23 | 
24 | For anyone building with Next.js, deploying on Netlify means you get the best of **speed, reliability, and ease**—all the ingredients needed to create high-performing, user-friendly web apps!
25 | 
26 | ## Additional resources
27 | 
28 | - [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
29 | - [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
 1 | const sunIcon = (
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     width="25"
 5 |     height="24"
 6 |     fill="none"
 7 |     viewBox="0 0 25 24"
 8 |     className="dark:opacity-50"
 9 |   >
10 |     <g
11 |       stroke="#fff"
12 |       strokeLinecap="round"
13 |       strokeLinejoin="round"
14 |       strokeWidth="2"
15 |       clipPath="url(#clip0_192_823)"
16 |     >
17 |       <path d="M12.5 17a5 5 0 100-10 5 5 0 000 10zM12.5 1v2M12.5 21v2M4.72 4.22l1.42 1.42M18.86 18.36l1.42 1.42M1.5 12h2M21.5 12h2M4.72 19.78l1.42-1.42M18.86 5.64l1.42-1.42"></path>
18 |     </g>
19 |     <defs>
20 |       <clipPath id="clip0_192_823">
21 |         <path
22 |           className="text-white fill-current"
23 |           d="M0 0H24V24H0z"
24 |           transform="translate(.5)"
25 |         ></path>
26 |       </clipPath>
27 |     </defs>
28 |   </svg>
29 | );
30 | 
31 | const moonIcon = (
32 |   <svg
33 |     xmlns="http://www.w3.org/2000/svg"
34 |     width="21"
35 |     height="20"
36 |     fill="none"
37 |     viewBox="0 0 21 20"
38 |   >
39 |     <path
40 |       stroke="#fff"
41 |       strokeLinecap="round"
42 |       strokeLinejoin="round"
43 |       strokeWidth="2"
44 |       className="text-gray-400 stroke-current dark:text-white"
45 |       d="M19.5 10.79A9 9 0 119.71 1a7 7 0 009.79 9.79v0z"
46 |     ></path>
47 |   </svg>
48 | );
49 | 
50 | const ThemeSwitcher = () => {
51 |   return (
52 |     <div className="flex justify-center p-1 mt-6 bg-white dark:bg-gray-900 rounded-3xl">
53 |       <button
54 |         type="button"
55 |         aria-label="Use Dark Mode"
56 |         onClick={() => {
57 |           document.documentElement.classList.add('dark');
58 |           localStorage.setItem('theme', 'dark');
59 |         }}
60 |         className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition cursor-pointer dark:bg-primary rounded-3xl align-center"
61 |       >
62 |         {moonIcon}
63 |       </button>
64 | 
65 |       <button
66 |         type="button"
67 |         aria-label="Use Light Mode"
68 |         onClick={() => {
69 |           document.documentElement.classList.remove('dark');
70 |           localStorage.setItem('theme', 'light');
71 |         }}
72 |         className="flex items-center justify-center w-24 h-10 p-2 pr-2 transition cursor-pointer bg-primary dark:bg-transparent rounded-3xl align-center"
73 |       >
74 |         {sunIcon}
75 |       </button>
76 |     </div>
77 |   );
78 | };
79 | 
80 | export default function Footer({ copyrightText }) {
81 |   return (
82 |     <footer className="flex flex-col items-center py-16">
83 |       <p className="mb-3 font-bold uppercase dark:text-white opacity-60">
84 |         {copyrightText}
85 |       </p>
86 |       <ThemeSwitcher />
87 |     </footer>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import { getPosts } from '../utils/mdx-utils';
 3 | 
 4 | import Footer from '../components/Footer';
 5 | import Header from '../components/Header';
 6 | import Layout, { GradientBackground } from '../components/Layout';
 7 | import ArrowIcon from '../components/ArrowIcon';
 8 | import { getGlobalData } from '../utils/global-data';
 9 | import SEO from '../components/SEO';
10 | 
11 | export default function Index({ posts, globalData }) {
12 |   return (
13 |     <Layout>
14 |       <SEO title={globalData.name} description={globalData.blogTitle} />
15 |       <Header name={globalData.name} />
16 |       <main className="w-full">
17 |         <h1 className="mb-12 text-3xl text-center lg:text-5xl">
18 |           {globalData.blogTitle}
19 |         </h1>
20 |         <ul className="w-full">
21 |           {posts.map((post) => (
22 |             <li
23 |               key={post.filePath}
24 |               className="transition border border-b-0 bg-white/10 border-gray-800/10 md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg dark:bg-black/30 hover:bg-white/20 dark:hover:bg-black/50 dark:border-white/10 last:border-b"
25 |               data-sb-object-id={`posts/${post.filePath}`}
26 |             >
27 |               <Link
28 |                 as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
29 |                 href={`/posts/[slug]`}
30 |                 className="block px-6 py-6 lg:py-10 lg:px-16 focus:outline-hidden focus:ring-4 focus:ring-primary/50"
31 |               >
32 |                 {post.data.date && (
33 |                   <p
34 |                     className="mb-3 font-bold uppercase opacity-60"
35 |                     data-sb-field-path="date"
36 |                   >
37 |                     {post.data.date}
38 |                   </p>
39 |                 )}
40 |                 <h2 className="text-2xl md:text-3xl" data-sb-field-path="title">
41 |                   {post.data.title}
42 |                 </h2>
43 |                 {post.data.description && (
44 |                   <p
45 |                     className="mt-3 text-lg opacity-60"
46 |                     data-sb-field-path="description"
47 |                   >
48 |                     {post.data.description}
49 |                   </p>
50 |                 )}
51 |                 <ArrowIcon className="mt-4" />
52 |               </Link>
53 |             </li>
54 |           ))}
55 |         </ul>
56 |       </main>
57 |       <Footer copyrightText={globalData.footerText} />
58 |       <GradientBackground
59 |         variant="large"
60 |         className="fixed top-20 opacity-40 dark:opacity-60"
61 |       />
62 |       <GradientBackground
63 |         variant="small"
64 |         className="absolute bottom-0 opacity-20 dark:opacity-10"
65 |       />
66 |     </Layout>
67 |   );
68 | }
69 | 
70 | export function getStaticProps() {
71 |   const posts = getPosts();
72 |   const globalData = getGlobalData();
73 | 
74 |   return { props: { posts, globalData } };
75 | }
76 | 


--------------------------------------------------------------------------------
/posts/example-post-5.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | type: Post
 3 | title: Why Sketch Remains the Ultimate Tool for UI Designers
 4 | description: "While new design platforms continue to emerge, Sketch has held its ground as a go-to for UI designers, offering an impressive mix of simplicity, precision, and power."
 5 | date: '2024-07-05'
 6 | ---
 7 | 
 8 | In the evolving world of UI design, a tool that has remained a steadfast favorite among designers is [Sketch](https://www.sketch.com/). Since its inception in 2010, Sketch has consistently proven to be a powerful, intuitive, and efficient platform for creating stunning, functional user interfaces. While many competitors have entered the market, Sketch continues to offer unique features that keep it in the toolkits of solo designers and design teams alike. Here’s why Sketch is still the ultimate tool for UI designers.
 9 | 
10 | **This is an example post. There's another one [here](/posts/example-post-1).**
11 | 
12 | ## User-Friendly Interface
13 | 
14 | Sketch is celebrated for its clean, minimalistic interface that feels welcoming to beginners and intuitive for seasoned designers. Unlike other platforms that may overwhelm with too many options or complex panels, Sketch offers a streamlined workspace that allows designers to focus on what matters: crafting excellent UI.
15 | 
16 | ## Vector-Based Design for Scalability
17 | 
18 | Vector-based design is essential in UI, where icons and graphics need to scale across various screen sizes. Sketch’s vector capabilities ensure that designs stay sharp and consistent, no matter the device or resolution. Designers can create everything from tiny icons to full-screen mockups without losing image quality.
19 | 
20 | ## Symbols and Reusable Components
21 | 
22 | One of Sketch’s most beloved features is its Symbols feature, which lets designers create reusable components. This is a game-changer for maintaining consistency across projects, as elements like buttons, icons, and navigation bars can be updated once and reflected throughout the design. The ability to nest Symbols and create overrides adds even more flexibility, enabling designers to craft complex design systems with ease.
23 | 
24 | ## Powerful Plugins and Integrations
25 | 
26 | Sketch’s extensive plugin library is unmatched, offering tools for everything from animations to code export. Tools like Anima, Stark, and Craft by InVision extend Sketch’s functionality, enabling designers to customize the tool to their workflow. The robust plugin ecosystem allows designers to stay in Sketch while integrating seamlessly with prototyping, developer handoff, and collaboration tools, making Sketch highly adaptable for varied design processes.
27 | 
28 | ## Cloud Collaboration and Sharing
29 | 
30 | Collaboration is critical in modern design workflows, and Sketch’s Cloud feature makes it easy to share work with clients, teammates, and developers. The ability to upload designs to the cloud allows for real-time feedback and streamlined developer handoff. Sketch Cloud supports commenting, version control, and asset exporting, making remote collaboration a breeze.
31 | 
32 | 


--------------------------------------------------------------------------------
/utils/mdx-utils.js:
--------------------------------------------------------------------------------
  1 | import fs from 'fs';
  2 | import path from 'path';
  3 | import matter from 'gray-matter';
  4 | import { serialize } from 'next-mdx-remote/serialize';
  5 | import rehypePrism from '@mapbox/rehype-prism';
  6 | import remarkGfm from 'remark-gfm';
  7 | import rehypeUnwrapImages from 'rehype-unwrap-images';
  8 | 
  9 | // POSTS_PATH is useful when you want to get the path to a specific file
 10 | export const POSTS_PATH = path.join(process.cwd(), 'posts');
 11 | 
 12 | // getPostFilePaths is the list of all mdx files inside the POSTS_PATH directory
 13 | export const getPostFilePaths = () => {
 14 |   return (
 15 |     fs
 16 |       .readdirSync(POSTS_PATH)
 17 |       // Only include md(x) files
 18 |       .filter((path) => /\.mdx?$/.test(path))
 19 |   );
 20 | };
 21 | 
 22 | export const sortPostsByDate = (posts) => {
 23 |   return posts.sort((a, b) => {
 24 |     const aDate = new Date(a.data.date);
 25 |     const bDate = new Date(b.data.date);
 26 |     return bDate - aDate;
 27 |   });
 28 | };
 29 | 
 30 | export const getPosts = () => {
 31 |   let posts = getPostFilePaths().map((filePath) => {
 32 |     const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
 33 |     const { content, data } = matter(source);
 34 | 
 35 |     return {
 36 |       content,
 37 |       data,
 38 |       filePath,
 39 |     };
 40 |   });
 41 | 
 42 |   posts = sortPostsByDate(posts);
 43 | 
 44 |   return posts;
 45 | };
 46 | 
 47 | export const getPostBySlug = async (slug) => {
 48 |   const postFilePath = path.join(POSTS_PATH, `${slug}.mdx`);
 49 |   const source = fs.readFileSync(postFilePath);
 50 | 
 51 |   const { content, data } = matter(source);
 52 | 
 53 |   const mdxSource = await serialize(content, {
 54 |     // Optionally pass remark/rehype plugins
 55 |     mdxOptions: {
 56 |       remarkPlugins: [remarkGfm],
 57 |       rehypePlugins: [rehypePrism, rehypeUnwrapImages],
 58 |     },
 59 |     scope: data,
 60 |   });
 61 | 
 62 |   return { mdxSource, data, postFilePath };
 63 | };
 64 | 
 65 | export const getNextPostBySlug = (slug) => {
 66 |   const posts = getPosts();
 67 |   const currentFileName = `${slug}.mdx`;
 68 |   const currentPost = posts.find((post) => post.filePath === currentFileName);
 69 |   const currentPostIndex = posts.indexOf(currentPost);
 70 | 
 71 |   const post = posts[currentPostIndex - 1];
 72 |   // no prev post found
 73 |   if (!post) return null;
 74 | 
 75 |   const nextPostSlug = post?.filePath.replace(/\.mdx?$/, '');
 76 | 
 77 |   return {
 78 |     title: post.data.title,
 79 |     slug: nextPostSlug,
 80 |   };
 81 | };
 82 | 
 83 | export const getPreviousPostBySlug = (slug) => {
 84 |   const posts = getPosts();
 85 |   const currentFileName = `${slug}.mdx`;
 86 |   const currentPost = posts.find((post) => post.filePath === currentFileName);
 87 |   const currentPostIndex = posts.indexOf(currentPost);
 88 | 
 89 |   const post = posts[currentPostIndex + 1];
 90 |   // no prev post found
 91 |   if (!post) return null;
 92 | 
 93 |   const previousPostSlug = post?.filePath.replace(/\.mdx?$/, '');
 94 | 
 95 |   return {
 96 |     title: post.data.title,
 97 |     slug: previousPostSlug,
 98 |   };
 99 | };
100 | 


--------------------------------------------------------------------------------
/public/images/nextjs.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242 144"><g clip-path="url(#a)"><path fill="#000" d="M0 0h242v144H0z"/><circle cx="79" cy="75" r="103.5" stroke="#fff" stroke-opacity=".3"/><path d="M160.941 75c0 45.602-36.902 82.569-82.422 82.569-45.52 0-82.423-36.967-82.423-82.57C-3.904 29.398 33-7.568 78.52-7.568S160.94 29.397 160.94 75Z" stroke="#fff" stroke-opacity=".3"/><path d="M140.09 75c0 33.319-27.08 60.331-60.487 60.331-33.407 0-60.486-27.012-60.486-60.33 0-33.32 27.08-60.331 60.486-60.331 33.407 0 60.487 27.012 60.487 60.33Z" stroke="#fff" stroke-opacity=".3"/><circle cx="163" cy="75" r="103.5" stroke="#fff" stroke-opacity=".3"/><path d="M244.941 75c0 45.602-36.902 82.569-82.422 82.569-45.52 0-82.423-36.967-82.423-82.57 0-45.602 36.903-82.568 82.423-82.568S244.941 29.397 244.941 75Z" stroke="#fff" stroke-opacity=".3"/><path d="M224.09 75c0 33.319-27.08 60.331-60.487 60.331-33.407 0-60.486-27.012-60.486-60.33 0-33.32 27.079-60.331 60.486-60.331S224.09 41.682 224.09 75Z" stroke="#fff" stroke-opacity=".3"/><g filter="url(#b)"><path d="M119.25 48.01a3.5 3.5 0 0 1 3.5 0l20.749 11.98a3.5 3.5 0 0 1 1.75 3.03v23.96a3.5 3.5 0 0 1-1.75 3.03l-20.749 11.98a3.501 3.501 0 0 1-3.5 0L98.501 90.01a3.5 3.5 0 0 1-1.75-3.03V63.02a3.5 3.5 0 0 1 1.75-3.03l20.749-11.98Z" fill="#F7F7F6"/><path d="M119.25 48.01a3.5 3.5 0 0 1 3.5 0l20.749 11.98a3.5 3.5 0 0 1 1.75 3.03v23.96a3.5 3.5 0 0 1-1.75 3.03l-20.749 11.98a3.501 3.501 0 0 1-3.5 0L98.501 90.01a3.5 3.5 0 0 1-1.75-3.03V63.02a3.5 3.5 0 0 1 1.75-3.03l20.749-11.98Z" stroke="#fff" stroke-width="1.75"/></g><path d="M111.307 70.175h7.437v.588h-6.755v4.427h6.352v.589h-6.352v4.86h6.833v.589h-7.515V70.175Zm8.103 0h.791l3.501 4.86 3.579-4.86L132.149 64l-7.998 11.545 4.122 5.682h-.822l-3.749-5.17-3.765 5.17h-.805l4.152-5.681-3.874-5.372Zm9.157.588v-.588h8.475v.588h-3.904v10.465h-.682V70.763h-3.889ZM102 70.175h.852l11.751 17.499-4.856-6.446-7.034-10.217-.031 10.217H102V70.175ZM136.967 80.462a.24.24 0 0 0 .243-.246.24.24 0 0 0-.243-.246.24.24 0 0 0-.244.246.24.24 0 0 0 .244.246Zm.669-.647c0 .41.297.677.73.677.461 0 .739-.276.739-.755V78.05h-.371v1.685c0 .266-.134.408-.371.408-.213 0-.357-.132-.362-.328h-.365Zm1.955-.022c.027.426.383.7.914.7.567 0 .922-.287.922-.743 0-.358-.203-.557-.693-.67l-.264-.065c-.312-.073-.438-.17-.438-.34 0-.215.196-.356.489-.356.279 0 .471.138.506.357h.362c-.022-.401-.377-.684-.863-.684-.522 0-.87.283-.87.707 0 .35.197.559.63.66l.308.074c.317.074.456.183.456.365 0 .212-.219.365-.517.365-.32 0-.542-.144-.574-.37h-.368Z" fill="#000"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h242v144H0z"/></clipPath><filter id="b" x="60.876" y="20.416" width="120.247" height="126.667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="8.75"/><feGaussianBlur stdDeviation="17.5"/><feColorMatrix values="0 0 0 0 0.105882 0 0 0 0 0.12549 0 0 0 0 0.196078 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1832_7684"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1832_7684" result="shape"/></filter></defs></svg>


--------------------------------------------------------------------------------
/posts/example-post-1.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | type: Post
  3 | title: Next.js Blog Theme Style Guide
  4 | description: >-
  5 |   A style guide for a website is a set of design standards that define the look,
  6 |   feel, and behavior of a digital product, ensuring consistency and cohesion
  7 |   across all pages and elements.
  8 | date: '2025-01-06'
  9 | ---
 10 | A style guide for a website is a set of design standards that define the look, feel, and behavior of a digital product, ensuring consistency and cohesion across all pages and elements. It typically includes guidelines for colors, typography, spacing, buttons, icons, and imagery, as well as instructions on voice and tone for content.
 11 | 
 12 | # h1 Heading
 13 | 
 14 | ## h2 Heading
 15 | 
 16 | ### h3 Heading
 17 | 
 18 | #### h4 Heading
 19 | 
 20 | ##### h5 Heading
 21 | 
 22 | ###### h6 Heading
 23 | 
 24 | ## Horizontal Rules
 25 | 
 26 | ***
 27 | 
 28 | ## Emphasis
 29 | 
 30 | **This is bold text**
 31 | 
 32 | **This is bold text**
 33 | 
 34 | *This is italic text*
 35 | 
 36 | *This is italic text*
 37 | 
 38 | ~~Strikethrough~~
 39 | 
 40 | ## Blockquotes
 41 | 
 42 | > Blockquotes can also be nested...
 43 | >
 44 | > > ...by using additional greater-than signs right next to each other...
 45 | > >
 46 | > > > ...or with spaces between arrows.
 47 | 
 48 | ## Lists
 49 | 
 50 | Unordered
 51 | 
 52 | *   Lorem ipsum dolor sit amet
 53 | *   Consectetur adipiscing elit
 54 | *   Integer molestie lorem at massa
 55 | 
 56 | Ordered
 57 | 
 58 | 1.  Lorem ipsum dolor sit amet
 59 | 2.  Consectetur adipiscing elit
 60 | 3.  Integer molestie lorem at massa
 61 | 
 62 | ## Code
 63 | 
 64 | Inline `code`
 65 | 
 66 | Block code
 67 | 
 68 | ```
 69 | npm install netlify-cli -g
 70 | ```
 71 | 
 72 | Syntax highlighting
 73 | 
 74 | ```js
 75 | var foo = function (bar) {
 76 |   return bar++;
 77 | };
 78 | 
 79 | console.log(foo(5));
 80 | ```
 81 | 
 82 | ## Tables
 83 | 
 84 | | Option | Description                                                               |
 85 | | ------ | ------------------------------------------------------------------------- |
 86 | | data   | path to data files to supply the data that will be passed into templates. |
 87 | | engine | engine to be used for processing templates. Handlebars is the default.    |
 88 | | ext    | extension to be used for dest files.                                      |
 89 | 
 90 | Right aligned columns
 91 | 
 92 | | Option |                                                               Description |
 93 | | -----: | ------------------------------------------------------------------------: |
 94 | |   data | path to data files to supply the data that will be passed into templates. |
 95 | | engine |    engine to be used for processing templates. Handlebars is the default. |
 96 | |    ext |                                      extension to be used for dest files. |
 97 | 
 98 | ## Links
 99 | 
100 | *   [Next.js on Netlify](https://docs.netlify.com/frameworks/next-js/overview/)
101 | *   [Use Visual Editor with Next.js](https://docs.netlify.com/visual-editor/frameworks/next/)
102 | 
103 | ## Image
104 | 
105 | Recommended image orientation is horizontal. You can adjust the image component to your needs in `components/CustomImage.js`.
106 | 
107 | ![Image alt text](/images/random-image.jpeg "Image Title")
108 | 


--------------------------------------------------------------------------------
/pages/posts/[slug].js:
--------------------------------------------------------------------------------
  1 | import { getGlobalData } from '../../utils/global-data';
  2 | import {
  3 |   getNextPostBySlug,
  4 |   getPostBySlug,
  5 |   getPreviousPostBySlug,
  6 |   getPostFilePaths,
  7 | } from '../../utils/mdx-utils';
  8 | 
  9 | import { MDXRemote } from 'next-mdx-remote';
 10 | import Head from 'next/head';
 11 | import Link from 'next/link';
 12 | import ArrowIcon from '../../components/ArrowIcon';
 13 | import CustomImage from '../../components/CustomImage';
 14 | import CustomLink from '../../components/CustomLink';
 15 | import Footer from '../../components/Footer';
 16 | import Header from '../../components/Header';
 17 | import Layout, { GradientBackground } from '../../components/Layout';
 18 | import SEO from '../../components/SEO';
 19 | 
 20 | // Custom components/renderers to pass to MDX.
 21 | // Since the MDX files aren't loaded by webpack, they have no knowledge of how
 22 | // to handle import statements. Instead, you must include components in scope
 23 | // here.
 24 | const components = {
 25 |   a: CustomLink,
 26 |   // It also works with dynamically-imported components, which is especially
 27 |   // useful for conditionally loading components for certain routes.
 28 |   // See the notes in README.md for more details.
 29 |   Head,
 30 |   img: CustomImage,
 31 | };
 32 | 
 33 | export default function PostPage({
 34 |   source,
 35 |   frontMatter,
 36 |   prevPost,
 37 |   nextPost,
 38 |   globalData,
 39 |   slug,
 40 | }) {
 41 |   return (
 42 |     <Layout>
 43 |       <SEO
 44 |         title={`${frontMatter.title} - ${globalData.name}`}
 45 |         description={frontMatter.description}
 46 |       />
 47 |       <Header name={globalData.name} />
 48 |       <article className="px-6 md:px-0" data-sb-object-id={`posts/${slug}.mdx`}>
 49 |         <header>
 50 |           <h1
 51 |             className="mb-12 text-3xl text-center md:text-5xl dark:text-white"
 52 |             data-sb-field-path="title"
 53 |           >
 54 |             {frontMatter.title}
 55 |           </h1>
 56 |           {frontMatter.description && (
 57 |             <p className="mb-4 text-xl" data-sb-field-path="description">
 58 |               {frontMatter.description}
 59 |             </p>
 60 |           )}
 61 |         </header>
 62 |         <main>
 63 |           <article
 64 |             className="prose dark:prose-invert"
 65 |             data-sb-field-path="markdown_content"
 66 |           >
 67 |             <MDXRemote {...source} components={components} />
 68 |           </article>
 69 |         </main>
 70 |         <div className="grid mt-12 md:grid-cols-2 lg:-mx-24">
 71 |           {prevPost && (
 72 |             <Link
 73 |               href={`/posts/${prevPost.slug}`}
 74 |               className="flex flex-col px-10 py-8 text-center transition border border-gray-800/10 bg-white/10 md:text-right first:rounded-t-lg md:first:rounded-tr-none md:first:rounded-l-lg last:rounded-r-lg last:rounded-b-lg backdrop-blur-lg dark:bg-black/30 hover:bg-white/20 dark:hover:bg-black/50 dark:border-white/10 last:border-t md:border-r-0 md:last:border-r md:last:rounded-r-none"
 75 |             >
 76 |               <p className="mb-4 text-gray-500 uppercase dark:text-white dark:opacity-60">
 77 |                 Previous
 78 |               </p>
 79 |               <h4 className="mb-6 text-2xl text-gray-700 dark:text-white">
 80 |                 {prevPost.title}
 81 |               </h4>
 82 |               <ArrowIcon className="mx-auto mt-auto transform rotate-180 md:mr-0" />
 83 |             </Link>
 84 |           )}
 85 |           {nextPost && (
 86 |             <Link
 87 |               href={`/posts/${nextPost.slug}`}
 88 |               className="flex flex-col px-10 py-8 text-center transition border border-t-0 border-b-0 border-gray-800/10 bg-white/10 md:text-left md:first:rounded-t-lg last:rounded-b-lg first:rounded-l-lg md:last:rounded-bl-none md:last:rounded-r-lg backdrop-blur-lg dark:bg-black/30 hover:bg-white/20 dark:hover:bg-black/50 dark:border-white/10 first:border-t first:rounded-t-lg md:border-t last:border-b"
 89 |             >
 90 |               <p className="mb-4 text-gray-500 uppercase dark:text-white dark:opacity-60">
 91 |                 Next
 92 |               </p>
 93 |               <h4 className="mb-6 text-2xl text-gray-700 dark:text-white">
 94 |                 {nextPost.title}
 95 |               </h4>
 96 |               <ArrowIcon className="mx-auto mt-auto md:ml-0" />
 97 |             </Link>
 98 |           )}
 99 |         </div>
100 |       </article>
101 |       <Footer copyrightText={globalData.footerText} />
102 |       <GradientBackground
103 |         variant="large"
104 |         className="absolute -top-32 opacity-30 dark:opacity-50"
105 |       />
106 |       <GradientBackground
107 |         variant="small"
108 |         className="absolute bottom-0 opacity-20 dark:opacity-10"
109 |       />
110 |     </Layout>
111 |   );
112 | }
113 | 
114 | export const getStaticProps = async ({ params }) => {
115 |   const globalData = getGlobalData();
116 |   const { mdxSource, data } = await getPostBySlug(params.slug);
117 |   const prevPost = getPreviousPostBySlug(params.slug);
118 |   const nextPost = getNextPostBySlug(params.slug);
119 | 
120 |   return {
121 |     props: {
122 |       globalData,
123 |       source: mdxSource,
124 |       frontMatter: data,
125 |       slug: params.slug,
126 |       prevPost,
127 |       nextPost,
128 |     },
129 |   };
130 | };
131 | 
132 | export const getStaticPaths = async () => {
133 |   const paths = getPostFilePaths()
134 |     // Remove file extensions for page paths
135 |     .map((path) => path.replace(/\.mdx?$/, ''))
136 |     // Map the path into the static paths object required by Next.js
137 |     .map((slug) => ({ params: { slug } }));
138 | 
139 |   return {
140 |     paths,
141 |     fallback: false,
142 |   };
143 | };
144 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![Netlify Next.js Blog Template designed by Bejamas](https://user-images.githubusercontent.com/43764894/223762618-62742b4e-9424-44a7-8e85-9f7e4e19db54.png)
  2 | 
  3 | 
  4 | [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nextjs-blog-theme)
  5 | 
  6 | 
  7 | A customizable blog starter using:
  8 | 
  9 | - [Next.js](https://github.com/vercel/next.js) v15 (Pages Router)
 10 | - [Tailwind](https://tailwindcss.com/) v4.x
 11 | - [Netlify Visual Editor](https://docs.netlify.com/visual-editor/overview/)
 12 | - Built-in [MDX](https://mdxjs.com/) support
 13 | - Includes modern design with dark & light themes
 14 | 
 15 | ![Preview of blog theme. Author named Jay Doe and blog's name is "Next.js Blog Theme" with one blog post](nextjs-blog-theme-preview.png)
 16 | 
 17 | [Take a gander at the demo.](https://bejamas-nextjs-blog.netlify.app)
 18 | 
 19 | [Click here to watch the template walkthrough!](https://www.youtube.com/watch?v=63QZHs259dY)
 20 | 
 21 | ## Table of Contents:
 22 | 
 23 | - [Getting Started](#getting-started)
 24 |   - [Setting Up Locally](#setting-up-locally)
 25 |   - [Using the Wizard](#using-the-setup-wizard)
 26 | - [Configuring the Blog](#configuring-the-blog)
 27 | - [Adding New Posts](#adding-new-posts)
 28 | - [Netlify Visual Editor](#netlify-visual-editor)
 29 | - [Testing](#testing)
 30 |   - [Included Default Testing](#included-default-testing)
 31 |   - [Removing Renovate](#removing-renovate)
 32 | 
 33 | ## Getting Started
 34 | 
 35 | ---
 36 | 
 37 | You can get started with this project in two ways: locally or using the [setup wizard](https://nextjs-wizard.netlify.app/).
 38 | 
 39 | ### Setting Up Locally
 40 | 
 41 | If you're doing it locally, start with clicking the [use this template](https://github.com/netlify-templates/nextjs-blog-theme/generate) button on GitHub. This will create a new repository with this template's files on your GitHub account. Once that is done, clone your new repository and navigate to it in your terminal.
 42 | 
 43 | From there, you can install the project's dependencies by running:
 44 | 
 45 | ```shell
 46 | yarn install
 47 | ```
 48 | 
 49 | Finally, you can run your project locally with:
 50 | 
 51 | ```shell
 52 | yarn run dev
 53 | ```
 54 | 
 55 | Open your browser and visit <http://localhost:3000>, your project should be running!
 56 | 
 57 | ### Using the Setup Wizard
 58 | 
 59 | ![Preview of Setup Wizard showing the initial page of a setup form](nextjs-setup-wizard.png)
 60 | 
 61 | Through the [setup wizard](https://nextjs-wizard.netlify.app/), you can create your blog in a few clicks and deploy to Netlify.
 62 | 
 63 | ## Configuring the blog
 64 | 
 65 | The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.
 66 | 
 67 | Here are the variables you can edit:
 68 | | Variable | Description | Options
 69 | | --- | --- | --- |
 70 | | `BLOG_NAME` | the name of your blog, displayed below the avatar ||
 71 | | `BLOG_TITLE` | the main header (`h1`) on the home page ||
 72 | | `BLOG_FOOTER_TEXT`| the text in the footer ||
 73 | | `BLOG_THEME` | the theme to pass to Tailwind | default |
 74 | | `BLOG_FONT_HEADINGS` | the font-family for all HTML headings, from `h1` to `h6`| sans-serif (default), serif, monospace|
 75 | | `BLOG_FONT_PARAGRAPHS` | the font-family for all other HTML elements | sans-serif (default), serif, monospace|
 76 | 
 77 | All of the env variables can be configured through the [Wizard](https://nextjs-wizard.netlify.app/) or through setting the project's environment variables. You can do this in your Netlify dashaboard (Site settings/Build & deploy/Environment/Environment variables).
 78 | 
 79 | https://user-images.githubusercontent.com/3611928/153997545-6dcdeef0-e570-49e7-93d6-ce0d393d16c9.mp4
 80 | 
 81 | [alt: video walkthrough of editing env vars]
 82 | 
 83 | If setting an environment variable isn't your cup of tea, the defaults can be changed in [`utils/global-data.js`](/utils/global-data.js). You can also remove the variables and hard code blog information where these variables are used in the code base.
 84 | 
 85 | - `BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS` are used in [`tailwind-preset.js`](tailwind-preset.js)
 86 | - `BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT` are used in [`pages/index.js`](pages/index.js) & [`pages/posts/[slug].js`](pages/posts/[slug].js) through the `globalData` object.
 87 | 
 88 | ## Adding new posts
 89 | 
 90 | All posts are stored in `/posts` directory. To make a new post, create a new file with the [`.mdx` extension](https://mdxjs.com/).
 91 | 
 92 | Since the posts are written in `MDX` format you can pass props and components. That means you can use [React components](https://reactjs.org/docs/components-and-props.html) inside your posts to make them more interactive. Learn more about how to do so in the [MDX docs on content](https://mdxjs.com/docs/using-mdx/#components).
 93 | 
 94 | https://user-images.githubusercontent.com/3611928/152727802-102ec296-41c8-446d-93ed-922d11187073.mp4
 95 | 
 96 | [alt: video walkthrough of adding a new blog post]
 97 | 
 98 | ## Netlify Visual Editor
 99 | 
100 | This template is configured to work with [visual editing](https://docs.netlify.com/visual-editor/overview/) and [Git Content Source](https://docs.netlify.com/create/content-sources/git/).
101 | 
102 | ### Develop with Netlify Visual Editor Locally
103 | 
104 | The typical development process is to begin by working locally. Clone this repository, then run `npm install` in its root directory.
105 | 
106 | Run the Next.js development server:
107 | 
108 | ```txt
109 | cd nextjs-blog-theme
110 | npm run dev
111 | ```
112 | 
113 | Install the [Netlify Visual Editor CLI](https://www.npmjs.com/package/@stackbit/cli). Then open a new terminal window in the same project directory and run the Netlify visual editor dev server:
114 | 
115 | ```txt
116 | npm install -g @stackbit/cli
117 | stackbit dev
118 | ```
119 | 
120 | This outputs your own Netlify visual editor URL. Open this, register, or sign in, and you will be directed to Netlify's visual editor for your new project.
121 | 
122 | ![Next.js Dev + Visual Editor Dev](https://assets.stackbit.com/docs/next-dev-stackbit-dev.png)
123 | 
124 | ### Next Steps
125 | 
126 | Here are a few suggestions on what to do next if you're new to Netlify Visual Editor:
127 | 
128 | - Learn [Netlify visual editor overview](https://docs.netlify.com/visual-editor/visual-editing/)
129 | - Check [Netlify visual editor reference documentation](https://visual-editor-reference.netlify.com/)
130 | 
131 | ## Testing
132 | 
133 | ### Included Default Testing
134 | 
135 | We’ve included some tooling that helps us maintain these templates. This template currently uses:
136 | 
137 | - [Renovate](https://www.mend.io/free-developer-tools/renovate/) - to regularly update our dependencies
138 | 
139 | If your team is not interested in this tooling, you can remove them with ease!
140 | 
141 | ### Removing Renovate
142 | 
143 | In order to keep our project up-to-date with dependencies we use a tool called [Renovate](https://github.com/marketplace/renovate). If you’re not interested in this tooling, delete the `renovate.json` file and commit that onto your main branch.
144 | 
145 | ## Support
146 | 
147 | If you get stuck along the way, get help in our [support forums](https://answers.netlify.com/).
148 | 


--------------------------------------------------------------------------------
/github-banner.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1200" height="300" viewBox="0 0 1200 300" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_3003_4575)">
 3 | <rect width="1200" height="300" fill="#151A1E"/>
 4 | <ellipse opacity="0.2" cx="180.542" cy="154.137" rx="1013.54" ry="777.019" fill="#054861"/>
 5 | <ellipse opacity="0.2" cx="180.542" cy="154.137" rx="784.402" ry="601.352" fill="#054861"/>
 6 | <ellipse opacity="0.2" cx="181.045" cy="153.752" rx="561.795" ry="430.692" fill="#054861"/>
 7 | <rect x="947" y="34" width="253" height="94" fill="#F94062"/>
 8 | <path d="M978.979 93.1084C977.299 93.1084 976 92.0406 976 90.778V72.622C976 71.2953 977.375 70.2916 978.979 70.2916H985.434C991.162 70.2916 994.026 73.399 994.026 76.6344C994.026 78.9002 992.308 80.2912 990.017 81.2305C992.384 82.0388 994.752 83.496 994.752 86.3103C994.752 90.0982 991.162 93.1087 985.281 93.1087H978.979V93.1084ZM985.739 79.2236C987.076 79.2236 988.679 78.4467 988.679 76.6992C988.679 75.4704 987.992 74.3692 986.006 74.3692H981.347V79.2238L985.739 79.2236ZM981.347 83.3664V88.9967H985.624C988.145 88.9967 989.406 87.9298 989.406 86.2454C989.406 84.4006 987.878 83.3664 985.853 83.3664H981.347Z" fill="#F2F0F7"/>
 9 | <path d="M1017.66 93.1083H1007.54C1005.67 93.1083 1003.99 92.5578 1003.99 90.8105V72.5893C1003.99 71.457 1005.25 70.2915 1006.93 70.2915H1017.28C1018.73 70.2915 1019.95 71.2626 1019.95 72.3951C1019.95 73.5608 1018.73 74.4017 1017.28 74.4017H1009.34V79.6122H1016.56C1017.89 79.6122 1019.19 80.4855 1019.19 81.6513C1019.19 82.8157 1018.04 83.7225 1016.56 83.7225H1009.34V88.9966H1017.66C1019.08 88.9966 1020.34 89.9034 1020.34 91.0044C1020.34 92.1705 1019.11 93.1083 1017.66 93.1083Z" fill="#F2F0F7"/>
10 | <path d="M1040.8 85.5023C1040.8 90.4208 1038.74 93.3997 1031.94 93.3997C1030.49 93.3997 1027.55 93.2702 1027.55 91.1665C1027.55 89.8714 1028.96 89.126 1030.03 89.126C1030.91 89.126 1031.41 89.3207 1032.36 89.3207C1034.92 89.3207 1035.46 87.8645 1035.46 85.5022V72.0711C1035.46 70.939 1036.6 70 1038.13 70C1039.54 70 1040.8 70.9714 1040.8 72.0711L1040.8 85.5023Z" fill="#F2F0F7"/>
11 | <path d="M1103.55 91.3607C1103.55 92.4608 1102.32 93.3998 1100.91 93.3998C1099.46 93.3998 1098.2 92.4608 1098.2 91.3607V80.2264L1093.85 87.4762C1093.35 88.3167 1092.39 88.7053 1091.32 88.7053C1090.29 88.7053 1089.34 88.3167 1088.84 87.4762L1084.49 80.2264V91.3607C1084.49 92.4608 1083.23 93.3998 1081.74 93.3998C1080.29 93.3998 1079.14 92.4608 1079.14 91.3607V72.1361C1079.14 70.9067 1080.33 70.0002 1081.89 70.0002C1083.11 70.0002 1084.07 70.4211 1084.57 71.2628L1091.36 82.6863L1098.16 71.2304C1098.7 70.2916 1099.73 70 1100.8 70C1102.36 70 1103.55 70.9714 1103.55 72.1358V91.3607Z" fill="#F2F0F7"/>
12 | <path d="M1133.71 90.6158L1126.26 72.2007C1125.73 70.9065 1124.97 70 1123.13 70C1121.3 70 1120.54 70.939 1120.04 72.2007L1112.59 90.6158C1112.52 90.7779 1112.48 91.1666 1112.48 91.3285C1112.48 92.5579 1113.74 93.3998 1115.23 93.3998C1116.14 93.3998 1117.37 92.8169 1117.75 91.8791C1117.75 91.8791 1122.98 77.2173 1123.13 76.214C1123.29 77.2173 1128.48 91.8791 1128.48 91.8791C1128.86 92.7847 1130.08 93.3998 1131.08 93.3998C1132.64 93.3998 1133.83 92.5579 1133.83 91.3285C1133.83 91.1666 1133.79 90.7779 1133.71 90.6158Z" fill="#F2F0F7"/>
13 | <path d="M1070.44 90.6158L1062.99 72.2007C1062.46 70.9065 1061.69 70 1059.86 70C1058.03 70 1057.26 70.939 1056.77 72.2007L1049.32 90.6158C1049.24 90.7779 1049.21 91.1666 1049.21 91.3285C1049.21 92.5579 1050.46 93.3998 1051.95 93.3998C1052.87 93.3998 1054.09 92.8169 1054.47 91.8791C1054.47 91.8791 1059.71 77.2173 1059.86 76.214C1060.01 77.2173 1065.21 91.8791 1065.21 91.8791C1065.59 92.7847 1066.81 93.3998 1067.8 93.3998C1069.37 93.3998 1070.55 92.5579 1070.55 91.3285C1070.55 91.1666 1070.51 90.7779 1070.44 90.6158Z" fill="#F2F0F7"/>
14 | <path d="M1152.84 84.304C1152.04 84.0137 1151.09 83.7226 1150.05 83.4313C1146.31 82.4597 1142.26 81.3923 1142.26 76.6993C1142.26 72.5247 1145.7 70.0002 1151.12 70.0002C1153.38 70.0002 1158.8 70.4858 1158.8 72.9134C1158.8 73.981 1157.81 74.9522 1156.13 74.9522C1155.44 74.9522 1154.9 74.7579 1154.25 74.5962C1153.53 74.3692 1152.69 74.1105 1151.35 74.1105C1149.48 74.1105 1147.72 74.6609 1147.72 76.5698C1147.72 77.9934 1148.68 78.4793 1149.33 78.7381C1150.32 79.1591 1151.24 79.4181 1152.08 79.6125C1155.82 80.6152 1159.91 81.7161 1159.91 86.3103C1159.91 90.8105 1155.86 93.3999 1150.4 93.3999C1147.57 93.3999 1142.23 92.5581 1142.23 90.2912C1142.23 89.256 1143.33 88.2523 1144.75 88.2523C1145.32 88.2523 1145.93 88.4142 1146.65 88.6412C1147.57 88.9001 1148.79 89.289 1150.44 89.289C1153.07 89.289 1154.41 88.2848 1154.41 86.5049C1154.41 85.0483 1153.53 84.563 1152.84 84.304Z" fill="#F2F0F7"/>
15 | <path d="M1177.4 93.2661C1178.74 93.2661 1180.03 94.1718 1180.03 95.3373C1180.03 96.5021 1178.89 97.3761 1177.4 97.3761H1167.23C1165.74 97.3761 1164.59 96.5021 1164.59 95.3373C1164.59 94.1718 1165.89 93.2661 1167.23 93.2661H1177.4Z" fill="#2E0276"/>
16 | <path d="M794.383 75.819H789.3V93H794.383C800.156 93 803.583 89.849 803.583 84.421C803.583 78.993 800.156 75.819 794.383 75.819ZM794.245 90.263H792.267V78.579H794.245C798.086 78.579 800.501 80.626 800.501 84.421C800.501 88.17 798.086 90.263 794.245 90.263ZM818.047 86.606C818.047 82.696 815.517 80.189 811.676 80.189C807.858 80.189 805.305 82.765 805.305 86.698C805.305 90.654 807.881 93.23 811.722 93.23C814.781 93.23 816.966 91.643 817.748 89.343H814.758C814.252 90.171 813.24 90.654 811.745 90.654C809.767 90.654 808.479 89.458 808.249 87.664H818.047V86.606ZM811.676 82.765C813.447 82.765 814.827 83.754 815.103 85.41H808.318C808.686 83.915 809.974 82.765 811.676 82.765ZM824.746 80.143C821.526 80.143 819.847 81.776 819.847 83.846C819.847 85.64 820.767 87.112 823.32 87.595L825.252 87.963C826.724 88.239 827.207 88.653 827.207 89.504C827.207 90.24 826.54 90.815 825.137 90.815C823.205 90.815 822.423 90.102 822.377 89.044H819.525C819.525 91.436 821.296 93.299 824.976 93.299C828.173 93.299 830.082 91.827 830.082 89.435C830.082 87.595 829.116 86.123 826.287 85.571L824.516 85.226C823.021 84.927 822.745 84.559 822.745 83.846C822.745 83.156 823.366 82.627 824.723 82.627C826.08 82.627 826.885 83.363 826.908 84.283H829.806C829.806 81.96 827.897 80.143 824.746 80.143ZM833.792 75.405C832.711 75.405 832.044 76.187 832.044 77.153C832.044 78.119 832.711 78.924 833.792 78.924C834.85 78.924 835.54 78.119 835.54 77.153C835.54 76.187 834.85 75.405 833.792 75.405ZM833.792 80.58C833.194 80.58 832.78 80.442 832.412 80.189V93H835.172V80.189C834.827 80.442 834.413 80.58 833.792 80.58ZM847.272 80.419V82.19C846.398 80.902 844.972 80.143 842.994 80.143C839.613 80.143 837.267 82.489 837.267 86.491C837.267 90.539 839.613 92.954 842.994 92.954C844.972 92.954 846.398 92.172 847.272 90.884V93.92C847.272 95.093 846.697 95.691 845.455 95.691H839.797V98.06H845.869C848.491 98.06 850.032 96.519 850.032 93.943V80.419H847.272ZM843.73 90.447C841.637 90.447 840.165 88.86 840.165 86.422C840.165 84.076 841.637 82.535 843.73 82.535C845.892 82.535 847.272 84.03 847.272 86.422C847.272 88.883 845.892 90.447 843.73 90.447ZM859.341 80.143C857.57 80.143 856.236 80.971 855.546 82.121V80.419H852.786V93H855.546V86.422C855.546 84.237 856.788 82.811 858.513 82.811C860.215 82.811 861.342 84.099 861.342 86.445V93H864.102V85.939C864.102 82.213 862.17 80.143 859.341 80.143ZM878.557 86.606C878.557 82.696 876.027 80.189 872.186 80.189C868.368 80.189 865.815 82.765 865.815 86.698C865.815 90.654 868.391 93.23 872.232 93.23C875.291 93.23 877.476 91.643 878.258 89.343H875.268C874.762 90.171 873.75 90.654 872.255 90.654C870.277 90.654 868.989 89.458 868.759 87.664H878.557V86.606ZM872.186 82.765C873.957 82.765 875.337 83.754 875.613 85.41H868.828C869.196 83.915 870.484 82.765 872.186 82.765ZM889.968 75.037V82.213C889.094 80.925 887.691 80.143 885.736 80.143C882.378 80.143 880.055 82.581 880.055 86.721C880.055 90.838 882.378 93.299 885.736 93.299C887.691 93.299 889.094 92.517 889.968 91.206V93H892.728V75.037H889.968ZM886.472 90.769C884.402 90.769 882.953 89.159 882.953 86.652C882.953 84.145 884.402 82.535 886.472 82.535C888.588 82.535 889.968 84.099 889.968 86.652C889.968 89.205 888.588 90.769 886.472 90.769ZM911.665 80.143C909.687 80.143 908.238 80.925 907.364 82.213V75.037H904.604V93H907.364V91.206C908.238 92.517 909.687 93.299 911.665 93.299C915.023 93.299 917.369 90.838 917.369 86.721C917.369 82.581 915.023 80.143 911.665 80.143ZM910.929 90.907C908.767 90.907 907.364 89.228 907.364 86.767C907.364 84.214 908.767 82.65 910.929 82.65C912.999 82.65 914.471 84.283 914.471 86.767C914.471 89.182 912.999 90.907 910.929 90.907ZM927.644 80.419L923.987 89.113L920.491 80.419H917.708L922.584 92.494L920.629 97.163H923.32L930.335 80.419H927.644Z" fill="#F2F0F7"/>
17 | <path d="M82.783 163.147V187.669L61.477 163.147H51.762V214H63.085V182.443L82.783 205.089V214H94.106V163.147H82.783ZM137.221 195.173C137.221 183.515 129.717 175.877 117.858 175.877C106.066 175.877 98.495 183.649 98.495 195.307C98.495 206.965 106.2 214.67 117.925 214.67C127.506 214.67 134.34 209.645 136.484 202.61H125.362C124.223 204.754 121.744 205.96 118.059 205.96C113.101 205.96 110.086 202.878 109.55 198.389H137.221V195.173ZM117.858 184.587C122.146 184.587 125.429 186.999 126.166 191.22H109.684C110.555 187.334 113.704 184.587 117.858 184.587ZM175.412 176.547H163.486L155.781 187.133L148.076 176.547H135.748L149.014 194.838L135.413 214H147.339L155.044 203.079L162.95 214H175.278L161.744 195.374L175.412 176.547ZM201.238 176.547H193.131V164.755H182.679V176.547H175.644V185.391H182.679V214H193.131V185.391H201.238V176.547ZM205.863 201.27C201.91 201.27 199.163 204.218 199.163 208.037C199.163 211.722 201.91 214.804 205.863 214.804C209.883 214.804 212.563 211.722 212.563 208.037C212.563 204.218 209.883 201.27 205.863 201.27ZM223.927 159.529C220.175 159.529 217.562 162.343 217.562 165.961C217.562 169.512 220.175 172.46 223.927 172.46C227.746 172.46 230.359 169.512 230.359 165.961C230.359 162.343 227.746 159.529 223.927 159.529ZM218.835 216.814C218.835 219.092 217.696 220.298 215.284 220.298H211.666V229.544H216.691C224.463 229.544 229.22 224.72 229.22 216.948L229.287 175.676C227.947 176.614 226.272 177.217 223.994 177.217C221.716 177.217 220.175 176.614 218.835 175.676V216.814ZM251.451 175.81C241.066 175.81 235.639 180.902 235.639 187.535C235.639 192.895 238.386 197.317 247.23 198.724L252.456 199.595C256.811 200.332 257.883 201.337 257.883 203.347C257.883 205.223 256.007 206.496 252.322 206.496C247.431 206.496 245.287 204.62 245.22 201.873H234.835C234.835 209.377 240.53 214.804 251.92 214.804C262.506 214.804 268.335 210.181 268.335 202.878C268.335 197.183 265.789 192.828 256.141 191.22L251.116 190.416C246.895 189.679 246.091 188.741 246.091 187.066C246.091 185.324 247.9 184.051 251.317 184.051C254.868 184.051 257.012 185.927 257.079 188.339H267.531C267.531 181.237 261.836 175.81 251.451 175.81ZM328.973 186.664C332.658 184.386 334.668 180.835 334.668 176.279C334.668 168.038 328.638 163.147 317.851 163.147H296.545V214H318.789C330.782 214 337.75 208.707 337.75 199.126C337.75 193.096 335.003 188.875 328.973 186.664ZM316.913 172.326C320.397 172.326 323.814 173.733 323.814 177.753C323.814 181.505 320.196 182.912 316.846 182.912H307.868V172.326H316.913ZM317.449 204.352H307.868V192.024H317.449C322.072 192.024 326.025 193.967 326.025 198.389C326.025 202.543 322.139 204.352 317.449 204.352ZM343.345 160.735V214H353.797V160.735H343.345ZM377.537 175.676C364.941 175.676 357.772 184.118 357.772 195.307C357.772 206.496 364.941 214.938 377.537 214.938C390.066 214.938 397.235 206.496 397.235 195.307C397.235 184.118 390.066 175.676 377.537 175.676ZM377.537 185.19C382.964 185.19 386.314 189.143 386.314 195.307C386.314 201.471 382.964 205.424 377.537 205.424C372.11 205.424 368.693 201.471 368.693 195.307C368.693 189.143 372.11 185.19 377.537 185.19ZM428.348 176.547V180.902C425.869 177.619 421.983 175.676 416.69 175.676C406.975 175.676 400.074 182.309 400.074 194.637C400.074 207.032 406.975 213.799 416.69 213.799C421.983 213.799 425.869 211.789 428.348 208.573V216.278C428.348 219.226 426.941 220.7 423.926 220.7H407.779V229.544H425.601C433.775 229.544 438.8 224.452 438.8 216.278V176.547H428.348ZM419.705 204.352C414.68 204.352 410.995 200.6 410.995 194.369C410.995 188.272 414.68 184.654 419.705 184.654C424.864 184.654 428.348 188.272 428.348 194.369C428.348 200.533 424.864 204.352 419.705 204.352ZM506.515 163.147H465.109V173.934H480.117V214H491.44V173.934H506.515V163.147ZM540.776 195.173C540.776 183.515 533.272 175.877 521.413 175.877C509.621 175.877 502.05 183.649 502.05 195.307C502.05 206.965 509.755 214.67 521.48 214.67C531.061 214.67 537.895 209.645 540.039 202.61H528.917C527.778 204.754 525.299 205.96 521.614 205.96C516.656 205.96 513.641 202.878 513.105 198.389H540.776V195.173ZM521.413 184.587C525.701 184.587 528.984 186.999 529.721 191.22H513.239C514.11 187.334 517.259 184.587 521.413 184.587ZM587.618 175.676C582.526 175.676 578.573 178.088 576.295 181.572C573.883 177.686 570.064 175.676 565.24 175.676C560.818 175.676 557.468 177.686 555.525 180.634V176.547H545.073V214H555.525V194.57C555.525 188.741 558.138 185.257 561.957 185.257C565.91 185.257 568.389 188.473 568.389 194.637V214H578.841V194.57C578.841 188.741 581.454 185.257 585.273 185.257C589.226 185.257 591.705 188.473 591.705 194.637V214H602.157V192.828C602.157 182.242 596.395 175.676 587.618 175.676ZM631.075 175.676C625.849 175.676 621.963 177.686 619.484 180.969V176.547H609.032V226.73H619.484V209.578C621.963 212.928 625.849 214.938 631.075 214.938C640.79 214.938 647.624 207.97 647.624 195.307C647.624 182.577 640.79 175.676 631.075 175.676ZM628.06 205.96C622.968 205.96 619.484 202.208 619.484 195.508C619.484 188.942 622.968 185.123 628.06 185.123C633.085 185.123 636.703 189.009 636.703 195.508C636.703 202.074 633.085 205.96 628.06 205.96ZM651.53 160.735V214H661.982V160.735H651.53ZM696.307 176.547V181.639C694.431 178.557 690.88 175.676 684.783 175.676C673.058 175.676 665.956 183.85 665.956 195.307C665.956 206.831 673.058 214.938 684.783 214.938C690.88 214.938 694.431 212.057 696.307 209.042V214H706.759V176.547H696.307ZM686.726 205.424C681.031 205.424 676.877 201.404 676.877 195.307C676.877 189.344 681.031 185.257 686.726 185.257C692.555 185.257 696.173 189.143 696.307 195.307C696.173 201.471 692.555 205.424 686.726 205.424ZM736.801 176.547H728.694V164.755H718.242V176.547H711.207V185.391H718.242V214H728.694V185.391H736.801V176.547ZM776.134 195.173C776.134 183.515 768.63 175.877 756.771 175.877C744.979 175.877 737.408 183.649 737.408 195.307C737.408 206.965 745.113 214.67 756.838 214.67C766.419 214.67 773.253 209.645 775.397 202.61H764.275C763.136 204.754 760.657 205.96 756.972 205.96C752.014 205.96 748.999 202.878 748.463 198.389H776.134V195.173ZM756.771 184.587C761.059 184.587 764.342 186.999 765.079 191.22H748.597C749.468 187.334 752.617 184.587 756.771 184.587Z" fill="white"/>
18 | <path fill-rule="evenodd" clip-rule="evenodd" d="M116.489 72.3861L116.651 75.2891C118.504 73.0438 120.937 71.9211 123.948 71.9211C129.166 71.9211 131.822 74.9166 131.915 80.9076V97.5068H126.289V81.2325C126.289 79.6383 125.945 78.4589 125.258 77.6915C124.572 76.9255 123.448 76.5425 121.888 76.5425C119.617 76.5425 117.926 77.5727 116.816 79.6304V97.5068H111.187V72.3861H116.491H116.489ZM148.686 97.9717C145.12 97.9717 142.227 96.8464 140.012 94.5945C137.796 92.3427 136.688 89.3432 136.688 85.5976V84.9015C136.688 82.3947 137.17 80.1534 138.136 78.1802C139.1 76.207 140.456 74.671 142.201 73.5708C143.946 72.4732 145.891 71.9238 148.039 71.9238C151.45 71.9238 154.088 73.0147 155.947 75.1966C157.81 77.3798 158.739 80.4664 158.739 84.4604V86.7361H142.362C142.534 88.8096 143.223 90.45 144.436 91.6572C145.648 92.8644 147.174 93.4679 149.011 93.4679C151.589 93.4679 153.689 92.4245 155.311 90.3338L158.345 93.2368C157.341 94.7372 156.002 95.9021 154.327 96.7302C152.651 97.5583 150.771 97.9717 148.687 97.9717H148.686ZM148.015 76.4513C146.47 76.4513 145.224 76.9928 144.275 78.0759C143.324 79.1589 142.719 80.6685 142.456 82.6034H153.18V82.1847C153.056 80.2961 152.554 78.8696 151.675 77.9015C150.794 76.9347 149.575 76.4513 148.015 76.4513V76.4513ZM170.157 66.2815V72.3874H174.582V76.5662H170.157V90.5887C170.157 91.5476 170.348 92.2396 170.725 92.6662C171.103 93.0915 171.779 93.3042 172.753 93.3042C173.415 93.3023 174.076 93.2243 174.721 93.0717V97.4368C173.439 97.7934 172.205 97.9704 171.015 97.9704C166.692 97.9704 164.53 95.5798 164.53 90.7974V76.5649H160.404V72.3861H164.527V66.2802H170.155L170.157 66.2815ZM184.867 97.5081H179.238V61.8477H184.867V97.5081ZM196.981 97.5081H191.352V72.3874H196.981V97.5081ZM191.004 65.8628C191.004 64.9977 191.278 64.2779 191.826 63.7047C192.375 63.1328 193.158 62.8462 194.177 62.8462C195.196 62.8462 195.983 63.1328 196.541 63.7047C197.096 64.2779 197.373 64.9977 197.373 65.8642C197.373 66.7147 197.096 67.4227 196.541 67.9879C195.983 68.5532 195.196 68.8359 194.177 68.8359C193.158 68.8359 192.375 68.5532 191.826 67.9879C191.278 67.424 191.004 66.7147 191.004 65.8642V65.8628ZM205.087 97.5081V76.5649H201.265V72.3861H205.087V70.0879C205.087 67.3011 205.859 65.151 207.403 63.6334C208.948 62.1172 211.109 61.3591 213.888 61.3591C214.877 61.3591 215.927 61.4977 217.039 61.7764L216.9 66.1877C216.19 66.0559 215.468 65.994 214.746 66.0028C212.058 66.0028 210.715 67.387 210.715 70.1579V72.3861H215.811V76.5649H210.715V97.5068H205.087V97.5081ZM228.689 89.4291L233.785 72.3874H239.784L229.825 101.316C228.296 105.541 225.702 107.654 222.042 107.654C221.223 107.654 220.32 107.514 219.332 107.235V102.87L220.398 102.94C221.817 102.94 222.887 102.682 223.606 102.162C224.323 101.645 224.891 100.774 225.308 99.5513L226.118 97.3919L217.316 72.3874H223.385L228.689 89.4291Z" fill="white"/>
19 | <path d="M82.8319 73.9142L82.8134 73.9063C82.8029 73.9023 82.7923 73.8984 82.7831 73.8891C82.7679 73.8728 82.7567 73.8533 82.7503 73.832C82.7439 73.8107 82.7424 73.7882 82.7461 73.7663L83.767 67.5244L88.5548 72.3134L83.5755 74.4319C83.5617 74.4375 83.5468 74.4402 83.5319 74.4399H83.5121C83.5055 74.4359 83.4989 74.4306 83.4857 74.4174C83.3004 74.2111 83.0788 74.0405 82.8319 73.9142V73.9142ZM89.7764 73.5338L94.8957 78.6531C95.9589 79.7176 96.4912 80.2485 96.6853 80.864C96.7144 80.9551 96.7381 81.0463 96.7566 81.1401L84.5225 75.9587C84.5159 75.956 84.5093 75.9534 84.5027 75.9508C84.4538 75.931 84.397 75.9085 84.397 75.8584C84.397 75.8082 84.4551 75.7844 84.504 75.7646L84.5198 75.758L89.7764 73.5338ZM96.548 82.7831C96.2838 83.2797 95.7687 83.7948 94.897 84.6678L89.1253 90.4382L81.6604 88.8836L81.6208 88.8757C81.5548 88.8651 81.4848 88.8533 81.4848 88.7938C81.4564 88.4859 81.365 88.1871 81.2161 87.916C81.0673 87.6449 80.8643 87.4074 80.6197 87.2182C80.5893 87.1878 80.5972 87.1402 80.6064 87.0967C80.6064 87.0901 80.6065 87.0834 80.6091 87.0782L82.0131 78.4589L82.0183 78.4299C82.0263 78.3638 82.0381 78.2872 82.0976 78.2872C82.3985 78.2498 82.6889 78.1529 82.9519 78.0021C83.2149 77.8513 83.4453 77.6496 83.6297 77.4089C83.6415 77.3957 83.6495 77.3812 83.6653 77.3733C83.7076 77.3534 83.7578 77.3733 83.8014 77.3917L96.5466 82.7831H96.548ZM87.798 91.7655L78.307 101.256L79.9315 91.2716L79.9342 91.2584C79.9355 91.2451 79.9381 91.2319 79.9421 91.2201C79.9553 91.1884 79.9897 91.1751 80.0227 91.1619L80.0385 91.1553C80.3942 91.0036 80.7088 90.7695 80.9565 90.4725C80.9881 90.4355 81.0265 90.3999 81.0753 90.3933C81.088 90.3912 81.1009 90.3912 81.1136 90.3933L87.7966 91.7668L87.798 91.7655ZM76.2981 103.265L75.2283 104.335L63.401 87.2419C63.3967 87.2357 63.3923 87.2295 63.3878 87.2234C63.3693 87.1984 63.3495 87.1733 63.3534 87.1442C63.3534 87.1231 63.368 87.1046 63.3825 87.0887L63.3957 87.0716C63.4314 87.0187 63.4617 86.9659 63.4947 86.9091L63.5212 86.8629L63.5251 86.8589C63.5436 86.8272 63.5608 86.7968 63.5925 86.7797C63.6202 86.7665 63.6585 86.7717 63.6889 86.7784L76.7921 89.4806C76.8287 89.4863 76.8633 89.5013 76.8925 89.5242C76.9097 89.5414 76.9136 89.5599 76.9176 89.581C77.009 89.9268 77.1791 90.2468 77.4146 90.516C77.6501 90.7852 77.9447 90.9963 78.2753 91.1329C78.3123 91.1514 78.2965 91.1923 78.2793 91.2359C78.2707 91.255 78.2641 91.2749 78.2595 91.2953C78.0944 92.2991 76.6785 100.934 76.2981 103.265ZM74.0634 105.499C73.2749 106.279 72.81 106.693 72.2844 106.859C71.7661 107.023 71.2098 107.023 70.6915 106.859C70.0761 106.664 69.5438 106.133 68.4806 105.068L56.6031 93.1906L59.7055 88.3791C59.72 88.3553 59.7346 88.3342 59.7583 88.317C59.7914 88.2933 59.8389 88.3038 59.8785 88.317C60.5906 88.5319 61.3552 88.4931 62.0419 88.2074C62.0776 88.1942 62.1132 88.185 62.141 88.2101C62.1548 88.2227 62.1673 88.2369 62.178 88.2523L74.0634 105.5V105.499ZM55.458 92.0455L52.7332 89.3208L58.114 87.0253C58.1277 87.0193 58.1426 87.0162 58.1576 87.0161C58.2025 87.0161 58.2289 87.061 58.2527 87.1019C58.3067 87.1851 58.364 87.2662 58.4244 87.345L58.4415 87.3661C58.4574 87.3885 58.4468 87.411 58.431 87.4321L55.4593 92.0455H55.458ZM51.5274 88.115L48.0802 84.6678C47.4938 84.0814 47.0685 83.6561 46.7727 83.2902L57.2542 85.4642C57.2673 85.4666 57.2806 85.4688 57.2938 85.4708C57.3585 85.4814 57.4298 85.4933 57.4298 85.554C57.4298 85.6201 57.3519 85.6504 57.2859 85.6755L57.2555 85.6887L51.5274 88.115ZM46.1704 81.5178C46.1824 81.2957 46.2223 81.0761 46.2893 80.864C46.4847 80.2485 47.0157 79.7176 48.0802 78.6531L52.4915 74.2417C54.5226 77.1895 56.5592 80.1335 58.6014 83.0736C58.637 83.1212 58.6766 83.174 58.6357 83.2136C58.4429 83.4263 58.25 83.6587 58.114 83.911C58.0992 83.9434 58.0765 83.9716 58.048 83.9929C58.0308 84.0034 58.0123 83.9995 57.9925 83.9955H57.9898L46.1704 81.5165V81.5178ZM53.6723 73.061L59.6012 67.1295C60.1598 67.3738 62.1898 68.231 64.0032 68.997C65.3768 69.5782 66.6289 70.1065 67.0225 70.2782C67.0621 70.294 67.0978 70.3099 67.1149 70.3495C67.1255 70.3733 67.1202 70.4036 67.1149 70.4287C67.021 70.8569 67.035 71.3017 67.1556 71.7231C67.2762 72.1445 67.4996 72.5294 67.8057 72.8431C67.8453 72.8827 67.8057 72.9395 67.7714 72.9884L67.7529 73.0161L61.7302 82.3446C61.7144 82.371 61.6998 82.3934 61.6734 82.4106C61.6417 82.4304 61.5968 82.4212 61.5598 82.4119C61.3256 82.3506 61.0848 82.3178 60.8427 82.3142C60.6261 82.3142 60.391 82.3538 60.1532 82.3974H60.1519C60.1255 82.4014 60.1017 82.4067 60.0806 82.3908C60.0573 82.3717 60.0372 82.349 60.0212 82.3234L53.671 73.061H53.6723ZM60.8017 65.9316L68.4806 58.2527C69.5438 57.1895 70.0761 56.6572 70.6915 56.4631C71.2098 56.2992 71.7661 56.2992 72.2844 56.4631C72.8998 56.6572 73.4321 57.1895 74.4953 58.2527L76.1595 59.9168L70.6981 68.375C70.6846 68.3996 70.6662 68.4212 70.644 68.4384C70.611 68.4608 70.5648 68.4516 70.5251 68.4384C70.0945 68.3077 69.6386 68.2839 69.1968 68.369C68.7549 68.4542 68.3405 68.6457 67.9893 68.927C67.9536 68.964 67.9008 68.9429 67.8559 68.9231C67.1427 68.6127 61.5955 66.2684 60.8017 65.9316V65.9316ZM77.3191 61.0765L82.3617 66.1191L81.1466 73.6448V73.6646C81.1456 73.6817 81.142 73.6986 81.1361 73.7148C81.1229 73.7412 81.0964 73.7465 81.07 73.7544C80.8102 73.8331 80.5656 73.955 80.3463 74.115C80.3368 74.1217 80.328 74.1292 80.3198 74.1374C80.3053 74.1533 80.2908 74.1678 80.267 74.1704C80.2477 74.171 80.2284 74.1679 80.2102 74.1612L72.5261 70.8963L72.5115 70.8897C72.4627 70.8699 72.4046 70.8461 72.4046 70.7959C72.3594 70.3677 72.2195 69.9549 71.9951 69.5874C71.9581 69.5267 71.9172 69.4633 71.9489 69.4012L77.3191 61.0765ZM72.1259 72.4429L79.3293 75.4938C79.3689 75.5123 79.4125 75.5295 79.4297 75.5704C79.4365 75.5951 79.4365 75.6211 79.4297 75.6457C79.4085 75.7514 79.39 75.8716 79.39 75.9931V76.1951C79.39 76.2453 79.3385 76.2665 79.291 76.2863L79.2764 76.2916C78.1353 76.7789 63.2557 83.1238 63.2332 83.1238C63.2108 83.1238 63.187 83.1238 63.1646 83.1014C63.1249 83.0617 63.1646 83.0063 63.2002 82.9561C63.2065 82.9474 63.2127 82.9386 63.2187 82.9297L69.1383 73.7636L69.1489 73.7478C69.1832 73.6923 69.2229 73.6302 69.2863 73.6302L69.3457 73.6395C69.4804 73.658 69.5993 73.6751 69.7195 73.6751C70.6176 73.6751 71.4497 73.238 71.9515 72.4904C71.9635 72.4705 71.9787 72.4526 71.9964 72.4376C72.0321 72.4112 72.0849 72.4244 72.1259 72.4429V72.4429ZM63.8764 84.574L80.0953 77.6572C80.0953 77.6572 80.1191 77.6572 80.1415 77.6797C80.23 77.7682 80.3053 77.8276 80.378 77.8831L80.4136 77.9055C80.4466 77.924 80.4797 77.9451 80.4823 77.9795C80.4823 77.9927 80.4823 78.0006 80.4797 78.0125L79.0902 86.5472L79.0849 86.5816C79.0757 86.6476 79.0664 86.7229 79.0044 86.7229C78.6339 86.7479 78.2752 86.8628 77.9592 87.0578C77.6432 87.2527 77.3795 87.5217 77.191 87.8416L77.1844 87.8521C77.1659 87.8825 77.1487 87.9116 77.1183 87.9274C77.0906 87.9406 77.0549 87.9353 77.0259 87.9287L64.0917 85.2608C64.0785 85.2582 63.891 84.5753 63.8764 84.574V84.574Z" fill="url(#paint0_radial_3003_4575)"/>
20 | </g>
21 | <defs>
22 | <radialGradient id="paint0_radial_3003_4575" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(44.472 80.9466) rotate(90) scale(50.5862 58.4036)">
23 | <stop stop-color="#20C6B7"/>
24 | <stop offset="1" stop-color="#4D9ABF"/>
25 | </radialGradient>
26 | <clipPath id="clip0_3003_4575">
27 | <rect width="1200" height="300" fill="white"/>
28 | </clipPath>
29 | </defs>
30 | </svg>
31 | 


--------------------------------------------------------------------------------