Bg 1726 (#3552)

* about video component

* overlay using gradients

* add video preview

* use in homepaeg

* use in npo page

* remove dependabo

* about video feedback

* add vtt

src/components/about-video.tsx

@@ -0,0 +1,92 @@
+import poster from "assets/images/about-video-preview.webp";
+import { useEffect, useRef, useState } from "react";
+import subtitle from "./about-video.vtt";
+
+type VideoStatus = "loading" | "error" | "loaded";
+
+const videoUrl =
+  "https://elktqtbc25yfiipw.public.blob.vercel-storage.com/about-better-giving-HXqlfIWwctto66xyOTStih3rWj9Ajg";
+export const AboutVideo = ({ classes = "" }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isIntersecting, setIsIntersecting] = useState<boolean>(false);
+  const [status, setStatus] = useState<VideoStatus>("loading");
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]: IntersectionObserverEntry[]) => {
+        setIsIntersecting(entry.isIntersecting);
+      },
+      { rootMargin: "50px", threshold: 0.1 }
+    );
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        observer.unobserve(containerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isIntersecting && status === "loading") {
+      const video = videoRef.current;
+      if (video) {
+        video.load();
+        setStatus("loaded");
+      }
+    }
+  }, [isIntersecting, status]);
+
+  const handleError = (
+    e: React.SyntheticEvent<HTMLVideoElement, Event>
+  ): void => {
+    setStatus("error");
+    console.error("Video loading error:", e);
+  };
+
+  return (
+    <div className={`w-full ${classes}`}>
+      <div
+        ref={containerRef}
+        className="relative w-full"
+        style={{ paddingBottom: "56.25%" }}
+      >
+        <div className="absolute inset-0 bg-gray-l4 rounded-lg overflow-hidden">
+          {status === "loading" && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-gray-400">Loading...</div>
+            </div>
+          )}
+          {status === "error" && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-red-500">Failed to load video</div>
+            </div>
+          )}
+          <video
+            poster={poster}
+            src={videoUrl}
+            ref={videoRef}
+            className={`absolute top-0 left-0 w-full h-full object-cover`}
+            playsInline
+            controls
+            preload="none"
+            onError={handleError}
+          >
+            <track
+              kind="captions"
+              src={subtitle}
+              srcLang="en"
+              label="English"
+              default
+            />
+            <p>Your browser doesn't support HTML5 video.</p>
+          </video>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/about-video.vtt

@@ -0,0 +1,106 @@
+WEBVTT
+
+NOTE
+This file was generated by Descript <www.descript.com>
+
+00:00:00.000 --> 00:00:00.460
+Time.
+
+00:00:00.890 --> 00:00:02.600
+It's your most precious resource.
+
+00:00:03.130 --> 00:00:07.220
+Yet non profits spend 40%
+of it on financial tasks.
+
+00:00:07.380 --> 00:00:09.440
+Let's give that time back to your mission.
+
+00:00:09.730 --> 00:00:12.760
+Raising funds easily and
+growing them effortlessly.
+
+00:00:13.439 --> 00:00:17.060
+As a non profit ourselves, Better
+Giving understands this challenge.
+
+00:00:18.054 --> 00:00:20.604
+and provides you with a
+complete financial platform.
+
+00:00:21.944 --> 00:00:26.614
+Integrating free donation processing with
+high yield savings and investment growth.
+
+00:00:27.574 --> 00:00:31.354
+Our best in class donation form
+lets you accept any type of donation
+
+00:00:31.355 --> 00:00:33.035
+directly from your own website.
+
+00:00:34.105 --> 00:00:37.410
+From cash and donor advised
+funds to crypto and stocks.
+
+00:00:38.470 --> 00:00:41.690
+Receive grants directly to your
+bank account or save and invest
+
+00:00:41.690 --> 00:00:42.880
+a portion for your future.
+
+00:00:42.880 --> 00:00:47.080
+Better Giving's optional fund management
+services provide a secure high
+
+00:00:47.080 --> 00:00:51.280
+yield savings account and balanced
+investment funds to grow your donations.
+
+00:00:51.980 --> 00:00:56.080
+You maintain complete control of
+your funds, request monthly transfers
+
+00:00:56.080 --> 00:00:57.880
+or grants whenever you need them.
+
+00:00:59.030 --> 00:01:03.430
+We handle all reporting, tax
+receipts and compliance, even
+
+00:01:03.430 --> 00:01:04.920
+for crypto and stock donations.
+
+00:01:06.255 --> 00:01:09.475
+We believe in three fundamental
+rights for all non profits.
+
+00:01:09.825 --> 00:01:14.685
+Financial self sufficiency, organizational
+autonomy, and equal opportunity.
+
+00:01:15.185 --> 00:01:19.474
+That's why we offer accessible fund
+management, empower non profit choice, and
+
+00:01:19.475 --> 00:01:21.695
+provide free donation processing globally.
+
+00:01:22.385 --> 00:01:22.814
+Join the
+
+00:01:22.814 --> 00:01:26.465
+thousands of organizations are
+already able to fundraise, save,
+
+00:01:26.615 --> 00:01:28.505
+and invest with Better Giving.
+
+00:01:28.785 --> 00:01:32.855
+Register today at better.giving to
+get your time back, simplify your
+
+00:01:32.855 --> 00:01:35.394
+fundraising, and amplify your impact.
+

src/pages/home/benefits/path.tsx

@@ -4,7 +4,6 @@ import { benefits } from "content/benefits";
 import { ArrowRight } from "lucide-react";
 import { useState } from "react";
 import BenefitsCarousel from "./benefits-carousel";
