Merge pull request #2 from Jeff-Emmett/new-website

website updates

client/src/components/about/about-section.tsx

@@ -18,7 +18,7 @@ export function AboutSection() {
           
           <div className="md:w-1/2">
             <div className="prose max-w-none">
-              <h3 className="text-2xl font-playfair font-semibold text-purple mb-4">My Pilates Story</h3>
+              <h3 className="text-3xl font-playfair font-semibold text-purple mb-4 text-center">My Pilates Story</h3>
               <p className="text-gray-600 mb-4">
                 I came to movement as a way to feel good in my body and begin healing emotions I hadn't yet processed. It started simply—with home yoga classes—and slowly turned into something much deeper.
               </p>

client/src/components/about/home-about-section.tsx

@@ -16,7 +16,7 @@ export function HomeAboutSection() {
           
           <div className="md:w-1/2">
             <div className="prose max-w-none">
-              <h3 className="text-2xl font-playfair font-semibold text-purple mb-4">Meet Fadia</h3>
+              <h3 className="text-3xl font-playfair font-semibold text-purple mb-6 text-center">Meet Fadia</h3>
               <p className="text-gray-600 mb-4">
                 Fadia is a certified Pilates instructor, former lawyer, and community builder with a passion for helping people connect with their bodies through mindful movement.
               </p>

client/src/components/classes/class-card.tsx

@@ -1,4 +1,5 @@
 import { Class } from "@shared/schema";
+import { Link } from "wouter";
 import FadiaGardenImage from "@assets/fadia-garden_1749836720986.jpg";
 import PilatesClassImage from "@assets/pilates_class_1749837680834.jpeg";
 import FadiaPrivateImage from "@assets/Fadia-7_1749842141071.jpg";
@@ -46,24 +47,46 @@ export function ClassCard({ classData }: ClassCardProps) {
     }
   };
 
+  // Get link based on class type
+  const getClassLink = () => {
+    switch (classData.classType) {
+      case "group": return "https://nuncenter.com/";
+      case "small-group": return "https://nuncenter.com/";
+      case "private": return "/contact";
+      case "online": return "https://www.momoyoga.com/pilates-with-fadia/schedule";
+      default: return "#";
+    }
+  };
+
+  // Determine if link should open in new tab
+  const shouldOpenNewTab = (classType: string) => {
+    return classType === "group" || classType === "small-group" || classType === "online";
+  };
+
+  const linkProps = shouldOpenNewTab(classData.classType) 
+    ? { href: getClassLink(), target: "_blank", rel: "noopener noreferrer" }
+    : { href: getClassLink() };
+
   return (
-    <div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105">
-      <img 
-        src={getClassImage()} 
-        alt={classData.name} 
-        className="w-full h-50 object-cover" 
-      />
-      <div className="p-4">
-        <div className="flex justify-between items-start mb-2">
-          <h3 className="font-playfair font-bold text-lg leading-tight">{classData.name}</h3>
-          <span className={`${badgeColor()} text-xs px-2 py-1 rounded-full font-semibold ml-2 flex-shrink-0`}>
-            {formatClassType(classData.classType)}
-          </span>
+    <a {...linkProps} className="block">
+      <div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-105">
+        <img 
+          src={getClassImage()} 
+          alt={classData.name} 
+          className="w-full h-48 object-cover" 
+        />
+        <div className="p-4">
+          <div className="flex justify-between items-start mb-2">
+            <h3 className="font-playfair font-bold text-lg leading-tight">{classData.name}</h3>
+            <span className={`${badgeColor()} text-xs px-2 py-1 rounded-full font-semibold ml-2 flex-shrink-0`}>
+              {formatClassType(classData.classType)}
+            </span>
+          </div>
+          <p className="text-gray-600 text-sm leading-snug">
+            {classData.description}
+          </p>
         </div>
-        <p className="text-gray-600 text-sm leading-snug">
-          {classData.description}
-        </p>
       </div>
-    </div>
+    </a>
   );
 }

