Add CodeSlash homepage design and layout - #136
Merged
Merged
Conversation
Translates the Figma Make / React export (jackgranatowski/Freelancewebdevhomepage) into a single, self-contained HTML+CSS file using the SLASHED framework. Designed for direct copy-paste into Bricks Builder 2.3+. Sections: Navbar, Hero, Services Overview (dark), Services Detail (pillars + comparison table), Testimonials, Process (accordion), Mid-page CTA, Case Studies, Pricing (care plans), Qualification, About, FAQ (accordion), Contact form, Footer. Uses sf-container for layout, SLASHED --sf-* tokens for all spacing, radius, z-index, duration, and color values. Custom CSS block is clearly delimited for pasting into Bricks Global CSS. JS block (scroll progress + sticky nav) is isolated for Bricks Custom JS. https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
|
Warning Review limit reached
More reviews will be available in 8 minutes and 40 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a complete single-page landing page ( ChangesCODE/codeslash Landing Page
Sequence DiagramssequenceDiagram
participant User
participant Browser
participant Navbar
participant ProgressBar
User->>Browser: load page
Browser->>Navbar: render sticky header with logo and nav links
Browser->>ProgressBar: render fixed progress bar at top
User->>User: scroll page
Navbar->>ProgressBar: update width based on scroll position
Navbar->>Navbar: toggle "is-scrolled" class for styling
sequenceDiagram
participant User
participant Stepper
participant Accordion
User->>Stepper: click step button
Stepper->>Stepper: set aria-selected and is-active class
Stepper->>Accordion: open matching phase details element
Accordion->>Accordion: set is-active and is-done classes
Stepper->>Stepper: update --cs-step-pct CSS variable
User->>Accordion: toggle details panel directly
Accordion->>Stepper: sync step state on change event
sequenceDiagram
participant User
participant HamburgerButton
participant NavMenu
participant ScrollListener
User->>HamburgerButton: click mobile menu toggle
HamburgerButton->>HamburgerButton: toggle expanded state
HamburgerButton->>NavMenu: show/hide navigation drawer
NavMenu->>NavMenu: update aria-expanded attribute
User->>NavMenu: click navigation link (mobile)
NavMenu->>NavMenu: close drawer and reset aria-expanded
User->>ScrollListener: scroll page
ScrollListener->>HamburgerButton: update progress bar width
ScrollListener->>HamburgerButton: toggle "is-scrolled" class on navbar
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Process section: 5 numbered dots connected by animated orange fill line, bidirectionally synced with accordion (clicking dot opens phase, clicking phase summary activates dot); --cs-step-pct drives fill width via CSS var - FAQ: two-column grid (1fr 1fr), collapses to single column < 680 px - About: portrait with absolute-positioned glassmorphism stats card (50+ projects / 12+ countries / 4.9★), accent dot, orange line accent, and gradient overlay; sidebar layout with skills/badges column - Hero: two-column layout with right-side PageSpeed audit card (SVG ring gauge + CWV metrics); dot-grid background + orange glow effects - World map: animated city ping dots (London, Toronto, Berlin, Dubai, Singapore, Sydney, Warsaw) on a CSS dot-grid with radial-gradient overlay - Mobile nav: hamburger with is-open toggle, closes on link click - All layout built on SLASHED primitives (sf-container, sf-stack, sf-grid, sf-cluster, sf-section) and sf-* / --sf-* tokens https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
…label)
Chrome uses ::-webkit-details-marker (already hidden); Firefox uses the
standard ::marker pseudo-element, which in a Polish locale renders as
"▶ Szczegóły" alongside the custom summary content. Adding ::marker{display:none}
to both .cs-process-item summary and .cs-faq-item summary fixes it.
https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
Remove the parallel --c-* token block entirely. Wire all color references to SLASHED semantic tokens so the page responds to data-theme toggling and prefers-color-scheme automatically: --c-orange → var(--sf-color-primary) --c-gray → var(--sf-color-text--secondary) --c-cream → var(--sf-color-bg) --c-navy (text) → var(--sf-color-heading) --c-navy (bg) → hardcoded oklch (intentionally always dark) --c-navy-* (section bg) → hardcoded oklch variants --c-border-dark → var(--sf-color-border--subtle) nav CTA text → var(--sf-color-text--on-primary) Add data-theme="dark" to the 9 permanently-dark subtrees (nav, mobile-nav, services, testimonials, mid-cta, qualification, about, contact, footer) so --sf-color-text / --sf-color-heading etc. resolve to their light variants within those sections without any extra CSS. https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
…okens Cover the cases missed in the previous commit: world map border/label/ city names, logo grid border and item colors, about portrait card border, plan card feature list text, footer text/link/copy/tagline, and one inline style in the testimonials section. https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
… instructions - CDN link: add ?ver=1.0.0 query param - :root: add --sf-color-neutral-light (oklch 0.49) so --sf-color-heading derives to ~0.09 lightness (matching original #080F1E dark navy), and explicitly override --sf-color-text--secondary with light-dark() so it resolves to the design's medium gray (~#5D6B82) instead of the formula default of ~0.24 lightness (near-black) - Heading reset: was global h1-h5 (clobbers Bricks site styles when pasted as Custom CSS); now scoped to .cs-nav / .cs-section / footer descendants - Bricks instructions: clarify Google Fonts must be added separately, mark the body/reset block as standalone-only with a clear "OMIT in Bricks" note https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/codeslash-homepage.html`:
- Around line 1390-1405: The footer contains placeholder anchors using href="#"
(notably the Blog, LinkedIn, Book a call links inside the cs-footer-col__links
and the Privacy Policy/Terms inside cs-footer-bottom__links) which must be
replaced before release; update each anchor to point to the correct production
URLs (or remove the anchor and render plain text if no destination exists yet),
ensure the mailto link stays as-is for hello@codeslash.net, and verify any
external links include rel="noopener noreferrer" and target="_blank" where
appropriate.
- Line 18: The inline instruction currently contains a raw nested HTML comment
marker "<!-- SECTION -->" which creates invalid markup; replace that literal
with its escaped text form "<!-- SECTION -->" wherever the instruction
string appears (the line that reads “Paste each <!-- SECTION --> block into its
own Bricks Code element.”) so the comment renders as visible text and not a
nested HTML comment.
- Around line 1475-1478: The accordion toggle handler only calls activate(idx)
when a panel opens, so collapsing the currently active panel leaves the stepper
out of sync; update the toggle listener on phases/phase to detect closures and
prevent the active panel from staying closed by either preventing the close or
immediately reopening it. Concretely: inside the
phase.addEventListener('toggle', ...) callback, keep the existing if
(phase.open) activate(idx); but add an else branch that checks the current
active index (e.g., activeIndex or whatever variable/state is used by activate)
and if it equals idx, set phase.open = true (or call the API that reopens the
panel) so the active panel cannot be left collapsed and state remains
consistent.
- Around line 1329-1359: The contact form (class="cs-contact-form", id fields
cs-name, cs-email, cs-company, cs-type, cs-budget, cs-message and the submit
button) currently uses action="#" so submissions go nowhere; replace that with a
real backend endpoint (e.g., POST to your lead handler URL) and implement a
server-side route to accept and validate name, email, message, project_type and
budget, handle CSRF/auth, sanitize inputs, persist/send the lead and return
appropriate success/error responses; optionally update the form to submit via JS
(fetch) to the same endpoint to show client feedback, but ensure server-side
validation on the route regardless.
- Around line 921-945: The stepper currently mixes tab roles (cs-stepper,
cs-step) with native <details> panels (phase-0, phase-1, etc.), so either
convert to a proper WAI‑ARIA Tabs implementation or revert to a native
accordion: Option A (Tabs): replace the <details> panels with elements having
role="tabpanel" and aria-labelledby referencing each cs-step button id, ensure
each cs-step button has an id, keep aria-controls on buttons, manage
aria-selected and tabindex on buttons, and implement keyboard handling for
ArrowLeft/ArrowRight (or ArrowUp/ArrowDown), Home, End and focus management in
the same component; Option B (Accordion): remove
role="tablist"/role="tab"/aria-controls/aria-selected from cs-stepper and
cs-step, use native <details>/<summary> semantics (or add role="button" on
summaries if needed) and keep click/toggle handlers, ensuring keyboard/aria are
correct for accordions. Apply one of these fixes consistently across cs-stepper,
cs-step, and phase-* elements.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 44753648-1847-4b3a-84de-c96905a47695
📒 Files selected for processing (1)
docs/codeslash-homepage.html
Comment on lines
+1390
to
+1405
| <li><a href="#">Blog</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <p class="cs-footer-col__title">Connect</p> | ||
| <ul class="cs-footer-col__links"> | ||
| <li><a href="#">LinkedIn</a></li> | ||
| <li><a href="mailto:hello@codeslash.net">hello@codeslash.net</a></li> | ||
| <li><a href="#">Book a call</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="cs-footer-bottom"> | ||
| <div class="cs-footer-bottom__copy">© 2026 CodeSlash. All rights reserved.</div> | ||
| <div class="cs-footer-bottom__links"><a href="#">Privacy Policy</a><a href="#">Terms</a></div> | ||
| <div class="cs-footer-tagline">Built with WordPress. Naturally.</div> |
There was a problem hiding this comment.
Replace placeholder footer links before release.
href="#" for Blog, LinkedIn, Book a call, Privacy Policy, and Terms creates dead navigation paths on a production page.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/codeslash-homepage.html` around lines 1390 - 1405, The footer contains
placeholder anchors using href="#" (notably the Blog, LinkedIn, Book a call
links inside the cs-footer-col__links and the Privacy Policy/Terms inside
cs-footer-bottom__links) which must be replaced before release; update each
anchor to point to the correct production URLs (or remove the anchor and render
plain text if no destination exists yet), ensure the mailto link stays as-is for
hello@codeslash.net, and verify any external links include rel="noopener
noreferrer" and target="_blank" where appropriate.
Contributor
Author
There was a problem hiding this comment.
Intentional — these are placeholder anchors in a design reference file. Real URLs (Blog, LinkedIn, Calendly, Privacy Policy, Terms) will be filled in before deployment. External links will get rel="noopener noreferrer" target="_blank" at that point.
Generated by Claude Code
There was a problem hiding this comment.
@jackgranatowski, understood — acknowledged and noted. I'll avoid flagging these placeholder anchors in future reviews of this file.
✏️ Learnings added
Learnt from: jackgranatowski
Repo: codeslash-dev/SLASHED PR: 136
File: docs/codeslash-homepage.html:1413-1428
Timestamp: 2026-05-28T12:49:45.481Z
Learning: In `docs/codeslash-homepage.html`, the footer `href="#"` anchors (Blog, LinkedIn, Book a call / Calendly, Privacy Policy, Terms) are intentional placeholders in a design reference file. Real URLs will be substituted before deployment, at which point external links will also receive `rel="noopener noreferrer" target="_blank"`. Do not flag these as issues in code review.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
[data-theme="dark"]{color-scheme:dark} lives inside @layer slashed.themes.
Bricks may strip data-* attributes from Code element HTML, and even if
it doesn't, layered CSS can be beaten by Bricks's own unlayered rules.
Fix: set color-scheme:dark directly on the CSS class rules for every
dark-background section (.cs-section--dark/mid/cta/footer) and for the
scrolled nav and mobile nav. Unlayered Custom CSS beats any @layer, so
this reliably activates SLASHED's light-dark() token resolution in Bricks
without requiring any HTML attribute on the pasted sections.
Also fixes the text-selection gray-box bug: browsers use the correct
light selection highlight colour when color-scheme:dark is on the element.
data-theme="dark" attrs kept in HTML for standalone-file compatibility.
https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
The Bricks plugin was pinned to v0.2.12 while all page code targets v0.4.4 tokens — causing mismatched custom properties and wrong colors. The homepage usage comment has been rewritten with explicit step-by-step instructions, start/end markers for the Custom CSS block, and corrections to the section-separator format and font loading requirements. https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
Replace misleading role=tablist/tab (which don't match <details> panels) with aria-pressed on each step button. Paired JS change updates aria-pressed instead of aria-selected in the activate() function. Also prevent the active accordion panel from being left collapsed: the toggle listener now reopens the panel if the user tries to close the currently active phase. https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
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
2 participants
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.
Summary
Added a complete, production-ready homepage for CodeSlash — a senior WordPress developer portfolio/service site. This is a standalone HTML file with embedded CSS that showcases services, process, testimonials, pricing, and contact information.
Key Changes
docs/codeslash-homepage.html— A comprehensive single-page website featuring:Implementation Details
The file is ready to use standalone in a browser or can be integrated into Bricks Builder by extracting the CSS into global styles and HTML sections into individual code elements.
https://claude.ai/code/session_01SE7YMspZC6YR1gynBaGxZ6
Summary by CodeRabbit