-import s from "./benefits.module.css";
 import Carousel from "./carousel";
 
 type TPath = keyof typeof benefits;
@@ -13,13 +12,13 @@ const Path = () => {
 
   return (
     <section
-      className={`relative grid ${s.container} pt-20 pb-40 xl:pb-56 overflow-x-clip`}
+      className={`relative grid pt-50 pb-40 xl:pb-56  bg-gradient-to-b from-peach/20 to-transparent`}
     >
       <h2 className="text-sm md:text-lg uppercase text-blue-d1 text-center mb-4">
         Bridge To Better
       </h2>
       <h3 className="text-3xl md:text-4.5xl capitalize text-gray-d4 leading-snug text-center text-balance mb-11">
-        How Better Giving Powers Your Mission
+        Why Choose Better Giving
       </h3>
       <p className="text-lg md:text-2xl font-medium text-gray/60 text-center mb-11">
         Your All-in-One Solution for Sustainable Fundraising and Financial

src/pages/home/brands.tsx

@@ -2,7 +2,7 @@ import { brands } from "content/brands";
 
 const Brands = () => {
   return (
-    <section className="grid content-start gap-14">
+    <section className="grid content-start gap-14 bg-gradient-to-b from-transparent to-peach/20">
       <h2 className="text-3xl/tight md:text-4.5xl/tight text-gray-d4 px-8 text-center max-w-lg mx-auto text-balance">
         Over $6M raised for nonprofits worldwide
       </h2>

src/pages/home/feature1.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@remix-run/react";
 import { laira } from "assets/laira/laira";
+import { AboutVideo } from "components/about-video";
 import Image from "components/image";
 import { BOOK_A_DEMO } from "constants/env";
 import { appRoutes } from "constants/routes";
@@ -38,20 +39,22 @@ const items: TListItem[] = [
 export function Feature1({ className = "" }) {
   return (
     <section
-      className={`${className} pt-56 pb-20 lg:pb-0 grid content-start bg-linear-to-b from-transparent to-peach/20`}
+      className={`${className} pt-10 pb-20 lg:pb-0 grid content-start bg-linear-to-b from-transparent to-peach/20`}
     >
       <h2 className="text-sm md:text-lg text-blue-d1 text-center mb-4">
         Easy as 1-2-3
       </h2>
       <h3 className="text-center text-3xl md:text-4.5xl text-balance mb-6 px-4">
         How Better Giving Works
       </h3>
-      <p className="text-gray px-10 text-center mb-16 text-xl">
+      <p className="text-gray px-10 text-center mb-2 text-xl">
         Discover how easy it is to boost your nonprofit’s donations and achieve
         long-term financial sustainability.
       </p>
 
-      <ul className="lg:divide-x divide-gray-l3 grid gap-y-20 lg:gap-y-0 lg:grid-cols-3">
+      <AboutVideo classes="max-w-2xl justify-self-center p-4" />
+
+      <ul className="mt-20 lg:divide-x divide-gray-l3 grid gap-y-20 lg:gap-y-0 lg:grid-cols-3">
         {items.map((item, idx) => (
           <ListItem {...item} key={idx} />
         ))}

src/pages/home/hero/hero.tsx

@@ -2,21 +2,22 @@ import { Link } from "@remix-run/react";
 import banner from "assets/images/bg-banner.webp";
 import { appRoutes } from "constants/routes";
 import { ArrowRight } from "lucide-react";
-import s from "./styles.module.css";
 
 const Hero = ({ classes = "" }) => {
   return (
     <section
-      className={`${classes} ${s.container} relative grid bg-cover bg-no-repeat bg-[center_-10%] xl:bg-[center_bottom] pt-36 pb-48 sm:pb-96`}
-      style={{ backgroundImage: `url('${banner}')` }}
+      className={`${classes} relative grid bg-cover bg-no-repeat bg-[center_-10%] xl:bg-[center_bottom] pt-36 pb-48 sm:pb-96`}
+      style={{
+        backgroundImage: `linear-gradient(to top, rgba(255,255,255) 1%, transparent), url('${banner}')`,
+      }}
     >
-      <p className="z-10 text-sm md:text-lg font-heading uppercase font-bold text-center mb-5 tracking-wider">
+      <p className="text-sm md:text-lg font-heading uppercase font-bold text-center mb-5 tracking-wider">
         By a nonprofit, for nonprofits
       </p>
-      <h1 className="z-10 mx-auto text-4xl/tight md:text-5xl/tight lg:text-6xl/tight text-center text-pretty mb-6 px-6 ">
+      <h1 className="mx-auto text-4xl/tight md:text-5xl/tight lg:text-6xl/tight text-center text-pretty mb-6 px-6 ">
         Simplified Giving, <br /> Amplified Impact
       </h1>
-      <p className="z-10 px-6 text-gray-d1 max-md:block md:text-2xl text-center text-pretty sm:text-balance">
+      <p className="px-6 text-gray-d1 max-md:block md:text-2xl text-center text-pretty sm:text-balance">
         Benefit from free donation processing with Better Giving’s one-stop
         solution to simplify giving, earn high-yield savings, and enjoy
         hands-off investment growth. Add our customizable donation form to your

src/pages/home/home.tsx

@@ -21,9 +21,10 @@ export default function Home() {
       <Header classes="sticky z-40 top-[-1px] mt-8 px-4" />
       <Hero classes="-mt-24" />
       {/* <HeroBottom className="mb-10" endowments={page1.items} /> */}
+
+      <Feature1 />
       <Benefits />
       <Brands />
-      <Feature1 />
       <Animation classes="pt-40" />
 
       {/* <Video /> */}