Index: components.json =================================================================== --- components.json (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ components.json (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": {} +} Index: package-lock.json =================================================================== --- package-lock.json (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ package-lock.json (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -9,7 +9,16 @@ "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^7.0.1", + "@fortawesome/free-brands-svg-icons": "^7.0.1", + "@fortawesome/free-regular-svg-icons": "^7.0.1", + "@fortawesome/free-solid-svg-icons": "^7.0.1", + "@fortawesome/react-fontawesome": "^3.0.2", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.544.0", "next": "15.5.4", "react": "19.1.0", - "react-dom": "19.1.0" + "react-dom": "19.1.0", + "tailwind-merge": "^3.3.1" }, "devDependencies": { @@ -19,7 +28,10 @@ "@types/react": "^19", "@types/react-dom": "^19", + "autoprefixer": "^10.4.21", "eslint": "^9", "eslint-config-next": "15.5.4", - "tailwindcss": "^4", + "postcss": "^8.5.6", + "tailwindcss": "^4.1.13", + "tw-animate-css": "^1.4.0", "typescript": "^5" } @@ -210,4 +222,74 @@ "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.1.tgz", + "integrity": "sha512-0VpNtO5cNe1/HQWMkl4OdncYK/mv9hnBte0Ew0n6DMzmo3Q3WzDFABHm6LeNTipt5zAyhQ6Ugjiu8aLaEjh1gg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.0.1.tgz", + "integrity": "sha512-x0cR55ILVqFpUioSMf6ebpRCMXMcheGN743P05W2RB5uCNpJUqWIqW66Lap8PfL/lngvjTbZj0BNSUweIr/fHQ==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.0.1.tgz", + "integrity": "sha512-6xPmn5SrND/GM0+W33E77x05+aDn6RpR02eWd8eLdN0IxY0vXa5yU/ugaAKloOVxiG9w2330TSRsbJYL6c57Ow==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.0.1.tgz", + "integrity": "sha512-4V9fHbHjcx9Qu4O99AM5B4zuEDfB4zajk1I77hEzOxPN00f8g3484Aeq6WpfFcmookvjLE3Pr71Dhf/lqw7tbA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.0.1.tgz", + "integrity": "sha512-esKuSrl1WMOTMDLNt38i16VfLe/gRZt2ZAJ3Yw7slfs7sj583MKqNFqO57zmhknk1Sya6f9Wys89aCzIJkcqlg==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.0.2.tgz", + "integrity": "sha512-cmp/nT0pPC7HUALF8uc3+D5ECwEBWxYQbOIHwtGUWEu72sWtZc26k5onr920HWOViF0nYaC+Qzz6Ln56SQcaVg==", + "license": "MIT", + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~6 || ~7", + "react": "^18.0.0 || ^19.0.0" } }, @@ -2128,4 +2210,42 @@ } }, + "node_modules/autoprefixer": { + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", @@ -2171,4 +2291,14 @@ "license": "MIT" }, + "node_modules/baseline-browser-mapping": { + "version": "2.8.6", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.6.tgz", + "integrity": "sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.js" + } + }, "node_modules/brace-expansion": { "version": "1.1.12", @@ -2193,4 +2323,38 @@ "engines": { "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.26.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz", + "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.8.3", + "caniuse-lite": "^1.0.30001741", + "electron-to-chromium": "^1.5.218", + "node-releases": "^2.0.21", + "update-browserslist-db": "^1.1.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, @@ -2302,4 +2466,16 @@ } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/client-only": { "version": "0.0.1", @@ -2307,4 +2483,13 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" + }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } }, "node_modules/color-convert": { @@ -2516,4 +2701,11 @@ "node": ">= 0.4" } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.223", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.223.tgz", + "integrity": "sha512-qKm55ic6nbEmagFlTFczML33rF90aU+WtrJ9MdTCThrcvDNdUHN4p6QfVN78U06ZmguqXIyMPyYhw2TrbDUwPQ==", + "dev": true, + "license": "ISC" }, "node_modules/emoji-regex": { @@ -2715,4 +2907,14 @@ } }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/escape-string-regexp": { "version": "4.0.0", @@ -3295,4 +3497,18 @@ } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/function-bind": { "version": "1.1.2", @@ -4452,4 +4668,13 @@ "bin": { "loose-envify": "cli.js" + } + }, + "node_modules/lucide-react": { + "version": "0.544.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz", + "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, @@ -4672,4 +4897,21 @@ } }, + "node_modules/node-releases": { + "version": "2.0.21", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz", + "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==", + "dev": true, + "license": "MIT" + }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", @@ -4960,4 +5202,11 @@ "node": "^10 || ^12 || >=14" } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" }, "node_modules/prelude-ls": { @@ -5642,4 +5891,14 @@ } }, + "node_modules/tailwind-merge": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz", + "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.13", @@ -5772,4 +6031,14 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" + }, + "node_modules/tw-animate-css": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz", + "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } }, "node_modules/type-check": { @@ -5939,4 +6208,35 @@ } }, + "node_modules/update-browserslist-db": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", + "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", Index: package.json =================================================================== --- package.json (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ package.json (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -10,18 +10,30 @@ }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^7.0.1", + "@fortawesome/free-brands-svg-icons": "^7.0.1", + "@fortawesome/free-regular-svg-icons": "^7.0.1", + "@fortawesome/free-solid-svg-icons": "^7.0.1", + "@fortawesome/react-fontawesome": "^3.0.2", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.544.0", + "next": "15.5.4", "react": "19.1.0", "react-dom": "19.1.0", - "next": "15.5.4" + "tailwind-merge": "^3.3.1" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", + "autoprefixer": "^10.4.21", "eslint": "^9", "eslint-config-next": "15.5.4", - "@eslint/eslintrc": "^3" + "postcss": "^8.5.6", + "tailwindcss": "^4.1.13", + "tw-animate-css": "^1.4.0", + "typescript": "^5" } } Index: src/app/globals.css =================================================================== --- src/app/globals.css (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/globals.css (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -1,8 +1,6 @@ @import "tailwindcss"; +@import "tw-animate-css"; -:root { - --background: #ffffff; - --foreground: #171717; -} +@custom-variant dark (&:is(.dark *)); @theme inline { @@ -11,16 +9,115 @@ --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar); + --color-chart-5: var(--chart-5); + --color-chart-4: var(--chart-4); + --color-chart-3: var(--chart-3); + --color-chart-2: var(--chart-2); + --color-chart-1: var(--chart-1); + --color-ring: var(--ring); + --color-input: var(--input); + --color-border: var(--border); + --color-destructive: var(--destructive); + --color-accent-foreground: var(--accent-foreground); + --color-accent: var(--accent); + --color-muted-foreground: var(--muted-foreground); + --color-muted: var(--muted); + --color-secondary-foreground: var(--secondary-foreground); + --color-secondary: var(--secondary); + --color-primary-foreground: var(--primary-foreground); + --color-primary: var(--primary); + --color-popover-foreground: var(--popover-foreground); + --color-popover: var(--popover); + --color-card-foreground: var(--card-foreground); + --color-card: var(--card); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: #0272D1; + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply text-foreground; + background-color: #F4FAFF; } } - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} Index: src/app/layout.tsx =================================================================== --- src/app/layout.tsx (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/layout.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -2,4 +2,9 @@ import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import '@fortawesome/fontawesome-svg-core/styles.css'; +import { config } from '@fortawesome/fontawesome-svg-core'; + +// Prevent FontAwesome from adding CSS automatically +config.autoAddCss = false; const geistSans = Geist({ @@ -14,6 +19,6 @@ export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "IKnow - UKIM", + description: "University Managment System used to provide students informations and manage their progress.", }; @@ -28,5 +33,5 @@ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > - {children} +
{children}
Index: src/app/page.tsx =================================================================== --- src/app/page.tsx (revision 65f7b64a4488d0ab35cde03686d8f46e2980d28e) +++ src/app/page.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -1,103 +1,14 @@ import Image from "next/image"; +import Navbar from "@/components/navbar"; +import Header from "@/components/header"; +import Exams from "@/components/exams"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> +
+ + + ); } Index: src/components/exams.tsx =================================================================== --- src/components/exams.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/exams.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,418 @@ +"use client" +import { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'; + +const Exams = () => { + const [sortField, setSortField] = useState<'grade' | 'date' | null>(null); + const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null); + // Real exam data + const stats = { + average: 8.95, + credits: { current: 108, total: 240 }, + passed: 19, + remaining: 22 + }; + + const exams = [ + { + id: 1, + code: "F23L1W005", + subject: "Бизнис и менаџмент", + session: "2024 (Зимска) Прва испитна сесија", + date: "21.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 2, + code: "F23L1W007", + subject: "Вовед во компјутерските науки", + session: "2024 (Зимска) Прва испитна сесија", + date: "06.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 3, + code: "F23L2W003", + subject: "Избрани теми од математика", + session: "2024 (Зимска) Прва испитна сесија", + date: "12.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 9 + }, + { + id: 4, + code: "F23L1W018", + subject: "Професионални вештини", + session: "2024 (Зимска) Прва испитна сесија", + date: "01.02.2024", + semester: 1, + credits: 4.00, + type: "З", + grade: 9 + }, + { + id: 5, + code: "F23L1W004", + subject: "Спорт и здравје", + session: "2024 (Летна) Втора испитна сесија", + date: "15.07.2024", + semester: 1, + credits: 2.00, + type: "З", + grade: "Реализиран" + }, + { + id: 6, + code: "F23L1W020", + subject: "Структурно програмирање", + session: "2024 (Зимска) Прва испитна сесија", + date: "12.02.2024", + semester: 1, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 7, + code: "F23L1S003", + subject: "Архитектура и организација на компјутери", + session: "2024 (Летна) Втора испитна сесија", + date: "03.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 9 + }, + { + id: 8, + code: "F23L1S023", + subject: "Бизнис статистика", + session: "2024 (Летна) Втора испитна сесија", + date: "02.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 9, + code: "F23L1S120", + subject: "Креативни вештини за решавање проблеми", + session: "2024 (Летна) Втора испитна сесија", + date: "25.06.2024", + semester: 2, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 10, + code: "F23L1S016", + subject: "Објектно-ориентирано програмирање", + session: "2024 (Летна) Втора испитна сесија", + date: "13.07.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 11, + code: "F23L1S146", + subject: "Основи на Веб дизајн", + session: "2024 (Летна) Втора испитна сесија", + date: "24.06.2024", + semester: 2, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 12, + code: "F23L2W100", + subject: "Економија за ИКТ инженери", + session: "2025 (Зимска) Прва испитна сесија", + date: "03.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 13, + code: "F23L2W109", + subject: "Интернет програмирање на клиентска страна", + session: "2025 (Зимска) Прва испитна сесија", + date: "30.01.2025", + semester: 3, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 14, + code: "F23L2W014", + subject: "Компјутерски мрежи и безбедност", + session: "2025 (Зимска) Прва испитна сесија", + date: "10.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 15, + code: "F23L2W201", + subject: "Примена на алгоритми и податочни структури", + session: "2025 (Зимска) Прва испитна сесија", + date: "13.02.2025", + semester: 3, + credits: 6.00, + type: "З", + grade: 10 + }, + { + id: 16, + code: "F23L2W167", + subject: "Шаблони за дизајн на кориснички интерфејси", + session: "2025 (Зимска) Прва испитна сесија", + date: "06.02.2025", + semester: 3, + credits: 6.00, + type: "И", + grade: 10 + }, + { + id: 17, + code: "F23L2S026", + subject: "Маркетинг", + session: "2025 (Летна) Втора испитна сесија", + date: "12.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 8 + }, + { + id: 18, + code: "F23L2S017", + subject: "Оперативни системи", + session: "2025 (Летна) Втора испитна сесија", + date: "19.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 7 + }, + { + id: 19, + code: "F23L2S029", + subject: "Софтверско инженерство", + session: "2025 (Летна) Втора испитна сесија", + date: "23.06.2025", + semester: 4, + credits: 6.00, + type: "З", + grade: 8 + } + ]; + + const getGradeColor = (grade: number | string) => { + if (grade === "Реализиран") return "bg-blue-100 text-blue-800 border-blue-200"; + if (typeof grade === "number") { + if (grade >= 9) return "bg-green-100 text-green-800 border-green-200"; + if (grade >= 8) return "bg-yellow-100 text-yellow-800 border-yellow-200"; + if (grade >= 6) return "bg-orange-100 text-orange-800 border-orange-200"; + return "bg-red-100 text-red-800 border-red-200"; + } + return "bg-gray-100 text-gray-800 border-gray-200"; + }; + + const handleSortByGrade = () => { + if (sortField === 'grade') { + if (sortOrder === 'desc') { + setSortOrder('asc'); + } else if (sortOrder === 'asc') { + setSortField(null); + setSortOrder(null); + } else { + setSortOrder('desc'); + } + } else { + setSortField('grade'); + setSortOrder('desc'); + } + }; + + const handleSortByDate = () => { + if (sortField === 'date') { + if (sortOrder === 'desc') { + setSortOrder('asc'); + } else if (sortOrder === 'asc') { + setSortField(null); + setSortOrder(null); + } else { + setSortOrder('desc'); + } + } else { + setSortField('date'); + setSortOrder('desc'); + } + }; + + const getSortedExams = () => { + if (!sortField || !sortOrder) return exams; + + return [...exams].sort((a, b) => { + if (sortField === 'grade') { + // Handle "Реализиран" grade separately + if (a.grade === "Реализиран" && b.grade === "Реализиран") return 0; + if (a.grade === "Реализиран") return sortOrder === 'asc' ? -1 : 1; + if (b.grade === "Реализиран") return sortOrder === 'asc' ? 1 : -1; + + // Handle numeric grades + const gradeA = typeof a.grade === 'number' ? a.grade : 0; + const gradeB = typeof b.grade === 'number' ? b.grade : 0; + + return sortOrder === 'asc' ? gradeA - gradeB : gradeB - gradeA; + } + + if (sortField === 'date') { + // Convert date strings to Date objects for proper sorting + const dateA = new Date(a.date.split('.').reverse().join('-')); // Convert DD.MM.YYYY to YYYY-MM-DD + const dateB = new Date(b.date.split('.').reverse().join('-')); + + return sortOrder === 'asc' ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime(); + } + + return 0; + }); + }; + + const getSortIcon = (field: 'grade' | 'date') => { + if (sortField === field) { + if (sortOrder === 'asc') return faSortUp; + if (sortOrder === 'desc') return faSortDown; + } + return faSort; + }; + + const creditsPercentage = (stats.credits.current / stats.credits.total) * 100; + + return ( +
+ {/* Statistics Section */} +
+
+ {/* Average Grade */} +
+
{stats.average}
+
Просек
+
+ + {/* Credits */} +
+
+ {stats.credits.current} + /{stats.credits.total} +
+
Кредити
+
+ + {/* Passed Exams */} +
+
{stats.passed}
+
Положени
+
+ + {/* Remaining Exams */} +
+
{stats.remaining}
+
Останато
+
+
+ + {/* Progress Bar spanning entire statistics section */} +
+
+
+
+ + {/* Exams Table */} +
+

Испити

+ +
+ + + + + + + + + + + + + {getSortedExams().map((exam) => ( + + + + + + + + + ))} + +
#ПредметСеместарКредити + + + +
{exam.id}{exam.subject}{exam.semester}{exam.credits}{exam.date} + + {exam.grade} + +
+
+
+
+ ); +}; + +export default Exams; Index: src/components/header.tsx =================================================================== --- src/components/header.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/header.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,71 @@ +"use client" +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faUser, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; +import Image from 'next/image'; + +const Header = () => { + return ( +
+
+
+ {/* Left side - Logos and University Info */} +
+ {/* UKIM Logo */} +
+ UKIM Logo +
+ + {/* FINKI Logo */} +
+ FINKI Logo +
+ + {/* University Text */} +
+
+ Универзитет „Св. КИРИЛ И МЕТОДИЈ“ - Скопје +
+
+ Факултет за информатички науки и компјутерско инженерство +
+
+
+ + {/* Right side - User Profile */} +
+
+ {/* User Avatar */} +
+ +
+ + {/* User Name */} +
+ Стефан Савески +
+ + {/* Logout Button */} + +
+
+
+
+
+ ); +}; + +export default Header; Index: src/components/navbar.tsx =================================================================== --- src/components/navbar.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/components/navbar.tsx (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,79 @@ +"use client" +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faUser } from '@fortawesome/free-solid-svg-icons'; +import { faBookmark } from '@fortawesome/free-solid-svg-icons'; +import { faBook } from '@fortawesome/free-solid-svg-icons'; +import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'; +import { faListCheck } from '@fortawesome/free-solid-svg-icons'; +import { faFilePdf } from '@fortawesome/free-solid-svg-icons'; +import { faBars, faTimes, faGraduationCap } from '@fortawesome/free-solid-svg-icons'; +import { useState } from 'react'; + +const Navbar = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const menuItems = [ + { icon: faUser, label: 'Профил' }, + { icon: faBookmark, label: 'Семестри' }, + { icon: faBook, label: 'Предмети' }, + { icon: faPenToSquare, label: 'Пријави' }, + { icon: faListCheck, label: 'Положени' }, + { icon: faFilePdf, label: 'Документи' } + ]; + + return ( + <> + {/* Desktop Navbar */} + + + {/* Mobile Navbar */} + + + ); +}; + +export default Navbar; Index: src/lib/utils.ts =================================================================== --- src/lib/utils.ts (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) +++ src/lib/utils.ts (revision 875f7d6526d10ea486ceae45de8b59a66f11aaff) @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +}