bender/14c381f6-6694-4bc4-87c5-2c08eff34abe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1782645083618 into main #3

Merged
bender merged 2 commits from version_3_1782645083618 into main 2026-06-28 11:14:46 +00:00
Conversation 0 Commits 2 Files Changed 4 +142
4 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -3,12 +3,14 @@ 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>
);

2
src/components/Layout.tsx
View File

@@ -29,6 +29,8 @@ export default function Layout() {
"name": "Metrics", "href": "#metrics"
},
{ name: "Products", href: "/products" },
{ name: "About", href: "/about" },
];

137
src/pages/AboutPage.tsx Normal file
View File

@@ -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>
);
}

1
src/routes.ts
View File

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