diff --git a/app/page.tsx b/app/page.tsx index 29f3eed..0c75e5c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ import './HomePage.css'; import { Container } from 'react-bootstrap'; import HomeHero from '@/components/HomeHero'; +import TrustedBy from '@/components/TrustedBy'; import CustomButton from '@/components/CustomButton'; import CallToAction from '@/components/CallToAction'; import ChooseUs from '@/components/ChooseUs'; @@ -37,7 +38,6 @@ export default async function HomePage() { return ( <> -

@@ -62,6 +62,7 @@ export default async function HomePage() {

+ ); diff --git a/components/ClientLogos.tsx b/components/ClientLogos.tsx deleted file mode 100644 index 3550804..0000000 --- a/components/ClientLogos.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { JSX } from 'react'; -import Image from 'next/image'; - -export default function ClientLogos(): JSX.Element { - const yellowFilter = '#FFD700'; - return ( -
-
-

- Trusted By Our Clients -

-
- Transistor - Reform - Tuple - SavvyCal - Statamic -
-
-
- ); -} diff --git a/components/TrustedBy.css b/components/TrustedBy.css new file mode 100644 index 0000000..5843761 --- /dev/null +++ b/components/TrustedBy.css @@ -0,0 +1,205 @@ +.trustedby-section { + background-color: #030303; + padding-top: 80px; + padding-bottom: 80px; + position: relative; + overflow: hidden; +} + +/* subtle radial glow */ +.trustedby-overlay { + position: absolute; + inset: 0; + background: radial-gradient( + circle at 50% 50%, + rgba(250, 204, 21, 0.03) 0%, + transparent 70% + ); + pointer-events: none; +} + +.trustedby-container { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + padding-left: 32px; + padding-right: 32px; + position: relative; +} + +.trustedby-title { + text-align: center; + font-weight: 700; + color: #facc15; + font-size: 48px; + margin-top: 0; + margin-bottom: 64px; + letter-spacing: 0.5px; +} + +.trustedby-card { + background-color: #ffffff; + border-radius: 12px; + padding: 48px 40px; + display: flex; + gap: 48px; + flex-wrap: wrap; + justify-content: center; + align-items: center; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + border: 1px solid rgba(250, 204, 21, 0.1); +} + +.trustedby-logo { + transition: all 0.3s ease; + filter: grayscale(100%) opacity(0.7); + cursor: pointer; +} + +.trustedby-logo:hover { + filter: grayscale(0%) opacity(1); + transform: scale(1.05); +} + +.trustedby-img { + max-height: 60px; + max-width: 200px; + width: auto; + height: auto; + object-fit: contain; +} + +/* your “Google Workspace” sizing behavior */ +.trustedby-img--tall { + max-height: 90px; + max-width: 300px; +} +.trustedby-section { + background-color: #0a0a0a; + padding-top: 80px; + padding-bottom: 80px; + position: relative; + overflow: hidden; +} + +/* subtle radial glow */ +.trustedby-overlay { + position: absolute; + inset: 0; + background: radial-gradient( + circle at 50% 50%, + rgba(250, 204, 21, 0.03) 0%, + transparent 70% + ); + pointer-events: none; +} + +.trustedby-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 32px; + position: relative; +} + +.trustedby-title { + text-align: center; + font-weight: 700; + color: #facc15; + font-size: 48px; + margin: 0 0 64px; + letter-spacing: 0.5px; +} + +/* white pill card */ +.trustedby-card { + position: relative; + background: #fff; + border-radius: 12px; + padding: 28px 18px; /* slightly tighter so marquee feels centered */ + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + border: 1px solid rgba(250, 204, 21, 0.1); + overflow: hidden; /* needed for fades */ +} + +/* marquee viewport */ +.trustedby-marquee { + overflow: hidden; + width: 100%; +} + +/* animated track */ +.trustedby-track { + display: flex; + align-items: center; + gap: 48px; + width: max-content; + animation: trustedby-scroll 22s linear infinite; +} + +/* pause scrolling when user hovers the card */ +.trustedby-card:hover .trustedby-track { + animation-play-state: paused; +} + +/* fade edges to hide cutoffs */ +.trustedby-fade { + position: absolute; + top: 0; + bottom: 0; + width: 80px; + z-index: 2; + pointer-events: none; +} + +.trustedby-fade--left { + left: 0; + background: linear-gradient(to right, #ffffff 15%, rgba(255, 255, 255, 0)); +} + +.trustedby-fade--right { + right: 0; + background: linear-gradient(to left, #ffffff 15%, rgba(255, 255, 255, 0)); +} + +/* logo behavior */ +.trustedby-logo { + transition: transform 0.3s ease, filter 0.3s ease; + filter: grayscale(100%) opacity(0.7); + cursor: pointer; + z-index: 3; /* above fades visually when near edges */ +} + +.trustedby-logo:hover { + filter: grayscale(0%) opacity(1); + transform: scale(1.05); +} + +.trustedby-img { + max-height: 60px; + max-width: 200px; + width: auto; + height: auto; + object-fit: contain; +} + +.trustedby-img--tall { + max-height: 90px; + max-width: 300px; +} + +/* The key: move the track left by 50% (because we duplicated the list) */ +@keyframes trustedby-scroll { + from { + transform: translateX(0); + } + to { + transform: translateX(-50%); + } +} + +/* Optional: respect reduced motion */ +@media (prefers-reduced-motion: reduce) { + .trustedby-track { + animation: none; + } +} diff --git a/components/TrustedBy.tsx b/components/TrustedBy.tsx new file mode 100644 index 0000000..a49c54e --- /dev/null +++ b/components/TrustedBy.tsx @@ -0,0 +1,64 @@ +"use client"; + +import Image from "next/image"; +import "./TrustedBy.css"; + +type Logo = { + src: string; + alt: string; + width: number; + height: number; + variant?: "default" | "tall"; +}; + +const TrustedBy = () => { + const logos: Logo[] = [ + { src: "/assets/trustedby/AWS-Logo.png", alt: "Amazon Web Services", width: 280, height: 85 }, + { src: "/assets/trustedby/HubSpot-Logo.png", alt: "HubSpot", width: 280, height: 85 }, + { src: "/assets/trustedby/GoogleWorkspace-Logo.png", alt: "Google Workspace", width: 380, height: 115, variant: "tall" }, + { src: "/assets/trustedby/ClickUp-Logo.svg", alt: "ClickUp", width: 380, height: 115, variant: "tall" }, + { src: "/assets/trustedby/ef-Logo.svg", alt: "Eficiens Systems", width: 380, height: 115, variant: "tall" }, + ]; + + // Duplicate list so the scroll loops seamlessly + const track = [...logos, ...logos]; + + return ( +
+
+ +
+

Trusted By:

+ +
+ {/* left/right fade edges */} +
+
+ +
+
+ {track.map((logo, idx) => ( +
+ {logo.alt} +
+ ))} +
+
+
+
+
+ ); +}; + +export default TrustedBy; diff --git a/public/assets/trustedby/AWS-Logo.png b/public/assets/trustedby/AWS-Logo.png new file mode 100644 index 0000000..6906afb Binary files /dev/null and b/public/assets/trustedby/AWS-Logo.png differ diff --git a/public/assets/trustedby/ClickUp-Logo.svg b/public/assets/trustedby/ClickUp-Logo.svg new file mode 100644 index 0000000..ae500f4 --- /dev/null +++ b/public/assets/trustedby/ClickUp-Logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/trustedby/GoogleWorkspace-Logo.png b/public/assets/trustedby/GoogleWorkspace-Logo.png new file mode 100644 index 0000000..2df8f1f Binary files /dev/null and b/public/assets/trustedby/GoogleWorkspace-Logo.png differ diff --git a/public/assets/trustedby/HubSpot-Logo.png b/public/assets/trustedby/HubSpot-Logo.png new file mode 100644 index 0000000..c9b0c49 Binary files /dev/null and b/public/assets/trustedby/HubSpot-Logo.png differ diff --git a/public/assets/trustedby/ef-Logo.svg b/public/assets/trustedby/ef-Logo.svg new file mode 100644 index 0000000..4ddcdc6 --- /dev/null +++ b/public/assets/trustedby/ef-Logo.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +