Merge version_3_1782645083618 into main

Merge version_3_1782645083618 into main

src/App.tsx

@@ -2,11 +2,15 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import ProductsPage from "@/pages/ProductsPage";
+import AboutPage from "@/pages/AboutPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/products" element={<ProductsPage />} />
+        <Route path="/about" element={<AboutPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -27,7 +27,11 @@ export default function Layout() {
   },
   {
     "name": "Metrics",    "href": "#metrics"
-  }
+  },
+  { name: "Products", href: "/products" },
+  { name: "About", href: "/about" },
+
+
 ];
 
   return (

src/pages/AboutPage.tsx

@@ -0,0 +1,137 @@
+import { routes } from "@/routes";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Card from "@/components/ui/Card";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import Button from "@/components/ui/Button";
+import NoiseBackground from "@/components/ui/NoiseBackground";
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-svh bg-background text-foreground">
+      <NoiseBackground position="fixed" />
+
+      <main className="relative z-10">
+        {/* Community & Foundation */}
+        <section className="w-content-width mx-auto">
+          <ScrollReveal variant="fade-blur">
+            <div className="flex flex-col">
+              <div className="flex flex-col items-center text-center">
+                <TextAnimation text="Community" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold mb-6" />
+                <p className="text-lg md:text-xl text-accent max-w-content-width leading-relaxed">
+                  We are deeply rooted in the communities we serve. Our commitment goes beyond banking; we actively participate in local initiatives, sponsor community events, and volunteer our time to make a positive impact where our members live and work.
+                </p>
+              </div>
+              <div className="flex flex-col items-center text-center">
+                <TextAnimation text="Foundation" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold mb-6" />
+                <p className="text-lg md:text-xl text-accent max-w-content-width leading-relaxed">
+                  The Suncoast Foundation was established to support the educational, health, and emotional well-being of children in our communities. Through scholarships, grants, and partnerships, we strive to create a brighter future for the next generation.
+                </p>
+              </div>
+            </div>
+          </ScrollReveal>
+        </section>
+
+        {/* The Suncoast Difference & Membership Perks */}
+        <section className="bg-foreground/5">
+          <div className="w-content-width mx-auto flex flex-col">
+            <div className="flex flex-col">
+              <TextAnimation text="The Suncoast Difference" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+              <GridOrCarousel>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Member-Owned</h3>
+                  <p className="text-accent leading-relaxed">As a not-for-profit cooperative, our earnings are returned to you in the form of lower rates on loans, higher yields on savings, and fewer fees.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Local Decision Making</h3>
+                  <p className="text-accent leading-relaxed">Our decisions are made locally by people who understand the unique needs of our community, ensuring faster and more personalized service.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Financial Education</h3>
+                  <p className="text-accent leading-relaxed">We empower our members with the knowledge and tools they need to make informed financial decisions and achieve their goals.</p>
+                </Card>
+              </GridOrCarousel>
+            </div>
+
+            <div className="flex flex-col">
+              <TextAnimation text="Membership Perks" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+              <GridOrCarousel>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Exclusive Discounts</h3>
+                  <p className="text-accent leading-relaxed">Enjoy special discounts on entertainment, travel, and everyday purchases just for being a member.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Free Financial Counseling</h3>
+                  <p className="text-accent leading-relaxed">Access complimentary, confidential financial counseling to help you budget, manage debt, and plan for the future.</p>
+                </Card>
+                <Card className="p-8 card bg-card border-border text-foreground flex flex-col gap-4 rounded-xl">
+                  <h3 className="text-2xl font-semibold">Nationwide Access</h3>
+                  <p className="text-accent leading-relaxed">Access your money anywhere with our extensive network of surcharge-free ATMs and shared branching locations.</p>
+                </Card>
+              </GridOrCarousel>
+            </div>
+          </div>
+        </section>
+
+        {/* Diversity, Equity and Inclusion & Green Sunco */}
+        <section className="w-content-width mx-auto flex flex-col">
+          <ScrollReveal variant="slide-up">
+            <div className="flex flex-col md:flex-row items-center">
+              <div className="flex-1 flex flex-col items-start gap-6">
+                <TextAnimation text="Diversity, Equity and Inclusion" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold" />
+                <p className="text-lg text-accent leading-relaxed">
+                  We believe that our differences make us stronger. We are committed to fostering an inclusive environment where all members and employees feel valued, respected, and empowered to reach their full potential.
+                </p>
+                <Button text="Learn More" variant="secondary" />
+              </div>
+              <div className="flex-1 w-full aspect-video rounded-xl overflow-hidden card">
+                <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&q=80" alt="Diverse team collaborating" className="w-full h-full object-cover" />
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <ScrollReveal variant="slide-up">
+            <div className="flex flex-col md:flex-row-reverse items-center">
+              <div className="flex-1 flex flex-col items-start gap-6">
+                <TextAnimation text="Green Sunco" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold" />
+                <p className="text-lg text-accent leading-relaxed">
+                  Protecting our environment is a core value. Through our Green Sunco initiatives, we implement sustainable practices in our operations, support eco-friendly community projects, and offer green loans to help our members reduce their carbon footprint.
+                </p>
+                <Button text="Our Green Initiatives" variant="secondary" />
+              </div>
+              <div className="flex-1 w-full aspect-video rounded-xl overflow-hidden card">
+                <img src="https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&q=80" alt="Solar panels and green energy" className="w-full h-full object-cover" />
+              </div>
+            </div>
+          </ScrollReveal>
+        </section>
+
+        {/* Suncoast Leadership */}
+        <section className="bg-foreground/5">
+          <div className="w-content-width mx-auto flex flex-col">
+            <TextAnimation text="Suncoast Leadership" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-center" />
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+              {[
+                { name: "Jane Doe", role: "Chief Executive Officer", img: "https://i.pravatar.cc/300?u=jane" },
+                { name: "John Smith", role: "Chief Financial Officer", img: "https://i.pravatar.cc/300?u=john" },
+                { name: "Alice Johnson", role: "Chief Operations Officer", img: "https://i.pravatar.cc/300?u=alice" },
+                { name: "Robert Davis", role: "Chief Information Officer", img: "https://i.pravatar.cc/300?u=robert" }
+              ].map((leader) => (
+                <Card key={leader.name} className="overflow-hidden card bg-card border-border text-foreground flex flex-col rounded-xl">
+                  <div className="aspect-square w-full">
+                    <img src={leader.img} alt={leader.name} className="w-full h-full object-cover" />
+                  </div>
+                  <div className="p-6 text-center flex flex-col gap-1">
+                    <h3 className="text-xl font-semibold">{leader.name}</h3>
+                    <p className="text-sm text-accent">{leader.role}</p>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+
+    </div>
+  );
+}

src/pages/ProductsPage.tsx

@@ -0,0 +1,15 @@
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+
+export default function ProductsPage() {
+  return (
+    <>
+      <div data-webild-section="FeaturesAlternatingSplit"><FeaturesAlternatingSplit
+        tag="Our Products"
+        title="Solutions for Every Stage of Life"
+        description="As a not-for-profit credit union, we offer lower rates, higher savings, and genuine support across all our banking products."
+        primaryButton={{"text":"Become a Member","href":"/join"}}
+        items={[{"title":"Checking & Savings","description":"Build your financial foundation with high-yield savings and fee-free checking accounts designed for your everyday needs.","imageSrc":"https://img.freepik.com/free-photo/young-woman-using-mobile-phone-while-holding-credit-card_23-2148175593.jpg","primaryButton":{"text":"Explore Accounts","href":"/checking-savings"}},{"title":"Loans & Credit Cards","description":"Finance your dreams with our low-rate auto loans, flexible mortgages, and rewards credit cards.","imageSrc":"https://img.freepik.com/free-photo/couple-meeting-with-financial-advisor_23-2148175620.jpg","primaryButton":{"text":"View Rates","href":"/loans-credit"}},{"title":"Retirement & Investing","description":"Plan for tomorrow with expert guidance, IRAs, and investment portfolios tailored to your long-term goals.","imageSrc":"https://img.freepik.com/free-photo/senior-couple-looking-laptop-together_23-2148175645.jpg","primaryButton":{"text":"Start Investing","href":"/retirement-investing"}},{"title":"Insurance Products","description":"Protect what matters most with comprehensive auto, home, and life insurance policies at member-exclusive rates.","imageSrc":"https://img.freepik.com/free-photo/family-with-house-model-keys_23-2148175660.jpg","primaryButton":{"text":"Get a Quote","href":"/insurance"}}]}
+      /></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,6 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/products', label: 'Products', pageFile: 'ProductsPage' },
+  { path: '/about', label: 'About', pageFile: 'AboutPage' },
 ];