feat: Complete visual redesign with aurora/gradient theme by Zheckan · Pull Request #19 · Zheckan/prep

Zheckan · 2026-02-05T22:54:28Z

Summary

New color system: Deep-space navy base with indigo/violet/pink/cyan aurora gradients replacing the old yellow-accent dark theme
Animated ambient background: Replaced static image with 4 floating animated gradient orbs using Framer Motion, with prefers-reduced-motion support
Redesigned homepage: Full hero section with animated badge, gradient text heading, scroll indicator, topic cards with glow borders, and a features grid with staggered scroll-reveal animations
Redesigned topics page: Progress bar, numbered topic cards with unique color-coded icons, and animated transitions
Updated all shared components: PageHeader, SectionCard, CodeBlock, TableOfContents, WidthSwitcher, and all typography components (Header, Subheader, Callout, CodeSpan, Text) now use CSS variables for consistent theming
Dark & light mode: Full support via prefers-color-scheme with distinct palettes for both modes
Responsive: Verified on mobile (375px), tablet, and desktop viewports
No new dependencies: Uses existing Framer Motion, Lucide React, and Tailwind CSS v4

Test plan

Open homepage (/) — verify hero section, gradient text, CTA button, scroll animations
Navigate to /frontend/junior — verify progress bar, topic cards, icon colors
Navigate to /frontend/junior/html&css — verify content page header, code blocks, callouts, typography
Test responsive behavior at 375px, 768px, and 1280px+ widths
Verify dark mode and light mode both look correct
Check no console errors on any page
Verify prefers-reduced-motion disables background animations

🤖 Generated with Claude Code

Replace the dark-first yellow-accent design with a new deep-space aurora theme featuring indigo/violet/pink/cyan gradients, animated mesh background, and modern glass morphism effects. Redesign all pages including homepage hero section with animated scroll reveals, topic selection with progress tracking, and content pages with updated typography and code block styling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel · 2026-02-05T22:54:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
prep	Ready	Preview, Comment	Feb 5, 2026 11:01pm

Bump Next.js from 16.0.1 to 16.1.6 and React/react-dom from 19.0.0 to 19.2.4 to address CVE in React Server Components (vercel.com/kb/bulletin/react2shell). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR implements a comprehensive visual redesign of the interview preparation platform, transitioning from a yellow-accent dark theme to a modern aurora/gradient theme with deep-space navy base colors and indigo/violet/pink/cyan gradients.

Changes:

Introduces a new CSS variable-based color system supporting both dark and light modes
Replaces static background with animated gradient orbs using Framer Motion
Redesigns homepage with hero section, animated badge, gradient text, scroll indicator, and features grid
Redesigns topics page with progress bar, numbered cards with color-coded icons, and animations
Updates all shared components (PageHeader, SectionCard, CodeBlock, TableOfContents, typography components, etc.) to use CSS variables for consistent theming

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/app/globals.css	New color system with CSS variables, glass effects, gradient utilities, and custom scrollbar/selection styles
src/components/ambient-background/ambient-background.tsx	Animated background with 4 floating gradient orbs, noise texture, and edge glow
src/app/(main)/home.tsx	Complete homepage redesign with hero section, topic cards, and features grid using Framer Motion
src/app/frontend/junior/frontend-junior.tsx	Redesigned topics page with progress bar, numbered topic cards, and icons
src/components/typography/*.tsx	Updated all typography components (Text, Header, Subheader, CodeSpan, Callout) to use CSS variables
src/components/page-header/page-header.tsx	Updated colors to use CSS variables
src/components/section-card/section-card.tsx	Updated styling with new border radius and CSS variables
src/components/code-block/code-block.tsx	Updated colors for highlighted lines to match new theme
src/components/table-of-contents/table-of-contents.tsx	Updated colors to use CSS variables
src/components/width-switcher/width-switcher.tsx	Updated colors to use CSS variables
src/components/notes-area/notes-area.tsx	Updated styling with new border radius and CSS variables
src/components/layout/content-page.tsx	Updated text color to use CSS variable
.gitignore	Added .claude directory to ignore list

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T23:00:40Z

src/components/ambient-background/ambient-background.tsx

+      <motion.div
+        animate={{
+          x: [0, 30, -20, 0],
+          y: [0, -40, 20, 0],
+          scale: [1, 1.1, 0.95, 1],
+        }}
+        className='motion-safe-only absolute top-[-10%] left-[15%] h-[500px] w-[500px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+        transition={{
+          duration: 20,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, -40, 30, 0],
+          y: [0, 30, -30, 0],
+          scale: [1, 0.9, 1.1, 1],
+        }}
+        className='motion-safe-only absolute top-[20%] right-[10%] h-[600px] w-[600px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(236, 72, 153, 0.12), transparent 70%)',
+          filter: 'blur(80px)',
+        }}
+        transition={{
+          duration: 25,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, 50, -30, 0],
+          y: [0, -20, 40, 0],
+          scale: [1, 1.15, 0.9, 1],
+        }}
+        className='motion-safe-only absolute bottom-[-5%] left-[30%] h-[500px] w-[500px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(6, 182, 212, 0.15), transparent 70%)',
+          filter: 'blur(70px)',
+        }}
+        transition={{
+          duration: 22,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, -30, 40, 0],
+          y: [0, 40, -20, 0],
+        }}
+        className='motion-safe-only absolute top-[50%] left-[60%] h-[400px] w-[400px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(139, 92, 246, 0.1), transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+        transition={{
+          duration: 18,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />


The motion-safe-only class with animation: none; transition: none; in CSS won't disable Framer Motion animations. Framer Motion uses JavaScript-driven animations with inline styles, not CSS animations. To properly support prefers-reduced-motion, you should use Framer Motion's useReducedMotion hook or pass a motion config to the MotionConfig provider. Consider wrapping the aurora orbs with a conditional check for reduced motion preferences.

Copilot · 2026-02-05T23:00:40Z

src/app/globals.css

+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;


The mask-composite: exclude property has limited browser support. While you've added -webkit-mask-composite: xor for WebKit browsers, Firefox requires -moz-mask-composite: exclude. Consider adding a fallback for browsers that don't support mask-composite, such as a simple border or using an SVG-based approach. Alternatively, add the Firefox-specific property: -moz-mask-composite: exclude;

Suggested change

mask-composite: exclude;

mask-composite: exclude;

-moz-mask-composite: exclude;

Copilot · 2026-02-05T23:00:40Z

src/app/globals.css

+.gradient-text {
+  background: linear-gradient(
+    135deg,
+    var(--aurora-1),
+    var(--aurora-2),
+    var(--aurora-3)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}


The gradient text using -webkit-text-fill-color: transparent may cause accessibility issues. When users select this text, it may not be visible in the selection highlight. Additionally, some screen readers and browser extensions might not properly render this text. Consider testing with various assistive technologies and ensuring the underlying text color provides sufficient contrast as a fallback.

Copilot · 2026-02-05T23:00:40Z

src/app/globals.css

+@keyframes aurora-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  25% {
+    background-position: 100% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  75% {
+    background-position: 0% 100%;
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-20px) scale(1.05);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+}


The keyframe animations aurora-shift, float, and pulse-glow are defined but not used anywhere in the codebase. Consider removing them to reduce bundle size, or if they're intended for future use, add a comment explaining that.

Copilot · 2026-02-05T23:00:41Z

src/components/ambient-background/ambient-background.tsx

+      <motion.div
+        animate={{
+          x: [0, 30, -20, 0],
+          y: [0, -40, 20, 0],
+          scale: [1, 1.1, 0.95, 1],
+        }}
+        className='motion-safe-only absolute top-[-10%] left-[15%] h-[500px] w-[500px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+        transition={{
+          duration: 20,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, -40, 30, 0],
+          y: [0, 30, -30, 0],
+          scale: [1, 0.9, 1.1, 1],
+        }}
+        className='motion-safe-only absolute top-[20%] right-[10%] h-[600px] w-[600px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(236, 72, 153, 0.12), transparent 70%)',
+          filter: 'blur(80px)',
+        }}
+        transition={{
+          duration: 25,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, 50, -30, 0],
+          y: [0, -20, 40, 0],
+          scale: [1, 1.15, 0.9, 1],
+        }}
+        className='motion-safe-only absolute bottom-[-5%] left-[30%] h-[500px] w-[500px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(6, 182, 212, 0.15), transparent 70%)',
+          filter: 'blur(70px)',
+        }}
+        transition={{
+          duration: 22,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      <motion.div
+        animate={{
+          x: [0, -30, 40, 0],
+          y: [0, 40, -20, 0],
+        }}
+        className='motion-safe-only absolute top-[50%] left-[60%] h-[400px] w-[400px] rounded-full'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(139, 92, 246, 0.1), transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+        transition={{
+          duration: 18,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />


The ambient background renders 4 continuously animating orbs with blur filters and transforms. While visually appealing, this could impact performance on lower-end devices. Consider using will-change: transform on the motion.div elements to optimize rendering, or implementing a performance-based toggle to disable these animations on devices with limited GPU resources.

Copilot · 2026-02-05T23:00:41Z

src/app/frontend/junior/frontend-junior.tsx

+                className={`card-glow group relative flex items-center gap-5 rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-6 text-left backdrop-blur-sm transition-all duration-300 hover:border-[var(--border-hover)] ${
+                  section.inProgress
+                    ? 'cursor-default opacity-60'
+                    : 'hover:bg-[var(--glass-bg)]'


The disabled topic cards still have hover:border-[var(--border-hover)] in their className, which will apply hover styles even when disabled. Consider moving this hover class into the conditional className logic so it only applies when the button is not in progress.

Suggested change

className={`card-glow group relative flex items-center gap-5 rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-6 text-left backdrop-blur-sm transition-all duration-300 hover:border-[var(--border-hover)] ${

section.inProgress

? 'cursor-default opacity-60'

: 'hover:bg-[var(--glass-bg)]'

className={`card-glow group relative flex items-center gap-5 rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] p-6 text-left backdrop-blur-sm transition-all duration-300 ${

section.inProgress

? 'cursor-default opacity-60'

: 'hover:border-[var(--border-hover)] hover:bg-[var(--glass-bg)]'

Copilot · 2026-02-05T23:00:41Z

src/app/globals.css

+    --glass-strong-bg: rgba(248, 250, 252, 0.85);
+    --card-bg: rgba(255, 255, 255, 0.7);
+    --surface-1: #ffffff;
+    --surface-2: #f1f5f9;


In light mode, the accent colors (--accent, --accent-light, --secondary, --tertiary) are not redefined and will use the same values as dark mode. While this provides color consistency, some of these colors may not provide sufficient contrast against the light background (#f8fafc). Consider testing the color contrast ratios for WCAG compliance and potentially adjusting these colors for light mode to ensure accessibility.

Suggested change

--surface-2: #f1f5f9;

--surface-2: #f1f5f9;

/* Light-mode accent system tuned for contrast on #f8fafc */

