diff --git a/package.json b/package.json index 9b4eb8dcc..1f2668215 100644 --- a/package.json +++ b/package.json @@ -29,26 +29,26 @@ "@next/mdx": "^15.1.3", "@number-flow/react": "^0.4.2", "@prisma/client": "6.4.0", - "@radix-ui/react-accordion": "^1.2.1", - "@radix-ui/react-alert-dialog": "^1.1.2", - "@radix-ui/react-avatar": "^1.1.1", - "@radix-ui/react-checkbox": "^1.1.1", - "@radix-ui/react-collapsible": "^1.1.1", - "@radix-ui/react-dialog": "^1.1.2", - "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-accordion": "^1.2.3", + "@radix-ui/react-alert-dialog": "^1.1.6", + "@radix-ui/react-avatar": "^1.1.3", + "@radix-ui/react-checkbox": "^1.1.4", + "@radix-ui/react-collapsible": "^1.1.3", + "@radix-ui/react-dialog": "^1.1.6", + "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-hover-card": "1.1.6", "@radix-ui/react-icons": "^1.3.2", - "@radix-ui/react-label": "^2.1.0", - "@radix-ui/react-navigation-menu": "^1.2.1", - "@radix-ui/react-popover": "^1.1.1", - "@radix-ui/react-progress": "^1.1.0", - "@radix-ui/react-scroll-area": "^1.2.2", - "@radix-ui/react-select": "^2.1.2", - "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-label": "^2.1.2", + "@radix-ui/react-navigation-menu": "^1.2.5", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-progress": "^1.1.2", + "@radix-ui/react-scroll-area": "^1.2.3", + "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", - "@radix-ui/react-switch": "^1.1.1", - "@radix-ui/react-tabs": "^1.1.2", - "@radix-ui/react-tooltip": "^1.1.3", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-tooltip": "^1.1.8", "@react-email/components": "0.0.31", "@stripe/react-stripe-js": "^2.8.1", "@stripe/stripe-js": "^4.8.0", @@ -76,7 +76,7 @@ "framer-motion": "^11.18.1", "lodash": "^4.17.21", "lowlight": "^3.1.0", - "lucide-react": "^0.439.0", + "lucide-react": "^0.477.0", "mini-svg-data-uri": "^1.4.4", "motion": "^11.12.0", "nanoid": "^5.0.9", @@ -96,7 +96,7 @@ "react-intersection-observer": "9.15.1", "react-markdown": "^9.0.3", "react-timer-hook": "^3.0.7", - "recharts": "^2.13.0-alpha.5", + "recharts": "^2.15.1", "rehype-autolink-headings": "^7.1.0", "rehype-pretty-code": "^0.14.0", "rehype-slug": "^6.0.0", @@ -105,8 +105,7 @@ "shiki": "^1.24.4", "sonner": "^1.5.0", "stripe": "^17.2.1", - "tailwind-container-break-out": "^2.0.9", - "tailwind-merge": "^2.6.0", + "tailwind-merge": "^3.0.2", "tailwindcss-animate": "^1.0.7", "uniqid": "^5.4.0", "unist-util-visit": "^5.0.0", @@ -117,6 +116,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", @@ -125,14 +125,13 @@ "@types/uniqid": "^5.3.4", "eslint": "^8", "eslint-config-next": "14.2.9", - "fluid-tailwind": "1.0.4", "knip": "^5.41.1", "postcss": "^8.4.47", "postcss-preset-mantine": "^1.17.0", "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/actions/ai/questions/question-help.ts b/src/actions/ai/questions/question-help.ts index 335e8283e..d8d42ff0b 100644 --- a/src/actions/ai/questions/question-help.ts +++ b/src/actions/ai/questions/question-help.ts @@ -40,7 +40,7 @@ export const generateQuestionHelp = async ( if (!user) { console.error('User not found'); return { - object: null, + object: 'User not found', content: null, tokensUsed: 0, }; @@ -52,7 +52,7 @@ export const generateQuestionHelp = async ( if (!hasTokens) { console.error('User does not have enough tokens'); return { - object: null, + object: 'User does not have enough tokens', content: null, tokensUsed: 0, }; @@ -94,7 +94,7 @@ export const generateQuestionHelp = async ( if (!question) { console.error('No question found'); return { - object: null, + object: 'No question found', content: null, tokensUsed: 0, }; @@ -112,7 +112,7 @@ export const generateQuestionHelp = async ( const deducted = await deductUserTokens(user); if (!deducted) { return { - object: null, + object: 'Cannot deduct tokens', content: null, tokensUsed: 0, }; @@ -179,17 +179,5 @@ export const generateQuestionHelp = async ( } })(); - // Determine token count for the response - const tokensUsed = - questionType === 'regular' - ? user.aiQuestionHelpTokens - ? user.aiQuestionHelpTokens - 1 - : 0 - : Number.POSITIVE_INFINITY; - - return { - object: stream.value, - content: null, - tokensUsed: tokensUsed, - }; + return { object: stream.value }; }; 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..21c8e172d 100644 --- a/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx +++ b/src/app/(app)/(default_layout)/(roadmaps)/roadmaps/page.tsx @@ -129,8 +129,8 @@ export default async function ExploreQuestionsPage() { dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
- -
+ +
{Object.entries(studyPathsByCategory).map(([category, paths]) => (
@@ -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)/layout.tsx b/src/app/(app)/layout.tsx index 2c56c6888..b0be849ed 100644 --- a/src/app/(app)/layout.tsx +++ b/src/app/(app)/layout.tsx @@ -51,7 +51,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo - {children} + +
{children}
+ diff --git a/src/app/(app)/providers.tsx b/src/app/(app)/providers.tsx index e8aa50a8b..63d9e0e6c 100644 --- a/src/app/(app)/providers.tsx +++ b/src/app/(app)/providers.tsx @@ -7,7 +7,7 @@ export default function RootProvider({ children }: { children: React.ReactNode } return (
{ 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)/layout.tsx b/src/app/(marketing)/layout.tsx index 660a95ae6..dcd09196b 100644 --- a/src/app/(marketing)/layout.tsx +++ b/src/app/(marketing)/layout.tsx @@ -35,7 +35,7 @@ export default function Layout({ -
+
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/(no_nav)/layout.tsx b/src/app/(no_nav)/layout.tsx index 5c1a22745..f71c027c0 100644 --- a/src/app/(no_nav)/layout.tsx +++ b/src/app/(no_nav)/layout.tsx @@ -16,7 +16,7 @@ export default function Layout({ suppressHydrationWarning > {/* Scrollable content */} -
{children}
+
{children}
diff --git a/src/app/(questions)/question/[slug]/layout.tsx b/src/app/(questions)/question/[slug]/layout.tsx index 6de780dd9..7e8e1c21f 100644 --- a/src/app/(questions)/question/[slug]/layout.tsx +++ b/src/app/(questions)/question/[slug]/layout.tsx @@ -141,7 +141,7 @@ export default async function QuestionUidLayout({ userAnswered={userAnswered} suggestedQuestions={suggestedQuestions} > -
+
diff --git a/src/app/globals.css b/src/app/globals.css index dd8315e57..01f4ea452 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; -} +/* + 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. -body { - color: var(--foreground) !important; - background: var(--background) !important; - font-family: Arial, Helvetica, sans-serif; - /** smooth scrolling on id click */ -} - -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; - } - - .transform-3d { - transform-style: preserve-3d; - } +@utility perspective-1000 { + perspective: 1000px; +} - .rotate-x-55 { - transform: rotateX(55deg); - } +@utility transform-3d { + transform-style: preserve-3d; +} - .rotate-y-45 { - transform: rotateY(45deg); - } +@utility rotate-x-55 { + transform: rotateX(55deg); +} - .rotate-x-90 { - transform: rotateX(90deg); - } +@utility rotate-y-45 { + transform: rotateY(45deg); +} - .rotate-y-90 { - transform: rotateY(90deg); - } +@utility rotate-x-90 { + transform: rotateX(90deg); +} - ::selection { - @apply bg-accent text-white; - } +@utility rotate-y-90 { + transform: rotateY(90deg); +} - .text-balance { - text-wrap: balance; - } +@utility text-balance { + text-wrap: balance; +} - .pause-animation { - animation-play-state: paused; - } +@utility 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,89 +113,150 @@ 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; } -} -/* Basic editor styles */ -.tiptap { - :first-child { - margin-top: 0; + body { + color: var(--foreground) !important; + background: var(--background) !important; + font-family: Arial, Helvetica, sans-serif; + /** smooth scrolling on id click */ } - /* 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; + html { + scroll-behavior: smooth; } +} - pre:focus-visible { - outline: 2px solid var(--purple); - outline-offset: 0.5rem; +@layer utilities { + ::selection { + @apply bg-accent text-white; } - .monaco-editor .line-numbers { - @apply !w-6; + /** data-name="onborda-pointer" */ + [data-name='onborda-pointer'] { + @apply rounded-md! p-1!; } } -@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%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 237 59.3% 60%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 10% 3.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - --radius: 0.5rem; - --sidebar-background: 0 0% 7%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; - --mantine-color-text: var(--foreground) !important; - --mantine-color-red-6: var(--foreground) !important; - --mantine-primary-color-filled: rgb(94, 102, 214) !important; - --mantine-primary-color-filled-hover: rgb(94, 102, 214, 0.5) !important; - --mantine-primary-color-light: rgba(94, 102, 214, 0.1) !important; - --mantine-primary-color-light-hover: rgba(94, 102, 214, 0.12) !important; - --mantine-color-gray-0: var(--background) !important; +@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!; + } } } +:root { + --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: hsl(240 4.8% 95.9%); + --muted-foreground: hsl(240 3.8% 46.1%); + --accent: hsl(237 59.3% 60%); + --accent-foreground: hsl(240 5.9% 10%); + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(240 5.9% 90%); + --input: hsl(240 5.9% 90%); + --ring: hsl(240 10% 3.9%); + --chart-1: hsl(12 76% 61%); + --chart-2: hsl(173 58% 39%); + --chart-3: hsl(197 37% 24%); + --chart-4: hsl(43 74% 66%); + --chart-5: hsl(27 87% 67%); + --radius: 0.5rem; +} + +.dark { + --background: hsl(0 0% 3.9%); + --foreground: hsl(0 0% 98%); + --card: hsl(0 0% 3.9%); + --card-foreground: hsl(0 0% 98%); + --popover: hsl(0 0% 3.9%); + --popover-foreground: hsl(0 0% 98%); + --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: hsl(240 3.7% 15.9%); + --muted-foreground: hsl(240 5% 64.9%); + --accent: hsl(237 59.3% 60%); + --accent-foreground: hsl(0 0% 98%); + --destructive: hsl(0 62.8% 30.6%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(240 3.7% 15.9%); + --input: hsl(240 3.7% 15.9%); + --ring: hsl(240 4.9% 83.9%); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); +} + @layer base { * { @apply border-border; @@ -216,22 +271,36 @@ html { h4, h5, h6 { - @apply font-onest !font-medium; + @apply font-onest font-medium! text-white; + } + + p { + @apply text-white; } -} -@keyframes accordion-down { - from { - height: 0; - opacity: 0; + span { + @apply text-white; } - to { - height: var(--radix-accordion-content-height); - opacity: 1; + + .text-gradient { + @apply bg-clip-text text-transparent bg-linear-to-b; } } -/*---break--- */ +@layer utilities { + @keyframes accordion-down { + from { + height: 0; + opacity: 0; + } + to { + height: var(--radix-accordion-content-height); + opacity: 1; + } + } + + /*---break--- */ +} @layer base { * { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 21eed0993..5406d0ed3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,5 @@ import { ReactQueryClientProvider } from '@/components/shared/react-query-client-provider'; +import { ThemeProvider } from '@/components/providers/theme-provider'; import { OnestFont } from './styles/fonts/font'; import { UbuntuFont } from './styles/fonts/font'; import { SatoshiFont } from './styles/fonts/font'; @@ -8,12 +9,12 @@ import './globals.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - {children} + {children} 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-footer.tsx b/src/components/app/navigation/sidebar-footer.tsx index 3c0a0eb48..3c17f47f6 100644 --- a/src/components/app/navigation/sidebar-footer.tsx +++ b/src/components/app/navigation/sidebar-footer.tsx @@ -14,7 +14,7 @@ export default function SidebarFooter({ user }: SidebarFooterProps) { const pathname = usePathname(); return ( -
+
{!user && (
) : ( -
+
{item.icon && } {item.title} @@ -315,12 +320,12 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) {
{item.disabled ? ( -
+
{item.icon && } {item.title} @@ -333,8 +338,10 @@ export function AppSidebar({ user, profile, suggestion }: AppSidebarProps) { {item.icon && } @@ -345,7 +352,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 4155a062c..d290c61a3 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/code-editor/test-case-section.tsx b/src/components/app/questions/code-editor/test-case-section.tsx index ff72507e6..88ee206ee 100644 --- a/src/components/app/questions/code-editor/test-case-section.tsx +++ b/src/components/app/questions/code-editor/test-case-section.tsx @@ -90,13 +90,13 @@ export default function TestCaseSection() {

Input:

- 
+                        
                           {JSON.stringify(testCase.input[0], null, 2)}

Expected Output:

- 
+                        
                           {JSON.stringify(testCase.expected, null, 2)}
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-action-buttons.tsx b/src/components/app/questions/single/layout/question-action-buttons.tsx index aa18014d9..bbfd3c464 100644 --- a/src/components/app/questions/single/layout/question-action-buttons.tsx +++ b/src/components/app/questions/single/layout/question-action-buttons.tsx @@ -68,7 +68,7 @@ export default function QuestionActionButtons() { - +
@@ -120,7 +120,7 @@ export default function QuestionActionButtons() { exit={{ scale: 0.5, opacity: 0 }} transition={{ type: 'spring', stiffness: 200, damping: 10 }} > - + ) : ( - + )} @@ -143,7 +143,7 @@ export default function QuestionActionButtons() { exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.2, ease: 'easeOut' }} > - + )} @@ -156,7 +156,7 @@ export default function QuestionActionButtons() { exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.2, ease: 'easeOut' }} > - + )} @@ -177,7 +177,7 @@ export default function QuestionActionButtons() { {isSubmitting ? ( ) : (

{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 b7a0b1c79..a6ca142b4 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 838d61949..e223796db 100644 --- a/src/components/app/shared/question/question-code-display.tsx +++ b/src/components/app/shared/question/question-code-display.tsx @@ -119,7 +119,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-tabs.tsx b/src/components/app/shared/question/question-tabs.tsx index 8fd448834..5f240e934 100644 --- a/src/components/app/shared/question/question-tabs.tsx +++ b/src/components/app/shared/question/question-tabs.tsx @@ -40,7 +40,7 @@ export default function QuestionTabs({ key={tab.value} value={tab.value} onClick={() => setActiveTab(tab.value)} - className="flex items-center justify-center text-sm font-medium transition-colors rounded-md text-gray-400 data-[state=active]:text-white data-[state=active]:bg-transparent data-[state=active]:underline border-0 w-fit px-0" + className="flex items-center justify-center text-xs font-medium transition-colors rounded-md text-gray-400 data-[state=active]:text-white data-[state=active]:bg-transparent data-[state=active]:underline border-0 w-fit px-0" >
{activeTab === tab.value ? tab.activeIcon : tab.icon}
{tab.label} 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..8efa9aae0 100644 --- a/src/components/marketing/global/blocks/question-marquee.tsx +++ b/src/components/marketing/global/blocks/question-marquee.tsx @@ -111,7 +111,7 @@ export default function QuestionMarquee({ return (
@@ -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/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx new file mode 100644 index 000000000..0e739c40d --- /dev/null +++ b/src/components/providers/theme-provider.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { ThemeProvider as NextThemesProvider } from 'next-themes'; +import { type ThemeProviderProps } from 'next-themes/dist/types'; +import { useEffect, useState } from 'react'; + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + const [mounted, setMounted] = useState(false); + + // Ensure this component only renders on the client to avoid hydration mismatch + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return <>{children}; + } + + return ( + + {children} + + ); +} 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..203f4ce5c 100644 --- a/src/components/shared/hero.tsx +++ b/src/components/shared/hero.tsx @@ -12,7 +12,11 @@ export default function Hero(opts: { return (
-
+
{chip} {typeof heading === 'string' ? (

@@ -33,7 +37,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/bento-grid.tsx b/src/components/ui/bento-grid.tsx index 072ac7145..b084e860b 100644 --- a/src/components/ui/bento-grid.tsx +++ b/src/components/ui/bento-grid.tsx @@ -60,7 +60,7 @@ export const BentoGridItem = ({ }; const baseClasses = cn( - 'rounded-xl group/bento overflow-hidden hover:shadow-xl transition duration-200 shadow-input border border-black-50 justify-between flex flex-col', + 'rounded-xl group/bento overflow-hidden hover:shadow-xl transition duration-200 shadow-black border border-black-50 justify-between flex flex-col', header || title || description || icon ? 'space-y-3 md:space-y-4' : '', className, padded ? 'p-3 md:p-4' : '' diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index ad57eaf65..c89f3ac66 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-lg 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 (
-
+
- +