From e56e90e5a405ea4edd5c105f9b3e23828be289dd Mon Sep 17 00:00:00 2001 From: Logan Ford <110533855+Logannford@users.noreply.github.com> Date: Fri, 28 Feb 2025 21:51:29 +0000 Subject: [PATCH 1/8] feat: init commit tailwind v3 -> v4 --- package.json | 4 ++-- tailwind.config.ts | 44 ++++++++++++++++---------------------------- 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index f4acce913..92372926d 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "stripe": "^17.2.1", "tailwind-container-break-out": "^2.0.9", "tailwind-merge": "^2.6.0", - "tailwindcss-animate": "^1.0.7", + "tailwindcss-animate": "^2.0.0", "uniqid": "^5.4.0", "unist-util-visit": "^5.0.0", "zod": "^3.23.8" @@ -129,7 +129,7 @@ "postcss-simple-vars": "^7.0.1", "prisma": "6.4.0", "react-email": "3.0.4", - "tailwindcss": "^3.4.1", + "tailwindcss": "^4.0.9", "turbo": "2.4.2", "typescript": "^5.7.2" } diff --git a/tailwind.config.ts b/tailwind.config.ts index e731f0874..63de4753b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,7 +5,7 @@ const svgToDataUri = require('mini-svg-data-uri'); const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette'); -const config: Config = { +const config = { darkMode: ['class'], content: { files: [ @@ -17,34 +17,22 @@ const config: Config = { extract, }, safelist: [ - { - pattern: /bg-yellow/, - variants: ['hover'], - }, - { - pattern: /text-yellow/, - variants: ['hover'], - }, - { - pattern: /border-yellow/, - variants: ['hover'], - }, - { - pattern: /bg-blue/, - variants: ['hover'], - }, - { - pattern: /text-blue/, - variants: ['hover'], - }, - { - pattern: /border-blue/, - variants: ['hover'], - }, + 'bg-yellow', + 'hover:bg-yellow', + 'text-yellow', + 'hover:text-yellow', + 'border-yellow', + 'hover:border-yellow', + 'bg-blue', + 'hover:bg-blue', + 'text-blue', + 'hover:text-blue', + 'border-blue', + 'hover:border-blue', ], theme: { - screens, // tailwind's default screens, in `rem` - fontSize, // tailwind's default font sizes, in `rem` (including line heights) + screens, + fontSize, extend: { fontFamily: { inter: ['var(--font-inter)'], @@ -221,7 +209,7 @@ const config: Config = { require('tailwind-container-break-out'), fluid, ], -}; +} satisfies Config; function addMatchUtils({ matchUtilities, theme }: any) { matchUtilities( From 417bcddcd9dcb3bdda88da6d33cb354b15c8506a Mon Sep 17 00:00:00 2001 From: Logan Ford <110533855+Logannford@users.noreply.github.com> Date: Fri, 28 Feb 2025 21:53:32 +0000 Subject: [PATCH 2/8] fix; tailwind animate version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92372926d..5909b6329 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "stripe": "^17.2.1", "tailwind-container-break-out": "^2.0.9", "tailwind-merge": "^2.6.0", - "tailwindcss-animate": "^2.0.0", + "tailwindcss-animate": "^1.0.7", "uniqid": "^5.4.0", "unist-util-visit": "^5.0.0", "zod": "^3.23.8" From 8fcf3a7fcfab6741be4baafc572055cd2906b5a2 Mon Sep 17 00:00:00 2001 From: Logan Ford <110533855+Logannford@users.noreply.github.com> Date: Fri, 28 Feb 2025 21:54:07 +0000 Subject: [PATCH 3/8] revert --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5909b6329..f4acce913 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "postcss-simple-vars": "^7.0.1", "prisma": "6.4.0", "react-email": "3.0.4", - "tailwindcss": "^4.0.9", + "tailwindcss": "^3.4.1", "turbo": "2.4.2", "typescript": "^5.7.2" } From 4a346e3265fe8effebf2ff3e08a75d87493537ca Mon Sep 17 00:00:00 2001 From: Logan Ford <110533855+Logannford@users.noreply.github.com> Date: Fri, 28 Feb 2025 22:11:37 +0000 Subject: [PATCH 4/8] init v4 migration via codemod --- package.json | 3 +- postcss.config.mjs | 2 +- .../(roadmaps)/personalized-roadmaps/page.tsx | 2 +- .../(roadmaps)/roadmaps/page.tsx | 2 +- src/app/(app)/dashboard/page.client.tsx | 2 +- src/app/(app)/testing/upload-test/page.tsx | 2 +- src/app/(marketing)/changelog/page.tsx | 4 +- .../(marketing)/features/leaderboard/page.tsx | 10 +- src/app/(marketing)/features/roadmap/page.tsx | 4 +- src/app/(marketing)/pricing/page.tsx | 6 +- src/app/(no_nav)/(auth)/signup/page.tsx | 6 +- src/app/globals.css | 245 ++++++++++-------- src/app/not-found.tsx | 4 +- .../app/dashboard/all-questions-bento-box.tsx | 4 +- .../app/dashboard/continue-journey-card.tsx | 2 +- .../app/dashboard/next-question-bento-box.tsx | 4 +- .../app/dashboard/next-roadmap-graphic.tsx | 2 +- .../app/dashboard/progression-bento-box.tsx | 2 +- .../app/filters/filter-dropdown.tsx | 18 +- .../app/filters/filters-loading.tsx | 2 +- .../app/filters/sort/sort-dropdown.tsx | 2 +- .../app/leaderboard/leaderboard-hero.tsx | 4 +- .../leaderboard-most-questions-answered.tsx | 6 +- .../app/navigation/sidebar-dropdown.tsx | 4 +- .../app/navigation/sidebar-submenu-item.tsx | 2 +- src/components/app/navigation/sidebar.tsx | 4 +- .../onboarding-first-question-selection.tsx | 2 +- .../app/onboarding/onboarding-pricing.tsx | 2 +- .../app/onboarding/onboarding-questions.tsx | 2 +- .../app/onboarding/onboarding-share.tsx | 2 +- .../app/onboarding/onboarding-tags.tsx | 2 +- .../onboarding/onboarding-time-commitment.tsx | 2 +- .../onboarding/onboarding-user-details.tsx | 4 +- .../admin/new-coding-challenge-modal.tsx | 2 +- .../questions/admin/new-question-modal.tsx | 2 +- .../code-editor/answer-submitted.tsx | 2 +- .../carousel/question-carousel-card.tsx | 8 +- .../carousel/question-carousel-loading.tsx | 2 +- .../layout/carousel/question-carousel.tsx | 2 +- .../app/questions/layout/question-card.tsx | 12 +- .../premium-question-denied-access.tsx | 2 +- .../single/layout/expanded-code-modal.tsx | 2 +- .../single/layout/question-submitted.tsx | 2 +- .../questions/single/layout/upgrade-modal.tsx | 2 +- .../questions/single/question-accordion.tsx | 2 +- .../single/related-question-card.tsx | 2 +- .../questions/suggested-questions-table.tsx | 2 +- src/components/app/questions/tag-display.tsx | 12 +- .../onboarding/onboarding-user-answers.tsx | 2 +- .../app/shared/answer-submitted.tsx | 2 +- .../app/shared/question/daily-goals-card.tsx | 2 +- .../shared/question/question-code-display.tsx | 2 +- .../app/shared/question/question-timer.tsx | 2 +- .../app/shared/question/tour-card.tsx | 2 +- .../app/shared/question/tour-start-modal.tsx | 2 +- .../app/shared/upgrade/upgrade-card.tsx | 2 +- .../app/statistics/range-picker.tsx | 4 +- .../app/statistics/statistics-report.tsx | 2 +- .../app/statistics/total-question-chart.tsx | 2 +- src/components/app/study-paths/hero-chip.tsx | 2 +- .../study-path-question-card-skeleton.tsx | 2 +- .../study-paths/study-path-question-card.tsx | 10 +- .../app/study-paths/study-path-sidebar.tsx | 2 +- src/components/auth/logout.tsx | 2 +- .../feature-left-right/section-one.tsx | 6 +- .../feature-left-right/section-three.tsx | 4 +- .../hero/daily-challenge-hero.tsx | 4 +- .../features/global/content-header.tsx | 2 +- .../leaderboard/leaderboard-features-left.tsx | 8 +- .../leaderboard-features-right.tsx | 4 +- .../leaderboard/leaderboard-features.tsx | 2 +- .../features/leaderboard/leaderboard-hero.tsx | 8 +- .../grid/roadmap-feature-box-animation.tsx | 2 +- .../roadmap/grid/roadmap-grid-item-one.tsx | 4 +- .../roadmap/grid/roadmap-grid-item-two.tsx | 4 +- .../roadmap/roadmap-customisation.tsx | 6 +- .../features/roadmap/roadmap-hero.tsx | 8 +- .../features/statistics/stats-hero.tsx | 8 +- .../statistics/stats-report-section.tsx | 12 +- .../global/blocks/call-to-action-block.tsx | 6 +- .../marketing/global/blocks/content-grid.tsx | 2 +- .../marketing/global/blocks/faqs.tsx | 2 +- .../global/blocks/homepage-user-stats.tsx | 2 +- .../global/blocks/question-marquee.tsx | 4 +- .../blocks/user-stats-floating-chips.tsx | 2 +- .../marketing/global/code-snippet.tsx | 2 +- .../global/navigation/mobile-menu.tsx | 4 +- .../global/navigation/navigation-buttons.tsx | 2 +- .../global/navigation/navigation-items.tsx | 4 +- .../global/navigation/navigation.tsx | 2 +- .../global/open-source/open-source-block.tsx | 6 +- .../marketing/global/social-proof.tsx | 2 +- .../homepage/comparison/code-comparison.tsx | 2 +- .../homepage/comparison/comparison-block.tsx | 2 +- .../homepage/features/features-bento-grid.tsx | 2 +- .../marketing/homepage/hero/hero-images.tsx | 2 +- .../marketing/homepage/hero/hero.tsx | 2 +- .../marketing/homepage/personalized/block.tsx | 2 +- .../marketing/homepage/personalized/left.tsx | 2 +- .../marketing/homepage/personalized/right.tsx | 4 +- .../open-source/open-source-hero.tsx | 8 +- src/components/shared/Card.tsx | 2 +- src/components/shared/hero.tsx | 2 +- .../shared/payment/upgrade-page.tsx | 4 +- src/components/ui/animated-span.tsx | 2 +- src/components/ui/badge.tsx | 6 +- src/components/ui/button.tsx | 16 +- src/components/ui/card.tsx | 2 +- src/components/ui/chart.tsx | 4 +- src/components/ui/checkbox.tsx | 2 +- src/components/ui/code-comparison.tsx | 4 +- src/components/ui/date-picker.tsx | 2 +- src/components/ui/dialog.tsx | 2 +- src/components/ui/dropdown-menu.tsx | 8 +- src/components/ui/grid.tsx | 2 +- src/components/ui/hover-card.tsx | 2 +- src/components/ui/infinite-moving-cards.tsx | 2 +- src/components/ui/input-label.tsx | 2 +- src/components/ui/input.tsx | 2 +- src/components/ui/navigation-menu.tsx | 18 +- src/components/ui/popover.tsx | 2 +- src/components/ui/select.tsx | 4 +- src/components/ui/sheet.tsx | 2 +- src/components/ui/sidebar.tsx | 46 ++-- src/components/ui/switch.tsx | 2 +- src/components/ui/table.tsx | 2 +- src/components/ui/tabs.tsx | 4 +- src/components/ui/textarea.tsx | 2 +- src/components/ui/timelime.tsx | 4 +- tailwind.config.ts | 8 +- 130 files changed, 395 insertions(+), 375 deletions(-) diff --git a/package.json b/package.json index f4acce913..04c0a4eb1 100644 --- a/package.json +++ b/package.json @@ -114,6 +114,7 @@ "@content-collections/core": "^0.8.0", "@content-collections/mdx": "^0.2.0", "@content-collections/next": "^0.2.4", + "@tailwindcss/postcss": "4.0.9", "@types/dompurify": "^3.0.5", "@types/lodash": "^4.17.13", "@types/node": "^20.17.11", @@ -129,7 +130,7 @@ "postcss-simple-vars": "^7.0.1", "prisma": "6.4.0", "react-email": "3.0.4", - "tailwindcss": "^3.4.1", + "tailwindcss": "^4.0.9", "turbo": "2.4.2", "typescript": "^5.7.2" } diff --git a/postcss.config.mjs b/postcss.config.mjs index 7c945caa7..e4b1ccf2d 100644 --- a/postcss.config.mjs +++ b/postcss.config.mjs @@ -1,7 +1,7 @@ /** @type {import('postcss-load-config').Config} */ const config = { plugins: { - tailwindcss: {}, + '@tailwindcss/postcss': {}, 'postcss-preset-mantine': {}, 'postcss-simple-vars': { variables: { diff --git a/src/app/(app)/(default_layout)/(roadmaps)/personalized-roadmaps/page.tsx b/src/app/(app)/(default_layout)/(roadmaps)/personalized-roadmaps/page.tsx index 72ee2964b..2ccc2b427 100644 --- a/src/app/(app)/(default_layout)/(roadmaps)/personalized-roadmaps/page.tsx +++ b/src/app/(app)/(default_layout)/(roadmaps)/personalized-roadmaps/page.tsx @@ -118,7 +118,7 @@ export default async function RoadmapPage() { hasAnsweredEnoughQuestions={hasAnsweredEnoughQuestions} answeredQuestionsCount={answeredQuestionsCount} /> -
+
Enjoying Roadmaps? diff --git a/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx b/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx index 024c17b77..2aecd9f90 100644 --- a/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx +++ b/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx @@ -155,7 +155,7 @@ export default async function ExploreQuestionsPage() { missionsPromise={missionsPromise} userMissionRecordsPromise={userMissionRecordsPromise} /> -
+
Suggest a roadmap diff --git a/src/app/(app)/dashboard/page.client.tsx b/src/app/(app)/dashboard/page.client.tsx index 5b1f10dbb..a0e4c87a5 100644 --- a/src/app/(app)/dashboard/page.client.tsx +++ b/src/app/(app)/dashboard/page.client.tsx @@ -95,7 +95,7 @@ export default function ClientPage({ return ( <> - + Welcome to your personalized coding experience! diff --git a/src/app/(app)/testing/upload-test/page.tsx b/src/app/(app)/testing/upload-test/page.tsx index 4631921c1..7bfc5be4b 100644 --- a/src/app/(app)/testing/upload-test/page.tsx +++ b/src/app/(app)/testing/upload-test/page.tsx @@ -39,7 +39,7 @@ export default function UploadTestPage() { onChange={() => { onSubmit(event); }} - className="!hidden" + className="hidden!" />
); diff --git a/src/app/(marketing)/changelog/page.tsx b/src/app/(marketing)/changelog/page.tsx index e1666b151..3451a516c 100644 --- a/src/app/(marketing)/changelog/page.tsx +++ b/src/app/(marketing)/changelog/page.tsx @@ -10,7 +10,7 @@ export default function ChangelogPage() {

Changelog @@ -32,7 +32,7 @@ export default function ChangelogPage() { 'absolute inset-0 pt-44 [mask-image:radial-gradient(400px_circle_at_center,white,transparent)]' )} /> -
+

diff --git a/src/app/(marketing)/features/leaderboard/page.tsx b/src/app/(marketing)/features/leaderboard/page.tsx index 06b274700..2f36c50ec 100644 --- a/src/app/(marketing)/features/leaderboard/page.tsx +++ b/src/app/(marketing)/features/leaderboard/page.tsx @@ -75,7 +75,7 @@ const faqs = [ answer: ( <> Yes, TechBlitz is completely open source! Explore our source code on{' '} - + GitHub {' '} and join the growing community of developers contributing to our platform. @@ -87,7 +87,7 @@ const faqs = [ answer: ( <> You can sign up for a free account{' '} - + here ! We're excited to see you on the leaderboard! @@ -116,7 +116,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [ <> Create custom learning paths tailored to your goals. Whether you're a complete beginner or advancing your skills, find the perfect route for your journey. Learn more{' '} - + here . @@ -140,7 +140,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [ <> Keep track of your coding progress with our coding analytics. See your progression, create custom coding challenges, and more. Learn more{' '} - + here . @@ -154,7 +154,7 @@ const featureShowcaseItems: MarketingContentGridProps[] = [ <> Bite-sized coding challenges to keep you engaged and learning. Perfect for busy developers who want to stay sharp and improve their skills. You can learn more{' '} - + here . diff --git a/src/app/(marketing)/features/roadmap/page.tsx b/src/app/(marketing)/features/roadmap/page.tsx index 44dab711d..aaac6fca7 100644 --- a/src/app/(marketing)/features/roadmap/page.tsx +++ b/src/app/(marketing)/features/roadmap/page.tsx @@ -46,7 +46,7 @@ const faqs = [ <> To access the roadmaps on techblitz, you need to have a premium account. You can sign up for a premium account{' '} - + here . @@ -66,7 +66,7 @@ const faqs = [ GitHub {' '} diff --git a/src/app/(marketing)/pricing/page.tsx b/src/app/(marketing)/pricing/page.tsx index 3455ecb5e..52ecb53ea 100644 --- a/src/app/(marketing)/pricing/page.tsx +++ b/src/app/(marketing)/pricing/page.tsx @@ -198,16 +198,16 @@ export default async function PricingPage() { />
-
+
Pricing
-

+

{/** Plans that don't the bank */} Learning to code has
- + never{' '} {' '} been easier diff --git a/src/app/(no_nav)/(auth)/signup/page.tsx b/src/app/(no_nav)/(auth)/signup/page.tsx index cd8d2c857..2c11a76b8 100644 --- a/src/app/(no_nav)/(auth)/signup/page.tsx +++ b/src/app/(no_nav)/(auth)/signup/page.tsx @@ -101,7 +101,7 @@ export default async function SignupPage() {
-

+

Create your TechBlitz account

@@ -143,8 +143,8 @@ export default async function SignupPage() { isFakeCard={true} /> ))} -

-
+
+
diff --git a/src/app/globals.css b/src/app/globals.css index dd8315e57..223266a47 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,91 +1,83 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; -:root { - --background: #000000; - --foreground: #ededed; +@config '../../tailwind.config.ts'; - --color-secondary: #ffffff; - --color-accent: #5b61d6; -} - -body { - color: var(--foreground) !important; - background: var(--background) !important; - font-family: Arial, Helvetica, sans-serif; - /** smooth scrolling on id click */ -} +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. -html { - scroll-behavior: smooth; + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } } -@layer utilities { - .scrollable-element::-webkit-scrollbar { +@utility scrollable-element { + &::-webkit-scrollbar { width: 12px; } - .scrollable-element::-webkit-scrollbar-track { + &::-webkit-scrollbar-track { @apply bg-black; } - .scrollable-element::-webkit-scrollbar-thumb { + &::-webkit-scrollbar-thumb { @apply bg-black; border-radius: 10px; } - .scrollable-element::-webkit-scrollbar-thumb:hover { + &::-webkit-scrollbar-thumb:hover { @apply bg-black; } + scrollbar-width: thin; + scrollbar-color: #000000 #0e0e0e; +} - .scrollable-element { - scrollbar-width: thin; - scrollbar-color: #000000 #0e0e0e; - } - - .perspective-1000 { - perspective: 1000px; - } +@utility perspective-1000 { + perspective: 1000px; +} - .transform-3d { - transform-style: preserve-3d; - } +@utility transform-3d { + transform-style: preserve-3d; +} - .rotate-x-55 { - transform: rotateX(55deg); - } +@utility rotate-x-55 { + transform: rotateX(55deg); +} - .rotate-y-45 { - transform: rotateY(45deg); - } +@utility rotate-y-45 { + transform: rotateY(45deg); +} - .rotate-x-90 { - transform: rotateX(90deg); - } +@utility rotate-x-90 { + transform: rotateX(90deg); +} - .rotate-y-90 { - transform: rotateY(90deg); - } +@utility rotate-y-90 { + transform: rotateY(90deg); +} - ::selection { - @apply bg-accent text-white; - } +@utility text-balance { + text-wrap: balance; +} - .text-balance { - text-wrap: balance; - } +@utility pause-animation { + animation-play-state: paused; +} - .pause-animation { - animation-play-state: paused; - } - - .card-wrapper { - @apply relative overflow-hidden; - } +@utility card-wrapper { + @apply relative overflow-hidden; /* Gradient */ - .card-wrapper::before { + &::before { background: conic-gradient( rgba(91, 97, 214, 1) 0deg, rgba(91, 97, 214, 0.5) 90deg, @@ -100,18 +92,20 @@ html { @apply animate-border-spin; } +} +@utility card-content { /* Body */ - .card-content { - @apply absolute left-[1px] top-[1px] h-[calc(100%-2px)] w-[calc(100%-2px)]; - } + @apply absolute left-[1px] top-[1px] h-[calc(100%-2px)] w-[calc(100%-2px)]; +} - .text-gradient { - @apply bg-clip-text text-transparent bg-gradient-to-b; - } +@utility text-gradient { + @apply bg-clip-text text-transparent bg-linear-to-b; +} +@utility gh-card-arrow { /** This is acting like the 'border' of the arrow */ - .gh-card-arrow::before { + &::before { @apply -left-2 top-2.5 h-4 w-2 absolute; content: ''; clip-path: polygon(100% 0, 0 50%, 100% 100%); @@ -119,56 +113,85 @@ html { } /** This is acting like the 'background' of the arrow */ - .gh-card-arrow::after { + &::after { @apply -left-1.5 top-2.5 h-4 w-2 absolute; content: ''; clip-path: polygon(100% 0, 0 50%, 100% 100%); background: var(--arrow-color); } +} - /** data-name="onborda-pointer" */ - [data-name='onborda-pointer'] { - @apply !rounded-md !p-1; +@layer utilities { + :root { + --background: #000000; + --foreground: #ededed; + + --color-secondary: #ffffff; + --color-accent: #5b61d6; + } + + body { + color: var(--foreground) !important; + background: var(--background) !important; + font-family: Arial, Helvetica, sans-serif; + /** smooth scrolling on id click */ } -} -/* Basic editor styles */ -.tiptap { - :first-child { - margin-top: 0; + html { + scroll-behavior: smooth; } +} - /* Code and preformatted text styles */ - code { - background-color: var(--purple-light); - border-radius: 0.4rem; - color: var(--white); - font-size: 0.85rem; - padding: 0.25em 0.3em; +@layer utilities { + ::selection { + @apply bg-accent text-white; } - pre:focus-visible { - outline: 2px solid var(--purple); - outline-offset: 0.5rem; + /** data-name="onborda-pointer" */ + [data-name='onborda-pointer'] { + @apply rounded-md! p-1!; } +} - .monaco-editor .line-numbers { - @apply !w-6; +@layer utilities { + /* Basic editor styles */ + .tiptap { + :first-child { + margin-top: 0; + } + + /* Code and preformatted text styles */ + code { + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--white); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + pre:focus-visible { + outline: 2px solid var(--purple); + outline-offset: 0.5rem; + } + + .monaco-editor .line-numbers { + @apply w-6!; + } } } @layer base { :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 5% 1; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; + --background: hsl(0 0% 100%); + --foreground: hsl(240 10% 3.9%); + --card: hsl(0 0% 5% 1); + --card-foreground: hsl(240 10% 3.9%); + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(240 10% 3.9%); + --primary: hsl(240 5.9% 10%); + --primary-foreground: hsl(0 0% 98%); + --secondary: hsl(240 4.8% 95.9%); + --secondary-foreground: hsl(240 5.9% 10%); --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 237 59.3% 60%; @@ -216,23 +239,25 @@ html { h4, h5, h6 { - @apply font-onest !font-medium; + @apply font-onest font-medium!; } } -@keyframes accordion-down { - from { - height: 0; - opacity: 0; - } - to { - height: var(--radix-accordion-content-height); - opacity: 1; - } +@layer utilities { + @keyframes accordion-down { + from { + height: 0; + opacity: 0; + } + to { + height: var(--radix-accordion-content-height); + opacity: 1; + } + } + + /*---break--- */ } -/*---break--- */ - @layer base { * { @apply border-border outline-ring/50; diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 6158b5cab..616e69abe 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -18,7 +18,7 @@ export default async function NotFound() { Back to dashboard @@ -26,7 +26,7 @@ export default async function NotFound() { Login diff --git a/src/components/app/dashboard/all-questions-bento-box.tsx b/src/components/app/dashboard/all-questions-bento-box.tsx index 64974b947..697ab2d25 100644 --- a/src/components/app/dashboard/all-questions-bento-box.tsx +++ b/src/components/app/dashboard/all-questions-bento-box.tsx @@ -50,7 +50,7 @@ export default function AllQuestionsDashboardBentoBox() {

-
+
{/* Scrolling content */}
{/* Bottom fade effect */} -
+
); diff --git a/src/components/app/dashboard/continue-journey-card.tsx b/src/components/app/dashboard/continue-journey-card.tsx index 959432088..1a7f7c511 100644 --- a/src/components/app/dashboard/continue-journey-card.tsx +++ b/src/components/app/dashboard/continue-journey-card.tsx @@ -30,7 +30,7 @@ export default async function ContinueJourneyCard() {

Your next question:

{suggestion &&

{suggestion.title}

} -
+
Answer now
diff --git a/src/components/app/dashboard/next-question-bento-box.tsx b/src/components/app/dashboard/next-question-bento-box.tsx index ad9c6d9bd..42c8b090f 100644 --- a/src/components/app/dashboard/next-question-bento-box.tsx +++ b/src/components/app/dashboard/next-question-bento-box.tsx @@ -59,9 +59,9 @@ export default async function NextQuestionBentoBox() {
-
+
)} -
+
); } diff --git a/src/components/app/dashboard/progression-bento-box.tsx b/src/components/app/dashboard/progression-bento-box.tsx index cc3e1f6e2..60a805ee5 100644 --- a/src/components/app/dashboard/progression-bento-box.tsx +++ b/src/components/app/dashboard/progression-bento-box.tsx @@ -83,7 +83,7 @@ export default async function ProgressBentoBox() {

{user?.userLevel !== 'FREE' && user?.userLevel !== 'STANDARD' && ( -
+
View yours now
)} diff --git a/src/components/app/filters/filter-dropdown.tsx b/src/components/app/filters/filter-dropdown.tsx index 90f4c3f8d..9c659d855 100644 --- a/src/components/app/filters/filter-dropdown.tsx +++ b/src/components/app/filters/filter-dropdown.tsx @@ -120,11 +120,11 @@ export default function FilterDropdown() { - + Difficulty @@ -134,7 +134,7 @@ export default function FilterDropdown() {
-
+
-
+
); diff --git a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx index 1bf01fa62..81b4a677d 100644 --- a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx +++ b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx @@ -39,11 +39,11 @@ export default async function LeaderboardMostQuestionsAnswered({ - + Rank - User - + User + Questions Solved diff --git a/src/components/app/navigation/sidebar-dropdown.tsx b/src/components/app/navigation/sidebar-dropdown.tsx index 474805cce..5f0c16357 100644 --- a/src/components/app/navigation/sidebar-dropdown.tsx +++ b/src/components/app/navigation/sidebar-dropdown.tsx @@ -61,7 +61,7 @@ export default function SidebarAreaComponent(opts: { - + Upgrade @@ -72,7 +72,7 @@ export default function SidebarAreaComponent(opts: { diff --git a/src/components/app/navigation/sidebar-submenu-item.tsx b/src/components/app/navigation/sidebar-submenu-item.tsx index b3e051a38..8dd9aa7a4 100644 --- a/src/components/app/navigation/sidebar-submenu-item.tsx +++ b/src/components/app/navigation/sidebar-submenu-item.tsx @@ -30,7 +30,7 @@ export default function AppSidebarSubMenuItem(opts: { item: SidebarItem }) { {subItem.title} {subItem.badge && ( - + {subItem.badge} )} diff --git a/src/components/app/navigation/sidebar.tsx b/src/components/app/navigation/sidebar.tsx index d633c52d0..0149e2e12 100644 --- a/src/components/app/navigation/sidebar.tsx +++ b/src/components/app/navigation/sidebar.tsx @@ -315,7 +315,7 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
@@ -345,7 +345,7 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
)} {item.badge && ( - + {item.badge} )} diff --git a/src/components/app/onboarding/onboarding-first-question-selection.tsx b/src/components/app/onboarding/onboarding-first-question-selection.tsx index ead4b682f..a9b5c44f0 100644 --- a/src/components/app/onboarding/onboarding-first-question-selection.tsx +++ b/src/components/app/onboarding/onboarding-first-question-selection.tsx @@ -13,7 +13,7 @@ export default function OnboardingFirstQuestionSelection() {
Where would you like to begin? diff --git a/src/components/app/onboarding/onboarding-pricing.tsx b/src/components/app/onboarding/onboarding-pricing.tsx index f8ff76fd3..6cf944966 100644 --- a/src/components/app/onboarding/onboarding-pricing.tsx +++ b/src/components/app/onboarding/onboarding-pricing.tsx @@ -24,7 +24,7 @@ export default function OnboardingPricing() {
Supercharge your coding journey diff --git a/src/components/app/onboarding/onboarding-questions.tsx b/src/components/app/onboarding/onboarding-questions.tsx index 42bab2e9c..0811b4539 100644 --- a/src/components/app/onboarding/onboarding-questions.tsx +++ b/src/components/app/onboarding/onboarding-questions.tsx @@ -32,7 +32,7 @@ export default function OnboardingStepThree() { variants={itemVariants} initial="hidden" animate="visible" - className="text-xl lg:text-3xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent" + className="text-xl lg:text-3xl font-bold bg-linear-to-r from-white to-gray-400 bg-clip-text text-transparent" > Here's some questions to get you started diff --git a/src/components/app/onboarding/onboarding-share.tsx b/src/components/app/onboarding/onboarding-share.tsx index 945f2a215..e33aacaa7 100644 --- a/src/components/app/onboarding/onboarding-share.tsx +++ b/src/components/app/onboarding/onboarding-share.tsx @@ -25,7 +25,7 @@ export default function OnboardingShare() { <> TechBlitz is more fun with friends! diff --git a/src/components/app/onboarding/onboarding-tags.tsx b/src/components/app/onboarding/onboarding-tags.tsx index eb75b684f..8b855217d 100644 --- a/src/components/app/onboarding/onboarding-tags.tsx +++ b/src/components/app/onboarding/onboarding-tags.tsx @@ -52,7 +52,7 @@ export default function OnboardingStepTwo() { variants={itemVariants} initial="hidden" animate="visible" - className="text-xl lg:text-3xl font-bold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent" + className="text-xl lg:text-3xl font-bold bg-linear-to-r from-white to-gray-400 bg-clip-text text-transparent" > {user?.username}, what topics spark your interest? diff --git a/src/components/app/onboarding/onboarding-time-commitment.tsx b/src/components/app/onboarding/onboarding-time-commitment.tsx index 4096628e4..f34e795a1 100644 --- a/src/components/app/onboarding/onboarding-time-commitment.tsx +++ b/src/components/app/onboarding/onboarding-time-commitment.tsx @@ -51,7 +51,7 @@ export default function OnboardingTimeCommitment() {
{user.username}, what's your daily coding goal? diff --git a/src/components/app/onboarding/onboarding-user-details.tsx b/src/components/app/onboarding/onboarding-user-details.tsx index de1311742..20392645f 100644 --- a/src/components/app/onboarding/onboarding-user-details.tsx +++ b/src/components/app/onboarding/onboarding-user-details.tsx @@ -145,7 +145,7 @@ export default function OnboardingStepOne() { <> Welcome! @@ -419,7 +419,7 @@ export default function OnboardingStepOne() { > diff --git a/src/components/app/questions/admin/new-coding-challenge-modal.tsx b/src/components/app/questions/admin/new-coding-challenge-modal.tsx index 9a430d040..d72e434cb 100644 --- a/src/components/app/questions/admin/new-coding-challenge-modal.tsx +++ b/src/components/app/questions/admin/new-coding-challenge-modal.tsx @@ -216,7 +216,7 @@ export default function NewCodingChallengeQuestionModal({ ...props }) {
diff --git a/src/components/app/questions/admin/new-question-modal.tsx b/src/components/app/questions/admin/new-question-modal.tsx index 24d0d13a1..0fd57b705 100644 --- a/src/components/app/questions/admin/new-question-modal.tsx +++ b/src/components/app/questions/admin/new-question-modal.tsx @@ -255,7 +255,7 @@ export default function NewQuestionModal({ ...props }) {
diff --git a/src/components/app/questions/code-editor/answer-submitted.tsx b/src/components/app/questions/code-editor/answer-submitted.tsx index d5715a6f4..5933e6a1f 100644 --- a/src/components/app/questions/code-editor/answer-submitted.tsx +++ b/src/components/app/questions/code-editor/answer-submitted.tsx @@ -230,7 +230,7 @@ export default function CodeEditorQuestionSubmitted() { )} >

{question.question}

- + ))} diff --git a/src/components/app/questions/layout/carousel/question-carousel-card.tsx b/src/components/app/questions/layout/carousel/question-carousel-card.tsx index 03019d153..69cdaa09e 100644 --- a/src/components/app/questions/layout/carousel/question-carousel-card.tsx +++ b/src/components/app/questions/layout/carousel/question-carousel-card.tsx @@ -36,9 +36,9 @@ export default function QuestionCarouselCard({ questionData, user }: QuestionCar

{title}

{answerStatus === 'correct' ? ( - + ) : ( - + )}
{answerStatus === 'correct' ? ( @@ -52,7 +52,7 @@ export default function QuestionCarouselCard({ questionData, user }: QuestionCar

Learn Now

- +
)} @@ -72,7 +72,7 @@ export default function QuestionCarouselCard({ questionData, user }: QuestionCar
diff --git a/src/components/app/questions/layout/carousel/question-carousel-loading.tsx b/src/components/app/questions/layout/carousel/question-carousel-loading.tsx index 892a7df20..33230db9d 100644 --- a/src/components/app/questions/layout/carousel/question-carousel-loading.tsx +++ b/src/components/app/questions/layout/carousel/question-carousel-loading.tsx @@ -4,7 +4,7 @@ import { CarouselItem, CarouselContent, Carousel } from '@/components/ui/carouse export default function QuestionCarouselLoading() { return ( -
+
diff --git a/src/components/app/questions/layout/carousel/question-carousel.tsx b/src/components/app/questions/layout/carousel/question-carousel.tsx index ff7dfddf7..b343adce7 100644 --- a/src/components/app/questions/layout/carousel/question-carousel.tsx +++ b/src/components/app/questions/layout/carousel/question-carousel.tsx @@ -65,7 +65,7 @@ export default function QuestionCarousel({
-
+
{children} diff --git a/src/components/app/questions/layout/question-card.tsx b/src/components/app/questions/layout/question-card.tsx index eb671178d..b7cf1a7fc 100644 --- a/src/components/app/questions/layout/question-card.tsx +++ b/src/components/app/questions/layout/question-card.tsx @@ -90,7 +90,7 @@ export default function QuestionCard(opts: { href={href} key={questionData.uid} className={cn( - 'flex flex-col gap-y-5 items-start bg-[#090909] border border-black-50 hover:border-black-100 duration-300 p-5 rounded-lg group w-full relative overflow-hidden group-has-[[data-pending]]:animate-pulse', + 'flex flex-col gap-y-5 items-start bg-[#090909] border border-black-50 hover:border-black-100 duration-300 p-5 rounded-lg group w-full relative overflow-hidden group-has-data-pending:animate-pulse', recommendedQuestion && 'border-accent', className )} @@ -100,16 +100,16 @@ export default function QuestionCard(opts: {
{questionData.userAnswers && questionData.userAnswers.length > 0 ? ( questionData.userAnswers[0].correctAnswer ? ( - + ) : ( - + ) ) : ( - + )}
@@ -133,7 +133,7 @@ export default function QuestionCard(opts: {
diff --git a/src/components/app/questions/premium-question-denied-access.tsx b/src/components/app/questions/premium-question-denied-access.tsx index 54bdc609e..be17e9abc 100644 --- a/src/components/app/questions/premium-question-denied-access.tsx +++ b/src/components/app/questions/premium-question-denied-access.tsx @@ -22,7 +22,7 @@ export default function PremiumQuestionDeniedAccess() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4" + className="fixed inset-0 bg-background/80 backdrop-blur-xs flex items-center justify-center p-4" > - + diff --git a/src/components/app/questions/single/layout/question-submitted.tsx b/src/components/app/questions/single/layout/question-submitted.tsx index 96b040ae8..0ffbe2488 100644 --- a/src/components/app/questions/single/layout/question-submitted.tsx +++ b/src/components/app/questions/single/layout/question-submitted.tsx @@ -270,7 +270,7 @@ export default function QuestionSubmitted() { )} >

{question.question}

- + ))} diff --git a/src/components/app/questions/single/layout/upgrade-modal.tsx b/src/components/app/questions/single/layout/upgrade-modal.tsx index 57a2f77f1..a4f533921 100644 --- a/src/components/app/questions/single/layout/upgrade-modal.tsx +++ b/src/components/app/questions/single/layout/upgrade-modal.tsx @@ -43,7 +43,7 @@ export default function UpgradeModal() {
{features.map((feature, index) => (
- + {feature}
))} diff --git a/src/components/app/questions/single/question-accordion.tsx b/src/components/app/questions/single/question-accordion.tsx index 916534b71..105a29941 100644 --- a/src/components/app/questions/single/question-accordion.tsx +++ b/src/components/app/questions/single/question-accordion.tsx @@ -75,7 +75,7 @@ export default function QuestionAccordion(opts: { className="w-full flex items-center justify-between duration-300 hover:underline gap-3" >

{question.title || question.question}

- + )) ) : ( diff --git a/src/components/app/questions/single/related-question-card.tsx b/src/components/app/questions/single/related-question-card.tsx index d4eeb168e..09a54d3b1 100644 --- a/src/components/app/questions/single/related-question-card.tsx +++ b/src/components/app/questions/single/related-question-card.tsx @@ -24,7 +24,7 @@ const RelatedQuestionsList = async ({ slug, tags }: { slug: string; tags: Tags[] )} >

{question.question}

- + )) ) : ( diff --git a/src/components/app/questions/suggested-questions-table.tsx b/src/components/app/questions/suggested-questions-table.tsx index c1215919e..adb6f5b40 100644 --- a/src/components/app/questions/suggested-questions-table.tsx +++ b/src/components/app/questions/suggested-questions-table.tsx @@ -43,7 +43,7 @@ export default async function QuestionSuggestedCard(opts: { } >

{question.question}

- + ))}
diff --git a/src/components/app/questions/tag-display.tsx b/src/components/app/questions/tag-display.tsx index bfc18f2ae..d3ccd4634 100644 --- a/src/components/app/questions/tag-display.tsx +++ b/src/components/app/questions/tag-display.tsx @@ -4,17 +4,17 @@ import { capitalise } from '@/utils'; import { cva } from 'class-variance-authority'; const tagVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 font-onest', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 font-onest', { variants: { variant: { default: - 'bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-black-50', - destructive: 'bg-red-600 text-destructive-foreground shadow-sm hover:bg-destructive/90', + 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 border border-black-50', + destructive: 'bg-red-600 text-destructive-foreground shadow-xs hover:bg-destructive/90', outline: - 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', - secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', - accent: 'bg-accent text-white shadow-sm hover:bg-accent/90', + 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', + accent: 'bg-accent text-white shadow-xs hover:bg-accent/90', }, }, } diff --git a/src/components/app/roadmaps/onboarding/onboarding-user-answers.tsx b/src/components/app/roadmaps/onboarding/onboarding-user-answers.tsx index a5b697d26..26664e93d 100644 --- a/src/components/app/roadmaps/onboarding/onboarding-user-answers.tsx +++ b/src/components/app/roadmaps/onboarding/onboarding-user-answers.tsx @@ -19,7 +19,7 @@ export default function UserAnswers({ answers }: { answers: Answer[] }) { className="flex items-center gap-4 px-2 py-1 transition-all duration-300" > {answer.question.order}. - + {answer.correct ? (
Correct diff --git a/src/components/app/shared/answer-submitted.tsx b/src/components/app/shared/answer-submitted.tsx index 6b555a273..321372c04 100644 --- a/src/components/app/shared/answer-submitted.tsx +++ b/src/components/app/shared/answer-submitted.tsx @@ -332,7 +332,7 @@ export default function QuestionResult({ )} >

{question.question}

- + ))} diff --git a/src/components/app/shared/question/daily-goals-card.tsx b/src/components/app/shared/question/daily-goals-card.tsx index 62f78044a..6523dbc8b 100644 --- a/src/components/app/shared/question/daily-goals-card.tsx +++ b/src/components/app/shared/question/daily-goals-card.tsx @@ -78,7 +78,7 @@ function MissionItem({ const MissionContent = () => ( <> -
+
diff --git a/src/components/app/shared/question/question-code-display.tsx b/src/components/app/shared/question/question-code-display.tsx index b186147c9..b33d9de63 100644 --- a/src/components/app/shared/question/question-code-display.tsx +++ b/src/components/app/shared/question/question-code-display.tsx @@ -113,7 +113,7 @@ export default function QuestionCodeDisplay({ highlightActiveIndentation: true, }, }} - className="bg-black-50 !overflow-y-auto !scrollable-element" + className="bg-black-50 overflow-y-auto! !scrollable-element" loading={} /> ) : ( diff --git a/src/components/app/shared/question/question-timer.tsx b/src/components/app/shared/question/question-timer.tsx index 6488970d0..f61e9e92c 100644 --- a/src/components/app/shared/question/question-timer.tsx +++ b/src/components/app/shared/question/question-timer.tsx @@ -36,7 +36,7 @@ export function AnimatedStopwatchButton({ = ({ } return ( - +
} right={
-

+

{rightHeader ? rightHeader : 'Learn to Code for Free with Daily JavaScript Challenges'}

diff --git a/src/components/marketing/features/daily-challenge/hero/daily-challenge-hero.tsx b/src/components/marketing/features/daily-challenge/hero/daily-challenge-hero.tsx index 762e16687..1d723c7c2 100644 --- a/src/components/marketing/features/daily-challenge/hero/daily-challenge-hero.tsx +++ b/src/components/marketing/features/daily-challenge/hero/daily-challenge-hero.tsx @@ -33,7 +33,7 @@ export default function FeatureDailyChallengeHero(opts: {

{header ? header : 'Simplify learning to code.'} @@ -80,7 +80,7 @@ export default function FeatureDailyChallengeHero(opts: { 'absolute inset-0 pt-44 [mask-image:radial-gradient(400px_circle_at_center,white,transparent)]' )} /> -
+
); } diff --git a/src/components/marketing/features/global/content-header.tsx b/src/components/marketing/features/global/content-header.tsx index 4563299b7..2146b39fe 100644 --- a/src/components/marketing/features/global/content-header.tsx +++ b/src/components/marketing/features/global/content-header.tsx @@ -11,7 +11,7 @@ export default function FeaturesContentHeader(opts: { return (
-

+

{title}

{description && ( diff --git a/src/components/marketing/features/leaderboard/leaderboard-features-left.tsx b/src/components/marketing/features/leaderboard/leaderboard-features-left.tsx index b86a24bc1..cabb94a57 100644 --- a/src/components/marketing/features/leaderboard/leaderboard-features-left.tsx +++ b/src/components/marketing/features/leaderboard/leaderboard-features-left.tsx @@ -18,11 +18,11 @@ export default async function LeaderboardFeaturesLeft() {

- + Rank - User - + User + Questions Solved @@ -40,7 +40,7 @@ export default async function LeaderboardFeaturesLeft() { />
-
+

Battle with your friends

diff --git a/src/components/marketing/features/leaderboard/leaderboard-features-right.tsx b/src/components/marketing/features/leaderboard/leaderboard-features-right.tsx index 799d4919b..a9aeedd44 100644 --- a/src/components/marketing/features/leaderboard/leaderboard-features-right.tsx +++ b/src/components/marketing/features/leaderboard/leaderboard-features-right.tsx @@ -54,10 +54,10 @@ export default async function LeaderboardFeaturesRight() {
))}
-
+
-

+

Earn rewards for your progress

diff --git a/src/components/marketing/features/leaderboard/leaderboard-features.tsx b/src/components/marketing/features/leaderboard/leaderboard-features.tsx index c40d96a16..78580653f 100644 --- a/src/components/marketing/features/leaderboard/leaderboard-features.tsx +++ b/src/components/marketing/features/leaderboard/leaderboard-features.tsx @@ -7,7 +7,7 @@ export default function LeaderboardFeatures() {

-

+

Learning to code does not have to be boring.

diff --git a/src/components/marketing/features/leaderboard/leaderboard-hero.tsx b/src/components/marketing/features/leaderboard/leaderboard-hero.tsx index bfa6d0d1f..00f37d5cb 100644 --- a/src/components/marketing/features/leaderboard/leaderboard-hero.tsx +++ b/src/components/marketing/features/leaderboard/leaderboard-hero.tsx @@ -8,10 +8,10 @@ import { cn } from '@/lib/utils'; export default function LeaderboardHero() { return (

-
+
-

+

Coding leaderboards.

@@ -21,7 +21,7 @@ export default function LeaderboardHero() {

); } diff --git a/src/components/marketing/features/roadmap/grid/roadmap-feature-box-animation.tsx b/src/components/marketing/features/roadmap/grid/roadmap-feature-box-animation.tsx index 25fc07e68..fce4cd27f 100644 --- a/src/components/marketing/features/roadmap/grid/roadmap-feature-box-animation.tsx +++ b/src/components/marketing/features/roadmap/grid/roadmap-feature-box-animation.tsx @@ -58,7 +58,7 @@ export default function RoadmapFeatureBoxAnimation({ absolute }: { absolute: boo animate="visible" exit="exit" > -
+
diff --git a/src/components/marketing/features/roadmap/grid/roadmap-grid-item-one.tsx b/src/components/marketing/features/roadmap/grid/roadmap-grid-item-one.tsx index d99e5e8b6..a0a269b71 100644 --- a/src/components/marketing/features/roadmap/grid/roadmap-grid-item-one.tsx +++ b/src/components/marketing/features/roadmap/grid/roadmap-grid-item-one.tsx @@ -33,8 +33,8 @@ export default function RoadmapGridItemOne() {
-
-
+
+
); diff --git a/src/components/marketing/features/roadmap/roadmap-customisation.tsx b/src/components/marketing/features/roadmap/roadmap-customisation.tsx index a089addef..b2860b9e1 100644 --- a/src/components/marketing/features/roadmap/roadmap-customisation.tsx +++ b/src/components/marketing/features/roadmap/roadmap-customisation.tsx @@ -66,7 +66,7 @@ export default function FeatureRoadmapCustomizationBlock({ >
-

+

{header || 'Your personalized coding roadmap.'}

@@ -92,8 +92,8 @@ export default function FeatureRoadmapCustomizationBlock({ /> ))}

-
-
+
+
); } diff --git a/src/components/marketing/features/roadmap/roadmap-hero.tsx b/src/components/marketing/features/roadmap/roadmap-hero.tsx index e7ef78d2b..f3c00b902 100644 --- a/src/components/marketing/features/roadmap/roadmap-hero.tsx +++ b/src/components/marketing/features/roadmap/roadmap-hero.tsx @@ -6,10 +6,10 @@ import { cn } from '@/lib/utils'; export default function FeatureRoadmapHeroBlock() { return (
-
+
-

+

Personalized
coding roadmaps.

@@ -19,7 +19,7 @@ export default function FeatureRoadmapHeroBlock() {

); } diff --git a/src/components/marketing/features/statistics/stats-hero.tsx b/src/components/marketing/features/statistics/stats-hero.tsx index a12dc4836..1964bb5f7 100644 --- a/src/components/marketing/features/statistics/stats-hero.tsx +++ b/src/components/marketing/features/statistics/stats-hero.tsx @@ -6,10 +6,10 @@ import { ArrowDown, ChevronRight } from 'lucide-react'; export default function StatsHero() { return (
-
+
-

+

Track coding progress with
ease.

@@ -23,7 +23,7 @@ export default function StatsHero() {

); } diff --git a/src/components/marketing/features/statistics/stats-report-section.tsx b/src/components/marketing/features/statistics/stats-report-section.tsx index be8473fca..6b2cc4d97 100644 --- a/src/components/marketing/features/statistics/stats-report-section.tsx +++ b/src/components/marketing/features/statistics/stats-report-section.tsx @@ -85,7 +85,7 @@ export default function StatsReportSection(opts: { className="py-8 sm:py-12 md:py-28 px-4 flex flex-col gap-y-8 sm:gap-y-12 md:gap-y-16 relative" >
-

+

{header ? ( header ) : ( @@ -110,7 +110,7 @@ export default function StatsReportSection(opts: {
-
+
Customised Questions

@@ -125,7 +125,7 @@ export default function StatsReportSection(opts: { className="left-1/2 top-0 w-full center pointer-events-none absolute h-px max-w-full -translate-x-1/2 -translate-y-1/2 bg-black-50" >

-
+
Tag overview

@@ -175,7 +175,7 @@ export default function StatsReportSection(opts: {

-
+
Progress report

@@ -188,8 +188,8 @@ export default function StatsReportSection(opts: { -

-
+
+
diff --git a/src/components/marketing/global/blocks/call-to-action-block.tsx b/src/components/marketing/global/blocks/call-to-action-block.tsx index a3eb50084..fcb5d7165 100644 --- a/src/components/marketing/global/blocks/call-to-action-block.tsx +++ b/src/components/marketing/global/blocks/call-to-action-block.tsx @@ -31,7 +31,7 @@ export default function CallToActionBlock(opts: { }} >
-

+

{title}

{description}

@@ -43,7 +43,7 @@ export default function CallToActionBlock(opts: {
-
+
); } diff --git a/src/components/marketing/global/blocks/content-grid.tsx b/src/components/marketing/global/blocks/content-grid.tsx index ab7a986a9..6a508bf60 100644 --- a/src/components/marketing/global/blocks/content-grid.tsx +++ b/src/components/marketing/global/blocks/content-grid.tsx @@ -23,7 +23,7 @@ export default function MarketingContentGrid({ }: MarketingContentGridComponentProps) { return (
-
+
{title}
{subheading && ( diff --git a/src/components/marketing/global/blocks/faqs.tsx b/src/components/marketing/global/blocks/faqs.tsx index 9ab5d595f..39e0acafe 100644 --- a/src/components/marketing/global/blocks/faqs.tsx +++ b/src/components/marketing/global/blocks/faqs.tsx @@ -23,7 +23,7 @@ export default function FAQsBlock(opts: {
{showSpan && } -

+

{title || 'Frequently asked questions'}

{description &&

{description}

} diff --git a/src/components/marketing/global/blocks/homepage-user-stats.tsx b/src/components/marketing/global/blocks/homepage-user-stats.tsx index f839e8013..79a2aa3a0 100644 --- a/src/components/marketing/global/blocks/homepage-user-stats.tsx +++ b/src/components/marketing/global/blocks/homepage-user-stats.tsx @@ -14,7 +14,7 @@ export default async function HomepageUserStats({ userCountPromise }: HomepageUs
A growing community with
-
+
{QUESTIONS_COUNT}+ challenges
{userCount}+ users
Unlimited practice
diff --git a/src/components/marketing/global/blocks/question-marquee.tsx b/src/components/marketing/global/blocks/question-marquee.tsx index 17485f0b4..09c6ab8e0 100644 --- a/src/components/marketing/global/blocks/question-marquee.tsx +++ b/src/components/marketing/global/blocks/question-marquee.tsx @@ -140,8 +140,8 @@ export default function QuestionMarquee({
))} -
-
+
+
); diff --git a/src/components/marketing/global/blocks/user-stats-floating-chips.tsx b/src/components/marketing/global/blocks/user-stats-floating-chips.tsx index eceaf6e4c..34884e311 100644 --- a/src/components/marketing/global/blocks/user-stats-floating-chips.tsx +++ b/src/components/marketing/global/blocks/user-stats-floating-chips.tsx @@ -109,7 +109,7 @@ const FloatingChip: React.FC = ({ Icon, href, mouseX, mouseY, return ( ); diff --git a/src/components/marketing/global/navigation/mobile-menu.tsx b/src/components/marketing/global/navigation/mobile-menu.tsx index 1ff6d9da3..70f75024d 100644 --- a/src/components/marketing/global/navigation/mobile-menu.tsx +++ b/src/components/marketing/global/navigation/mobile-menu.tsx @@ -163,7 +163,7 @@ export function MobileMenu() { {isLoggedIn ? ( */}
); } diff --git a/src/components/shared/Card.tsx b/src/components/shared/Card.tsx index 48ee0af71..9beea7935 100644 --- a/src/components/shared/Card.tsx +++ b/src/components/shared/Card.tsx @@ -15,7 +15,7 @@ export default function Card({ {header}
-
{children}
+
{children}
{footer && ( <> diff --git a/src/components/shared/hero.tsx b/src/components/shared/hero.tsx index 6ae121722..5a59e02b5 100644 --- a/src/components/shared/hero.tsx +++ b/src/components/shared/hero.tsx @@ -33,7 +33,7 @@ export default function Hero(opts: { {/* Fade-out gradient overlay */} -
+
); } diff --git a/src/components/shared/payment/upgrade-page.tsx b/src/components/shared/payment/upgrade-page.tsx index 1bb637a07..8b2e7868f 100644 --- a/src/components/shared/payment/upgrade-page.tsx +++ b/src/components/shared/payment/upgrade-page.tsx @@ -29,9 +29,9 @@ export default async function UpgradePage({ return (
-

+

Unlock a{' '} - + personalized{' '} {' '} learning experience diff --git a/src/components/ui/animated-span.tsx b/src/components/ui/animated-span.tsx index 577eb3aa5..88052ed9c 100644 --- a/src/components/ui/animated-span.tsx +++ b/src/components/ui/animated-span.tsx @@ -4,7 +4,7 @@ export default function AnimatedSpan(opts: { content: string | ReactNode }) { const { content } = opts; return ( -
+
{content} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 19132c081..8d0e4b731 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -4,15 +4,15 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const badgeVariants = cva( - 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { - default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80', + default: 'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: - 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80', + 'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80', outline: 'text-foreground', }, }, diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index ad57eaf65..2e9c3cc83 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -20,21 +20,21 @@ export interface ButtonProps extends VariantProps { } const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 font-onest', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 font-onest', { variants: { variant: { default: - 'bg-primary text-primary-foreground shadow hover:bg-primary/90 border border-black-50', - destructive: 'bg-red-600 text-destructive-foreground shadow-sm hover:bg-destructive/90', - outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-white', - secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 border border-black-50', + destructive: 'bg-red-600 text-destructive-foreground shadow-xs hover:bg-destructive/90', + outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-white', + secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', ghost: 'hover:text-gray-400 duration-300', link: 'text-primary underline-offset-4 hover:underline', - accent: 'bg-accent text-white shadow-sm hover:bg-accent/90 font-onest', + accent: 'bg-accent text-white shadow-xs hover:bg-accent/90 font-onest', // premium is accent but with a shimmering effect premium: - 'font-onest !bg-gradient-to-r !from-accent !via-accent/80 !to-accent animate-shimmer bg-[length:200%_100%] transition-colors', + 'font-onest bg-linear-to-r! from-accent! via-accent/80! to-accent! animate-shimmer bg-[length:200%_100%] transition-colors', }, size: { default: 'h-9 px-4 py-2', @@ -55,7 +55,7 @@ const buttonVariants = cva( lg: 'rounded-2xl hover:rounded-xl', }, padding: { - none: '!p-0', + none: 'p-0!', sm: 'px-2 py-1', md: 'px-4 py-2', lg: 'px-8 py-4', diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 1dfa6e0c5..6387b16c0 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -6,7 +6,7 @@ const Card = React.forwardRef (
) diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx index d036ebd75..6184bd7a4 100644 --- a/src/components/ui/chart.tsx +++ b/src/components/ui/chart.tsx @@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef< data-chart={chartId} ref={ref} className={cn( - "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", + "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden", className )} {...props} @@ -191,7 +191,7 @@ const ChartTooltipContent = React.forwardRef< !hideIndicator && (
{ return (
); @@ -42,7 +42,7 @@ export default async function CodeComparison({ return (
-
+
- +