client/src/components/home/feature-card.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-
-interface FeatureCardProps {
-  title: string;
-  description: string;
-  icon: string;
-  color: "teal" | "purple" | "rose";
-}
-
-export function FeatureCard({ title, description, icon, color }: FeatureCardProps) {
-  const colorMap = {
-    teal: "#0c8991",
-    purple: "#9D5E9B",
-    rose: "#B55076"
-  };
-  
-  return (
-    <div className="text-center p-8 transition duration-300 hover:shadow-md">
-      <i className={`fas ${icon} text-2xl`} style={{ color: colorMap[color] }}></i>
-      <h3 className="text-xl font-playfair font-semibold mt-4 mb-3">{title}</h3>
-      <p className="text-gray-600">{description}</p>
-    </div>
-  );
-}
-
-export function FeaturesSection() {
-  const features = [
-    {
-      title: "Balance",
-      description: "Find harmony between body and mind through mindful movement.",
-      icon: "fa-align-center",
-      color: "teal" as const,
-    },
-    {
-      title: "Strength",
-      description: "Build core power and muscular endurance through controlled exercises.",
-      icon: "fa-dumbbell",
-      color: "purple" as const,
-    },
-    {
-      title: "Flexibility",
-      description: "Enhance your range of motion and release tension throughout your body.",
-      icon: "fa-wind",
-      color: "rose" as const,
-    },
-  ];
-
-  return (
-    <section className="py-16 bg-purple">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-playfair font-semibold text-white mb-4">
-            Core Benefits
-          </h2>
-          <p className="text-white text-opacity-90 max-w-2xl mx-auto">
-            Experience the transformative power of Pilates through these foundational principles
-          </p>
-        </div>
-        
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 bg-white p-6">
-          {features.map((feature, index) => (
-            <FeatureCard key={index} {...feature} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

client/src/components/navigation/footer.tsx

@@ -126,7 +126,9 @@ export default function Footer() {
                 <ul className="space-y-3">
                   <li className="flex items-start">
                     <i className="fas fa-map-marker-alt mt-1 mr-2 text-white"></i>
-                    <span className="text-white text-opacity-70">Nun Center<br/>Zamalek, Cairo, Egypt</span>
+                    <a href="https://nuncenter.com/" target="_blank" rel="noopener noreferrer" className="text-white text-opacity-70 hover:text-white hover:text-opacity-100 transition duration-300">
+                      Nun Center<br/>Zamalek, Cairo, Egypt
+                    </a>
                   </li>
                   <li className="flex items-center">
                     <i className="fas fa-envelope mr-2 text-white"></i>

client/src/components/photo-gallery.tsx

@@ -1,24 +1,24 @@
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
-
-interface InstagramPost {
-  id: string;
-  media_type: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
-  media_url: string;
-  permalink: string;
-  caption?: string;
-  timestamp: string;
-}
+import { useEffect } from "react";
 
 export function PhotoGallery() {
-  const [showAllPosts, setShowAllPosts] = useState(false);
-
-  const { data: posts, isLoading, error } = useQuery<InstagramPost[]>({
-    queryKey: ['/api/instagram-feed'],
-    staleTime: 1000 * 60 * 30, // Cache for 30 minutes
-  });
-
-  const displayPosts = showAllPosts ? posts : posts?.slice(0, 6);
+  useEffect(() => {
+    // Load Curator.io script
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.charset = "UTF-8";
+    script.src = "https://cdn.curator.io/published/1964cded-8962-41c1-b7c1-d36f02707c7a.js";
+    
+    // Insert script before the closing body tag
+    document.body.appendChild(script);
+    
+    // Cleanup function to remove script when component unmounts
+    return () => {
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+    };
+  }, []);
 
   return (
     <section className="py-12 bg-white">
@@ -31,94 +31,10 @@ export function PhotoGallery() {
         
         <div className="flex justify-center">
           <div className="w-full max-w-4xl">
-            {isLoading && (
-              <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-200 rounded-lg animate-pulse"></div>
-                ))}
-              </div>
-            )}
-
-            {error && (
-              <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>
-                  <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>
-                  <a 
-                    href="https://www.instagram.com/fadia.elgharib/" 
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center px-6 py-3 bg-rose text-white font-semibold rounded-full hover:bg-opacity-90 transition duration-300"
-                  >
-                    <i className="fab fa-instagram mr-2"></i>
-                    Visit Instagram
-                  </a>
-                </div>
-              </div>
-            )}
-
-            {posts && posts.length > 0 && (
-              <div className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  {displayPosts?.map((post: InstagramPost) => (
-                    <a
-                      key={post.id}
-                      href={post.permalink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="group block aspect-square bg-gray-100 rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300"
-                    >
-                      {post.media_type === 'VIDEO' ? (
-                        <div className="relative w-full h-full">
-                          <video
-                            src={post.media_url}
-                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                            muted
-                            loop
-                            playsInline
-                            onMouseEnter={(e) => e.currentTarget.play()}
-                            onMouseLeave={(e) => e.currentTarget.pause()}
-                          />
-                          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-300 flex items-center justify-center">
-                            <i className="fas fa-play text-white text-2xl opacity-0 group-hover:opacity-80 transition-opacity duration-300"></i>
-                          </div>
-                        </div>
-                      ) : (
-                        <img
-                          src={post.media_url}
-                          alt={post.caption ? post.caption.substring(0, 100) + '...' : 'Instagram post'}
-                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                          loading="lazy"
-                        />
-                      )}
-                    </a>
-                  ))}
-                </div>
-
-                {posts.length > 6 && (
-                  <div className="text-center">
-                    <button
-                      onClick={() => setShowAllPosts(!showAllPosts)}
-                      className="px-6 py-3 bg-rose text-white font-semibold rounded-full hover:bg-opacity-90 transition duration-300"
-                    >
-                      {showAllPosts ? 'Show Less' : `View All ${posts.length} Posts`}
-                    </button>
-                  </div>
-                )}
-
-                <div className="text-center mt-8">
-                  <a 
-                    href="https://www.instagram.com/fadia.elgharib/" 
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center px-6 py-3 bg-rose text-white font-semibold rounded-full hover:bg-opacity-90 transition duration-300"
-                  >
-                    <i className="fab fa-instagram mr-2"></i>
-                    Follow on Instagram
-                  </a>
-                </div>
-              </div>
-            )}
+            {/* Curator.io Instagram Feed */}
+            <div id="curator-feed-default-feed-layout">
+              <a href="https://curator.io" target="_blank" className="crt-logo crt-tag">Powered by Curator.io</a>
+            </div>
           </div>
         </div>
       </div>

client/src/components/testimonials/testimonials-section.tsx

@@ -10,10 +10,10 @@ export function TestimonialsSection() {
       color: "teal",
     },
     {
-      quote: "I've seen incredible improvements in my posture and core strength since joining Fadia's classes. She truly understands how to help each individual.",
-      author: "Ahmed M.",
+      quote: "Fadia’s calm and soothingly cueing had me go through the flow steadily, challenging my muscles without even realizing and that felt great!",
+      author: "Sara from Cairo",
       memberSince: "",
-      initials: "AM",
+      initials: "SC",
       color: "purple",
     },
     {

client/src/pages/home-page.tsx

@@ -5,7 +5,6 @@ import { ClassesSection } from "@/components/classes/classes-section";
 import { TestimonialsSection } from "@/components/testimonials/testimonials-section";
 
 import { ContactSection } from "@/components/contact/contact-section";
-import { CTASection } from "@/components/home/cta-section";
 import { useEffect } from "react";
 
 export default function HomePage() {
@@ -47,7 +46,6 @@ export default function HomePage() {
       <HomeAboutSection />
       <TestimonialsSection />
       <ContactSection />
-      <CTASection />
     </main>
   );
 }