feat: animations, transitions, and UI enhancements #24
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -79,11 +79,14 @@ export function CourseDetailHeroSection() { | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <Button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| asChild | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className="group relative mt-3 overflow-hidden rounded-[60px]" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| > | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <Link href="/signup" className="flex h-[53px] w-full items-center justify-center gap-2.5 rounded-[60px] bg-ma-text px-5 py-4 text-base font-semibold text-white"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <span className="relative z-10 inline-flex items-center gap-2.5"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Enroll Now | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <ArrowRight className="size-5 transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </span> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </Link> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </Button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
80
to
91
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
printf '\n== package manifests ==\n'
git ls-files 'package.json' 'pnpm-lock.yaml' 'yarn.lock' 'package-lock.json' 'src/**/package.json' | sed 's#^`#-` #'
printf '\n== tailwind references ==\n'
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' 'tailwindcss|bg-gradient-to-|bg-linear-to-' .
printf '\n== target file excerpt ==\n'
sed -n '70,100p' src/features/marketing/components/course-detail-hero-section.tsxRepository: Smartlify07/Modern-Advocates Length of output: 8023 🏁 Script executed: #!/bin/bash
set -euo pipefail
printf '\n== package.json ==\n'
sed -n '1,220p' package.json
printf '\n== lockfile hits ==\n'
rg -n 'tailwindcss@|tailwindcss' pnpm-lock.yaml package-lock.json yarn.lock 2>/dev/null || trueRepository: Smartlify07/Modern-Advocates Length of output: 5520 🌐 Web query:
💡 Result: In Tailwind CSS v4, the gradient system has been overhauled to align with native CSS syntax, resulting in a breaking change where the former Citations:
Use 🛠️ Proposed fix- <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+ <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-linear-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" />📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| </div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -80,10 +80,13 @@ export function Footer() { | |
| /> | ||
| <button | ||
| type="submit" | ||
| className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-[60px] bg-ma-text px-[15px] py-3 text-[12.31px] font-semibold text-white transition-transform duration-300 hover:scale-[1.5]" | ||
| > | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
| <span className="relative z-10 inline-flex items-center gap-2"> | ||
| Join | ||
| <ArrowRight className="size-[15px] transition-transform duration-300 group-hover:rotate-[-30deg]" aria-hidden="true" /> | ||
| </span> | ||
| <div className="pointer-events-none absolute inset-0 rounded-[60px] bg-gradient-to-r from-ma-glow-blue to-ma-glow-violet opacity-0 transition-opacity duration-500 group-hover:opacity-100" /> | ||
| </button> | ||
|
Comment on lines
81
to
93
There was a problem hiding this comment. 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
printf '\n== footer.tsx excerpt ==\n'
sed -n '1,180p' src/features/marketing/components/footer.tsx
printf '\n== Tailwind references ==\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'tailwind|bg-gradient-to-r|bg-linear-to-r|`@tailwind`|tailwindcss' .
printf '\n== package manifests ==\n'
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json; do
if [ -f "$f" ]; then
printf '\n-- %s --\n' "$f"
sed -n '1,220p' "$f"
fi
doneRepository: Smartlify07/Modern-Advocates Length of output: 21473 🌐 Web query:
💡 Result: In Tailwind CSS v4, the Citations:
🏁 Script executed: rg -n 'hover:scale-\[1\.5\]' srcRepository: Smartlify07/Modern-Advocates Length of output: 452 Use 🤖 Prompt for AI Agents |
||
| </form> | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
Repository: Smartlify07/Modern-Advocates
Length of output: 6980
🌐 Web query:
Tailwind CSS v4 bg-gradient-to-r removed alias bg-linear-to-r documentation💡 Result:
In Tailwind CSS v4, the former bg-gradient-to-* utilities have been renamed to bg-linear-to-* [1][2][3]. This was a breaking change introduced to align class names with the native CSS linear-gradient function and to make room for new gradient primitives, specifically radial and conic gradients [1][2][3]. There is no alias or legacy support for the old bg-gradient-to-* class names in v4; they have been completely replaced by the new bg-linear-* syntax [2][4]. Key points regarding this change: - Renaming: Classes like bg-gradient-to-r have become bg-linear-to-r [2][4]. - Expanded Functionality: The new naming structure accommodates additional types, such as bg-radial and bg-conic [2][3]. - Gradient Stops: The existing color stop utilities (from-, via-, to-*) remain compatible and function identically with the new linear gradient classes [2][4]. - Migration: Official documentation provides guidance on updating these classes, and automated migration tools are available to help transition existing projects from the v3 syntax to the v4 syntax [1][5]. Because these changes involve class names, they may need to be manually updated in dynamic string concatenations that automated tools might miss [2].
Citations:
bg-gradient-*utilities tobg-linear-*tailwindlabs/tailwindcss#14537🏁 Script executed:
Repository: Smartlify07/Modern-Advocates
Length of output: 249
🏁 Script executed:
Repository: Smartlify07/Modern-Advocates
Length of output: 906
🌐 Web query:
Tailwind CSS v4 bg-gradient-to-r alias removed bg-linear-to-r documentation "legacy class aliases"💡 Result:
In Tailwind CSS v4, the
bg-gradient-*class aliases used in v3 were removed and replaced with thebg-linear-*naming convention [1][2][3]. This change was implemented to better align Tailwind’s utility naming with native CSS functions (such aslinear-gradient()) and to accommodate new gradient types, specificallybg-radialandbg-conic[2][3]. Key points regarding this change: - Renaming: Classes such asbg-gradient-to-rhave been replaced bybg-linear-to-r[1][4]. - Migration: Tailwind provides an official upgrade tool,@tailwindcss/upgrade, which automatically updates legacy v3 class names (including gradient utilities) to their v4 equivalents during the migration process [1][5][6]. - Reasoning: Beyond simple renaming, v4 introduces expanded gradient capabilities, including support for arbitrary linear gradient angles (e.g.,bg-linear-[125deg]) and gradient interpolation modifiers (e.g.,/srgb,/oklch), which are conceptually clearer under thebg-linear-*namespace [7][2][3]. Documentation for these utilities can be found in the official Tailwind CSSbackground-imagedocumentation, which lists the modernbg-linear-*utilities [8].Citations:
bg-gradient-*utilities tobg-linear-*tailwindlabs/tailwindcss#14537@tailwindcss/upgraderuns on Tailwind CSS v4 projects and is idempotent tailwindlabs/tailwindcss#17717🌐 Web query:
site:tailwindcss.com bg-gradient-to-r bg-linear-to-r Tailwind v4 legacy class aliases removed💡 Result:
In Tailwind CSS v4, the class naming convention for gradients has been updated. The previous
bg-gradient-*utility classes have been renamed tobg-linear-*[1][2]. Specifically, thebg-gradient-to-rclass from Tailwind v3 has been replaced bybg-linear-to-rin v4 [3][1]. While v4 introduces these updated names to support expanded gradient functionality—such as linear gradient angles (e.g.,bg-linear-45) and interpolation modifiers (e.g.,bg-linear-to-r/oklch)—it does not necessarily imply a blanket removal of all legacy aliases in the framework's core; however, for gradients specifically, the documentation emphasizes the use of the newbg-linear-*naming convention [3][1]. You should update your codebase to use thebg-linear-*variants to benefit from the new API features and ensure consistency with v4 [1][2].Citations:
Swap
before:bg-gradient-to-rtobefore:bg-linear-to-rTailwind v4 uses thebg-linear-*gradient utilities, so this hover border gradient won’t render as written.🤖 Prompt for AI Agents