@aditokmo/react-setup-cli 0.1.2 → 0.1.4

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@aditokmo/react-setup-cli?color=blue)](https://www.npmjs.com/package/@aditokmo/react-setup-cli)
 
-A React CLI built with Vite that helps you build and structure your projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
+A React CLI built on top of Vite that helps you build and structure projects in seconds. It eliminates manual setup by configuring your favorite tools into a **clean, modular architecture** automatically.
 
 **Note:** This package is a CLI tool. Do not install it with `npm i`. Instead check `Quick Start` down below.
 
@@ -42,9 +42,7 @@ yarn dlx @aditokmo/react-setup-cli
 
 ---
 
-## Decisions About Arhitecture
-
-This CLI isn't just a downloader it is architectural choice designed to enforce professional standards.
+## About Arhitecture
 
 ### Feature-Based Structure
 
@@ -64,14 +62,14 @@ TanStack Query is integrated to handle server-state management. It is optional,
 
 ### Styling
 
-You can choose between CSS, SCSS (soon), or Tailwind CSS. While I personally recommend Tailwind for modern and faster development, the CLI ensures that regardless of your choice, the project is configured with a global styles directory and a consistent entry point. If you select TailwindCSS you will also have option to use Shadcn/UI, and with that you will have option to choose components that you want to install instead of doing it manually.
+You can choose between CSS, SCSS, or Tailwind CSS. While I personally recommend Tailwind for modern and faster development, the CLI ensures that regardless of your choice, the project is configured with a global styles directory and a consistent entry point. If you select TailwindCSS you will also have option to use Shadcn/UI, and with that you will have option to choose components that you want to install instead of doing it manually.
 
 ### Routing
 
-The CLI offers two powerful options: React Router and TanStack Router.
+The CLI offers two options: React Router and TanStack Router.
 
-- **React Router** is the industry standard that most developers are familiar with.
-- **TanStack Router** is included for those who want a fully type-safe routing experience with built-in data loading capabilities. Whichever you choose, the CLI doesn't just install the library it will generate a `routes/` directory system to help you easily separate your public pages from protected pages.
+- React Router is the industry standard that most developers are familiar with.
+- TanStack Router is included for those who want a fully type-safe routing experience with built-in data loading capabilities. Whichever you choose, the CLI doesn't just install the library it will generate a `routes/` directory system to help you easily separate your public pages from protected pages.
 
 ### Package Manager Detection
 

package/dist/index.js

@@ -3,11 +3,27 @@ import fs from 'fs-extra';
 import path from 'path';
 import { execSync } from 'child_process';
 import { askQuestions } from './questions.js';
-import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager } from './utils.js';
+import { copyTemplate, patchViteConfig, finalizeViteConfig, patchAppFile, finalizeAppFile, detectPackageManager, patchPackageJsonFile, patchFileContent } from './utils.js';
 import { collectDependencies } from './installers.js';
 import { fileURLToPath } from 'url';
