Redesign alicetrannp.com as modern, elegant practice site#5881
Open
frankilus wants to merge 9 commits into
Open
Redesign alicetrannp.com as modern, elegant practice site#5881frankilus wants to merge 9 commits into
frankilus wants to merge 9 commits into
Conversation
Builds a single-page experience inspired by the original psychiatric NP site, with a warmer, calmer feel: sage/ivory/forest palette, serif display type, whitespace-forward layout, and gentle scroll-reveal motion. Sections cover hero, about, three-promise approach, services, conditions, a quiet pull-quote, curated resources with a visible crisis card, and a contact card with a non-binding form. Responsive down to phones, reduced-motion friendly, no dependencies beyond Google Fonts. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Alternative palette option, preserving v1 at the repo root. Shifts from the warm sage/forest/terracotta of v1 to a cooler evening mood: mist, dusty lavender, deep plum, and champagne-gold accents. Fraunces replaces Cormorant for a slightly softer, more rounded serif. Layout, copy, and interactions are identical so the two can be compared side-by-side. View at /v2/ alongside v1 at /. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Third palette option sitting alongside v1 (grove) and v2 (twilight). Warm linen paper with seafoam, slate ocean, and driftwood/soft-coral accents — meant to feel like a quiet morning at the water. Uses DM Serif Display for a slightly crisper, more architectural masthead, plus a subtle layered wave graphic in the hero. Layout, copy, and interactions match v1 and v2 for fair comparison. View at /v3/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
A distinct alternative to v1-v3. Instead of a hero-plus-cards layout, this variant reads like a small literary quarterly: a printed masthead, a tall typographic cover with an index, numbered chapters, drop caps on opening paragraphs, a margin note, a full-width pull quote, a menu-style services list, an inline serif list of conditions, an essay-shelf for resources, a black crisis block, and a closing letter with a stamped contact form. Playfair Display for display, EB Garamond for body, Inter for small-caps utility. Warm bone-paper palette with rust and muted sage accents, plus a subtle paper-texture background. View at /v4/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Direct answer to feedback that the current hero reads like an interior- design ad. This variant puts the clinician in the frame instead of the furniture: an editorial split hero with a large portrait card on the right (swap the SVG placeholder for a real headshot when ready), two floating trust badges anchored to the card, and a decisive left column with a big headline, a clear three-line credibility row, and a stat strip below the fold. Full sticky nav matches the existing site's information architecture (About / Services / Rates / Conditions / Blog / FAQ / Contact + Join Visit + Book Now). Palette keeps the warm sage/cream family but shifts the primary to a deeper botanical green and adds a small coral accent for CTAs and markers, so the mood reads clinical-warm rather than spa-staged. View at /v5/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Per feedback, remove the practitioner image from the hero entirely. The right-side card is now an abstract sunrise composition — layered horizon arcs, a rising sun, and drifting particles in the same sage/ forest/coral palette — evoking hope and calm without depicting a person or an interior. The floating credential badges (15+ years, board-certified) are retained since they carry trust, not decor. Removed the now-unused portrait caption styles. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Recreates the existing live hero design as closely as possible (top accent bar, leaf-logo nav with Join Visit / Book Now pills, centered kicker, 'Feel like yourself again.' headline with italic accent, three icon features, dual CTAs, timing note, and the floating question chat pill) while swapping only the background: the interior/waiting-room photograph is replaced with a soft watercolor-wash sky, faint hills, gently swaying botanical fronds, and a light center vignette to keep the text readable. Everything else about the layout is preserved so it can be compared one-to-one against the live site. View at /v6/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Keeps the live site's hero layout untouched (nav, kicker, headline, feature icons, CTAs, chat pill) and replaces the background with a more visually distinctive animated scene: a breathing sun halo with three slowly expanding concentric rings centered behind the headline, three blurred ribbon currents in amber/sage/gold drifting across the page, and soft light motes floating upward. Adds two small signature touches — a slowly drifting gradient on the top accent bar and a hand-drawn brush underline beneath 'yourself' in the headline. A center vignette preserves text contrast, and all motion respects prefers-reduced-motion. View at /v7/. v6 (quiet botanical version) retained for comparison. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
Same layout as the live site; the background is now an abstract lotus pond. The lotus — Vietnam's national flower and a symbol of resilience rising clean from muddy water — carries the cultural note requested. Three layered wave bands scroll continuously at different speeds to read as flowing water, dashed current lines shimmer across the surface, raindrop ripples expand as flattened ellipses for perspective, and two stylized pink lotus blossoms bob gently on lily pads while a lone pad drifts slowly across the full width of the pond. The nav logo also becomes a lotus mark, and the underline flourish beneath 'yourself' becomes a soft water-line. Vignette preserves text contrast; motion is disabled cleanly under prefers-reduced-motion; the right blossom and one ripple are hidden on phones to keep the scene uncluttered. View at /v8/. https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7
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.
Builds a single-page experience inspired by the original psychiatric NP site, with a warmer, calmer feel: sage/ivory/forest palette, serif display type, whitespace-forward layout, and gentle scroll-reveal motion. Sections cover hero, about, three-promise approach, services, conditions, a quiet pull-quote, curated resources with a visible crisis card, and a contact card with a non-binding form. Responsive down to phones, reduced-motion friendly, no dependencies beyond Google Fonts.
https://claude.ai/code/session_01Ds9RawtHHr3s4S8gq7Ezf7