├── app
    ├── favicon.ico
    ├── posts
    │   ├── [postId]
    │   │   ├── loading.js
    │   │   └── page.js
    │   └── page.js
    ├── articles
    │   ├── featuredArticles
    │   │   └── page.js
    │   ├── [title]
    │   │   └── page.js
    │   ├── page.js
    │   └── layout.js
    ├── page.js
    ├── components
    │   ├── todo.jsx
    │   └── postDetails.jsx
    ├── layout.js
    ├── globals.css
    └── page.module.css
├── jsconfig.json
├── next.config.js
├── package.json
├── .gitignore
├── public
    ├── vercel.svg
    └── next.svg
├── README.md
└── .vscode
    └── settings.json


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/nextjs-app-demo/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/app/posts/[postId]/loading.js:
--------------------------------------------------------------------------------
1 | export default function LoadingPostDetails() {
2 | 	return (
3 | 		<div>
4 | 			<h1>Loading 👌🏻</h1>
5 | 		</div>
6 | 	);
7 | }
8 | 


--------------------------------------------------------------------------------
/app/articles/featuredArticles/page.js:
--------------------------------------------------------------------------------
 1 | const FeaturedArticlesPage = () => {
 2 | 	return (
 3 | 		<div>
 4 | 			<h1>Featured Articles</h1>
 5 | 		</div>
 6 | 	);
 7 | };
 8 | 
 9 | export default FeaturedArticlesPage;
10 | 


--------------------------------------------------------------------------------
/app/articles/[title]/page.js:
--------------------------------------------------------------------------------
 1 | export default function ShowArticlePage(props) {
 2 | 	console.log(props);
 3 | 	return (
 4 | 		<div>
 5 | 			<h1>Show Article</h1>
 6 | 			<h1>{props.params.title}</h1>
 7 | 		</div>
 8 | 	);
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import styles from "./page.module.css";
 3 | 
 4 | export default function Home() {
 5 | 	return (
 6 | 		<div className="main-div">
 7 | 			<h1>Hello World</h1>
 8 | 		</div>
 9 | 	);
10 | }
11 | 


--------------------------------------------------------------------------------
/app/articles/page.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function ArticlesPage() {
 4 | 	return (
 5 | 		<div>
 6 | 			<h3>Articles Page</h3>
 7 | 
 8 | 			<Link href="/posts">
 9 | 				<button>Take me to the posts page</button>
10 | 			</Link>
11 | 		</div>
12 | 	);
13 | }
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "13.4.8",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/app/articles/layout.js:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 | 	title: "articles page",
 3 | };
 4 | 
 5 | export default function ({ children }) {
 6 | 	return (
 7 | 		<div>
 8 | 			<h1>Articles</h1>
 9 | 
10 | 			<div
11 | 				style={{
12 | 					marginTop: "50px",
13 | 					background: "blue",
14 | 					padding: "20px",
15 | 					borderRadius: "10px",
16 | 				}}
17 | 			>
18 | 				{children}
19 | 			</div>
20 | 		</div>
21 | 	);
22 | }
23 | 


--------------------------------------------------------------------------------
/app/components/todo.jsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState, useEffect } from "react";
 4 | 
 5 | export default function Todo() {
 6 | 	const [todo, setTodo] = useState({});
 7 | 
 8 | 	useEffect(async () => {
 9 | 		const response = await fetch(
10 | 			"https://jsonplaceholder.typicode.com/todos/1"
11 | 		);
12 | 		const result = await response.json();
13 | 		setTodo(result);
14 | 	}, []);
15 | 
16 | 	return (
17 | 		<div>
18 | 			<h1>{todo.title}</h1>
19 | 		</div>
20 | 	);
21 | }
22 | 


--------------------------------------------------------------------------------
/app/posts/[postId]/page.js:
--------------------------------------------------------------------------------
 1 | import PostDetails from "@/app/components/postDetails";
 2 | import { Suspense } from "react";
 3 | export default async function PostDetailsPage({ params }) {
 4 | 	const postId = params.postId;
 5 | 
 6 | 	const loaingJsx = (
 7 | 		<div>
 8 | 			<h1>wait...</h1>
 9 | 		</div>
10 | 	);
11 | 	return (
12 | 		<div style={{ padding: "20px" }}>
13 | 			<h1>Post Details</h1>
14 | 
15 | 			<Suspense fallback={loaingJsx}>
16 | 				<PostDetails postId={postId} />
17 | 			</Suspense>
18 | 		</div>
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 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/app/components/postDetails.jsx:
--------------------------------------------------------------------------------
 1 | export default async function PostDetails({ postId }) {
 2 | 	await new Promise((resolve) => {
 3 | 		setTimeout(() => {
 4 | 			resolve();
 5 | 		}, 2000);
 6 | 	});
 7 | 	const response = await fetch(
 8 | 		`https://jsonplaceholder.typicode.com/posts/${postId}`,
 9 | 		{
10 | 			next: {
11 | 				revalidate: 120,
12 | 			},
13 | 		}
14 | 	);
15 | 	const post = await response.json();
16 | 
17 | 	return (
18 | 		<div>
19 | 			<div
20 | 				style={{
21 | 					width: "100%",
22 | 					background: "white",
23 | 					padding: "10px",
24 | 					borderRadius: "10px",
25 | 					color: "black",
26 | 					marginTop: "20px",
27 | 				}}
28 | 			>
29 | 				<h1>{post.title}</h1>
30 | 
31 | 				<hr />
32 | 
33 | 				<p>{post.body}</p>
34 | 			</div>
35 | 		</div>
36 | 	);
37 | }
38 | 


--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import "./globals.css";
 3 | import { Inter } from "next/font/google";
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] });
 6 | 
 7 | export const metadata = {
 8 | 	title: "Create Next App",
 9 | 	description: "Generated by create next app",
10 | };
11 | 
12 | export default function RootLayout({ children }) {
13 | 	return (
14 | 		<html lang="en">
15 | 			<body className={inter.className}>
16 | 				<nav
17 | 					style={{
18 | 						width: "100%",
19 | 						background: "teal",
20 | 						fontSize: "50px",
21 | 						display: "flex",
22 | 						justifyContent: "center",
23 | 						alignItems: "center",
24 | 					}}
25 | 				>
26 | 					<Link style={{ margin: "7px" }} href="/">
27 | 						Home
28 | 					</Link>
29 | 					<Link style={{ margin: "7px" }} href="/posts">
30 | 						Posts
31 | 					</Link>
32 | 					<Link style={{ margin: "7px" }} href="/articles">
33 | 						Articles
34 | 					</Link>
35 | 				</nav>
36 | 				{children}
37 | 			</body>
38 | 		</html>
39 | 	);
40 | }
41 | 


