Update homepage with full-screen hero from Squarespace
- Add full-screen portrait hero with testimonial quote overlay - Add social icons on hero section - Add scroll indicator animation - Add YouTube video background for In Your Own Skin section - Add book section with Amazon embed - Add Amazon images domain to Next.js config Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
7c9f222217
commit
80497fd4ed
|
|
@ -25,6 +25,11 @@ const nextConfig: NextConfig = {
|
|||
hostname: 'images.squarespace-cdn.com',
|
||||
pathname: '/**',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images-eu.ssl-images-amazon.com',
|
||||
pathname: '/**',
|
||||
},
|
||||
],
|
||||
},
|
||||
async headers() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Link from 'next/link';
|
|||
import Image from 'next/image';
|
||||
import { getArtworks, Artwork } from '@/lib/directus';
|
||||
import { ArtworkCard } from '@/components/artwork-card';
|
||||
import { HeroCarousel } from '@/components/hero-carousel';
|
||||
import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
|
||||
|
||||
export const revalidate = 60;
|
||||
|
|
@ -20,17 +19,6 @@ async function getFeaturedArtworks(): Promise<Artwork[]> {
|
|||
export default async function HomePage() {
|
||||
const artworks = await getFeaturedArtworks();
|
||||
|
||||
// Hero carousel paintings - exact images from original site
|
||||
const heroImages = [
|
||||
{ src: '/images/choose-love-choose-life.jpg', alt: 'Choose Love, Choose Life' },
|
||||
{ src: '/images/at-the-stillpoint.jpg', alt: 'At the Stillpoint' },
|
||||
{ src: '/images/ecstasy-of-belonging.jpg', alt: 'Ecstasy of Belonging' },
|
||||
{ src: '/images/births-blessing-way.jpg', alt: 'Birth\'s Blessing Way' },
|
||||
{ src: '/images/surrender-to-oneself.jpg', alt: 'Surrender to Oneself' },
|
||||
{ src: '/images/spiralling-into-starlight.jpg', alt: 'Spiralling into Starlight' },
|
||||
{ src: '/images/edge-of-light-darkness.jpg', alt: 'At the Edge of Light You Must Step into Darkness' },
|
||||
];
|
||||
|
||||
// Wisdom words gallery - all quote images from original site
|
||||
const wisdomImages = [
|
||||
{ src: '/images/wisdom-1.png', alt: 'Thich Nhat Hanh quote' },
|
||||
|
|
@ -63,8 +51,86 @@ export default async function HomePage() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{/* Hero Carousel - Full screen, 2-second autoplay, fade transition */}
|
||||
<HeroCarousel images={heroImages} interval={2000} />
|
||||
{/* 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="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1535812716548-IZ9JMMH605VBAMYHL3G3/20180614Katheryn--18.jpg"
|
||||
alt="Katheryn Trenshaw"
|
||||
fill
|
||||
className="object-cover object-[52%_53%]"
|
||||
priority
|
||||
sizes="100vw"
|
||||
/>
|
||||
{/* Overlay */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 text-center text-white px-4 max-w-3xl mx-auto">
|
||||
<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">
|
||||
|
|
@ -74,20 +140,9 @@ export default async function HomePage() {
|
|||
<br />
|
||||
for Creative Expression
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonial Quote - exact text from original */}
|
||||
<section className="py-16 bg-white border-t border-gray-100">
|
||||
<div className="text-center px-4 max-w-3xl mx-auto">
|
||||
<blockquote className="text-lg md:text-xl text-[#222] italic leading-relaxed">
|
||||
“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.”
|
||||
</blockquote>
|
||||
<footer className="mt-6 text-sm text-gray-500 uppercase tracking-widest">
|
||||
— DJ, Counsellor, Maine, USA
|
||||
</footer>
|
||||
<p className="mt-4 text-sm uppercase tracking-[0.3em] text-gray-500">
|
||||
Katheryn Trenshaw
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -144,45 +199,87 @@ export default async function HomePage() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* IN YOUR OWN SKIN Section */}
|
||||
<section className="py-20 bg-gray-50" id="in-your-own-skin">
|
||||
<div className="mx-auto max-w-6xl px-4">
|
||||
<div className="grid gap-12 lg:grid-cols-2 items-center">
|
||||
{/* Image */}
|
||||
<div className="relative aspect-[4/5] bg-gray-100 overflow-hidden">
|
||||
<Image
|
||||
src="/images/iyos-book-hands.jpg"
|
||||
alt="In Your Own Skin"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
{/* 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="https://images-eu.ssl-images-amazon.com/images/I/51q58fdCgbL.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>
|
||||
|
||||
{/* Content */}
|
||||
<div>
|
||||
<h2 className="font-serif text-4xl md:text-5xl text-[#222]">In Your Own Skin</h2>
|
||||
<p className="mt-6 text-gray-600 leading-relaxed">
|
||||
<strong>In Your Own Skin: Photographic Portraits Revealing Our Secrets</strong> is
|
||||
an antidote to human separation. Katheryn Trenshaw reveals our most powerful
|
||||
secrets in photographic autobiographies on skin.
|
||||
</p>
|
||||
<p className="mt-4 text-gray-600 leading-relaxed">
|
||||
Features 54 portraits from 40+ countries exploring themes of identity, belonging,
|
||||
and what it means to truly inhabit your own creative space.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col sm:flex-row gap-4">
|
||||
<Link
|
||||
href="/in-your-own-skin"
|
||||
className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors text-center"
|
||||
>
|
||||
Watch now
|
||||
</Link>
|
||||
{/* 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/dp/B07KQXNV1S"
|
||||
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 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors text-center"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue