Add social links to Re Evolution Art section and new social connect section

- Re Evolution Art: replace generic Explore Events button with Instagram
  and Facebook Community buttons linking to @reevolutionart and FB group
- New SocialSection before footer with image grid carousel linking to
  @xhiva_art Instagram, plus Follow buttons for Instagram and Facebook

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-03 15:03:49 +00:00
parent 017a67e2a0
commit add2109e88
1 changed files with 89 additions and 4 deletions

View File

@ -374,10 +374,26 @@ function ReEvolutionSection() {
))}
</div>
<div className="flex justify-center mt-20">
<Link href="#" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
Explore Events
</Link>
{/* Social Links */}
<div className="flex justify-center gap-6 mt-16">
<a
href="https://www.instagram.com/reevolutionart"
target="_blank"
rel="noopener noreferrer"
className="btn-outline btn-outline-light"
style={{ fontFamily: "'Narrenschiff', sans-serif" }}
>
Instagram
</a>
<a
href="https://www.facebook.com/groups/383432167715274/"
target="_blank"
rel="noopener noreferrer"
className="btn-outline btn-outline-light"
style={{ fontFamily: "'Narrenschiff', sans-serif" }}
>
Facebook Community
</a>
</div>
</div>
</section>
@ -678,6 +694,74 @@ function ContactSection() {
);
}
// Social Connect Section
function SocialSection() {
const instagramPosts = [
{ image: '/images/art/sacred-geometry.jpg', alt: 'Sacred Geometry' },
{ image: '/images/art/goddess.webp?v=2', alt: 'Goddess' },
{ image: '/images/art/crystal-1.jpg', alt: 'Crystal Work' },
{ image: '/images/art/featured.jpg?v=2', alt: 'Featured Art' },
{ image: '/images/about/portrait-1.jpg', alt: 'Portrait' },
{ image: '/images/reevolution/dj-xhiva.jpg', alt: 'DJ XHIVA' },
];
return (
<section className="section bg-[var(--bg-cream)]">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
FOLLOW THE JOURNEY
</p>
<h2 className="text-4xl md:text-5xl font-light mb-6">
Connect on Socials
</h2>
<div className="divider"></div>
</div>
{/* Image Grid */}
<a
href="https://www.instagram.com/xhiva_art"
target="_blank"
rel="noopener noreferrer"
className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-10 group"
>
{instagramPosts.map((post, index) => (
<div key={index} className="relative aspect-square overflow-hidden rounded-lg">
<Image
src={post.image}
alt={post.alt}
fill
className="object-cover transition-all duration-500 group-hover:brightness-90"
style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
/>
</div>
))}
</a>
{/* Social Buttons */}
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<a
href="https://www.instagram.com/xhiva_art"
target="_blank"
rel="noopener noreferrer"
className="btn-filled"
>
Follow @xhiva_art on Instagram
</a>
<a
href="https://www.facebook.com/XimenaXhivart"
target="_blank"
rel="noopener noreferrer"
className="btn-outline"
>
Follow on Facebook
</a>
</div>
</div>
</section>
);
}
// Footer
function Footer() {
return (
@ -758,6 +842,7 @@ export default function Home() {
<AboutSection />
<WorkWithMeSection />
<ContactSection />
<SocialSection />
</main>
<Footer />
</>