--------------------------------------------------------------------------------
/app/posts/page.js:
--------------------------------------------------------------------------------
 1 | import Todo from "../components/todo";
 2 | 
 3 | import Link from "next/link";
 4 | 
 5 | export default async function PostsPage() {
 6 | 	const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
 7 | 		next: {
 8 | 			revalidate: 120,
 9 | 		},
10 | 	});
11 | 	const posts = await response.json();
12 | 
13 | 	const postsJSX = posts.map((post) => {
14 | 		return (
15 | 			<Link
16 | 				href={`/posts/${post.id}`}
17 | 				style={{
18 | 					width: "70%",
19 | 				}}
20 | 			>
21 | 				<div
22 | 					style={{
23 | 						width: "100%",
24 | 						background: "white",
25 | 						padding: "10px",
26 | 						borderRadius: "10px",
27 | 						color: "black",
28 | 						marginTop: "20px",
29 | 					}}
30 | 				>
31 | 					<h1>{post.title}</h1>
32 | 					<p>{post.body}</p>
33 | 				</div>
34 | 			</Link>
35 | 		);
36 | 	});
37 | 
38 | 	console.log(posts);
39 | 
40 | 	return (
41 | 		<div>
42 | 			<h1>Posts Page</h1>
43 | 
44 | 			{/* POSTS */}
45 | 			<div
46 | 				style={{
47 | 					display: "flex",
48 | 					justifyContent: "center",
49 | 					alignItems: "center",
50 | 					flexDirection: "column",
51 | 				}}
52 | 			>
53 | 				{postsJSX}
54 | 			</div>
55 | 			{/*=== POSTS ==*/}
56 | 
57 | 			{/* <div>
58 | 				<Todo />
59 | 			</div> */}
60 | 		</div>
61 | 	);
62 | }
63 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
18 | 
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "workbench.colorCustomizations": {
 3 |         "[Material Theme Lighter High Contrast]": {
 4 |             "settings.headerForeground": "#C6FF00",
 5 |             "menu.selectionForeground": "#C6FF00",
 6 |             "textLink.foreground": "#C6FF00",
 7 |             "menubar.selectionForeground": "#C6FF00",
 8 |             "pickerGroup.foreground": "#C6FF00",
 9 |             "editorSuggestWidget.highlightForeground": "#C6FF00",
10 |             "scrollbarSlider.activeBackground": "#C6FF0050",
11 |             "progressBar.background": "#C6FF00",
12 |             "notificationLink.foreground": "#C6FF00",
13 |             "panelTitle.activeBorder": "#C6FF00",
14 |             "breadcrumb.activeSelectionForeground": "#C6FF00",
15 |             "settings.modifiedItemIndicator": "#C6FF00",
16 |             "list.highlightForeground": "#C6FF00",
17 |             "list.activeSelectionForeground": "#C6FF00",
18 |             "editor.findMatchBorder": "#C6FF00",
19 |             "list.inactiveSelectionForeground": "#0f100f",
20 |             "editorWidget.resizeBorder": "#C6FF00",
21 |             "activityBarBadge.background": "#C6FF00",
22 |             "selection.background": "#C6FF0040",
23 |             "editorWidget.border": "#C6FF00",
24 |             "statusBarItem.remoteBackground": "#C6FF00",
25 |             "activityBar.activeBorder": "#C6FF00",
26 |             "tab.activeBorder": "#C6FF00"
27 |         },
28 |         "activityBar.background": "#4C2118",
29 |         "titleBar.activeBackground": "#6A2E22",
30 |         "titleBar.activeForeground": "#FDF9F8"
31 |     }
32 | }


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--max-width: 1100px;
  3 | 	--border-radius: 12px;
  4 | 	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
  5 | 		"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
  6 | 		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  7 | 
  8 | 	--foreground-rgb: 0, 0, 0;
  9 | 	--background-start-rgb: 214, 219, 220;
 10 | 	--background-end-rgb: 255, 255, 255;
 11 | 
 12 | 	--primary-glow: conic-gradient(
 13 | 		from 180deg at 50% 50%,
 14 | 		#16abff33 0deg,
 15 | 		#0885ff33 55deg,
 16 | 		#54d6ff33 120deg,
 17 | 		#0071ff33 160deg,
 18 | 		transparent 360deg
 19 | 	);
 20 | 	--secondary-glow: radial-gradient(
 21 | 		rgba(255, 255, 255, 1),
 22 | 		rgba(255, 255, 255, 0)
 23 | 	);
 24 | 
 25 | 	--tile-start-rgb: 239, 245, 249;
 26 | 	--tile-end-rgb: 228, 232, 233;
 27 | 	--tile-border: conic-gradient(
 28 | 		#00000080,
 29 | 		#00000040,
 30 | 		#00000030,
 31 | 		#00000020,
 32 | 		#00000010,
 33 | 		#00000010,
 34 | 		#00000080
 35 | 	);
 36 | 
 37 | 	--callout-rgb: 238, 240, 241;
 38 | 	--callout-border-rgb: 172, 175, 176;
 39 | 	--card-rgb: 180, 185, 188;
 40 | 	--card-border-rgb: 131, 134, 135;
 41 | }
 42 | 
 43 | @media (prefers-color-scheme: dark) {
 44 | 	:root {
 45 | 		--foreground-rgb: 255, 255, 255;
 46 | 		--background-start-rgb: 0, 0, 0;
 47 | 		--background-end-rgb: 0, 0, 0;
 48 | 
 49 | 		--primary-glow: radial-gradient(
 50 | 			rgba(1, 65, 255, 0.4),
 51 | 			rgba(1, 65, 255, 0)
 52 | 		);
 53 | 		--secondary-glow: linear-gradient(
 54 | 			to bottom right,
 55 | 			rgba(1, 65, 255, 0),
 56 | 			rgba(1, 65, 255, 0),
 57 | 			rgba(1, 65, 255, 0.3)
 58 | 		);
 59 | 
 60 | 		--tile-start-rgb: 2, 13, 46;
 61 | 		--tile-end-rgb: 2, 5, 19;
 62 | 		--tile-border: conic-gradient(
 63 | 			#ffffff80,
 64 | 			#ffffff40,
 65 | 			#ffffff30,
 66 | 			#ffffff20,
 67 | 			#ffffff10,
 68 | 			#ffffff10,
 69 | 			#ffffff80
 70 | 		);
 71 | 
 72 | 		--callout-rgb: 20, 20, 20;
 73 | 		--callout-border-rgb: 108, 108, 108;
 74 | 		--card-rgb: 100, 100, 100;
 75 | 		--card-border-rgb: 200, 200, 200;
 76 | 	}
 77 | }
 78 | 
 79 | * {
 80 | 	box-sizing: border-box;
 81 | 	padding: 0;
 82 | 	margin: 0;
 83 | }
 84 | 
 85 | html,
 86 | body {
 87 | 	max-width: 100vw;
 88 | 	overflow-x: hidden;
 89 | }
 90 | 
 91 | body {
 92 | 	color: rgb(var(--foreground-rgb));
 93 | 	background: linear-gradient(
 94 | 			to bottom,
 95 | 			transparent,
 96 | 			rgb(var(--background-end-rgb))
 97 | 		)
 98 | 		rgb(var(--background-start-rgb));
 99 | }
