Consolidate header, add subscribe page, fix blog images, compress footer
- Merge two-bar header into single nav bar: remove social icons top bar, move search + cart icons next to hamburger menu - Add /subscribe page with email signup form - Fix blog images by restoring Squarespace CDN in next.config remotePatterns - Compress footer into 4-column link layout, remove logo block - Update Cynthia Trenshaw Poetry link to cynthiatrenshaw.com - Add local images for homepage, about, IYOS, and artwork pages - Add /wisdom-words page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
66454a4338
commit
6a0ebc2d29
|
|
@ -8,17 +8,38 @@ services:
|
|||
- NEXT_PUBLIC_PAYPAL_CLIENT_ID=AfQqEsrGHMOTawmNO_Sh1sEG-3lpqueUj3K5rAu0d0iKl0d_NTUZbalpujXPKYxa9QukJeFtmNF52hcY
|
||||
container_name: katheryn-frontend
|
||||
restart: unless-stopped
|
||||
env_file:
|
||||
- /opt/secrets/katheryn-website/.env
|
||||
environment:
|
||||
- NEXT_PUBLIC_DIRECTUS_URL=https://katheryn-cms.jeffemmett.com
|
||||
- DIRECTUS_API_TOKEN=katheryn-frontend-readonly-8591de0316ded82fab45328cf1e49cb1
|
||||
- DIRECTUS_INTERNAL_URL=http://katheryn-cms:8055
|
||||
- DIRECTUS_STORE_TOKEN=katheryn-store-backend-9f3a7c1d2e4b5608
|
||||
- NEXT_PUBLIC_PAYPAL_CLIENT_ID=AfQqEsrGHMOTawmNO_Sh1sEG-3lpqueUj3K5rAu0d0iKl0d_NTUZbalpujXPKYxa9QukJeFtmNF52hcY
|
||||
- PAYPAL_CLIENT_ID=AfQqEsrGHMOTawmNO_Sh1sEG-3lpqueUj3K5rAu0d0iKl0d_NTUZbalpujXPKYxa9QukJeFtmNF52hcY
|
||||
- PAYPAL_CLIENT_SECRET=EP8vrmH8vOLCOSfwX1tIZFLpHiPOz2r_XfVSdmWDYFY5BUBsMtGA1w8y2W5X4FwDgkm8eNlribaQW7O_
|
||||
- PAYPAL_MODE=sandbox
|
||||
- SMTP_HOST=mx.jeffemmett.com
|
||||
- SMTP_PORT=587
|
||||
- SMTP_USER=orders@katheryntrenshaw.com
|
||||
- SMTP_PASS=KT-orders-smtp-2026x9
|
||||
- SMTP_FROM=orders@katheryntrenshaw.com
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
# Staging
|
||||
- "traefik.http.routers.katheryn-staging.rule=Host(`katheryn-staging.jeffemmett.com`)"
|
||||
- "traefik.http.routers.katheryn-staging.entrypoints=web"
|
||||
- "traefik.http.services.katheryn-staging.loadbalancer.server.port=3000"
|
||||
# Production domains
|
||||
- "traefik.http.routers.katheryn-prod.rule=Host(`katheryntrenshaw.com`) || Host(`www.katheryntrenshaw.com`) || Host(`inyourownskin.org`) || Host(`www.inyourownskin.org`) || Host(`passionatepresence.org`) || Host(`www.passionatepresence.org`)"
|
||||
- "traefik.http.routers.katheryn-prod.entrypoints=web"
|
||||
- "traefik.http.routers.katheryn-prod.service=katheryn-staging"
|
||||
# ktrenshaw.com → 301 redirect to katheryntrenshaw.com
|
||||
- "traefik.http.routers.ktrenshaw-redirect.rule=Host(`ktrenshaw.com`) || Host(`www.ktrenshaw.com`)"
|
||||
- "traefik.http.routers.ktrenshaw-redirect.entrypoints=web"
|
||||
- "traefik.http.routers.ktrenshaw-redirect.middlewares=ktrenshaw-to-katheryn"
|
||||
- "traefik.http.routers.ktrenshaw-redirect.service=katheryn-staging"
|
||||
- "traefik.http.middlewares.ktrenshaw-to-katheryn.redirectregex.regex=^https?://(?:www\\.)?ktrenshaw\\.com(.*)"
|
||||
- "traefik.http.middlewares.ktrenshaw-to-katheryn.redirectregex.replacement=https://katheryntrenshaw.com$${1}"
|
||||
- "traefik.http.middlewares.ktrenshaw-to-katheryn.redirectregex.permanent=true"
|
||||
networks:
|
||||
- traefik-public
|
||||
- directus_katheryn-internal
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ const nextConfig: NextConfig = {
|
|||
{
|
||||
pathname: '/api/assets/**',
|
||||
},
|
||||
{
|
||||
pathname: '/images/**',
|
||||
},
|
||||
],
|
||||
remotePatterns: [
|
||||
{
|
||||
|
|
@ -20,19 +23,16 @@ const nextConfig: NextConfig = {
|
|||
port: '8055',
|
||||
pathname: '/assets/**',
|
||||
},
|
||||
// Squarespace CDN (blog images from original site export)
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images.squarespace-cdn.com',
|
||||
pathname: '/**',
|
||||
},
|
||||
{
|
||||
protocol: 'http',
|
||||
hostname: 'images.squarespace-cdn.com',
|
||||
pathname: '/**',
|
||||
},
|
||||
// YouTube thumbnails (for embeds)
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images-eu.ssl-images-amazon.com',
|
||||
hostname: 'i.ytimg.com',
|
||||
pathname: '/**',
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
|
|
@ -46,7 +46,7 @@ export default async function AboutPage() {
|
|||
{/* Image */}
|
||||
<div className="relative aspect-[3/4] bg-gray-100 overflow-hidden">
|
||||
<Image
|
||||
src="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1554298674802-URS0LU6GR1ASLE3RPUS7/Katheryn+Trenshaw+tree+blossom2-17.jpg?format=original"
|
||||
src="/images/about-katheryn-portrait.jpg"
|
||||
alt="Katheryn Trenshaw"
|
||||
fill
|
||||
className="object-cover"
|
||||
|
|
@ -201,7 +201,7 @@ export default async function AboutPage() {
|
|||
<p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-6">AS FEATURED IN</p>
|
||||
<div className="relative h-24 md:h-32">
|
||||
<Image
|
||||
src="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1526503000769-8Q3WLYWRWQO5NGX0L38Y/MediaBanner-1BW.png?format=original"
|
||||
src="/images/media-banner.png"
|
||||
alt="Media coverage"
|
||||
fill
|
||||
className="object-contain"
|
||||
|
|
|
|||
|
|
@ -4,9 +4,52 @@ import Image from 'next/image';
|
|||
|
||||
export const metadata: Metadata = {
|
||||
title: 'In Your Own Skin',
|
||||
description: 'A transformative program for creative self-discovery and personal expression',
|
||||
description: 'A worldwide art project inviting authenticity and happiness, connecting us all by revealing our hidden truths.',
|
||||
};
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "Oh God. Yes. Wow! What a film! This is deeply cooked human nourishment. Film as true art, as medicine for the soul.",
|
||||
author: "Susannah Darling Khan",
|
||||
role: "co-director The School of Movement Medicine",
|
||||
},
|
||||
{
|
||||
quote: "What a wonderful journey of a film. So deeply touching, life-affirming and heart-opening.",
|
||||
author: "Jackie Juno",
|
||||
role: "performance poet and author",
|
||||
},
|
||||
{
|
||||
quote: "In Your Own Skin is a moving innovative project that has the potential to make Katheryn Trenshaw a household name.",
|
||||
author: "Malcolm Stern",
|
||||
role: "psychotherapist, TV presenter, & author of The Courage to Love",
|
||||
},
|
||||
{
|
||||
quote: "Spellbinding.",
|
||||
author: "Lizzie Hubbard",
|
||||
role: "",
|
||||
},
|
||||
{
|
||||
quote: "\u2026An inspiring visual anthem to humanity.",
|
||||
author: "Jamie Catto",
|
||||
role: "musician and film-maker",
|
||||
},
|
||||
{
|
||||
quote: "Poignant, playful, powerful, piercing.",
|
||||
author: "Matt Harvey",
|
||||
role: "author, performer",
|
||||
},
|
||||
{
|
||||
quote: "Celebrates and reveals not just a biodiversity of people but the diversity within each person.",
|
||||
author: "Matt Harvey",
|
||||
role: "author, performer",
|
||||
},
|
||||
{
|
||||
quote: "A fascinating concept, beautifully realized.",
|
||||
author: "Starhawk",
|
||||
role: "author and filmmaker, The Fifth Sacred Thing",
|
||||
},
|
||||
];
|
||||
|
||||
export default function InYourOwnSkinPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
|
|
@ -23,110 +66,221 @@ export default function InYourOwnSkinPage() {
|
|||
</div>
|
||||
<div className="relative text-center px-4 py-20 max-w-4xl mx-auto">
|
||||
<h1 className="font-serif text-4xl md:text-6xl">In Your Own Skin</h1>
|
||||
<p className="mt-6 text-lg text-gray-700 max-w-2xl mx-auto">
|
||||
A transformative journey of creative self-discovery and personal expression
|
||||
<p className="mt-6 text-lg text-gray-700 max-w-2xl mx-auto italic">
|
||||
A worldwide art project inviting authenticity and happiness, connecting us all by revealing our hidden truths.
|
||||
</p>
|
||||
<h3 className="mt-6 text-xl font-semibold text-gray-800">
|
||||
What hidden truth would YOU share?
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video */}
|
||||
<div className="mx-auto max-w-4xl px-4 py-16">
|
||||
<div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
|
||||
<iframe
|
||||
className="absolute inset-0 w-full h-full"
|
||||
src="https://www.youtube.com/embed/ow02iHMtq6o"
|
||||
title="In Your Own Skin"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About the Project */}
|
||||
<div className="mx-auto max-w-3xl px-4 py-12">
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
In the film, video portraits capture the unique moment when a person shares a secret,
|
||||
summarized in a long-hidden word or phrase that is then painted onto their skin. Each of
|
||||
these powerful moments releases a generous contribution to the world, a buoyant reminder
|
||||
of living fully and the beauty and strength that comes from facing and embracing our
|
||||
vulnerability.
|
||||
</p>
|
||||
<hr className="my-8 border-gray-200" />
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
We would love to come and run Community Events — Screening with Q&A — in the works in your hood.
|
||||
</p>
|
||||
<p className="mt-4 text-gray-700 leading-relaxed">
|
||||
And we are running a series of “secret” screenings at the prestigious Rancho La Puerta
|
||||
in Baja California in 2026. Come join us in the sunshine and the Cuevas at Professor Park in Tecate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Testimonials */}
|
||||
<div className="bg-gray-50 py-16">
|
||||
<div className="mx-auto max-w-5xl px-4">
|
||||
<h2 className="font-serif text-3xl text-center mb-12">Testimonials</h2>
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
{testimonials.map((t, i) => (
|
||||
<blockquote key={i} className="bg-white p-6 border-l-4 border-gray-300">
|
||||
<p className="text-gray-700 italic">
|
||||
“{t.quote}”
|
||||
</p>
|
||||
<footer className="mt-4 text-sm text-gray-500">
|
||||
— {t.author}{t.role ? `, ${t.role}` : ''}
|
||||
</footer>
|
||||
</blockquote>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured Quote */}
|
||||
<div className="mx-auto max-w-3xl px-4 py-16 text-center">
|
||||
<blockquote className="font-serif text-2xl text-gray-700 italic leading-relaxed">
|
||||
“Katheryn Trenshaw’s In Your Own Skin Project confirms my faith in deep
|
||||
essential human beauty and the innate benevolence in us all. It is an inspiring visual
|
||||
anthem to humanity.”
|
||||
</blockquote>
|
||||
<p className="mt-4 text-gray-500">— Jamie Catto, musician and film-maker</p>
|
||||
</div>
|
||||
|
||||
{/* Origin Story */}
|
||||
<div className="bg-gray-50 py-16">
|
||||
<div className="mx-auto max-w-3xl px-4 space-y-6 text-gray-700 leading-relaxed">
|
||||
<p>
|
||||
Many years ago during a silent retreat I had an epiphany. I realized that the greatest
|
||||
treasure I hold is buried deep inside — the thing I least want anyone to know about.
|
||||
This ultimately birthed the <em>In Your Own Skin</em> Project.
|
||||
</p>
|
||||
<p>
|
||||
Social worker Brené Brown, along with neurobiologists and other researchers,
|
||||
discovered that if you want to look at happiness you need to look at shame. To help free
|
||||
myself and others from our shame, so we can live more authentic, resilient lives, I went
|
||||
out into the world, armed with body paints and video and still cameras, to record people
|
||||
discussing their hidden truths. I then painted that word onto their skin and photographed
|
||||
their portraits.
|
||||
</p>
|
||||
<p>
|
||||
While creating the project, I met with over 200 people from more than 30 countries and
|
||||
all walks of life. Each of these powerful moments releases a generous contribution to the
|
||||
world, a buoyant reminder of living fully and the beauty and strength that comes from
|
||||
facing and embracing our vulnerability. This in turn grows our intimacy and presence.
|
||||
</p>
|
||||
<p>
|
||||
Each photograph and recorded exchange documents a personal story that resonates across
|
||||
cultures. We find what we have in common, what makes us human.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Book Section */}
|
||||
<div className="mx-auto max-w-6xl px-4 py-16">
|
||||
<div className="grid gap-12 lg:grid-cols-2 items-center">
|
||||
<div className="relative aspect-[3/4] max-w-md mx-auto lg:mx-0">
|
||||
<Image
|
||||
src="/images/iyos-book-hands.jpg"
|
||||
alt="In Your Own Skin Book"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-serif text-3xl">The Book</h2>
|
||||
<p className="mt-6 text-gray-600 leading-relaxed">
|
||||
<em>In Your Own Skin</em> is a unique program designed to help you reconnect
|
||||
with your authentic creative self. Through a combination of art-making,
|
||||
reflective practices, and guided exploration, you'll discover new ways
|
||||
to express who you truly are.
|
||||
</p>
|
||||
<p className="mt-4 text-gray-600 leading-relaxed">
|
||||
This program is not about learning to draw or paint “correctly” –
|
||||
it's about finding your own visual language and using creativity as a
|
||||
tool for self-understanding and growth.
|
||||
</p>
|
||||
<a
|
||||
href="https://www.amazon.co.uk/dp/B07KQXNV1S"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-8 inline-block btn btn-primary"
|
||||
>
|
||||
Get the Book on Amazon
|
||||
{/* Endorsement Image */}
|
||||
<div className="mx-auto max-w-4xl px-4 py-16">
|
||||
<Image
|
||||
src="/images/lizzie-endorsement.png"
|
||||
alt="Endorsement from Lizzie Hubbard"
|
||||
width={800}
|
||||
height={400}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Artist Statement */}
|
||||
<div className="mx-auto max-w-3xl px-4 py-12 space-y-6 text-gray-700 leading-relaxed">
|
||||
<p>
|
||||
As an artist and an art therapist, I have specialised all of my professional life in the
|
||||
masks we wear and the taboos that no-one wants to speak about — what American writer
|
||||
Robert Bly calls “our shadow bags”. These more hidden aspects of ourselves hold
|
||||
great treasures and vitality when they are freed. We are a living paradox and the sooner we
|
||||
learn to dance with this, the sooner we can live more fully alive.
|
||||
</p>
|
||||
<p>
|
||||
The project is made up of hundreds of individual images but they are all part of one giant
|
||||
human poem — all unique, but all part of the same poem forest. In the 1950s, it was
|
||||
discovered that a variety of Aspen tree, the Pando, while it looks like tens of thousands
|
||||
of trunks and crowns, is actually one living organism — they all have the exactly the
|
||||
same DNA. So while we see them as many, they are actually one. Just like us.
|
||||
</p>
|
||||
<p>
|
||||
We are living in unprecedented times of political, economic, ecological, social and
|
||||
emotional transition. <em>In Your Own Skin</em> portraits and stories reveal a living
|
||||
transformative story in a world searching for hope, wisdom and resilience — what keeps
|
||||
us connected and whole from the inside out.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Depression Portrait */}
|
||||
<div className="mx-auto max-w-4xl px-4 py-12">
|
||||
<figure>
|
||||
<Image
|
||||
src="/images/depression-portrait.png"
|
||||
alt="Hanging larger than life banners available to hire as part of the In Your Own Skin project"
|
||||
width={800}
|
||||
height={800}
|
||||
className="w-full"
|
||||
/>
|
||||
<figcaption className="mt-3 text-center text-sm text-gray-500 italic">
|
||||
Hanging larger than life banners available to hire as part of the In Your Own Skin project
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{/* More Links & Videos */}
|
||||
<div className="mx-auto max-w-3xl px-4 py-12 space-y-4 text-gray-700 leading-relaxed">
|
||||
<p>A few more inspirations on In Your Own Skin:</p>
|
||||
<ul className="space-y-2 list-none">
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=HPR57Y_y1Ws" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
|
||||
Paradox talks about In Your Own Skin
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=qk0V-WbHWOM&t=15s" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
|
||||
Moa from Sweden
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/watch?v=uco_4XrJ5bk" target="_blank" rel="noopener noreferrer" className="text-blue-700 underline hover:text-blue-900">
|
||||
Juliet Russell on In Your Own Skin
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Ali Donkin Interview */}
|
||||
<div className="mx-auto max-w-4xl px-4 py-12">
|
||||
<div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
|
||||
<iframe
|
||||
className="absolute inset-0 w-full h-full"
|
||||
src="https://www.youtube.com/embed/5eKKYhG8CXU"
|
||||
title="In Your Own Skin Interview - Ali Donkin, Dartington's Film Programmer with Katheryn Trenshaw"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Endorsement */}
|
||||
<div className="bg-gray-50 py-16">
|
||||
<div className="mx-auto max-w-4xl px-4">
|
||||
<div className="relative">
|
||||
{/* Screening CTA */}
|
||||
<div className="mx-auto max-w-4xl px-4 py-12">
|
||||
<Link href="/contact">
|
||||
<figure>
|
||||
<Image
|
||||
src="/images/lizzie-endorsement.png"
|
||||
alt="Endorsement from Lizzie Hubbard"
|
||||
src="/images/iyos-asset-1.jpeg"
|
||||
alt="Schedule a screening party to celebrate unity in diversity and the wonder of being human."
|
||||
width={800}
|
||||
height={400}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Depression Portrait Section */}
|
||||
<div className="mx-auto max-w-6xl px-4 py-16">
|
||||
<div className="grid gap-12 lg:grid-cols-2 items-center">
|
||||
<div className="order-2 lg:order-1">
|
||||
<h2 className="font-serif text-3xl">Who Is This For?</h2>
|
||||
<ul className="mt-6 space-y-3 text-gray-600">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-gray-400">—</span>
|
||||
Anyone seeking a deeper connection with themselves
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-gray-400">—</span>
|
||||
Those who feel creatively blocked or disconnected
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-gray-400">—</span>
|
||||
People navigating life transitions or seeking clarity
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-gray-400">—</span>
|
||||
Creative souls wanting to explore new ways of expression
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="order-1 lg:order-2 relative aspect-square max-w-md mx-auto lg:mx-0">
|
||||
<Image
|
||||
src="/images/depression-portrait.png"
|
||||
alt="Self Portrait"
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption className="mt-3 text-center text-sm text-gray-500 italic">
|
||||
Schedule a screening party to celebrate unity in diversity and the wonder of being human.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="border-t border-gray-200 bg-white">
|
||||
<div className="mx-auto max-w-7xl px-4 py-16 text-center">
|
||||
<h3 className="font-serif text-2xl">Ready to Begin?</h3>
|
||||
<h3 className="font-serif text-2xl">Get Involved</h3>
|
||||
<p className="mt-4 text-gray-600">
|
||||
Get in touch to learn more about the program or book a session.
|
||||
Host a screening, commission a portrait, or get in touch to learn more.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/contact" className="btn btn-primary">
|
||||
Enquire About This Program
|
||||
Get in Touch
|
||||
</Link>
|
||||
<a
|
||||
href="https://www.amazon.co.uk/dp/B07KQXNV1S"
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default async function HomePage() {
|
|||
<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"
|
||||
src="/images/hero-katheryn.jpg"
|
||||
alt="Katheryn Trenshaw"
|
||||
fill
|
||||
className="object-cover object-[52%_53%]"
|
||||
|
|
@ -196,12 +196,12 @@ export default async function HomePage() {
|
|||
/* Static fallback - featured paintings from Squarespace */
|
||||
<div className="grid gap-8 grid-cols-1 md:grid-cols-2">
|
||||
{[
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1598803728300-94MWPCAF8LXZF2OB1K4Y/image-asset.jpeg', alt: 'Autumn Offerings' },
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636339005-KXP5FWW72I8KV6KNEPU8/%3Cuntitled%3EChoose+Love%2C+Choose+Life.jpg', alt: 'Choose Love, Choose Life' },
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636369170-918IHIE2QG2X8559QZI9/%3Cuntitled%3EKT1050--At_the_Stillpoint.jpg', alt: 'At the Stillpoint' },
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636398212-Z28TYI1OMR1O6LDO1B9R/%3Cuntitled%3EKT1283--Ecstasy+of+Belonging.jpg', alt: 'Ecstasy of Belonging' },
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636452434-S4AS1X4N6FW242BNPYSH/%3Cuntitled%3EKT1033--Births+Blessing+Way.jpg', alt: 'Birth\'s Blessing Way' },
|
||||
{ src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636538275-DBY1CPYS9K1IXM6D0FBK/%3Cuntitled%3ESpiralling+into+Starlight.jpg', alt: 'Spiralling into Starlight' },
|
||||
{ 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">
|
||||
|
|
@ -209,7 +209,7 @@ export default async function HomePage() {
|
|||
src={img.src}
|
||||
alt={img.alt}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
className="object-contain transition-transform duration-500 group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
priority={index < 2}
|
||||
/>
|
||||
|
|
@ -275,7 +275,7 @@ export default async function HomePage() {
|
|||
className="block"
|
||||
>
|
||||
<Image
|
||||
src="https://images-eu.ssl-images-amazon.com/images/I/51q58fdCgbL.jpg"
|
||||
src="/images/iyos-book-amazon.jpg"
|
||||
alt="In Your Own Skin Book"
|
||||
width={500}
|
||||
height={500}
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@ export default function ArtworkDetailClient({
|
|||
src={getAssetUrl(work.image, { width: 600, quality: 85, format: 'webp' })}
|
||||
alt={work.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
className="object-contain"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function SubscribePage() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// TODO: Connect to newsletter API
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||
<div className="text-center px-4 py-20">
|
||||
<h1 className="font-serif text-3xl">Thank You</h1>
|
||||
<p className="mt-4 text-gray-600">
|
||||
You've been added to the mailing list. Look out for updates soon.
|
||||
</p>
|
||||
<a href="/" className="mt-8 inline-block text-sm underline underline-offset-4 hover:no-underline">
|
||||
Return Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white pt-24">
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="mx-auto max-w-7xl px-4 py-16 text-center">
|
||||
<h1 className="font-serif text-4xl md:text-5xl">Subscribe</h1>
|
||||
<p className="mt-4 text-gray-600">
|
||||
Stay connected with updates on new work, exhibitions, and events
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-xl px-4 py-16">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm text-gray-600 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="Your email address"
|
||||
className="w-full border border-gray-300 px-4 py-3 text-sm focus:border-gray-900 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gray-900 px-6 py-4 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
No spam, unsubscribe anytime.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { Metadata } from 'next';
|
||||
import Image from 'next/image';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Wisdom Words | Katheryn Trenshaw',
|
||||
description: 'A collection of wisdom quotes and visual inspirations from the In Your Own Skin project.',
|
||||
};
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
export default function WisdomWordsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white pt-24">
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="mx-auto max-w-7xl px-4 py-16 text-center">
|
||||
<h1 className="font-serif text-4xl md:text-5xl text-[#222]">Wisdom Words</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-6xl px-4 py-16">
|
||||
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{wisdomImages.map((img, i) => (
|
||||
<div key={i} className="bg-gray-100">
|
||||
<Image
|
||||
src={img.src}
|
||||
alt={img.alt}
|
||||
width={600}
|
||||
height={600}
|
||||
className="w-full h-auto"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@ export function ArtworkCard({
|
|||
alt={artwork.title}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 50vw"
|
||||
className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.05]"
|
||||
className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.05]"
|
||||
priority={priority}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-gray-200 bg-white">
|
||||
{/* Newsletter */}
|
||||
<div className="border-b border-gray-200">
|
||||
<div className="mx-auto max-w-7xl px-4 py-12 text-center">
|
||||
<h3 className="font-serif text-2xl">Stay Connected</h3>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
Subscribe for updates on new work, exhibitions, and events
|
||||
</p>
|
||||
<form className="mx-auto mt-6 flex max-w-md gap-2">
|
||||
<div className="mx-auto max-w-7xl px-4 py-8 text-center">
|
||||
<h3 className="font-serif text-xl">Stay Connected</h3>
|
||||
<form className="mx-auto mt-4 flex max-w-md gap-2">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
|
|
@ -28,85 +24,50 @@ export function Footer() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main footer */}
|
||||
<div className="mx-auto max-w-7xl px-4 py-12">
|
||||
<div className="grid gap-8 md:grid-cols-4">
|
||||
{/* Brand */}
|
||||
<div className="md:col-span-2">
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="Katheryn Trenshaw"
|
||||
width={180}
|
||||
height={50}
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<p className="mt-4 max-w-md text-sm text-gray-600">
|
||||
Passionate Presence Center for Creative Expression.
|
||||
Artist, teacher, and facilitator offering transformative
|
||||
experiences through art and personal development.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
{/* Links + copyright */}
|
||||
<div className="mx-auto max-w-7xl px-4 py-8">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-6 text-sm text-gray-600 md:grid-cols-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium uppercase tracking-wider">Explore</h4>
|
||||
<ul className="mt-4 space-y-2 text-sm text-gray-600">
|
||||
<li>
|
||||
<Link href="/store" className="hover:text-gray-900">Store</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/events" className="hover:text-gray-900">Events</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/in-your-own-skin" className="hover:text-gray-900">In Your Own Skin</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about" className="hover:text-gray-900">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="hover:text-gray-900">Contact</Link>
|
||||
</li>
|
||||
<h4 className="text-xs font-medium uppercase tracking-wider text-gray-900">Explore</h4>
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
<li><Link href="/blog" className="hover:text-gray-900">Blog</Link></li>
|
||||
<li><Link href="/store" className="hover:text-gray-900">Store</Link></li>
|
||||
<li><Link href="/events" className="hover:text-gray-900">Events</Link></li>
|
||||
<li><Link href="/gallery" className="hover:text-gray-900">Gallery</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium uppercase tracking-wider">Connect</h4>
|
||||
<ul className="mt-4 space-y-2 text-sm text-gray-600">
|
||||
<li>
|
||||
<a href="mailto:post@ktrenshaw.com" className="hover:text-gray-900">
|
||||
Email
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/katheryn_trenshaw" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
|
||||
Instagram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
|
||||
YouTube
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
|
||||
Facebook
|
||||
</a>
|
||||
</li>
|
||||
<h4 className="text-xs font-medium uppercase tracking-wider text-gray-900">Projects</h4>
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
<li><Link href="/in-your-own-skin" className="hover:text-gray-900">In Your Own Skin</Link></li>
|
||||
<li><Link href="/breaking-the-silence" className="hover:text-gray-900">Breaking The Silence</Link></li>
|
||||
<li><a href="https://cynthiatrenshaw.com" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">Cynthia Trenshaw Poetry</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-medium uppercase tracking-wider text-gray-900">Work With Me</h4>
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
<li><Link href="/passionate-presence-centre" className="hover:text-gray-900">Passionate Presence Centre</Link></li>
|
||||
<li><Link href="/consulting" className="hover:text-gray-900">Consulting</Link></li>
|
||||
<li><Link href="/1to1" className="hover:text-gray-900">1-to-1 Sessions</Link></li>
|
||||
<li><Link href="/about" className="hover:text-gray-900">About</Link></li>
|
||||
<li><Link href="/contact" className="hover:text-gray-900">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-medium uppercase tracking-wider text-gray-900">Connect</h4>
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
<li><a href="mailto:post@ktrenshaw.com" className="hover:text-gray-900">Email</a></li>
|
||||
<li><a href="https://instagram.com/katheryn_trenshaw" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">Instagram</a></li>
|
||||
<li><a href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">YouTube</a></li>
|
||||
<li><a href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">Facebook</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="mt-12 border-t border-gray-200 pt-8 text-center text-xs text-gray-500">
|
||||
<p>
|
||||
© {new Date().getFullYear()} Katheryn Trenshaw. All rights reserved.
|
||||
</p>
|
||||
<p className="mt-1">
|
||||
All images and writing are copyright protected.
|
||||
</p>
|
||||
<div className="mt-8 border-t border-gray-200 pt-6 text-center text-xs text-gray-500">
|
||||
© {new Date().getFullYear()} Katheryn Trenshaw. All rights reserved. All images and writing are copyright protected.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useCart } from '@/context/cart-context';
|
||||
|
|
@ -28,47 +27,9 @@ const navLinks = [
|
|||
{ href: '/about', label: 'About' },
|
||||
{ href: '/contact', label: 'Contact' },
|
||||
{ href: '/subscribe', label: 'Subscribe' },
|
||||
{ href: 'https://cynthia-staging.jeffemmett.com', label: 'Cynthia Trenshaw Poetry', external: true },
|
||||
{ href: 'https://cynthiatrenshaw.com', label: 'Cynthia Trenshaw Poetry', external: true },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
{ href: 'mailto:post@ktrenshaw.com', label: 'Email', icon: 'email' },
|
||||
{ href: 'https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA', label: 'YouTube', icon: 'youtube' },
|
||||
{ href: 'https://instagram.com/katheryn_trenshaw', label: 'Instagram', icon: 'instagram' },
|
||||
{ href: 'https://www.facebook.com/KatherynTrenshawRadicalWellbeing', label: 'Facebook', icon: 'facebook' },
|
||||
];
|
||||
|
||||
function SocialIcon({ icon }: { icon: string }) {
|
||||
switch (icon) {
|
||||
case 'email':
|
||||
return (
|
||||
<svg className="h-4 w-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>
|
||||
);
|
||||
case 'youtube':
|
||||
return (
|
||||
<svg className="h-4 w-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>
|
||||
);
|
||||
case 'instagram':
|
||||
return (
|
||||
<svg className="h-4 w-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>
|
||||
);
|
||||
case 'facebook':
|
||||
return (
|
||||
<svg className="h-4 w-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>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function Navigation() {
|
||||
const pathname = usePathname();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
|
@ -94,50 +55,6 @@ export function Navigation() {
|
|||
|
||||
return (
|
||||
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${headerStyle}`}>
|
||||
{/* Top bar with social icons */}
|
||||
<div className={`border-b ${isHomepage && !scrolled ? 'border-white/20' : 'border-gray-100'}`}>
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-2">
|
||||
{/* Social links */}
|
||||
<div className="flex items-center gap-4">
|
||||
{socialLinks.map((link) => (
|
||||
<a
|
||||
key={link.icon}
|
||||
href={link.href}
|
||||
target={link.href.startsWith('mailto') ? undefined : '_blank'}
|
||||
rel="noopener noreferrer"
|
||||
className="opacity-70 hover:opacity-100 transition-opacity"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<SocialIcon icon={link.icon} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search and Cart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="opacity-70 hover:opacity-100 transition-opacity" aria-label="Search">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleCart}
|
||||
className="relative opacity-70 hover:opacity-100 transition-opacity"
|
||||
aria-label="Shopping cart"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-black text-[10px] text-white">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main navigation */}
|
||||
<nav className={`border-b ${isHomepage && !scrolled ? 'border-white/20' : 'border-gray-100'}`}>
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
|
|
@ -198,12 +115,34 @@ export function Navigation() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 lg:hidden"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{/* Search and Cart */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="opacity-70 hover:opacity-100 transition-opacity" aria-label="Search">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleCart}
|
||||
className="relative opacity-70 hover:opacity-100 transition-opacity"
|
||||
aria-label="Shopping cart"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-black text-[10px] text-white">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
type="button"
|
||||
className="p-2 lg:hidden"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
{mobileMenuOpen ? (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
|
|
@ -214,7 +153,8 @@ export function Navigation() {
|
|||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export function WisdomWordsCarousel({ images, interval = 6000 }: WisdomWordsCaro
|
|||
<div className="relative">
|
||||
{/* Main Image Container */}
|
||||
<div className="relative max-w-4xl mx-auto">
|
||||
<div className="relative aspect-[16/9] overflow-hidden bg-gray-100">
|
||||
<div className="relative aspect-square md:aspect-[4/3] overflow-hidden bg-gray-100">
|
||||
<Image
|
||||
src={images[currentIndex].src}
|
||||
alt={images[currentIndex].alt}
|
||||
|
|
|
|||
Loading…
Reference in New Issue