129 lines
No EOL
8.5 KiB
Twig
129 lines
No EOL
8.5 KiB
Twig
<div class="bg-gradient-to-b from-pt-sage-400 to-pt-blue-400 pt-px">
|
|
<section class="
|
|
relative md:mt-[78px] min-h-[480px]
|
|
2xl:flex
|
|
/* This number, 78px is supposed to match the header height (only when header is fixed) */
|
|
">
|
|
|
|
{# Box 1: Image — full-bleed on mobile, offset on sm+ ; 2xl: left 62%, no padding, no offset #}
|
|
<div class="absolute inset-0 flex sm:pt-8 sm:pb-8 2xl:static 2xl:inset-auto 2xl:w-[62%] 2xl:flex-none 2xl:p-0">
|
|
<div class="hidden sm:block sm:basis-[8%] sm:grow-[2] 2xl:hidden"></div>
|
|
<img
|
|
src="/modules/custom/riverside_pt/images/hero.jpg"
|
|
alt="A man helps a woman in a wheelchair"
|
|
class="basis-full sm:basis-[58%] sm:grow 2xl:basis-full 2xl:flex-none min-w-0 h-full object-cover object-[center_0%]" />
|
|
<div class="hidden sm:block sm:basis-[34%] sm:grow-[2] 2xl:hidden"></div>
|
|
</div>
|
|
|
|
{# Gradient overlay on mobile so text stays readable over the image #}
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent sm:hidden"></div>
|
|
|
|
{# Box 2: Text — spacer 50% | text 40% | spacer 10% ; 2xl: solid teal panel, text padded to align with nav CTA #}
|
|
<div class="relative flex min-h-[480px] pt-0 pb-4 2xl:flex-1 2xl:bg-pt-blue-400 2xl:min-h-0 2xl:pb-0">
|
|
<div class="hidden sm:block sm:basis-[50%] sm:grow-[2] 2xl:hidden"></div>
|
|
<div class="basis-full sm:basis-[40%] sm:grow flex flex-col justify-end sm:justify-center px-6 sm:px-0 sm:pb-0 gap-[1vw] 2xl:basis-full 2xl:grow-0 2xl:pl-16 2xl:pr-12 2xl:justify-center">
|
|
<h1
|
|
class="mt-0 mb-[1vw] text-[clamp(1.5rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-none [text-shadow:-56.21px_2.55px_10.22px_rgb(0_0_0/10%)]"
|
|
>
|
|
Restore your strength.<br>Reclaim your life.
|
|
</h1>
|
|
<p class="text-white/80 leading-tight text-[clamp(1rem,2vw,1.5vw)]">Every new patient starts with a comprehensive diagnostic assessment. From there we build a personalized plan that may include sports rehabilitation, pre- or post-surgical recovery, or neurological physical therapy.</p>
|
|
<div class="flex gap-4 flex-wrap items-center mt-[2vw]">
|
|
<a
|
|
href="/book-appointment"
|
|
data-scroll-to="#book-an-appointment"
|
|
class="w-full sm:w-auto text-center max-sm:text-sm sm:text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-pt-blue-500 text-white font-medium no-underline transition-colors border-2 border-pt-blue-500 hover:bg-pt-blue-600 hover:border-pt-blue-600"
|
|
>Book An Appointment</a>
|
|
<a
|
|
href="/services"
|
|
data-scroll-to="#pt-services"
|
|
class="hidden sm:inline-block text-[clamp(0.25rem,1vw,1.25vw)] px-[4em] py-[1em] bg-pt-blue-400 text-white font-medium no-underline transition-colors border-2 border-white hover:bg-pt-sage-500"
|
|
>View Our Services</a>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:block sm:basis-[10%] sm:grow-[2] 2xl:hidden"></div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
<section id="pt-services" class="py-16 px-6 bg-white">
|
|
<div class="max-w-[1040px] mx-auto mb-12">
|
|
<p class="text-sm tracking-widest uppercase text-pt-blue-500 font-semibold text-center mb-2">Bringing Relief</p>
|
|
<h2 class="text-[2.25rem] font-serif font-normal text-gray-900 leading-tight text-center">Our Wide Range of Physical Therapy Services</h2>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 max-w-[1040px] mx-auto">
|
|
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden">
|
|
<img src="/modules/custom/riverside_pt/images/panels/1.jpg" alt="Diagnostic assessment" class="w-full h-48 object-cover" />
|
|
<div class="flex flex-col gap-4 p-6 flex-1">
|
|
<h3 class="text-2xl font-normal text-gray-900">Diagnostic Assessment</h3>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Your recovery starts with clarity. We perform a thorough evaluation of your condition, movement, and goals to create a precise, personalized treatment plan from day one.</p>
|
|
<a href="/services/diagnostic-assessment" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info →</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden">
|
|
<img src="/modules/custom/riverside_pt/images/panels/2.jpg?v=2" alt="Sports rehabilitation" class="w-full h-48 object-cover" />
|
|
<div class="flex flex-col gap-4 p-6 flex-1">
|
|
<h3 class="text-2xl font-normal text-gray-900">Sports Rehabilitation</h3>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">We help athletes recover from injury and return to peak performance with targeted, sport-specific programs built around your body and your goals.</p>
|
|
<a href="/services/sports-rehabilitation" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info →</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden">
|
|
<img src="/modules/custom/riverside_pt/images/panels/3.jpg" alt="Pre and post-surgical rehab" class="w-full h-48 object-cover" />
|
|
<div class="flex flex-col gap-4 p-6 flex-1">
|
|
<h3 class="text-2xl font-normal text-gray-900">Pre/Post-Surgical Rehab</h3>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Expert care before and after surgery to reduce recovery time, minimize complications, and restore full strength and function.</p>
|
|
<a href="/services/pre-post-surgical-rehab" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info →</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col border border-pt-blue-200 bg-white overflow-hidden">
|
|
<img src="/modules/custom/riverside_pt/images/panels/4.jpg" alt="Neurological physical therapy" class="w-full h-48 object-cover" />
|
|
<div class="flex flex-col gap-4 p-6 flex-1">
|
|
<h3 class="text-2xl font-normal text-gray-900">Neurological Therapy</h3>
|
|
<p class="text-[15px] text-gray-600 leading-relaxed flex-1">Specialized therapy for nervous system conditions — helping you rebuild strength, coordination, and independence at every stage of recovery.</p>
|
|
<a href="/services/neurological-therapy" class="inline-flex items-center gap-3 px-5 py-3 bg-pt-blue-500 text-white text-[15px] font-medium no-underline hover:bg-pt-blue-600">More Info →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-pt-blue-100 py-20 px-6 overflow-hidden">
|
|
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row gap-12 md:gap-20 items-center">
|
|
|
|
<div class="flex-1 flex flex-col gap-8 min-w-0">
|
|
<h2 class="text-[clamp(2.75rem,4.5vw,4rem)] font-serif font-light text-gray-900 leading-[1.1]">Our mission is to help you reclaim your body.</h2>
|
|
<p class="text-base text-gray-700 font-light leading-relaxed max-w-lg">Every new patient begins with a comprehensive diagnostic assessment. From there, we create a fully personalized treatment plan tailored to your goals — whether that means returning to sport, recovering from surgery, or restoring neurological function.</p>
|
|
<div class="flex gap-12 pt-4">
|
|
<div class="font-hedvig text-center">
|
|
<p class="text-[4.5rem] font-light text-pt-blue-500 leading-none">15</p>
|
|
<p class="text-xs tracking-widest uppercase text-pt-blue-500 font-semibold mt-2">Years Open</p>
|
|
</div>
|
|
<div class="font-hedvig text-center">
|
|
<p class="text-[4.5rem] text-pt-blue-500 leading-none">300</p>
|
|
<p class="text-xs tracking-widest uppercase text-pt-blue-500 font-semibold mt-2">Patients Served</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full md:w-[46%] shrink-0">
|
|
<img src="/modules/custom/riverside_pt/images/neck.jpg" alt="Patient receiving physical therapy" class="w-full h-[420px] md:h-[520px] object-cover" />
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white border-b border-pt-blue-300">
|
|
<rpt-testimonials class="block"></rpt-testimonials>
|
|
</section>
|
|
|
|
<section id="book-an-appointment" class="py-24 px-6 bg-white">
|
|
<div class="max-w-[700px] mx-auto">
|
|
<h2 class="text-[clamp(2.5rem,5vw,4rem)] font-serif font-light text-gray-800 mb-10 text-center">Book An Appointment</h2>
|
|
<rpt-booking class="block"></rpt-booking>
|
|
</div>
|
|
</section>
|
|
|
|
<rpt-faq id="pt-faq" class="block"></rpt-faq>
|
|
|
|
<div class="bg-pt-blue-400 h-[240px]"></div> |