jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update photo section with live feed of Pilates content from Instagram 

Replaces the PhotoGallery component with an embedded Instagram feed link.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 149ccd4a-2ccb-4219-9a7b-69a9690dd7ac
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/e0dea479-9582-4374-8f8f-2df2d82de2d0.jpg
This commit is contained in:
JeffEmmett 2025-06-14 01:53:31 +00:00
parent 202b32f6a2
commit ca79e978c0
1 changed files with 35 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
client/src/components/photo-gallery.tsx
View File

@ -1,58 +1,51 @@
import FadiaGardenImage from "@assets/fadia-garden_1749836720986.jpg";
import FadiaPoseImage from "@assets/fadia pose_1749838215401.jpg";
import FadiaBridgeImage from "@assets/fadia-bridge_1749838118611.jpg";
import FadiaBallImage from "@assets/fadia-ball_1749842241591.jpg";
import PilatesClassImage from "@assets/pilates_class_1749837680834.jpeg";
import PilatesCommunityImage from "@assets/pilates-community_1749840293503.jpeg";
import Fadia132Image from "@assets/Fadia-132.jpg";
import Fadia156Image from "@assets/Fadia-156.jpg";
import DSC01368Image from "@assets/DSC01368 2.jpeg";
import DSC01380Image from "@assets/DSC01380.jpeg";
import DSC01394Image from "@assets/DSC01394 2.jpeg";
import DSC01466Image from "@assets/DSC01466 2.jpeg";
export function PhotoGallery() {
const galleryImages = [
{ src: FadiaGardenImage, alt: "Outdoor Pilates session in the garden" },
{ src: FadiaPoseImage, alt: "Fadia demonstrating a Pilates pose" },
{ src: FadiaBridgeImage, alt: "Bridge pose demonstration" },
{ src: FadiaBallImage, alt: "Pilates ball exercise" },
{ src: PilatesClassImage, alt: "Group Pilates class" },
{ src: PilatesCommunityImage, alt: "Pilates community gathering" },
{ src: Fadia132Image, alt: "Fadia in a focused pose" },
{ src: Fadia156Image, alt: "Pilates stretching demonstration" },
{ src: DSC01368Image, alt: "Professional Pilates session" },
{ src: DSC01380Image, alt: "Pilates equipment demonstration" },
{ src: DSC01394Image, alt: "Advanced Pilates pose" },
{ src: DSC01466Image, alt: "Pilates class in session" }
];
return (
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-playfair font-semibold text-rose mb-4">
Gallery
Follow My Journey
</h2>
<p className="max-w-3xl mx-auto text-gray-600">
Discover the beauty of Pilates through moments captured in our classes and sessions
See the latest from my Pilates practice and teaching on Instagram
</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{galleryImages.map((image, index) => (
<div
key={index}
className="relative overflow-hidden rounded-lg aspect-square hover:transform hover:scale-105 transition-transform duration-300"
<div className="flex justify-center">
<div className="w-full max-w-4xl">
{/* Instagram Feed Embed */}
<div className="bg-gray-50 rounded-lg p-8 text-center">
<div className="mb-6">
<i className="fab fa-instagram text-6xl text-pink-500 mb-4"></i>
<h3 className="text-xl font-semibold text-gray-800 mb-2">@fadia.elgharib</h3>
<p className="text-gray-600 mb-6">Follow me on Instagram for daily inspiration, movement tips, and behind-the-scenes content from my classes.</p>
</div>
<a
href="https://www.instagram.com/fadia.elgharib/"
target="_blank"
rel="noopener noreferrer"
className="inline-block bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-3 px-8 rounded-full hover:from-purple-600 hover:to-pink-600 transition duration-300 shadow-lg"
>
<img
src={image.src}
alt={image.alt}
className="w-full h-full object-cover"
/>
View on Instagram
</a>
{/* Instagram embed placeholder - this would typically be replaced with actual Instagram embed code */}
<div className="mt-8 bg-white rounded-lg border border-gray-200 p-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{[1, 2, 3, 4, 5, 6].map((index) => (
<div key={index} className="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
<i className="fab fa-instagram text-3xl text-gray-400"></i>
</div>
))}
</div>
<p className="text-sm text-gray-500 mt-4">
Instagram feed will display here. For the best experience, visit my Instagram profile directly.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);