Home page completed

2026-02-04 21:17:41 +00:00 · 2025-04-20 18:19:43 +02:00
parent 211cb3fc6f
commit 5eb60015cc
24 changed files with 1412 additions and 428 deletions
--- a/app/(website)/_components/FeaturedProductSection.tsx
+++ b/app/(website)/_components/FeaturedProductSection.tsx
@ -0,0 +1,108 @@
+// components/FeaturedProductSection.tsx
+import React from "react";
+import Image from "next/image";
+import Button from "@/components/ui/Button";
+import { FiCheckCircle, FiArrowRight } from "react-icons/fi"; // Example icons
+
+type FeaturePoint = {
+  text: string;
+};
+
+type FeaturedProductProps = {
+  eyebrow?: string;
+  title: string;
+  productName: string; // e.g., "OBSE"
+  description: string;
+  features: FeaturePoint[];
+  buttonText: string;
+  buttonHref: string;
+  imageUrl: string; // Path to product graphic/mockup
+  imageAlt: string;
+};
+
+const FeaturedProductSection: React.FC<FeaturedProductProps> = ({
+  eyebrow,
+  title,
+  productName,
+  description,
+  features,
+  buttonText,
+  buttonHref,
+  imageUrl,
+  imageAlt,
+}) => {
+  return (
+    // Use secondary background for visual separation
+    <section className="py-20 md:py-28 bg-secondary overflow-hidden">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row items-center gap-12 md:gap-16 lg:gap-20">
+          {/* Text Content Area (Takes up half on desktop) */}
+          <div className="md:w-1/2 text-center md:text-left">
+            {eyebrow && (
+              <p className="text-sm font-semibold uppercase tracking-wider text-primary mb-3">
+                {eyebrow}
+              </p>
+            )}
+            {/* Main title uses foreground color */}
+            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-foreground">
+              {title} <span className="text-primary">{productName}</span>
+            </h2>
+            {/* Description uses muted foreground */}
+            <p className="text-lg text-muted-foreground mb-6">{description}</p>
+            {/* Feature List */}
+            <ul className="space-y-3 mb-8 text-left">
+              {" "}
+              {/* Ensure list is left-aligned */}
+              {features.map((feature, index) => (
+                <li key={index} className="flex items-start">
+                  <FiCheckCircle className="w-5 h-5 text-primary mr-3 mt-1 flex-shrink-0" />
+                  {/* Feature text uses muted foreground */}
+                  <span className="text-muted-foreground">{feature.text}</span>
+                </li>
+              ))}
+            </ul>
+            {/* Call to Action Button */}
+            <Button
+              href={buttonHref}
+              variant="primary"
+              size="lg"
+              className="group"
+            >
+              {buttonText}
+              <FiArrowRight className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
+            </Button>
+          </div>
+
+          {/* Image Area (Takes up half on desktop) */}
+          <div className="md:w-1/2 relative flex justify-center">
+            {/* Add perspective/shadow for visual lift */}
+            <div className="relative w-full max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-2xl overflow-hidden transform transition-transform duration-500 hover:scale-105">
+              {/* Apply subtle dark overlay on image if needed for contrast */}
+              {/* <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent dark:from-black/20 z-10"></div> */}
+              <Image
+                src={imageUrl}
+                alt={imageAlt}
+                width={600} // Adjust intrinsic size
+                height={450} // Adjust intrinsic size
+                layout="responsive" // Makes image scale
+                objectFit="cover" // Or 'contain' depending on image
+                className="relative z-0"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Example default data for OBSE
+export const defaultObseFeatures: FeaturePoint[] = [
+  { text: "Automate data extraction & analysis from bank statements." },
+  { text: "Reduce manual errors and increase processing speed." },
+  { text: "Gain deep insights into financial health and trends." },
+  { text: "Enhance fraud detection capabilities." },
+  { text: "Seamless integration with existing financial systems." },
+];
+
+export default FeaturedProductSection;