Pretty pages #533
Pretty pages #533
Conversation
Deploying saddlebag-with-pockets with
|
| Latest commit: |
81d701b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3db616a3.saddlebag-with-pockets.pages.dev |
| Branch Preview URL: | https://pretty-wow-page.saddlebag-with-pockets.pages.dev |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
WalkthroughThis pull request introduces a consistent design overhaul across multiple route index pages (FFXIV, Queries, and WoW) by implementing a new hero section layout, restructuring tool displays, and enhancing visual presentation. The changes focus on creating a more engaging and uniform user interface with gradient backgrounds, prominent titles, and improved tool card layouts. Tailwind CSS utility classes were also updated to support these design modifications. Changes
Sequence DiagramsequenceDiagram
participant User
participant HeroSection
participant ToolsSection
User->>HeroSection: Views page
HeroSection-->>User: Displays background image, title, subtitle
User->>ToolsSection: Explores tools
ToolsSection-->>User: Presents clickable tool cards
Possibly related PRs
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
app/routes/ffxiv._index.tsx(1 hunks)app/routes/queries._index.tsx(1 hunks)app/routes/wow._index.tsx(2 hunks)app/tailwind.css(16 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
app/routes/ffxiv._index.tsx
[error] 151-151: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
app/routes/queries._index.tsx
[error] 152-152: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
app/routes/wow._index.tsx
[error] 162-162: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
app/routes/ffxiv._index.tsx
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
app/routes/queries._index.tsx
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
app/routes/wow._index.tsx
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
🔇 Additional comments (16)
app/routes/ffxiv._index.tsx (1)
143-210: Great layout changes!This hero section with a background image and gradient overlay is a nice UI improvement. It clearly highlights the key features. The tight integration of Tailwind classes with the new design is done well, resulting in an engaging user experience.
🧰 Tools
🪛 Biome (1.9.4)
[error] 151-151: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
app/routes/queries._index.tsx (1)
144-212: Well-structured hero section and tool listing.Revising this layout to a hero section with clear CTAs is a solid improvement, guiding the user’s attention to the primary “Cross-Server Reselling” and “Marketshare Overview” features.
🧰 Tools
🪛 Biome (1.9.4)
[error] 152-152: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
app/routes/wow._index.tsx (2)
3-3: Good use of type imports!Including
MetaFunctionandLinksFunctionfrom@remix-run/nodeensures type safety for meta and link data.🧰 Tools
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
154-226: Hero section enhancements look great.Using a dynamic background image, gradient overlay, and CTA buttons creates an eye-catching introduction for WoW Auction tools.
🧰 Tools
🪛 Biome (1.9.4)
[error] 162-162: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
app/tailwind.css (12)
Line range hint
809-832: Reintroduction of.top-0,.top-5, and.z-30classes.These adjustments appear valid. No issues found as they restore or re-define existing style rules for layering and positioning.
817-819: No concerns.The
.top-5style re-addition is straightforward and consistent with typical utility usage.
829-831: Layering with.z-30.Allows stacking elements at the correct depth. Looks good.
966-968: Re-establishing.mb-12.This margin utility is helpful for large sections (e.g., headings or banners). No issues observed.
1134-1136: New.h-14utility.Additional standard height utility (3.5rem) is beneficial. Approved.
1271-1273: Adding.w-72.Width utility of 18rem is a typical pattern. No concerns.
1937-1941: New.bg-indigo-600background.Expands color choices for backgrounds. Approved.
1984-1989:.from-blue-900gradient utility.Adds a deeper shade gradient start. Implementation looks correct.
2457-2461: Introducing.text-purple-500.Helpful new text color utility. No problems noted.
2593-2598:.transition-shadowaddition.Enables a distinct transition property for box-shadow. Useful for hover effects.
2825-2830:.hover\:shadow-xlutility.Allows a more prominent shadow on hover. Implementation looks good.
3593-3596: Adding.lg\:grid-cols-3.Enables a three-column grid layout on larger screens. This helps with responsive design.
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider making this div self-closing to address the static analysis hint.
Since it has no children, you can safely convert:
<div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div>into:
-<div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div>
+<div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70" />🧰 Tools
🪛 Biome (1.9.4)
[error] 151-151: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
| {/* Hero Section */} | ||
| <section className="relative bg-gray-900"> | ||
| <div className="absolute inset-0"> | ||
| <img | ||
| className="w-full h-full object-cover opacity-50" | ||
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div> | ||
| </div> | ||
| <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center"> | ||
| <h1 className="text-5xl font-extrabold text-white"> | ||
| FFXIV Market Board Tools | ||
| </h1> | ||
| <div | ||
| className={`not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2`}> | ||
| {ffxivPages.map((query) => { | ||
| return <TileLink key={query.name} {...query} /> | ||
| })} | ||
| <p className="mt-4 text-xl text-gray-200"> | ||
| Maximize your gil earnings with our advanced Market Board tools | ||
| </p> | ||
| <div className="mt-8 flex justify-center space-x-4"> | ||
| <a | ||
| href="/queries/recommended" | ||
| className="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Cross-Server Reselling | ||
| </a> | ||
| <a | ||
| href="/ffxiv/marketshare/queries" | ||
| className="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Marketshare Overview | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <Banner /> | ||
|
|
||
| {/* Tools Grid Section */} | ||
| <section className="py-16 bg-gray-50"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <div className="text-center mb-12"> | ||
| <h2 className="text-base font-semibold text-purple-600 uppercase"> | ||
| Tools & Features | ||
| </h2> | ||
| <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | ||
| Everything You Need for Gil Making | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | ||
| {ffxivPages.map((query) => ( | ||
| <a | ||
| key={query.name} | ||
| href={query.href} | ||
| target={query.external ? '_blank' : '_self'} | ||
| rel={query.external ? 'noopener noreferrer' : undefined} | ||
| className="block"> | ||
| <div className="h-full p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:bg-purple-50"> | ||
| <div className="flex items-center mb-4"> | ||
| <query.Icon className="h-6 w-6 text-purple-500" /> | ||
| <h3 className="ml-3 text-lg font-medium text-gray-900"> | ||
| {query.name} | ||
| </h3> | ||
| </div> | ||
| <p className="text-gray-600">{query.description}</p> | ||
| </div> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Run Prettier to align with project formatting standards.
The pipeline warns about formatting deviations. Please run Prettier locally to ensure consistent code style and pass the linter step.
🧰 Tools
🪛 Biome (1.9.4)
[error] 151-151: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
| {/* Hero Section */} | ||
| <section className="relative bg-gray-900"> | ||
| <div className="absolute inset-0"> | ||
| <img | ||
| className="w-full h-full object-cover opacity-50" | ||
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div> | ||
| </div> | ||
| <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center"> | ||
| <h1 className="text-5xl font-extrabold text-white"> | ||
| FFXIV Market Board Tools | ||
| </h1> | ||
| <div | ||
| className={`not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2`}> | ||
| {ffxivPages.map((query) => { | ||
| return <TileLink key={query.name} {...query} /> | ||
| })} | ||
| <p className="mt-4 text-xl text-gray-200"> | ||
| Maximize your gil earnings with our advanced Market Board tools | ||
| </p> | ||
| <div className="mt-8 flex justify-center space-x-4"> | ||
| <a | ||
| href="/queries/recommended" | ||
| className="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Cross-Server Reselling | ||
| </a> | ||
| <a | ||
| href="/ffxiv/marketshare/queries" | ||
| className="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Marketshare Overview | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <Banner /> | ||
|
|
||
| {/* Tools Grid Section */} | ||
| <section className="py-16 bg-gray-50"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <div className="text-center mb-12"> | ||
| <h2 className="text-base font-semibold text-purple-600 uppercase"> | ||
| Tools & Features | ||
| </h2> | ||
| <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | ||
| Everything You Need for Gil Making | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | ||
| {ffxivPages.map((query) => ( | ||
| <a | ||
| key={query.name} | ||
| href={query.href} | ||
| target={query.external ? '_blank' : '_self'} | ||
| rel={query.external ? 'noopener noreferrer' : undefined} | ||
| className="block"> | ||
| <div className="h-full p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:bg-purple-50"> | ||
| <div className="flex items-center mb-4"> | ||
| <query.Icon className="h-6 w-6 text-purple-500" /> | ||
| <h3 className="ml-3 text-lg font-medium text-gray-900"> | ||
| {query.name} | ||
| </h3> | ||
| </div> | ||
| <p className="text-gray-600">{query.description}</p> | ||
| </div> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Run Prettier to satisfy the pipeline checks.
Make sure to run Prettier locally before committing to fix any format mismatches.
🧰 Tools
🪛 Biome (1.9.4)
[error] 152-152: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Self-close this div for a cleaner structure.
You can remove the closing tag and replace it with a self-closing slash:
-<div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div>
+<div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70"></div> | |
| <div className="absolute inset-0 bg-gradient-to-r from-purple-900 via-transparent to-blue-900 opacity-70" /> |
🧰 Tools
🪛 Biome (1.9.4)
[error] 152-152: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
| {/* Hero Section */} | ||
| <section className="relative bg-gray-900"> | ||
| <div className="absolute inset-0"> | ||
| <img | ||
| className="w-full h-full object-cover opacity-50" | ||
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70"></div> | ||
| </div> | ||
| <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center"> | ||
| <h1 className="text-5xl font-extrabold text-white"> | ||
| Azeroth Auction Assassin | ||
| </h1> | ||
| <div | ||
| className={`not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2`}> | ||
| {recommendedQueries.map((query) => { | ||
| return <TileLink key={query.name} {...query} /> | ||
| })} | ||
| <p className="mt-4 text-xl text-gray-200"> | ||
| Lightning-fast cross-realm auction sniper - Get the best deals seconds after they appear! | ||
| </p> | ||
| <div className="mt-8 flex justify-center space-x-4"> | ||
| <a | ||
| href="https://github.com/ff14-advanced-market-search/AzerothAuctionAssassin/releases/latest" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Download Now | ||
| </a> | ||
| <a | ||
| href="https://github.com/ff14-advanced-market-search/AzerothAuctionAssassin/blob/main/README.md" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-block bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-md shadow-md"> | ||
| Learn More | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <Banner /> | ||
|
|
||
| {/* Tools Grid Section */} | ||
| <section className="py-16 bg-gray-50"> | ||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <div className="text-center mb-12"> | ||
| <h2 className="text-base font-semibold text-blue-600 uppercase"> | ||
| Tools & Features | ||
| </h2> | ||
| <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | ||
| Everything You Need for Gold Making | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | ||
| {recommendedQueries.map((query) => ( | ||
| <a | ||
| key={query.name} | ||
| href={query.href} | ||
| target={query.external ? '_blank' : '_self'} | ||
| rel={query.external ? 'noopener noreferrer' : undefined} | ||
| className="block"> | ||
| <div className="h-full p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:bg-blue-50"> | ||
| <div className="flex items-center mb-4"> | ||
| <query.Icon className="h-6 w-6 text-blue-500" /> | ||
| <h3 className="ml-3 text-lg font-medium text-gray-900"> | ||
| {query.name} | ||
| </h3> | ||
| </div> | ||
| <p className="text-gray-600">{query.description}</p> | ||
| </div> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Run Prettier for consistent styling.
Please address the linter’s formatting warnings to ensure the code follows the project's Prettier conventions.
🧰 Tools
🪛 Biome (1.9.4)
[error] 162-162: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
| src="/images/hero-bg.jpg" | ||
| alt="Hero Background" | ||
| /> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70"></div> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Make this div self-closing to match best practices.
If there are no children, you can safely self-close:
-<div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70"></div>
+<div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70"></div> | |
| <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-transparent to-blue-900 opacity-70" /> |
🧰 Tools
🪛 Biome (1.9.4)
[error] 162-162: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
🪛 GitHub Actions: Linters
[warning] Code formatting does not match Prettier standards. Run Prettier to fix formatting issues.
Summary by CodeRabbit
New Features
Style
Documentation