issue #244 - Update landing page design #278
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
dinuone
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR completely redesigns the landing page with a modern, clean interface to improve user experience and visual appeal. The changes transform the basic language selection page into a comprehensive hero-driven layout with enhanced typography, icons, and interactive elements.
- Replaces the SVG-based cover layout with a modern hero section featuring gradient text and 3D book cover effects
- Transforms the basic list of languages into a responsive card-based grid with preview and download actions
- Adds comprehensive styling with CSS custom properties, animations, and responsive design
Comments suppressed due to low confidence (1)
_layouts/website/languages.html:7
- Font Awesome version 6.4.0 may not exist or be available. Consider using a more recent stable version like 6.5.1 or verify the version exists.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
| </div> | ||
| </div> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
Embedding 350+ lines of CSS directly in the HTML template creates maintainability issues. Consider moving the styles to a separate CSS file or using a CSS-in-JS solution for better organization and reusability.
| --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| body { |
There was a problem hiding this comment.
Applying global body styles within a component template can cause conflicts with existing site styles. Consider scoping these styles to a specific container class instead.
| body { | |
| .language-selector-container { |
| color: var(--dark-color); | ||
| font-weight: 800; | ||
| line-height: 1.2; | ||
| background: linear-gradient(90deg, #4361ee, #3a0ca3); | ||
| -webkit-background-clip: text; | ||
| background-clip: text; | ||
| color: transparent; |
There was a problem hiding this comment.
Using gradient text with color: transparent may cause accessibility issues as the text may not be visible in high contrast mode or if CSS fails to load. Consider providing a fallback color.
| color: var(--dark-color); | |
| font-weight: 800; | |
| line-height: 1.2; | |
| background: linear-gradient(90deg, #4361ee, #3a0ca3); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| color: #4361ee; /* Fallback color for accessibility */ | |
| font-weight: 800; | |
| line-height: 1.2; | |
| background: linear-gradient(90deg, #4361ee, #3a0ca3); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; /* Transparent color for gradient text */ |
| box-shadow: var(--card-shadow); | ||
| transform: rotateY(-10deg); | ||
| transition: transform 0.5s ease; | ||
| position: relative; |
There was a problem hiding this comment.
The 3D transform effect on the book cover may cause motion sensitivity issues for some users. Consider respecting the prefers-reduced-motion media query to disable animations for users who prefer reduced motion.
| position: relative; | |
| position: relative; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .book-cover { | |
| transform: none; | |
| transition: none; | |
| } |
Features