66 lines
4.6 KiB
Twig
66 lines
4.6 KiB
Twig
<section class="relative bg-[#aac6c6] min-h-[560px]">
|
|
|
|
{# Box 1: Image — full-bleed on mobile, offset on sm+ #}
|
|
<div class="absolute inset-0 flex">
|
|
<div class="hidden sm:block sm:basis-[8%] sm:grow-[2]"></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 min-w-0 self-center object-cover object-[center_0%] max-h-[calc(100%_-_100px)]" />
|
|
<div class="hidden sm:block sm:basis-[34%] sm:grow-[2]"></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 38% | spacer 12% #}
|
|
<div class="relative flex min-h-[560px] py-8">
|
|
<div class="hidden sm:block sm:basis-[50%] sm:grow-[2]"></div>
|
|
<div class="basis-full sm:basis-[38%] sm:grow flex flex-col justify-end sm:justify-center px-6 sm:px-0 pb-10 sm:pb-0 py-16 gap-6">
|
|
<h1
|
|
class="mt-0 mb-3 text-[clamp(2rem,3.5vw,3.25rem)] font-serif font-normal text-white leading-tight [text-shadow:-56.21px_2.55px_10.22px_#0000001A]"
|
|
>
|
|
Restore your strength.<br>Reclaim your life.
|
|
</h1>
|
|
<p class="text-white/80 leading-tight text-[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">
|
|
<a
|
|
href="/schedule"
|
|
class="w-full sm:w-auto text-center px-8 py-3 rounded-none bg-[#306f8e] text-white text-sm font-medium no-underline transition-colors hover:bg-[#3a6a7a]"
|
|
>Book An Appointment</a>
|
|
<a href="/services" class="hidden sm:inline-block px-8 py-3 border border-white/60 text-white text-sm font-medium no-underline transition-colors hover:bg-white/10">View Our Services</a>
|
|
</div>
|
|
</div>
|
|
<div class="hidden sm:block sm:basis-[12%] sm:grow-[2]"></div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="py-16 px-6 bg-gray-100">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-blue-900 mb-1.5">Bringing Relief</h2>
|
|
<p class="text-[17px] text-gray-500">Our wide range of services</p>
|
|
</div>
|
|
<div class="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-6 max-w-[1040px] mx-auto">
|
|
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
|
<h3 class="text-[17px] font-semibold text-gray-900">Diagnostic Evaluation</h3>
|
|
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Comprehensive assessment to identify the root cause of your pain and build a personalized recovery plan.</p>
|
|
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
|
</div>
|
|
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
|
<h3 class="text-[17px] font-semibold text-gray-900">Sports Rehabilitation</h3>
|
|
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Targeted programs to help athletes recover from injury and return to peak performance safely.</p>
|
|
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
|
</div>
|
|
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
|
<h3 class="text-[17px] font-semibold text-gray-900">Pre/Post-Surgical Rehab</h3>
|
|
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Expert care before and after surgery to maximize recovery outcomes and restore full function.</p>
|
|
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
|
</div>
|
|
<div class="flex flex-col gap-3 border border-gray-200 rounded-lg p-6 bg-white">
|
|
<h3 class="text-[17px] font-semibold text-gray-900">Neurological Physical Therapy</h3>
|
|
<p class="text-[15px] text-gray-500 leading-relaxed flex-1">Specialized therapy for nervous system conditions, helping you regain strength and independence.</p>
|
|
<a href="/services" class="inline-block px-4 py-2 text-[14px] text-blue-500 border border-blue-500 rounded no-underline transition-colors hover:bg-blue-500 hover:text-white">More Info</a>
|
|
</div>
|
|
</div>
|
|
</section>
|