feat: add horse first-person statements to about page profiles
Replace placeholder one-liners with full first-person quotes from the 2026 Horse Statements document for Breagha, Harley, Connolly, Puzzle, and the Minis (Orris, Bru & Sam). - Section heading updated to 'Meet the horses — In their own words.' - Cards redesigned: taller photo (220px), green left-border quote block in italic Merriweather, details in small caps green text - Minis added as a group entry with shared card - Memorial horses (Lady Suede, Wispa) moved to a separate 'Remembered fondly' subsection with grayscale treatment - Updated details/ages/breeds to match the document Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
c2fa6b1696
commit
455abb9411
1 changed files with 107 additions and 20 deletions
|
|
@ -21,12 +21,57 @@ const stats = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const ponies = [
|
const ponies = [
|
||||||
{ name: "Breagh", img: "/Breagh-bc8e70e8-2880w.webp", details: "13.2hh · Mare · 15 yo", desc: "She is very willing and independent", pos: "50% 50%" },
|
{
|
||||||
{ name: "Connolly", img: "/connolly-73f3e69f-2880w-2.webp", details: "14.2hh · Gelding · 16 yo", desc: "A true gentleman and everyone's friend", pos: "50% 50%" },
|
name: "Breagha",
|
||||||
{ name: "Harley", img: "/Harley-6ece9eca-2880w.webp", details: "15.3hh · Gelding · 15 yo", desc: "He is the boss but very obliging", pos: "50% 50%" },
|
img: "/Breagh-bc8e70e8-2880w.webp",
|
||||||
{ name: "Puzzle", img: "/puzzle-5de6e325-2880w.webp", details: "15.3hh · Mare · 14 yo", desc: "She is very sensitive and gentle", pos: "50% 50%" },
|
details: "13hh · Skewbald cob mare · 19 yo",
|
||||||
{ name: "Lady Suede", img: "/Suede-2880w.webp", details: "13hh · Mare · 23 yo", desc: "RIP October 2024", pos: "50% 50%", memorial: true },
|
pos: "50% 40%",
|
||||||
{ name: "Wispa", img: "/Wispa-2880w.webp", details: "14.2hh · Gelding · 15 yo", desc: "RIP 2025", pos: "50% 20%", memorial: true },
|
quote: "I am the most recent arrival at RDA, part of the herd for the past three and a half years. I take my job very seriously and am careful and steady with riders who are gaining confidence while enjoying a faster walk and trot from time to time. People say that I make them feel calm and happy — that makes me very happy too.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Harley",
|
||||||
|
img: "/Harley-6ece9eca-2880w.webp",
|
||||||
|
details: "15.3hh · Skewbald cob/Clydesdale · 17 yo",
|
||||||
|
pos: "50% 35%",
|
||||||
|
quote: "I like to think that I am good at my job. I stand quietly at the mounting block and always try to do what I have been asked as well as I can. After lessons, nothing makes me more excited than searching for the odd piece of carrot or apple scattered about the field — that is when I do my happy prance about!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Connolly",
|
||||||
|
img: "/connolly-73f3e69f-2880w-2.webp",
|
||||||
|
details: "15.1hh · Piebald cob gelding · 18 yo",
|
||||||
|
pos: "50% 30%",
|
||||||
|
quote: "People say that I am a calm, sensible boy who likes to tackle life at a leisurely pace while at work. I will stand forever to be groomed, often relaxing so much that I look like I have fallen asleep. I have a very thick mane and love to give my head a cheeky little shake just when it is all lying nice and flat!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Puzzle",
|
||||||
|
img: "/puzzle-5de6e325-2880w.webp",
|
||||||
|
details: "15.1hh · Skewbald cob mare · 16 yo",
|
||||||
|
pos: "50% 35%",
|
||||||
|
quote: "Everyone says that I am a kind, loving girl. I enjoy being groomed and pampered, and I like to be around people who are calm, quiet and patient — that fills me with confidence. After work I like to wander slowly round the field searching for the tastiest patches of grass, or a nice dusty place to have a roll!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "The Minis",
|
||||||
|
img: "/alineofponies-1920w.webp",
|
||||||
|
details: "Orris · Bru · Sam — Miniature Shetland ponies",
|
||||||
|
pos: "50% 60%",
|
||||||
|
quote: "We are better known as the minis! People often like to get to know us first if they are nervous about meeting the bigger horses. We might be small but make up for it with our cheeky personalities — and our ability to know when the electric fence has been switched off.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Lady Suede",
|
||||||
|
img: "/Suede-2880w.webp",
|
||||||
|
details: "13hh · Mare · 23 yo",
|
||||||
|
pos: "50% 50%",
|
||||||
|
memorial: true,
|
||||||
|
memorialNote: "RIP October 2024",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Wispa",
|
||||||
|
img: "/Wispa-2880w.webp",
|
||||||
|
details: "14.2hh · Gelding · 15 yo",
|
||||||
|
pos: "50% 20%",
|
||||||
|
memorial: true,
|
||||||
|
memorialNote: "RIP 2025",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const testimonials = [
|
const testimonials = [
|
||||||
|
|
@ -220,39 +265,81 @@ const testimonials = [
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ── PONY PROFILES ── -->
|
<!-- ── HORSE PROFILES ── -->
|
||||||
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
<section style="background: #d6d6d6; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
|
||||||
<div style="max-width: 1200px; margin: 0 auto;">
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 14px;">
|
||||||
Meet the ponies
|
Meet the horses
|
||||||
</p>
|
</p>
|
||||||
<div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 40px;" />
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 2.8vw, 36px); color: #000; line-height: 1.15; margin-bottom: 12px;">
|
||||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;">
|
In their own words.
|
||||||
{ponies.map((pony) => (
|
</h2>
|
||||||
<div style={`background: ${pony.memorial ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.55)'}; border-radius: 7px; overflow: hidden;`}>
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(0,0,0,0.6); line-height: 1.65; max-width: 620px; margin-bottom: 40px;">
|
||||||
<div style="position: relative; height: 180px; overflow: hidden;">
|
Highland Group RDA are very proud of the contribution made by our fantastic team of horses. We'll let them introduce themselves.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Active horses -->
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px;">
|
||||||
|
{ponies.filter(p => !p.memorial).map((pony) => (
|
||||||
|
<div style="background: rgba(255,255,255,0.6); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;">
|
||||||
|
<div style="position: relative; height: 220px; overflow: hidden; flex-shrink: 0;">
|
||||||
<img
|
<img
|
||||||
src={pony.img}
|
src={pony.img}
|
||||||
alt={pony.name}
|
alt={pony.name}
|
||||||
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos}; ${pony.memorial ? 'filter: grayscale(40%);' : ''}`}
|
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos};`}
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
decoding="async"
|
decoding="async"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 18px 20px;">
|
<div style="padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column;">
|
||||||
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #000; margin-bottom: 6px;">
|
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #000; margin-bottom: 5px;">
|
||||||
{pony.name}
|
{pony.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p style={`font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: ${pony.memorial ? 'rgba(0,0,0,0.4)' : '#7DA371'}; margin-bottom: 4px;`}>
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7DA371; margin-bottom: 16px;">
|
||||||
{pony.details}
|
{pony.details}
|
||||||
</p>
|
</p>
|
||||||
<p style={`font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: ${pony.memorial ? 'rgba(0,0,0,0.45)' : 'rgba(0,0,0,0.65)'}; line-height: 1.5;`}>
|
<div style="border-left: 2px solid #7DA371; padding-left: 16px; flex: 1;">
|
||||||
{pony.desc}
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 14px; color: rgba(0,0,0,0.7); line-height: 1.7;">
|
||||||
</p>
|
"{pony.quote}"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Memorial section -->
|
||||||
|
<div style="margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.12);">
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.35); margin-bottom: 20px;">
|
||||||
|
Remembered fondly
|
||||||
|
</p>
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; max-width: 560px;">
|
||||||
|
{ponies.filter(p => p.memorial).map((pony) => (
|
||||||
|
<div style="background: rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden;">
|
||||||
|
<div style="position: relative; height: 160px; overflow: hidden;">
|
||||||
|
<img
|
||||||
|
src={pony.img}
|
||||||
|
alt={pony.name}
|
||||||
|
style={`position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: ${pony.pos}; filter: grayscale(50%);`}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 16px 18px;">
|
||||||
|
<h3 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 17px; color: rgba(0,0,0,0.7); margin-bottom: 4px;">
|
||||||
|
{pony.name}
|
||||||
|
</h3>
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; color: rgba(0,0,0,0.35); margin-bottom: 4px;">
|
||||||
|
{pony.details}
|
||||||
|
</p>
|
||||||
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.4); font-style: italic;">
|
||||||
|
{pony.memorialNote}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue