diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/App.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/App.tsx index 77f8c360..9006702e 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/App.tsx +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/App.tsx @@ -1,7 +1,5 @@ -// =========================== -// ©AngelaMos | 2025 +// ©AngelaMos | 2026 // App.tsx -// =========================== import { QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -10,26 +8,26 @@ import { Toaster } from 'sonner' import { queryClient } from '@/core/api' import { router } from '@/core/app/routers' -import '@/core/app/toast.module.scss' export default function App(): React.ReactElement { return ( -
- - -
+ + ) diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/components/index.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/components/index.tsx deleted file mode 100644 index 6b0a7329..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/components/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -/** - * ©AngelaMos | 2025 - * index.tsx - */ diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/routers.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/routers.tsx index cb2473c9..117c81ed 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/routers.tsx +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/routers.tsx @@ -1,18 +1,15 @@ -// =================== -// © AngelaMos | 2025 +// ©AngelaMos | 2026 // routers.tsx -// =================== import { createBrowserRouter, type RouteObject } from 'react-router-dom' import { UserRole } from '@/api/types' import { ROUTES } from '@/config' import { ProtectedRoute } from './protected-route' -import { Shell } from './shell' const routes: RouteObject[] = [ { path: ROUTES.HOME, - lazy: () => import('@/pages/landing'), + lazy: () => import('@/pages/dashboard'), }, { path: ROUTES.LOGIN, @@ -26,17 +23,8 @@ const routes: RouteObject[] = [ element: , children: [ { - element: , - children: [ - { - path: ROUTES.DASHBOARD, - lazy: () => import('@/pages/dashboard'), - }, - { - path: ROUTES.SETTINGS, - lazy: () => import('@/pages/settings'), - }, - ], + path: ROUTES.SETTINGS, + lazy: () => import('@/pages/settings'), }, ], }, @@ -44,23 +32,14 @@ const routes: RouteObject[] = [ element: , children: [ { - element: , - children: [ - { - path: ROUTES.ADMIN.USERS, - lazy: () => import('@/pages/admin'), - }, - ], + path: ROUTES.ADMIN.USERS, + lazy: () => import('@/pages/admin'), }, ], }, - { - path: ROUTES.UNAUTHORIZED, - lazy: () => import('@/pages/landing'), - }, { path: '*', - lazy: () => import('@/pages/landing'), + lazy: () => import('@/pages/dashboard'), }, ] diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.module.scss deleted file mode 100644 index b57d7a96..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.module.scss +++ /dev/null @@ -1,331 +0,0 @@ -// =================== -// © AngelaMos | 2025 -// shell.module.scss -// =================== - -@use '@/styles' as *; - -$sidebar-width: 240px; -$sidebar-collapsed-width: 64px; -$header-height: 56px; - -.shell { - display: flex; - min-height: 100vh; - min-height: 100dvh; -} - -.sidebar { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: $sidebar-width; - background: $bg-surface-100; - border-right: 1px solid $border-default; - display: flex; - flex-direction: column; - z-index: $z-fixed; - @include transition-fast; - - &.collapsed { - width: $sidebar-collapsed-width; - } - - @include breakpoint-down('sm') { - transform: translateX(-100%); - - &.open { - transform: translateX(0); - } - - &.collapsed { - width: $sidebar-width; - } - } -} - -.sidebarHeader { - height: $header-height; - padding: 0 $space-3; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid $border-default; - - .sidebar.collapsed & { - justify-content: center; - padding: 0; - } -} - -.logo { - font-size: $font-size-base; - font-weight: $font-weight-semibold; - color: $text-default; - @include transition-fast; - - .sidebar.collapsed & { - display: none; - } -} - -.nav { - flex: 1; - padding: $space-3; - display: flex; - flex-direction: column; - gap: $space-1; -} - -.navItem { - display: flex; - align-items: center; - gap: $space-3; - padding: $space-2 $space-3; - border-radius: $radius-md; - font-size: $font-size-sm; - color: $text-light; - @include transition-fast; - - @include hover { - background: $bg-surface-200; - color: $text-default; - } - - &.active { - background: $bg-selection; - color: $text-default; - } - - .sidebar.collapsed & { - justify-content: center; - } -} - -.navIcon { - width: 17px; - height: 17px; - flex-shrink: 0; -} - -.navLabel { - @include transition-fast; - - .sidebar.collapsed & { - display: none; - } -} - -.adminItem { - margin-top: auto; - border-top: 1px solid $border-default; - padding-top: $space-3; -} - -.collapseBtn { - width: 45px; - height: 45px; - border-radius: $radius-md; - color: $text-light; - @include flex-center; - @include transition-fast; - - svg { - width: 23.5px; - height: 23.5px; - } - - @include hover { - background: $bg-surface-200; - color: $text-default; - } - - @include breakpoint-down('sm') { - display: none; - } -} - -.sidebarFooter { - padding: $space-3; - border-top: 1px solid $border-default; -} - -.logoutBtn { - width: 100%; - display: flex; - align-items: center; - gap: $space-3; - padding: $space-3; - border-radius: $radius-md; - font-size: $font-size-sm; - color: $text-default; - @include transition-fast; - - @include hover { - background: $bg-surface-200; - } - - .sidebar.collapsed & { - justify-content: center; - - .logoutText { - display: none; - } - } -} - -.logoutIcon { - width: 18px; - height: 18px; - flex-shrink: 0; -} - -.logoutText { - font-weight: $font-weight-medium; - @include transition-fast; -} - -.overlay { - position: fixed; - inset: 0; - background: rgb(0, 0, 0, 50%); - z-index: calc($z-fixed - 1); - display: none; - border: none; - padding: 0; - cursor: pointer; - - @include breakpoint-down('sm') { - display: block; - } -} - -.main { - flex: 1; - display: flex; - flex-direction: column; - margin-left: $sidebar-width; - min-width: 0; - @include transition-fast; - - &.collapsed { - margin-left: $sidebar-collapsed-width; - } - - @include breakpoint-down('sm') { - margin-left: 0; - - &.collapsed { - margin-left: 0; - } - } -} - -.header { - position: sticky; - top: 0; - height: $header-height; - background: $bg-surface-100; - border-bottom: 1px solid $border-default; - z-index: $z-sticky; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 $space-4; -} - -.headerLeft { - display: flex; - align-items: center; - gap: $space-3; -} - -.menuBtn { - display: none; - width: 36px; - height: 36px; - border-radius: $radius-md; - color: $text-light; - align-items: center; - justify-content: center; - @include transition-fast; - - svg { - width: 20px; - height: 20px; - } - - @include hover { - background: $bg-surface-200; - color: $text-default; - } - - @media (width <= 479px) { - display: flex; - } -} - -.pageTitle { - font-size: $font-size-base; - font-weight: $font-weight-medium; - color: $text-default; - margin-left: 7px; -} - -.headerRight { - display: flex; - align-items: center; - gap: $space-3; -} - -.avatar { - width: 32px; - height: 32px; - border-radius: $radius-full; - background: $bg-surface-300; - color: $text-light; - font-size: $font-size-sm; - font-weight: $font-weight-medium; - @include flex-center; - cursor: pointer; - @include transition-fast; - - @include hover { - filter: brightness(1.2); - } -} - -.content { - flex: 1; - overflow-y: auto; -} - -.loading { - @include flex-center; - height: 100%; - color: $text-muted; -} - -.error { - @include flex-column-center; - height: 100%; - gap: $space-4; - padding: $space-6; - color: $error-default; - - h2 { - font-size: $font-size-xl; - font-weight: $font-weight-semibold; - } - - pre { - font-family: $font-mono; - font-size: $font-size-sm; - padding: $space-4; - background: $bg-surface-200; - border-radius: $radius-lg; - overflow-x: auto; - max-width: 100%; - } -} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.tsx deleted file mode 100644 index 65fe7f37..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/shell.tsx +++ /dev/null @@ -1,160 +0,0 @@ -/** - * ©AngelaMos | 2025 - * shell.tsx - */ - -import { Suspense } from 'react' -import { ErrorBoundary } from 'react-error-boundary' -import { GiCardAceClubs, GiCardJoker, GiExitDoor } from 'react-icons/gi' -import { LuChevronLeft, LuChevronRight, LuMenu, LuShield } from 'react-icons/lu' -import { Link, NavLink, Outlet, useLocation } from 'react-router-dom' -import { useLogout } from '@/api/hooks' -import { ROUTES } from '@/config' -import { useIsAdmin, useUIStore, useUser } from '@/core/lib' -import styles from './shell.module.scss' - -const NAV_ITEMS = [ - { path: ROUTES.DASHBOARD, label: 'Dashboard', icon: GiCardJoker }, - { path: ROUTES.SETTINGS, label: 'Settings', icon: GiCardAceClubs }, -] - -const ADMIN_NAV_ITEM = { - path: ROUTES.ADMIN.USERS, - label: 'Admin', - icon: LuShield, -} - -function ShellErrorFallback({ error }: { error: Error }): React.ReactElement { - return ( -
-

Something went wrong

- 
{error.message}
-
- ) -} - -function ShellLoading(): React.ReactElement { - return
Loading...
-} - -function getPageTitle(pathname: string, isAdmin: boolean): string { - if (isAdmin && pathname === ADMIN_NAV_ITEM.path) { - return ADMIN_NAV_ITEM.label - } - const item = NAV_ITEMS.find((i) => i.path === pathname) - return item?.label ?? 'Dashboard' -} - -export function Shell(): React.ReactElement { - const location = useLocation() - const { sidebarOpen, sidebarCollapsed, toggleSidebar, toggleSidebarCollapsed } = - useUIStore() - const { mutate: logout } = useLogout() - const isAdmin = useIsAdmin() - const user = useUser() - - const pageTitle = getPageTitle(location.pathname, isAdmin) - const avatarLetter = - user?.full_name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? 'U' - - return ( -
- - - {sidebarOpen && ( - -

{pageTitle}

-
- -
- - {avatarLetter} - -
- - -
- - }> - - - -
- - - ) -} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/toast.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/toast.module.scss deleted file mode 100644 index d50ab7fb..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/app/toast.module.scss +++ /dev/null @@ -1,67 +0,0 @@ -// =================== -// © AngelaMos | 2025 -// toast.module.scss -// =================== - -@use '@/styles' as *; - -:global { - [data-sonner-toaster] { - --normal-bg: #{$bg-surface-100}; - --normal-border: #{$border-default}; - --normal-text: #{$text-default}; - - --success-bg: #{$bg-surface-100}; - --success-border: #{$border-default}; - --success-text: #{$text-default}; - - --error-bg: #{$bg-surface-100}; - --error-border: #{$error-default}; - --error-text: #{$text-default}; - - --warning-bg: #{$bg-surface-100}; - --warning-border: #{$border-default}; - --warning-text: #{$text-default}; - - --info-bg: #{$bg-surface-100}; - --info-border: #{$border-default}; - --info-text: #{$text-default}; - - font-family: $font-sans; - } - - [data-sonner-toast] { - border-radius: $radius-md; - padding: $space-3 $space-4; - font-size: $font-size-sm; - border: 1px solid $border-default; - background: $bg-surface-100; - color: $text-default; - - [data-title] { - font-weight: $font-weight-medium; - } - - [data-description] { - color: $text-light; - font-size: $font-size-xs; - } - - [data-close-button] { - background: none; - border: none; - padding: 0; - cursor: pointer; - color: $text-muted; - @include transition-fast; - - @include hover { - color: $text-default; - } - } - } - - [data-sonner-toast][data-type='error'] { - border-color: $error-default; - } -} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/index.ts b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/index.ts index 191757f4..a42c054e 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/index.ts +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/index.ts @@ -1,8 +1,5 @@ -// =================== -// © AngelaMos | 2025 +// ©AngelaMos | 2026 // index.ts -// =================== export * from './auth.form.store' export * from './auth.store' -export * from './shell.ui.store' diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/shell.ui.store.ts b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/shell.ui.store.ts deleted file mode 100644 index d601a53b..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/core/lib/shell.ui.store.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * ©AngelaMos | 2025 - * ui.store.ts - */ - -import { create } from 'zustand' -import { devtools, persist } from 'zustand/middleware' - -type Theme = 'light' | 'dark' | 'system' - -interface UIState { - theme: Theme - sidebarOpen: boolean - sidebarCollapsed: boolean - setTheme: (theme: Theme) => void - toggleSidebar: () => void - setSidebarOpen: (open: boolean) => void - toggleSidebarCollapsed: () => void -} - -export const useUIStore = create()( - devtools( - persist( - (set) => ({ - theme: 'dark', - sidebarOpen: false, - sidebarCollapsed: false, - - setTheme: (theme) => set({ theme }, false, 'ui/setTheme'), - - toggleSidebar: () => - set( - (state) => ({ sidebarOpen: !state.sidebarOpen }), - false, - 'ui/toggleSidebar' - ), - - setSidebarOpen: (open) => - set({ sidebarOpen: open }, false, 'ui/setSidebarOpen'), - - toggleSidebarCollapsed: () => - set( - (state) => ({ sidebarCollapsed: !state.sidebarCollapsed }), - false, - 'ui/toggleSidebarCollapsed' - ), - }), - { - name: 'ui-storage', - partialize: (state) => ({ - theme: state.theme, - sidebarCollapsed: state.sidebarCollapsed, - }), - } - ), - { name: 'UIStore' } - ) -) - -export const useTheme = (): Theme => useUIStore((s) => s.theme) -export const useSidebarOpen = (): boolean => useUIStore((s) => s.sidebarOpen) -export const useSidebarCollapsed = (): boolean => - useUIStore((s) => s.sidebarCollapsed) diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss index ecac295d..0fa5d6d3 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/dashboard.module.scss @@ -1,152 +1,19 @@ -// =================== -// © AngelaMos | 2025 +// ©AngelaMos | 2026 // dashboard.module.scss -// =================== -@use '@/styles' as *; - -.page { - min-height: calc(100vh - 56px); - padding: $space-6; - background-color: $bg-default; -} - -.container { - max-width: 800px; - margin: 0 auto; -} - -.header { - margin-bottom: $space-6; -} - -.title { - font-size: $font-size-2xl; - font-weight: $font-weight-semibold; - color: $text-default; - margin-bottom: $space-2; -} - -.subtitle { - font-size: $font-size-sm; - color: $text-lighter; -} - -.userCard { +.scaffold { + height: 100dvh; + width: 100%; + background: var(--bg); display: flex; align-items: center; - gap: $space-4; - padding: $space-5; - background: $bg-surface-100; - border: 1px solid $border-default; - border-radius: $radius-lg; - margin-bottom: $space-8; + justify-content: center; } -.avatar { - width: 56px; - height: 56px; - border-radius: $radius-full; - background: $bg-surface-300; - color: $text-default; - font-size: $font-size-xl; - font-weight: $font-weight-semibold; - @include flex-center; - flex-shrink: 0; -} - -.userInfo { - @include flex-column; - gap: $space-1; - min-width: 0; -} - -.userName { - font-size: $font-size-base; - font-weight: $font-weight-medium; - color: $text-default; - @include truncate; -} - -.userEmail { - font-size: $font-size-sm; - color: $text-light; - @include truncate; -} - -.userRole { - display: inline-flex; - align-self: flex-start; - padding: $space-0-5 $space-2; - background: $bg-surface-200; - border-radius: $radius-full; - font-size: $font-size-xs; - color: $text-lighter; +.label { + font-family: var(--font-sans); + font-size: var(--type-label); + letter-spacing: var(--letter-spacing-label); text-transform: uppercase; - letter-spacing: $tracking-wide; -} - -.section { - margin-bottom: $space-8; -} - -.sectionTitle { - font-size: $font-size-sm; - font-weight: $font-weight-medium; - color: $text-light; - text-transform: uppercase; - letter-spacing: $tracking-wide; - margin-bottom: $space-4; -} - -.grid { - display: grid; - gap: $space-4; - - @include breakpoint-up('md') { - grid-template-columns: repeat(3, 1fr); - } -} - -.card { - padding: $space-4; - background: $bg-surface-100; - border: 1px solid $border-default; - border-radius: $radius-lg; -} - -.hookName { - display: inline-block; - font-size: $font-size-sm; - font-weight: $font-weight-medium; - color: $text-default; - background: $bg-surface-200; - padding: $space-1 $space-2; - border-radius: $radius-sm; - margin-bottom: $space-2; -} - -.description { - font-size: $font-size-sm; - color: $text-light; - margin-bottom: $space-2; - line-height: $line-height-relaxed; -} - -.file { - font-size: $font-size-xs; - color: $text-muted; - font-family: $font-mono; -} - -.list { - @include flex-column; - gap: $space-2; - padding-left: $space-5; - list-style: disc; - - li { - font-size: $font-size-sm; - color: $text-light; - } + color: var(--fg-3); } diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx index 5d3f97ec..a418e3db 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/index.tsx @@ -1,88 +1,12 @@ -/** - * ©AngelaMos | 2025 - * index.tsx - */ +// ©AngelaMos | 2026 +// index.tsx -import { useUser } from '@/core/lib' import styles from './dashboard.module.scss' -const AVAILABLE_STORES = [ - { - name: 'useUser()', - file: 'core/lib/auth.store.ts', - description: 'Get current authenticated user', - }, - { - name: 'useIsAuthenticated()', - file: 'core/lib/auth.store.ts', - description: 'Check if user is logged in', - }, - { - name: 'useIsAdmin()', - file: 'core/lib/auth.store.ts', - description: 'Check if user has admin role', - }, -] - -const SUGGESTED_FEATURES = [ - 'User stats and metrics', - 'Recent activity feed', - 'Quick actions', - 'Charts and analytics', - 'Notifications overview', - 'Task/project summary', -] - export function Component(): React.ReactElement { - const user = useUser() - return ( -
-
-
-

- Welcome{user?.full_name ? `, ${user.full_name}` : ''} -

-

- Template page — build your dashboard here -

-
- -
-
- {user?.full_name?.[0]?.toUpperCase() ?? - user?.email?.[0]?.toUpperCase() ?? - 'U'} -
-
- {user?.full_name ?? 'User'} - {user?.email} - {user?.role} -
-
- -
-

Available Stores

-
- {AVAILABLE_STORES.map((store) => ( -
- {store.name} -

{store.description}

- {store.file} -
- ))} -
-
- -
-

Suggested Features

-
    - {SUGGESTED_FEATURES.map((feature) => ( -
  • {feature}
    • - ))} -
-
-
+
+ MONITOR THE SITUATION · SCAFFOLD
) } diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/index.tsx b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/index.tsx deleted file mode 100644 index 48729f0b..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -/** - * ©AngelaMos | 2026 - * index.tsx - */ - -import { FiGithub } from 'react-icons/fi' -import { Link } from 'react-router-dom' -import { ROUTES } from '@/config' -import styles from './landing.module.scss' - -export function Component(): React.ReactElement { - return ( -
-
-

Full Stack Template

-

by Carter Perez

- - - -
- -
-

- Boilerplate for medium-large scale applications. Built with modern - patterns, strict typing, and security best practices. -

- -
-
-

Frontend

-
    -
  • React 19 + TypeScript with strict mode
    • -
  • TanStack Query for server state caching
    • -
  • Zustand stores with persistence
    • -
  • Axios interceptors with auto token refresh
    • -
  • Zod runtime validation on API responses
    • -
  • SCSS modules with design tokens
    • -
-
- -
-

Backend

-
    -
  • DDD + DI Architecture
    • -
  • FastAPI with async/await throughout
    • -
  • SQLAlchemy 2.0+ async with connection pooling
    • -
  • JWT auth with token rotation and replay detection
    • -
  • Argon2id hashing with timing safe verification
    • -
  • Pydantic v2 strict validation
    • -
-
- -
-

Infrastructure

-
    -
  • Docker Compose with dev/prod configs
    • -
  • Nginx reverse proxy with rate limiting
    • -
  • PostgreSQL 18 + Redis 7
    • -
  • Health checks and graceful shutdown
    • -
-
- -
-

DevOps

-
    -
  • GitHub Actions CI (Ruff, Pylint, Mypy, Biome)
    • -
  • Strict type checking on both ends
    • -
  • Alembic async migrations
    • -
-
-
- -
- - Try Auth Flow - - - API Docs - -
-
-
- ) -} - -Component.displayName = 'Landing' diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/landing.module.scss b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/landing.module.scss deleted file mode 100644 index 3013e87a..00000000 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/landing/landing.module.scss +++ /dev/null @@ -1,161 +0,0 @@ -// =================== -// © AngelaMos | 2025 -// landing.module.scss -// =================== - -@use '@/styles' as *; - -.page { - min-height: 100vh; - min-height: 100dvh; - @include flex-column-center; - background-color: $bg-default; - background-image: radial-gradient( - circle, - $bg-landing 1px, - transparent 1px - ); - background-size: 20px 20px; - padding: $space-8; -} - -.header { - text-align: center; - margin-bottom: $space-5; -} - -.title { - font-size: $font-size-4xl; - font-weight: $font-weight-semibold; - color: $text-default; - letter-spacing: $tracking-tight; - margin-bottom: $space-2; -} - -.subtitle { - font-size: $font-size-lg; - color: $text-light; - margin-bottom: $space-3; -} - -.github { - display: inline-flex; - color: $text-muted; - font-size: $font-size-2xl; - @include transition-fast; - - @include hover { - &:hover { - color: $text-default; - } - } -} - -.content { - max-width: 800px; - text-align: center; -} - -.description { - font-size: $font-size-base; - color: $text-light; - line-height: $line-height-relaxed; - margin-bottom: $space-8; -} - -.sections { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: $space-6; - margin-bottom: $space-10; - text-align: left; - - @include breakpoint-down(md) { - grid-template-columns: 1fr; - } -} - -.section { - padding: $space-5; - background-color: $bg-surface-75; - border: 1px solid $border-muted; - border-radius: $radius-lg; -} - -.sectionTitle { - font-size: $font-size-sm; - font-weight: $font-weight-semibold; - color: $text-default; - margin-bottom: $space-3; - letter-spacing: $tracking-wide; - text-transform: uppercase; -} - -.features { - list-style: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - gap: $space-2; - - li { - font-size: $font-size-sm; - color: $text-muted; - - &::before { - content: '→'; - margin-right: $space-2; - color: $text-lighter; - } - } -} - -.actions { - display: flex; - gap: $space-3; - justify-content: center; - flex-wrap: wrap; -} - -.button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: $space-3 $space-5; - font-size: $font-size-sm; - font-weight: $font-weight-medium; - color: $bg-default; - background-color: $text-default; - border-radius: $radius-md; - text-decoration: none; - @include transition-fast; - - @include hover { - &:hover { - filter: brightness(0.9); - } - } -} - -.buttonOutline { - display: inline-flex; - align-items: center; - justify-content: center; - padding: $space-3 $space-5; - font-size: $font-size-sm; - font-weight: $font-weight-medium; - color: $text-default; - background-color: transparent; - border: 1px solid $border-default; - border-radius: $radius-md; - text-decoration: none; - @include transition-fast; - - @include hover { - &:hover { - border-color: $border-strong; - background-color: $bg-surface-75; - } - } -}