diff --git a/app/(website)/_components/ClientLogosSection.tsx b/app/(website)/_components/ClientLogosSection.tsx index 8555a1a..61e9b57 100644 --- a/app/(website)/_components/ClientLogosSection.tsx +++ b/app/(website)/_components/ClientLogosSection.tsx @@ -1,84 +1,115 @@ // components/ClientLogosSection.tsx import React from "react"; -import Image from "next/image"; // For actual logos -import { FaBuilding, FaCar, FaLaptopCode, FaUsers } from "react-icons/fa"; // For placeholders +import Image from "next/image"; -// Define structure for client data (adapt as needed) +// Define structure for client data - focusing on logos now type Client = { name: string; - logoUrl?: string; // URL to actual logo image - icon?: React.ElementType; // Placeholder icon component + logoUrl: string; // Expecting actual logo URLs now }; type ClientLogosSectionProps = { title: string; description?: string; clients: Client[]; + /** Control animation speed (lower number = faster). Default: 40s */ + speed?: number; + /** Size of the square background container in pixels. Default: 120 */ + squareSize?: number; }; const ClientLogosSection: React.FC = ({ title, description, - clients, + clients = [], // Default to empty array + speed = 50, //Default speed in seconds for one full cycle + squareSize = 120, // Default size for the square container (e.g., 120px) }) => { + // Need at least one client to render the marquee + if (clients.length === 0) { + return null; // Or render a placeholder message if preferred + } + + // Duplicate the clients for a seamless loop effect + const extendedClients = [...clients, ...clients]; + + const squareDim = `${squareSize}px`; // Convert size to string for inline style + const padding = Math.round(squareSize / 6); // Calculate padding based on size (adjust divisor as needed) + const paddingDim = `${padding}px`; + return ( - // Use semantic background -
+
- {" "} - {/* Use container */} - {/* Use semantic foreground */}

{title}

- {/* TODO: Implement Auto-Sliding Panel (e.g., using Swiper.js or Embla Carousel) */} -
- {" "} - {/* Adjust opacity */} - {clients.map((client, index) => ( +
+ + {/* Marquee container - group allows pausing animation on hover */} +
+ {/* Inner container that will animate */} +
+ {extendedClients.map((client, index) => (
- {client.logoUrl ? ( + {/* Square Background Container */} +
{`${client.name} - ) : client.icon ? ( - // Use semantic muted foreground for icons, primary on hover - React.createElement(client.icon, { - className: - "text-5xl text-muted-foreground/80 hover:text-primary transition-colors", - }) - ) : ( - {client.name} // Fallback text - )} +
))}
- {description && ( -

+ + {/* Optional: Add fade effect at the edges */} +

+
+
+ + {description && ( +
+

{description}

- )} -
+
+ )}
); }; -// Example default data matching the original page (using placeholders) export const defaultClients: Client[] = [ - { name: "Financial Services Client", icon: FaBuilding }, - { name: "Automotive Client", icon: FaCar }, - { name: "Tech Industry Client", icon: FaLaptopCode }, - { name: "Generic Client 1", icon: FaUsers }, - { name: "Generic Client 2", icon: FaBuilding }, + { name: "ABSA", logoUrl: "/images/absa.png" }, + { name: "SYBRIN", logoUrl: "/images/sybrin.svg" }, + { name: "SASOL", logoUrl: "/images/sasol.png" }, + { name: "JACARANDA", logoUrl: "/images/jacaranda.png" }, + { name: "SALESFORCE", logoUrl: "/images/salesforce.png" }, + { name: "BCX", logoUrl: "/images/bcx.png" }, ]; export default ClientLogosSection; diff --git a/app/(website)/about/page.tsx b/app/(website)/about/page.tsx index a067af8..2883a63 100644 --- a/app/(website)/about/page.tsx +++ b/app/(website)/about/page.tsx @@ -16,32 +16,32 @@ import { FaProjectDiagram, } from "react-icons/fa"; -const leadershipTeam = [ - { - id: 1, - name: "Michael Shapiro", - title: "Managing Director", - imageUrl: "/images/profile1.jpg", - bio: "A seasoned leader and innovator with over 25 years of experience, driving strategic growth and fostering a culture of excellence within OMS.", - linkedinUrl: "#", - }, - { - id: 2, - name: "Gareth Corbishley", - title: "Director", - imageUrl: "/images/profile2.jpg", - bio: "Expert in operational efficiency and technological implementation, ensuring seamless project delivery and client satisfaction.", - linkedinUrl: "#", - }, - { - id: 3, - name: "Darryl Govender", - title: "Director", - imageUrl: "/images/profile3.jpg", - bio: "Specializes in aligning cutting-edge technology solutions with complex business needs to unlock transformative results.", - linkedinUrl: "#", - }, -]; +// const leadershipTeam = [ +// { +// id: 1, +// name: "Michael Shapiro", +// title: "Managing Director", +// imageUrl: "/images/profile1.jpg", +// bio: "A seasoned leader and innovator with over 25 years of experience, driving strategic growth and fostering a culture of excellence within OMS.", +// linkedinUrl: "#", +// }, +// { +// id: 2, +// name: "Gareth Corbishley", +// title: "Director", +// imageUrl: "/images/profile2.jpg", +// bio: "Expert in operational efficiency and technological implementation, ensuring seamless project delivery and client satisfaction.", +// linkedinUrl: "#", +// }, +// { +// id: 3, +// name: "Darryl Govender", +// title: "Director", +// imageUrl: "/images/profile3.jpg", +// bio: "Specializes in aligning cutting-edge technology solutions with complex business needs to unlock transformative results.", +// linkedinUrl: "#", +// }, +// ]; const coreValues = [ { @@ -187,7 +187,7 @@ export default function AboutUsPage() {
{/* Replace with a relevant, high-quality image representing innovation or teamwork */} Team collaborating on innovative solutions {/* Replace with an image representing partnership or client collaboration */} Client partnership and collaboration
- {/* Section 9: Our Leadership Team */} + {/* Section 9: Our Leadership Team
@@ -459,15 +459,12 @@ export default function AboutUsPage() {
- {/* Added justify-center */} {leadershipTeam.map((member) => (
- {/* Added max-width and mx-auto for centering if fewer than 3 items */}
- {/* Slightly taller image */} {`Photo - {/* Using a simple text link for cleanliness */} Connect on LinkedIn )} @@ -505,9 +501,9 @@ export default function AboutUsPage() {
))}
- {/* Button removed as requested */}
+ */} {/* Section 10: Commitment to Impact (Optional, but adds value) */}

- Optical Bank Statement Extractor (OBSE) is an advanced OCR and + Optimised Bank Statement Extractor (OBSE) is an advanced OCR and data aggregation platform designed specifically for the South African financial landscape. It seamlessly extracts comprehensive, accurate data from any bank statement (individual @@ -364,7 +364,7 @@ export default function ObsePage() {

{/* Placeholder for UI Screenshot */} OBSE Upload Interface {/* Placeholder for Dashboard Example */} OBSE Dashboard Insights + {/* 1. Hero Section */} +
+
+
+

+ Tailored IT Services & Solutions +

+

+ Owethu Managed Services empowers businesses through innovative + technology solutions, strategic consulting, flexible resource + augmentation, and specialized product offerings. +

+ + Explore Our Services + +
+
+ + {/* 2. Core Service Areas Section */} +
+
+
+

+ Our Expertise, Your Advantage +

+

+ We offer a comprehensive suite of services designed to address + your specific IT needs and drive business growth. +

+
+
+ {serviceAreas.map((service) => ( +
+
+ {`${service.title} +
+
+
+ +

+ {service.title} +

+
+

+ {service.description} +

+ + {service.linkText} + +
+
+ ))} +
+
+
+ + {/* 3. Our Approach Section */} +
+
+
+

+ How We Deliver Excellence +

+

+ Our methodology ensures collaboration, precision, and impactful + results tailored to your project needs. +

+
+
+ {ourApproachItems.map((item) => ( +
+ +

+ {item.title} +

+

+ {item.description} +

+
+ ))} +
+
+
+ + {/* 4. Industry Expertise Snippet (Optional) */} +
+
+ +

+ Serving Diverse Industries +

+

+ We apply our technical expertise across various sectors, + understanding the unique challenges and opportunities within each. + Key areas include Financial Services, Automotive, Technology, and + more. +

+ + Learn More About Our Industry Focus{" "} + + +
+
+ + {/* 5. Call to Action (CTA) Section */} +
+
+

+ Let's Build Your Solution +

+

+ Ready to discuss how OMS can help you achieve your technology goals? + Contact us today for a consultation. +

+ + Get in Touch + +
+
+
+ ); +} diff --git a/app/(website)/services/re b/app/(website)/services/re deleted file mode 100644 index e69de29..0000000 diff --git a/app/(website)/services/resource-augmentation/page.tsx b/app/(website)/services/resource-augmentation/page.tsx index a7b93ca..cc92e77 100644 --- a/app/(website)/services/resource-augmentation/page.tsx +++ b/app/(website)/services/resource-augmentation/page.tsx @@ -363,17 +363,10 @@ const methodologies = [ ]; const clientLogos = [ - { src: "/clients/absa-logo.png", alt: "Absa Bank Logo" }, // Replace with actual paths - { src: "/clients/african-bank-logo.png", alt: "African Bank Logo" }, - { src: "/clients/sybrin-logo.png", alt: "Sybrin Logo" }, - { src: "/clients/telkom-logo.png", alt: "Telkom Logo" }, - { src: "/clients/fnb-logo.png", alt: "FNB Logo" }, - { src: "/clients/bcx-logo.png", alt: "BCX Logo" }, - { - src: "/clients/ssd-logo.png", - alt: "Shapiro Shaik Defries & Associates Logo", - }, - { src: "/clients/flysafair-logo.png", alt: "FlySafair Logo" }, + { src: "/images/absa.png", alt: "Absa Bank Logo" }, // Replace with actual paths + { src: "/images/sybrin.svg", alt: "Sybrin Logo" }, + { src: "/images/bcx.png", alt: "BCX Logo" }, + { src: "/images/sasol.png", alt: "Sasol Logo" }, ]; // --- Page Component --- @@ -517,7 +510,7 @@ export default function ResourceAugmentationPage() {
{/* Placeholder Image - Replace with a relevant image (e.g., team collaboration, office) */} OMS Team Collaboration + + + + + + + + diff --git a/public/images/obse.svg b/public/images/obse.svg new file mode 100644 index 0000000..6b20e01 --- /dev/null +++ b/public/images/obse.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/images/salesforce.png b/public/images/salesforce.png new file mode 100644 index 0000000..71b5f34 Binary files /dev/null and b/public/images/salesforce.png differ diff --git a/public/images/sasol.png b/public/images/sasol.png new file mode 100644 index 0000000..d0f1ea7 Binary files /dev/null and b/public/images/sasol.png differ diff --git a/public/images/sybrin.svg b/public/images/sybrin.svg new file mode 100644 index 0000000..888b42f --- /dev/null +++ b/public/images/sybrin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/team.svg b/public/images/team.svg new file mode 100644 index 0000000..42e8737 --- /dev/null +++ b/public/images/team.svg @@ -0,0 +1,9 @@ + + + + + + + + +