527 lines
29 KiB
TypeScript
527 lines
29 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { getArtworks, getEvents, getAssetUrl, Artwork, Event } from '@/lib/directus';
|
|
import { ArtworkCard } from '@/components/artwork-card';
|
|
import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
|
|
|
|
// Force dynamic rendering to ensure fresh data from Directus
|
|
export const dynamic = 'force-dynamic';
|
|
export const revalidate = 0;
|
|
|
|
async function getFeaturedArtworks(): Promise<Artwork[]> {
|
|
try {
|
|
// Fetch more than needed and prefer artworks with images
|
|
const artworks = await getArtworks({ status: 'published', limit: 50 });
|
|
const withImages = artworks.filter((a) => a.image);
|
|
// Return up to 6 artworks that have images, or fall back to whatever is available
|
|
return withImages.length >= 6 ? withImages.slice(0, 6) : artworks.slice(0, 6);
|
|
} catch (error) {
|
|
console.error('Error fetching artworks:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
async function getUpcomingEvents(): Promise<Event[]> {
|
|
try {
|
|
const events = await getEvents({ status: 'published', limit: 4 });
|
|
return events;
|
|
} catch (error) {
|
|
console.error('Error fetching events:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function formatEventDate(start?: string, end?: string): string {
|
|
if (!start) return '';
|
|
const s = new Date(start);
|
|
const opts: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
|
|
if (!end) return s.toLocaleDateString('en-GB', opts);
|
|
const e = new Date(end);
|
|
return `${s.toLocaleDateString('en-GB', opts)} - ${e.toLocaleDateString('en-GB', opts)}`;
|
|
}
|
|
|
|
export default async function HomePage() {
|
|
const [artworks, upcomingEvents] = await Promise.all([
|
|
getFeaturedArtworks(),
|
|
getUpcomingEvents(),
|
|
]);
|
|
|
|
// Wisdom words gallery - all quote images from original site
|
|
const wisdomImages = [
|
|
{ src: '/images/wisdom-1.png', alt: 'Thich Nhat Hanh quote' },
|
|
{ src: '/images/wisdom-2.png', alt: 'Call it clan quote' },
|
|
{ src: '/images/wisdom-3.png', alt: 'James Baldwin quote' },
|
|
{ src: '/images/wisdom-4.png', alt: 'David Whyte quote' },
|
|
{ src: '/images/wisdom-5.png', alt: 'Gilbert duty quote' },
|
|
{ src: '/images/wisdom-6.png', alt: 'Rumi light quote' },
|
|
{ src: '/images/wisdom-7.png', alt: 'Jane Howard quote' },
|
|
{ src: '/images/wisdom-8.png', alt: 'Katheryn quote - celebrates' },
|
|
{ src: '/images/wisdom-9.png', alt: 'Katheryn quote - story' },
|
|
{ src: '/images/wisdom-10.png', alt: 'Katheryn quote - viewers' },
|
|
{ src: '/images/wisdom-11.jpg', alt: 'IYOS FB quote' },
|
|
{ src: '/images/wisdom-12.jpg', alt: 'Oliver quote' },
|
|
{ src: '/images/wisdom-13.png', alt: 'Walt Whitman quote' },
|
|
{ src: '/images/wisdom-14.jpg', alt: 'Light quote' },
|
|
{ src: '/images/wisdom-15.jpg', alt: 'Alan Watts quote' },
|
|
{ src: '/images/wisdom-16.png', alt: 'Katheryn beauty quote' },
|
|
];
|
|
|
|
// Instagram feed images
|
|
const instagramImages = [
|
|
{ src: '/images/instagram-1.jpg', alt: 'Instagram 1' },
|
|
{ src: '/images/instagram-2.jpg', alt: 'Instagram 2' },
|
|
{ src: '/images/instagram-3.jpg', alt: 'Instagram 3' },
|
|
{ src: '/images/instagram-4.jpg', alt: 'Instagram 4' },
|
|
{ src: '/images/instagram-5.jpg', alt: 'Instagram 5' },
|
|
{ src: '/images/instagram-6.jpg', alt: 'Instagram 6' },
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
{/* HERO - Full screen portrait with quote overlay (matching Squarespace original) */}
|
|
<section className="relative min-h-screen flex items-center justify-center">
|
|
{/* Background Image */}
|
|
<Image
|
|
src="/images/hero-katheryn.jpg"
|
|
alt="Katheryn Trenshaw"
|
|
fill
|
|
className="object-cover object-[52%_53%]"
|
|
priority
|
|
sizes="100vw"
|
|
/>
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/30" />
|
|
|
|
{/* Content - positioned lower to not cover face */}
|
|
<div className="relative z-10 text-center text-white px-4 max-w-3xl mx-auto mt-32 md:mt-48">
|
|
<blockquote className="text-xl md:text-2xl lg:text-3xl italic leading-relaxed font-serif">
|
|
<span className="text-4xl">“</span>Working with Katheryn Trenshaw is fun and illuminating. It has served the
|
|
unfolding of my deep remembering. Artist, healer, transformer; Katheryn embodies
|
|
what she teaches.<span className="text-4xl">”</span>
|
|
</blockquote>
|
|
<footer className="mt-8 text-sm uppercase tracking-widest opacity-80">
|
|
— DJ, Counsellor, Maine, USA
|
|
</footer>
|
|
|
|
{/* Social Icons */}
|
|
<div className="mt-12 flex justify-center gap-4">
|
|
<a
|
|
href="mailto:post@ktrenshaw.com"
|
|
className="w-10 h-10 border border-white/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
|
|
aria-label="Email"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
|
|
aria-label="YouTube"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://instagram.com/katheryn_trenshaw"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
|
|
aria-label="Instagram"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
|
|
aria-label="Facebook"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white text-center animate-bounce">
|
|
<span className="text-xs uppercase tracking-widest opacity-60">Scroll</span>
|
|
<svg className="w-6 h-6 mx-auto mt-2 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tagline - Passionate Presence Center */}
|
|
<section className="py-16 bg-white">
|
|
<div className="text-center px-4 max-w-4xl mx-auto">
|
|
<h1 className="font-serif text-3xl md:text-4xl lg:text-5xl leading-tight text-[#222]">
|
|
Passionate Presence Center
|
|
<br />
|
|
for Creative Expression
|
|
</h1>
|
|
<p className="mt-4 text-sm uppercase tracking-[0.3em] text-gray-500">
|
|
Katheryn Trenshaw
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ARTWORK Section */}
|
|
<section className="py-20 bg-white" id="artwork">
|
|
<div className="mx-auto max-w-5xl px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">ARTWORK</p>
|
|
<h2 className="font-serif text-3xl md:text-4xl text-[#222]">Paintings Store</h2>
|
|
</div>
|
|
|
|
{artworks.length > 0 ? (
|
|
<div className="grid gap-8 grid-cols-1 md:grid-cols-2">
|
|
{artworks.map((artwork, index) => (
|
|
<ArtworkCard
|
|
key={artwork.id}
|
|
artwork={artwork}
|
|
priority={index < 2}
|
|
aspectRatio="3:2"
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
/* Static fallback - featured paintings from Squarespace */
|
|
<div className="grid gap-8 grid-cols-1 md:grid-cols-2">
|
|
{[
|
|
{ src: '/images/artwork-autumn-offerings.jpeg', alt: 'Autumn Offerings' },
|
|
{ src: '/images/artwork-choose-love.jpg', alt: 'Choose Love, Choose Life' },
|
|
{ src: '/images/artwork-at-the-stillpoint.jpg', alt: 'At the Stillpoint' },
|
|
{ src: '/images/artwork-ecstasy-of-belonging.jpg', alt: 'Ecstasy of Belonging' },
|
|
{ src: '/images/artwork-births-blessing-way.jpg', alt: 'Birth\'s Blessing Way' },
|
|
{ src: '/images/artwork-spiralling-into-starlight.jpg', alt: 'Spiralling into Starlight' },
|
|
].map((img, index) => (
|
|
<Link key={index} href="/store" className="group block">
|
|
<div className="relative aspect-[3/4] bg-gray-100 overflow-hidden">
|
|
<Image
|
|
src={img.src}
|
|
alt={img.alt}
|
|
fill
|
|
className="object-contain transition-transform duration-500 group-hover:scale-105"
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
priority={index < 2}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<h3 className="font-serif text-lg text-[#222]">{img.alt}</h3>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-16 text-center">
|
|
<Link
|
|
href="/store"
|
|
className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
|
|
>
|
|
View Store
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* IN YOUR OWN SKIN Section - Video Background */}
|
|
<section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden" id="in-your-own-skin">
|
|
{/* YouTube Video Background */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<iframe
|
|
src="https://www.youtube.com/embed/JnaDOhU0mCs?autoplay=1&mute=1&loop=1&playlist=JnaDOhU0mCs&controls=0&showinfo=0&modestbranding=1&playsinline=1"
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[177.78vh] min-w-full h-[56.25vw] min-h-full"
|
|
allow="autoplay; fullscreen"
|
|
title="In Your Own Skin Trailer"
|
|
/>
|
|
</div>
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/50" />
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 text-center text-white px-4 max-w-2xl mx-auto">
|
|
<h2 className="font-serif text-4xl md:text-5xl lg:text-6xl">In Your Own Skin</h2>
|
|
<p className="mt-2 font-serif text-2xl md:text-3xl opacity-90">trailer</p>
|
|
<div className="mt-12">
|
|
<Link
|
|
href="/in-your-own-skin"
|
|
className="inline-block px-8 py-4 border-2 border-white text-white text-sm uppercase tracking-wider rounded-full hover:bg-white hover:text-[#222] transition-colors"
|
|
>
|
|
Watch now
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* BOOK Section */}
|
|
<section className="py-20 bg-white" id="book">
|
|
<div className="mx-auto max-w-5xl px-4">
|
|
<div className="grid gap-12 lg:grid-cols-3 items-start">
|
|
{/* Book Cover */}
|
|
<div className="lg:col-span-1">
|
|
<a
|
|
href="https://www.amazon.co.uk/Your-Own-Skin-Photographic-Portraits/dp/0990542009"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block"
|
|
>
|
|
<Image
|
|
src="/images/iyos-book-amazon.jpg"
|
|
alt="In Your Own Skin Book"
|
|
width={500}
|
|
height={500}
|
|
className="w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-shadow"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Book Details */}
|
|
<div className="lg:col-span-2">
|
|
<h3 className="font-serif text-2xl text-[#222]">
|
|
In Your Own Skin: Photographic Portraits Revealing Our Secrets
|
|
</h3>
|
|
<p className="mt-2 text-gray-500">By Katheryn M. Trenshaw</p>
|
|
<div className="mt-6 prose prose-lg text-gray-600">
|
|
<p>
|
|
<strong>In Your Own Skin</strong> is an antidote to human separation. Katheryn
|
|
Trenshaw reveals our most powerful secrets in photographic autobiographies on
|
|
skin and turns these portraits into a powerful medium for change.
|
|
</p>
|
|
<p>
|
|
Katheryn has been travelling around the globe like a peripatetic social
|
|
anthropologist treasure hunter collecting stories, footage and photographs of
|
|
strangers in response to the question: “What is true of you but not obvious
|
|
to strangers?”
|
|
</p>
|
|
<p>
|
|
These 54 colour photo portraits and stories of people from over 40 countries
|
|
have shared their intimate secrets, revealing a living transformative story in
|
|
a world searching for hope, wisdom and resilience.
|
|
</p>
|
|
</div>
|
|
<div className="mt-8">
|
|
<a
|
|
href="https://www.amazon.co.uk/Your-Own-Skin-Photographic-Portraits/dp/0990542009"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
|
|
>
|
|
Buy on Amazon
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* EVENTS Section */}
|
|
<section className="py-20 bg-white" id="events">
|
|
<div className="mx-auto max-w-4xl px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">EVENTS</p>
|
|
<h2 className="font-serif text-3xl md:text-4xl text-[#222]">Upcoming</h2>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{upcomingEvents.length > 0 ? (
|
|
upcomingEvents.map((event, index) => (
|
|
<div key={event.id} className={`flex gap-6 ${index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}`}>
|
|
{/* Event Thumbnail */}
|
|
{event.image && (
|
|
<Link href="/events" className="flex-shrink-0 w-32 h-32 md:w-40 md:h-40 relative bg-gray-100 overflow-hidden group">
|
|
<Image
|
|
src={getAssetUrl(event.image, { width: 320, quality: 80, format: 'webp' })}
|
|
alt={event.title}
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
sizes="(max-width: 768px) 128px, 160px"
|
|
/>
|
|
</Link>
|
|
)}
|
|
{/* Event Details */}
|
|
<div className="flex-1">
|
|
<p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
|
|
{formatEventDate(event.start_date, event.end_date)}
|
|
</p>
|
|
<h3 className="font-serif text-xl text-[#222]">{event.title}</h3>
|
|
{event.location && (
|
|
<p className="mt-1 text-sm text-gray-500">{event.location}</p>
|
|
)}
|
|
{event.description && (
|
|
<p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p>
|
|
)}
|
|
<Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
|
|
Learn More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-center text-gray-500 py-8">No upcoming events at the moment.</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-12 text-center">
|
|
<Link
|
|
href="/events"
|
|
className="inline-block px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors"
|
|
>
|
|
View Events
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* WISDOM WORDS Section */}
|
|
<section className="py-20 bg-gray-50" id="wisdom-words">
|
|
<div className="mx-auto max-w-6xl px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">INSPIRATION</p>
|
|
<h2 className="font-serif text-3xl md:text-4xl text-[#222]">Wisdom Words</h2>
|
|
<p className="mt-4 text-gray-600">
|
|
This is a treasure trove of favorite inspirations and wise words to share.
|
|
</p>
|
|
</div>
|
|
|
|
<WisdomWordsCarousel images={wisdomImages} interval={6000} />
|
|
|
|
<div className="mt-12 text-center">
|
|
<Link
|
|
href="/wisdom-words"
|
|
className="inline-block px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors"
|
|
>
|
|
Wisdom Words
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* INSTAGRAM Section */}
|
|
<section className="py-20 bg-white" id="instagram">
|
|
<div className="mx-auto max-w-6xl px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">FOLLOW ALONG</p>
|
|
<h2 className="font-serif text-3xl md:text-4xl text-[#222]">Instagram</h2>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2">
|
|
{instagramImages.map((img, index) => (
|
|
<a
|
|
key={index}
|
|
href="https://instagram.com/katheryn_trenshaw"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="relative aspect-square group overflow-hidden"
|
|
>
|
|
<Image
|
|
src={img.src}
|
|
alt={img.alt}
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-110"
|
|
sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 16vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
|
|
<svg
|
|
className="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 text-center">
|
|
<a
|
|
href="https://instagram.com/katheryn_trenshaw"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
|
|
>
|
|
Visit Instagram
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FOOTER Section - Dark footer style */}
|
|
<section className="py-16 bg-[#222] text-white">
|
|
<div className="mx-auto max-w-xl px-4 text-center">
|
|
{/* Social Links */}
|
|
<div className="flex justify-center gap-6">
|
|
<a
|
|
href="mailto:post@ktrenshaw.com"
|
|
className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
|
|
aria-label="Email"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
|
|
aria-label="YouTube"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://instagram.com/katheryn_trenshaw"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
|
|
aria-label="Instagram"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
|
|
</svg>
|
|
</a>
|
|
<a
|
|
href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
|
|
aria-label="Facebook"
|
|
>
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Logo */}
|
|
<div className="mt-12">
|
|
<Image
|
|
src="/images/logo-kt.png"
|
|
alt="Katheryn Trenshaw"
|
|
width={200}
|
|
height={60}
|
|
className="mx-auto opacity-80"
|
|
/>
|
|
</div>
|
|
|
|
{/* Copyright */}
|
|
<p className="mt-8 text-xs text-gray-500">
|
|
images and writing © Katheryn M. Trenshaw 2025
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|