Redesign/claude design landing - #1
Merged
Merged
Conversation
Dark LED aesthetic with cyan-to-blue accent. Bento hero, ticker, about, services, portfolio bento grid, clients, FAQ accordion, contact card and footer. Self-hosted Satoshi + JetBrains Mono, Clash Display for display type. Inline SVG icons, IntersectionObserver scroll reveals, reduced-motion support. Preserves i18n and SEO/JSON-LD.
- Hero/portfolio images: remove text overlays, add clickable lightbox modal (X, backdrop and Escape close, scroll lock) with zoom affordance - Services/Clients: redesign feature cards with hover accent line and arrow reveal; add CTA tile so the grid balances 3x2 (no orphan row) - Portfolio: clean bento on desktop, swipeable scroll-snap carousel on mobile; drop caption chips - About: landscape image in native ratio, restructured hierarchy - Ticker: edge fade mask, pause on hover, mobile sizing - Staggered hero entrance for stats and media
- Hero: show a single focal image instead of the split pair - Reduced-motion: keep gentle opacity fade-ins (no movement) so the page still feels alive for users with reduce-motion enabled, instead of going fully static; neutralize hover/scale travel under that pref - Reveal observer now runs for everyone (CSS downgrades to opacity-only) - Add favicon link to drop the /favicon.ico 404
- Mobile carousel now auto-plays in an infinite loop using cloned tiles so it never rewinds; jumps back invisibly at the seam - Pauses on touch/pointer/wheel (resumes after idle), when off-screen, when the tab is hidden, and under prefers-reduced-motion - Clones are removed and autoplay stops on desktop (bento grid intact) - Lightbox now uses event delegation so cloned tiles open the modal too (tap image opens, X / backdrop / Escape close)
…o+about - Design tokens: bump --text-faint contrast, gradient text fallback - Accessibility: 44px min-height on all interactive elements, focus-visible rings, skip-link repositioning, reduced-motion fallbacks - Header: add menu toggle (data-nav-ready gating), language pill a11y - Hero: simplify to single image, accessible motion fallback, square 1:1 on mobile (max-width 999.98px) - About: square 1:1 image on desktop AND mobile (height: auto to override presentation attribute), rebalance copy + image column - FAQ: switch from data-open divs to native <details>/<summary> - Portfolio: 4/3 tile aspect, dense bento on desktop, swipe carousel mobile - BaseLayout: preload critical fonts, llms.txt link, favicon, logo.webp - Content: tighten copy, add 12+ years stat to hero, EN/ES parity - SEO script: allow hash fragments in canonical checks - Assets: swap all portfolio jpgs for webp (~40% smaller), add Clash Display woff2, logo.webp, favicon - Tooling: update .atl skill registry cache
✅ Deploy Preview for rentalled ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR redesigns the Rental Led landing page to a new dark, LED-forward visual system, updating global styles, content structure, and multiple sections (hero/services/portfolio/etc.), and adds supporting UI behaviors like scroll reveal and an image lightbox.
Changes:
- Replace the global CSS with a new tokenized dark theme, updated components (buttons/cards/sections), and new motion patterns.
- Restructure landing content models (
site.ts) to support icons, hero stats/media/ticker, and portfolio sizing with explicit image dimensions. - Update Astro components to the new layout system, add inline icon components, and implement a lightbox + mobile portfolio carousel behavior.
Reviewed changes
Copilot reviewed 20 out of 45 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | New design tokens, resets, component styles, motion, and responsive scaffolding for the redesigned landing. |
| src/layouts/BaseLayout.astro | Adds JS hooks (.js), font preloads, favicon, and implements lightbox + IntersectionObserver scroll-reveal. |
| src/content/site.ts | Updates content schema/types and copy to support new hero/about/portfolio/footer structures and icons. |
| src/components/Services.astro | Redesigns services section into card-based features with icons and a WhatsApp CTA tile. |
| src/components/Portfolio.astro | Replaces asset-pipeline portfolio with public webp images, adds tile grid + mobile auto-advancing carousel and lightbox triggers. |
| src/components/Icon.astro | Introduces an inline Lucide-style icon component used across the landing. |
| src/components/Hero.astro | Rebuilds hero into a bento layout with stats, media, ticker, and updated CTA buttons. |
| src/components/Header.astro | Updates header branding, language switch, CTA button, and keeps nav behavior via src/scripts/nav. |
| src/components/Footer.astro | Rebuilds footer into multi-column layout with social links, location, and language selector. |
| src/components/Faq.astro | Restyles FAQ into the new design system with reveal behavior and icons. |
| src/components/Contact.astro | Redesigns contact section into a card layout with CTAs and metadata list. |
| src/components/Clients.astro | Redesigns clients section to match the new feature-card system and adds CTA tile. |
| src/components/BrandIcon.astro | Adds inline brand glyphs (WhatsApp/Instagram) for consistent icon rendering. |
| src/components/About.astro | Redesigns about section with new copy structure and image support. |
| scripts/check-seo.mjs | Updates SEO checks to validate the new production logo URL and adjusted copy. |
| public/llms.txt | Adds an LLM-readable site summary describing services, location, and canonical URLs. |
| PROJECT_HANDOFF.md | Adds an internal project handoff document covering status, commands, and key files. |
| package.json | Adds a convenience verify script to run build + checks in one command. |
| .atl/skill-registry.md | Updates the skill registry snapshot (auto-generated index). |
| .atl/.skill-registry.cache.json | Updates the skill registry cache fingerprint. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| img { max-width: 100%; display: block; } | ||
| a { color: var(--accent); text-decoration: none; touch-action: manipulation; } | ||
| button, input, select, textarea { font: inherit; color: inherit; } | ||
| :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } |
Comment on lines
+127
to
+138
| .btn { | ||
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; | ||
| min-height: 44px; height: 42px; padding: 0 18px; border-radius: 11px; | ||
| border: 1px solid transparent; background: var(--surface-2); | ||
| color: var(--text); font-size: 14px; font-weight: 600; | ||
| cursor: pointer; white-space: nowrap; text-decoration: none; | ||
| transition: transform var(--t-fast), background var(--t), box-shadow var(--t), border-color var(--t), color var(--t); | ||
| } | ||
| .btn svg, .btn i { width: 16px; height: 16px; flex-shrink: 0; } | ||
| .btn:active { transform: scale(.97); } | ||
| .btn-sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; } | ||
| .btn-lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 13px; } |
| @keyframes rl-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } | ||
|
|
||
| /* Hero entrance — plays on load */ | ||
| .rl-heroel { animation: rl-heroIn .8s var(--ease-out) both; } |
Comment on lines
+537
to
+539
| .rl-feature:hover, .rl-stat:hover, .rl-client:hover, | ||
| .rl-hero-fig:hover, .rl-pf-tile:hover, .btn:hover, | ||
| .rl-feature-cta:hover .rl-feature-ctabtn { transform: none !important; } |
Comment on lines
+57
to
+75
| let lastFocused: HTMLElement | null = null; | ||
| let hideTimer: number | null = null; | ||
|
|
||
| if (overlay && lbImg) { | ||
| const open = (src: string, alt: string, trigger: HTMLElement) => { | ||
| if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; } | ||
| lastFocused = trigger; | ||
| lbImg.src = src; | ||
| lbImg.alt = alt; | ||
| overlay.hidden = false; | ||
| requestAnimationFrame(() => overlay.classList.add("is-open")); | ||
| document.body.style.overflow = "hidden"; | ||
| document.querySelectorAll<HTMLElement>("body > *:not([data-lightbox-overlay]):not(script)").forEach((el) => el.setAttribute("inert", "")); | ||
| overlay.querySelector<HTMLElement>("[data-lightbox-close]")?.focus(); | ||
| }; | ||
| const close = () => { | ||
| overlay.classList.remove("is-open"); | ||
| document.body.style.overflow = ""; | ||
| document.querySelectorAll<HTMLElement>("body > *:not([data-lightbox-overlay]):not(script)").forEach((el) => el.removeAttribute("inert")); |
| </figure> | ||
| </div> | ||
|
|
||
| <script> |
| } | ||
| </script> | ||
|
|
||
| <script> |
| </div> | ||
| </section> | ||
|
|
||
| <script> |
|
|
||
| ## Repository | ||
|
|
||
| - Local path: `/Users/fernandogabrielrusso/Desktop/Rentalled` |
Comment on lines
+29
to
33
| | `animation-vocabulary` | Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one. | user | `/Users/fernandogabrielrusso/.claude/skills/animation-vocabulary/SKILL.md` | | ||
| | `apple-design` | Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces. | user | `/Users/fernandogabrielrusso/.claude/skills/apple-design/SKILL.md` | | ||
| | `branch-pr` | Create Gentle AI pull requests with issue-first checks. Trigger: creating, opening, or preparing PRs for review. | user | `/Users/fernandogabrielrusso/.config/opencode/skills/branch-pr/SKILL.md` | | ||
| | `brandkit` | Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts. | user | `/Users/fernandogabrielrusso/.claude/skills/brandkit/SKILL.md` | | ||
| | `chained-pr` | Trigger: PRs over 400 lines, stacked PRs, review slices. Split oversized changes into chained PRs that protect review focus. | user | `/Users/fernandogabrielrusso/.config/opencode/skills/chained-pr/SKILL.md` | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.