--accent: #4f46e5; /* indigo-600: stronger contrast than indigo-500 on light bg */

--accent-light: #6366f1; /* indigo-500: used for lighter accents against dark text */

--accent-glow: rgba(79, 70, 229, 0.25);

--secondary: #db2777; /* pink-600: higher contrast than pink-400 on light bg */

--secondary-glow: rgba(219, 39, 119, 0.25);

--tertiary: #059669; /* emerald-600: higher contrast than emerald-400 on light bg */

Copilot AI review requested due to automatic review settings February 5, 2026 22:54

vercel bot had a problem deploying to Preview February 5, 2026 22:54 Failure

Copilot started reviewing on behalf of Zheckan February 5, 2026 22:54 View session

fix: Update Next.js and React to patch react2shell vulnerability

16a7579

Bump Next.js from 16.0.1 to 16.1.6 and React/react-dom from 19.0.0 to 19.2.4 to address CVE in React Server Components (vercel.com/kb/bulletin/react2shell). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI reviewed Feb 5, 2026

View reviewed changes

vercel bot deployed to Preview February 5, 2026 23:01 View deployment

Zheckan closed this Feb 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Complete visual redesign with aurora/gradient theme#19

feat: Complete visual redesign with aurora/gradient theme#19
Zheckan wants to merge 2 commits intomainfrom
redesign/new-styling

Zheckan commented Feb 5, 2026

Uh oh!

vercel bot commented Feb 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

	mask-composite: exclude;
	mask-composite: exclude;
	-moz-mask-composite: exclude;

-    --surface-2: #f1f5f9;
+    --surface-2: #f1f5f9;
+    /* Light-mode accent system tuned for contrast on #f8fafc */
+    --accent: #4f46e5; /* indigo-600: stronger contrast than indigo-500 on light bg */
+    --accent-light: #6366f1; /* indigo-500: used for lighter accents against dark text */
+    --accent-glow: rgba(79, 70, 229, 0.25);
+    --secondary: #db2777; /* pink-600: higher contrast than pink-400 on light bg */
+    --secondary-glow: rgba(219, 39, 119, 0.25);
+    --tertiary: #059669; /* emerald-600: higher contrast than emerald-400 on light bg */

Conversation

Zheckan commented Feb 5, 2026

Summary

Test plan

Uh oh!

vercel bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

vercel bot commented Feb 5, 2026 •

edited

Loading