100 | 
101 | a {
102 | 	color: inherit;
103 | 	text-decoration: none;
104 | }
105 | 
106 | @media (prefers-color-scheme: dark) {
107 | 	html {
108 | 		color-scheme: dark;
109 | 	}
110 | }
111 | 
112 | .main-div {
113 | 	background: rgb(59, 0, 59);
114 | 	height: 100vh;
115 | }
116 | 


--------------------------------------------------------------------------------
/app/page.module.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   justify-content: space-between;
  5 |   align-items: center;
  6 |   padding: 6rem;
  7 |   min-height: 100vh;
  8 | }
  9 | 
 10 | .description {
 11 |   display: inherit;
 12 |   justify-content: inherit;
 13 |   align-items: inherit;
 14 |   font-size: 0.85rem;
 15 |   max-width: var(--max-width);
 16 |   width: 100%;
 17 |   z-index: 2;
 18 |   font-family: var(--font-mono);
 19 | }
 20 | 
 21 | .description a {
 22 |   display: flex;
 23 |   justify-content: center;
 24 |   align-items: center;
 25 |   gap: 0.5rem;
 26 | }
 27 | 
 28 | .description p {
 29 |   position: relative;
 30 |   margin: 0;
 31 |   padding: 1rem;
 32 |   background-color: rgba(var(--callout-rgb), 0.5);
 33 |   border: 1px solid rgba(var(--callout-border-rgb), 0.3);
 34 |   border-radius: var(--border-radius);
 35 | }
 36 | 
 37 | .code {
 38 |   font-weight: 700;
 39 |   font-family: var(--font-mono);
 40 | }
 41 | 
 42 | .grid {
 43 |   display: grid;
 44 |   grid-template-columns: repeat(4, minmax(25%, auto));
 45 |   width: var(--max-width);
 46 |   max-width: 100%;
 47 | }
 48 | 
 49 | .card {
 50 |   padding: 1rem 1.2rem;
 51 |   border-radius: var(--border-radius);
 52 |   background: rgba(var(--card-rgb), 0);
 53 |   border: 1px solid rgba(var(--card-border-rgb), 0);
 54 |   transition: background 200ms, border 200ms;
 55 | }
 56 | 
 57 | .card span {
 58 |   display: inline-block;
 59 |   transition: transform 200ms;
 60 | }
 61 | 
 62 | .card h2 {
 63 |   font-weight: 600;
 64 |   margin-bottom: 0.7rem;
 65 | }
 66 | 
 67 | .card p {
 68 |   margin: 0;
 69 |   opacity: 0.6;
 70 |   font-size: 0.9rem;
 71 |   line-height: 1.5;
 72 |   max-width: 30ch;
 73 | }
 74 | 
 75 | .center {
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   position: relative;
 80 |   padding: 4rem 0;
 81 | }
 82 | 
 83 | .center::before {
 84 |   background: var(--secondary-glow);
 85 |   border-radius: 50%;
 86 |   width: 480px;
 87 |   height: 360px;
 88 |   margin-left: -400px;
 89 | }
 90 | 
 91 | .center::after {
 92 |   background: var(--primary-glow);
 93 |   width: 240px;
 94 |   height: 180px;
 95 |   z-index: -1;
 96 | }
 97 | 
 98 | .center::before,
 99 | .center::after {
100 |   content: '';
101 |   left: 50%;
102 |   position: absolute;
103 |   filter: blur(45px);
104 |   transform: translateZ(0);
105 | }
106 | 
107 | .logo {
108 |   position: relative;
109 | }
110 | /* Enable hover only on non-touch devices */
111 | @media (hover: hover) and (pointer: fine) {
112 |   .card:hover {
113 |     background: rgba(var(--card-rgb), 0.1);
114 |     border: 1px solid rgba(var(--card-border-rgb), 0.15);
115 |   }
116 | 
117 |   .card:hover span {
118 |     transform: translateX(4px);
119 |   }
120 | }
121 | 
122 | @media (prefers-reduced-motion) {
123 |   .card:hover span {
124 |     transform: none;
125 |   }
126 | }
127 | 
128 | /* Mobile */
129 | @media (max-width: 700px) {
130 |   .content {
131 |     padding: 4rem;
132 |   }
133 | 
134 |   .grid {
135 |     grid-template-columns: 1fr;
136 |     margin-bottom: 120px;
137 |     max-width: 320px;
138 |     text-align: center;
139 |   }
140 | 
141 |   .card {
142 |     padding: 1rem 2.5rem;
143 |   }
144 | 
145 |   .card h2 {
146 |     margin-bottom: 0.5rem;
147 |   }
148 | 
149 |   .center {
150 |     padding: 8rem 0 6rem;
151 |   }
152 | 
153 |   .center::before {
154 |     transform: none;
155 |     height: 300px;
156 |   }
157 | 
158 |   .description {
159 |     font-size: 0.8rem;
160 |   }
161 | 
162 |   .description a {
163 |     padding: 1rem;
164 |   }
165 | 
166 |   .description p,
167 |   .description div {
168 |     display: flex;
169 |     justify-content: center;
170 |     position: fixed;
171 |     width: 100%;
172 |   }
173 | 
174 |   .description p {
175 |     align-items: center;
176 |     inset: 0 0 auto;
177 |     padding: 2rem 1rem 1.4rem;
178 |     border-radius: 0;
179 |     border: none;
180 |     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
181 |     background: linear-gradient(
182 |       to bottom,
183 |       rgba(var(--background-start-rgb), 1),
184 |       rgba(var(--callout-rgb), 0.5)
185 |     );
186 |     background-clip: padding-box;
187 |     backdrop-filter: blur(24px);
188 |   }
189 | 
190 |   .description div {
191 |     align-items: flex-end;
192 |     pointer-events: none;
193 |     inset: auto 0 0;
194 |     padding: 2rem;
195 |     height: 200px;
196 |     background: linear-gradient(
197 |       to bottom,
198 |       transparent 0%,
199 |       rgb(var(--background-end-rgb)) 40%
200 |     );
201 |     z-index: 1;
202 |   }
203 | }
204 | 
205 | /* Tablet and Smaller Desktop */
206 | @media (min-width: 701px) and (max-width: 1120px) {
207 |   .grid {
208 |     grid-template-columns: repeat(2, 50%);
209 |   }
210 | }
211 | 
212 | @media (prefers-color-scheme: dark) {
213 |   .vercelLogo {
214 |     filter: invert(1);
215 |   }
216 | 
217 |   .logo {
218 |     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
219 |   }
220 | }
221 | 
222 | @keyframes rotate {
223 |   from {
224 |     transform: rotate(360deg);
225 |   }
226 |   to {
227 |     transform: rotate(0deg);
228 |   }
229 | }
230 | 


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