+import { FONT_QUERIES } from './mapper.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const baseDeps = ['react', 'react-dom'];
+const baseDevDeps = [
+    'vite',
+    'typescript',
+    '@types/node',
+    '@types/react',
+    '@types/react-dom',
+    '@vitejs/plugin-react-swc',
+    'eslint',
+    '@eslint/js',
+    'eslint-plugin-react-hooks',
+    'eslint-plugin-react-refresh',
+    'globals',
+    'typescript-eslint'
+];
 async function main() {
     console.log('⚛️ Welcome to React CLI Setup by github/aditokmo');
     let projectDir = '';
@@ -19,9 +35,12 @@ async function main() {
         projectDir = path.join(process.cwd(), answers.projectName);
         const templateRoot = path.join(__dirname, '../templates');
         const appFilePath = path.join(projectDir, 'src', 'App.tsx');
+        const indexHTMLPath = path.join(projectDir, 'index.html');
+        const notFoundPath = path.join(projectDir, 'src/modules/common/pages/NotFound.tsx');
         const viteConfigPath = path.join(projectDir, 'vite.config.ts');
         fs.ensureDirSync(projectDir);
         copyTemplate(path.join(templateRoot, 'base'), projectDir);
+        patchPackageJsonFile(path.join(projectDir, 'package.json'), answers.projectName);
         // Styles
         if (answers.style === 'tailwind') {
             copyTemplate(path.join(templateRoot, 'styles', 'tailwind', 'src'), path.join(projectDir, 'src/styles'));
@@ -30,6 +49,26 @@ async function main() {
         if (answers.style === 'css') {
             copyTemplate(path.join(templateRoot, 'styles', 'css', 'src'), path.join(projectDir, 'src/styles'));
         }
+        if (answers.style === 'scss') {
+            copyTemplate(path.join(templateRoot, 'styles', 'scss', 'src'), path.join(projectDir, 'src/styles'));
+            patchFileContent(notFoundPath, "import '@/styles/404.css'", "import '@/styles/404.scss'");
+            patchFileContent(indexHTMLPath, '<link rel="stylesheet" href="./src/styles/main.css" />', '<link rel="stylesheet" href="./src/styles/main.scss" />');
+        }
+        // Fonts
+        if (answers?.fonts && answers.fonts.length > 0) {
+            const fontString = answers.fonts
+                .map(name => FONT_QUERIES[name])
+                .join('&');
+            const url = `https://fonts.googleapis.com/css2?${fontString}&display=swap`;
+            const content = `
+                <link rel="preconnect" href="https://fonts.googleapis.com">
+                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+                <link href="${url}" rel="stylesheet">`;
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', content);
+        }
+        else {
+            patchFileContent(indexHTMLPath, '<!-- [HEAD_LINK_IMPORT] -->', '');
+        }
         // State Management
         if (answers.reactQuery) {
             copyTemplate(path.join(templateRoot, 'state', 'react-query', 'src', 'provider'), path.join(projectDir, 'src/providers'));
@@ -55,16 +94,18 @@ async function main() {
         finalizeAppFile(appFilePath);
         finalizeViteConfig(viteConfigPath);
         const { dependency, devDependency, cmd } = collectDependencies(answers, packageManager);
+        const allDeps = [...baseDeps, ...dependency];
+        const allDevDeps = [...baseDevDeps, ...devDependency];
         process.chdir(projectDir);
         console.log(`📦 Initializing ${packageManager} project...`);
         execSync(`${packageManager} install`, { stdio: 'inherit' });
-        if (dependency.length) {
+        if (allDeps.length) {
             console.log('📦 Installing dependencies...');
-            execSync(`${packageManager} ${installAction} ${dependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} ${allDeps.join(' ')}`, { stdio: 'inherit' });
         }
-        if (devDependency.length) {
+        if (allDevDeps.length) {
             console.log('📦 Installing dev dependencies...');
-            execSync(`${packageManager} ${installAction} -D ${devDependency.join(' ')}`, { stdio: 'inherit' });
+            execSync(`${packageManager} ${installAction} -D ${allDevDeps.join(' ')}`, { stdio: 'inherit' });
         }
         // Extra cmds like shadcn
         for (const command of cmd) {

package/dist/mapper.js

@@ -1,10 +1,11 @@
-import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
+import { fontAwesomeIconsInstaller, phosphorIconsInstaller, reactFormHookInstaller, reactHotToastInstaller, reactIconsInstaller, reactQueryInstaller, reactRouterInstaller, reactToastifyInstaller, scssInstaller, sonnerInstaller, tailwindInstaller, tanstackFormInstaller, tanstackRouterInstaller, yupInstaller, zodInstaller, zustandInstaller } from './packages.js';
 export const installers = {
     'reactQuery': reactQueryInstaller,
     'zustand': zustandInstaller,
     'react-router': reactRouterInstaller,
     'tanstack-router': tanstackRouterInstaller,
     'tailwind': tailwindInstaller,
+    'scss': scssInstaller,
     'react-icons': reactIconsInstaller,
     'font-awesome': fontAwesomeIconsInstaller,
     'phosphor-icons': phosphorIconsInstaller,
@@ -16,3 +17,12 @@ export const installers = {
     'zod': zodInstaller,
     'yup': yupInstaller,
 };
+export const FONT_QUERIES = {
+    "geist": "family=Geist:wght@100..900",
+    "inter": "family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900",
+    "lato": "family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900",
+    "montserrat": "family=Montserrat:ital,wght@0,100..900;1,100..900",
+    "open-sans": "family=Open+Sans:ital,wght@0,300..800;1,300..800",
+    "poppins": "family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",
+    "roboto": "family=Roboto:ital,wght@0,100..900;1,100..900"
+};

package/dist/packages.js

@@ -11,6 +11,9 @@ export const zustandInstaller = {
 export const tailwindInstaller = {
     dependency: ['tailwindcss', '@tailwindcss/vite'],
 };
+export const scssInstaller = {
+    devDependency: ['sass']
+};
 // Icons
 export const reactIconsInstaller = {
     dependency: ['react-icons'],

package/dist/questions.js

@@ -4,13 +4,13 @@ export async function askQuestions() {
         projectName: () => text({
             message: 'Project name:',
             placeholder: 'my-app',
-            validate: (value) => (value.length < 0 ? 'Project name is required' : undefined),
         }),
         style: () => select({
             message: 'Choose styling:',
             options: [
                 { value: 'tailwind', label: 'Tailwind' },
                 { value: 'css', label: 'CSS' },
+                { value: 'scss', label: 'SCSS' },
             ],
         }),
         shadcn: ({ results }) => {
@@ -38,6 +38,19 @@ export async function askQuestions() {
                 required: false,
             });
         },
+        fonts: () => multiselect({
+            message: 'Use space to select your fonts',
+            options: [
+                { value: 'geist', label: 'Geist' },
+                { value: 'inter', label: 'Inter' },
+                { value: 'lato', label: 'Lato' },
+                { value: 'montserrat', label: 'Montserrat' },
+                { value: 'open-sans', label: 'Open Sans' },
+                { value: 'poppins', label: 'Poppins' },
+                { value: 'roboto', label: 'Roboto' }
+            ],
+            required: false
+        }),
         icons: () => select({
             message: 'Choose icon library:',
             options: [
@@ -95,13 +108,16 @@ export async function askQuestions() {
         isCancel(results.shadcnComponents) ||
         isCancel(results.icons) ||
         isCancel(results.toast) ||
-        isCancel(results.reactQuery)) {
+        isCancel(results.reactQuery) ||
+        isCancel(results.fonts)) {
         cancel('Setup cancelled.');
         process.exit(0);
     }
     return {
         ...results,
+        projectName: results.projectName || 'my-app',
         shadcn: results.shadcn,
         shadcnComponents: (results.shadcnComponents ?? []),
+        fonts: (results.fonts ?? [])
     };
 }

package/dist/utils.js

@@ -1,11 +1,18 @@
 import fs from 'fs-extra';
 export function copyTemplate(src, path) {
     if (!fs.existsSync(src)) {
-        console.warn(`⚠️ Template folder ${src} dosn't exist`);
+        console.warn(`⚠️ Template folder ${src} doesn't exist`);
         return;
     }
     fs.copySync(src, path, { overwrite: true });
 }
+export function patchFileContent(filePath, searchValue, replaceValue) {
+    if (!fs.existsSync(filePath))
+        return;
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const newContent = content.replace(searchValue, replaceValue);
+    fs.writeFileSync(filePath, newContent);
+}
 export function patchAppFile(filePath, importLine, openTag, closeTag) {
     if (!fs.existsSync(filePath))
         return;
@@ -28,6 +35,18 @@ export function patchAppFile(filePath, importLine, openTag, closeTag) {
     }
     fs.writeFileSync(filePath, content);
 }
+export function patchPackageJsonFile(filePath, projectName) {
+    if (!fs.existsSync(filePath))
+        return;
+    try {
+        const pkg = fs.readJsonSync(filePath);
+        pkg.name = projectName;
+        fs.writeJsonSync(filePath, pkg, { spaces: 2 });
+    }
+    catch (error) {
+        console.error('⚠️ Could not update package.json name');
+    }
+}
 export function patchViteConfig(filePath, beforeReactPlugin, importLine, pluginLine) {
     if (!fs.existsSync(filePath))
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aditokmo/react-setup-cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A fast React CLI to jumpstart your projects. It sets up your libraries and organizes a scalable folder structure so you can skip the configuration and go straight to coding.",
   "main": "dist/index.js",
   "type": "module",

package/templates/base/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./src/styles/main.css" />
     <title>vite-project</title>
+    <!-- [HEAD_LINK_IMPORT] -->
   </head>
   <body>
     <div id="root"></div>

package/templates/base/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite-project",
+  "name": "{{PROJECT_NAME}}",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,22 +9,6 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
-  }
+  "dependencies": {},
+  "devDependencies": {}
 }

package/templates/styles/css/src/404.css

@@ -0,0 +1,101 @@
+@import "./variables.css";
+
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: var(--font-main);
+  background: var(--bg-light);
+}
+
+.not-found-content {
+  padding: 100px 70px;
+  background: var(--white);
+  max-width: 700px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-main);
+}
+
+.not-found-content span {
+  color: var(--text-muted);
+  font-weight: 700;
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.not-found-content h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-dark);
+}
+
+.not-found-content p {
+  font-size: 1rem;
+  color: var(--text-muted);
+  max-width: 360px;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.not-found-content a {
+  font-size: 0.9rem;
+  color: var(--white);
+  background-color: var(--primary);
+  padding: 10px 30px;
+  margin-top: 20px;
+  border-radius: var(--radius-sm);
+  transition: 0.2s;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.not-found-content a:hover {
+  background: var(--primary-hover);
+}
+
+@media (max-width: 768px) {
+  .not-found-content {
+    padding: 60px 40px;
+    max-width: 90%;
+  }
+  .not-found-content span {
+    font-size: 4.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .not-found-content {
+    padding: 40px 20px;
+    border-radius: var(--radius-md);
+  }
+  .not-found-content span {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 1.5rem;
+  }
+  .not-found-content p {
+    font-size: 0.9rem;
+  }
+  .not-found-content a {
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}

package/templates/styles/css/src/main.css

@@ -0,0 +1,70 @@
+@import "./variables.css";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--white);
+  color: var(--text-dark);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-dark);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+p {
+  color: var(--text-muted);
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+a {
+  text-decoration: none;
+  color: var(--primary);
+  transition: 0.3s ease;
+}
+
+a:hover {
+  color: var(--primary-hover);
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}

package/templates/styles/css/src/variables.css

@@ -0,0 +1,15 @@
+:root {
+  --primary: #37538a;
+  --primary-hover: #263c67;
+  --bg-light: #e6edfc;
+  --white: #ffffff;
+  --text-dark: #111111;
+  --text-muted: #666666;
+
+  --font-main: "Arial", sans-serif;
+
+  --shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+  --radius-lg: 24px;
+  --radius-md: 16px;
+  --radius-sm: 10px;
+}

package/templates/styles/scss/src/404.scss

@@ -0,0 +1,103 @@
+@use "./index.scss" as *;
+
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: $font-main;
+  background: $bg-light;
+
+  .not-found-content {
+    padding: 100px 70px;
+    background: $white;
+    max-width: 700px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-main;
+
+    span {
+      color: $text-muted;
+      font-weight: 700;
+      font-size: 6rem;
+      line-height: 1;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 600;
+      margin: 0;
+      color: $text-dark;
+    }
+
+    p {
+      font-size: 1rem;
+      color: $text-muted;
+      max-width: 360px;
+      width: 100%;
+      margin: 10px 0;
+    }
+
+    a {
+      font-size: 0.9rem;
+      color: $white;
+      background-color: $primary;
+      padding: 10px 30px;
+      margin-top: 20px;
+      border-radius: $radius-sm;
+      transition: 0.2s;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+
+      &:hover {
+        background: $primary-hover;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 60px 40px;
+      max-width: 90%;
+
+      span {
+        font-size: 4.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      padding: 40px 20px;
+      border-radius: $radius-md;
+
+      span {
+        font-size: 3.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-size: 0.9rem;
+      }
+
+      a {
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+      }
+    }
+  }
+}

package/templates/styles/scss/src/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "mixins";

package/templates/styles/scss/src/_mixins.scss

@@ -0,0 +1,27 @@
+$breakpoint-tablet: 768px;
+$breakpoint-mobile: 480px;
+
+@mixin tablet {
+  @media (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+// helpers
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/templates/styles/scss/src/_variables.scss

@@ -0,0 +1,28 @@
+// Brand Colors
+$primary: #37538a;
+$primary-hover: #263c67;
+$primary-dark: #263c67;
+$accent: #e6edfc;
+
+// Text
+$text-dark: #111111;
+$text-muted: #666666;
+
+// Background
+$bg-light: #e6edfc;
+
+// Radius
+$radius-sm: 10px;
+$radius-md: 16px;
+$radius-lg: 24px;
+
+// Shadows
+$shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+
+// Neutrals
+$white: #ffffff;
+$black: #111111;
+$gray: #666666;
+
+// Fonts
+$font-main: "Arial", sans-serif;

package/templates/styles/scss/src/main.scss

@@ -0,0 +1,20 @@
+@use "index" as *;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-main;
+  background-color: $white;
+  color: $black;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}

package/templates/{base/src/styles → styles/tailwind/src}/404.css

@@ -6,7 +6,6 @@
   min-height: 100vh;
   padding: 20px;
   text-align: center;
-  font-family: "Poppins", sans-serif;
   background: #e6edfc;
 }
 
@@ -24,7 +23,7 @@
 }
 
 .not-found-content span {
-  color: #666;
+  color: #666666;
   font-weight: 700;
   font-size: 6rem;
   line-height: 1;
@@ -34,12 +33,12 @@
   font-size: 2.5rem;
   font-weight: 600;
   margin: 0;
-  color: #111;
+  color: #111111;
 }
 
 .not-found-content p {
   font-size: 1rem;
-  color: #666;
+  color: #666666;
   max-width: 360px;
   width: 100%;
   margin: 10px 0;
@@ -67,12 +66,10 @@
     padding: 60px 40px;
     max-width: 90%;
   }
-
   .not-found-content span {
     font-size: 4.5rem;
     margin-bottom: 20px;
   }
-
   .not-found-content h1 {
     font-size: 2rem;
   }
@@ -83,20 +80,16 @@
     padding: 40px 20px;
     border-radius: 16px;
   }
-
   .not-found-content span {
     font-size: 3.5rem;
     margin-bottom: 20px;
   }
-
   .not-found-content h1 {
     font-size: 1.5rem;
   }
-
   .not-found-content p {
     font-size: 0.9rem;
   }
-
   .not-found-content a {
     width: 100%;
     box-sizing: border-box;