better-auth/docs/components/landing/section.tsx

import type React from "react";
import SectionSvg from "./section-svg";

const Section = ({
  className,
  id,
  crosses,
  crossesOffset,
  customPaddings,
  children,
}: {
  className: string;
  id: string;
  crosses?: boolean;
  crossesOffset: string;
  customPaddings: boolean;
  children: React.ReactNode;
}) => {
  return (
    <div
      id={id}
      className={`
      relative
      ${customPaddings || `py-10 lg:py-16  ${crosses ? "" : ""}`}
      ${className || " "}`}
    >
      {children}

      <div className="hidden absolute top-0 left-5 w-[0.0625rem] h-[calc(100%_+_30px)] dark:bg-[#26242C] bg-stone-200  pointer-events-none md:block lg:left-7.5 xl:left-16" />
      <div className="hidden absolute top-0 right-5 w-[0.0625rem] h-[calc(100%_+_30px)]  dark:bg-[#26242C] bg-stone-200  pointer-events-none md:block lg:right-7.5 xl:right-14" />

      {crosses && (
        <>
          <div
            className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${
              crossesOffset && crossesOffset
            } pointer-events-none lg:block xl:left-16 right-16`}
          />
          <SectionSvg crossesOffset={crossesOffset} />
        </>
      )}
    </div>
  );
};

export default Section;