jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/marketing/integrations-5/render.jsx

@@ -0,0 +1,477 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+export const Lovable = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={121}
+      height={122}
+      viewBox="0 0 121 122"
+      fill="none"
+    >
+      <mask
+        id="mask0_572_319"
+        style={{
+          maskType: "alpha",
+        }}
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={0}
+        width={121}
+        height={122}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M36.0687 0C55.9888 0 72.1373 16.1551 72.1373 36.0835V49.7975H84.141C104.061 49.7975 120.21 65.9526 120.21 85.8809C120.21 105.809 104.061 121.964 84.141 121.964H0V36.0835C0 16.1551 16.1485 0 36.0687 0Z"
+          fill="url(#paint0_linear_572_319)"
+        />
+      </mask>
+      <g mask="url(#mask0_572_319)">
+        <g filter="url(#filter0_f_572_319)">
+          <ellipse
+            cx={52.7381}
+            cy={65.1011}
+            rx={81.3729}
+            ry={81.1923}
+            fill="#4B73FF"
+          />
+        </g>
+        <g filter="url(#filter1_f_572_319)">
+          <ellipse
+            cx={61.6734}
+            cy={20.547}
+            rx={104.216}
+            ry={81.1923}
+            fill="#FF66F4"
+          />
+        </g>
+        <g filter="url(#filter2_f_572_319)">
+          <ellipse
+            cx={78.6659}
+            cy={5.26802}
+            rx={81.3729}
+            ry={71.3042}
+            fill="#FF0105"
+          />
+        </g>
+        <g filter="url(#filter3_f_572_319)">
+          <ellipse
+            cx={63.121}
+            cy={20.5275}
+            rx={48.9374}
+            ry={48.8288}
+            fill="#FE7B02"
+          />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_572_319"
+          x={-65.0219}
+          y={-52.4784}
+          width={235.52}
+          height={235.159}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={18.1936}
+            result="effect1_foregroundBlur_572_319"
+          />
+        </filter>
+        <filter
+          id="filter1_f_572_319"
+          x={-78.9301}
+          y={-97.0324}
+          width={281.208}
+          height={235.159}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={18.1936}
+            result="effect1_foregroundBlur_572_319"
+          />
+        </filter>
+        <filter
+          id="filter2_f_572_319"
+          x={-39.0942}
+          y={-102.423}
+          width={235.52}
+          height={215.383}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={18.1936}
+            result="effect1_foregroundBlur_572_319"
+          />
+        </filter>
+        <filter
+          id="filter3_f_572_319"
+          x={-22.2036}
+          y={-64.6884}
+          width={170.649}
+          height={170.432}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation={18.1936}
+            result="effect1_foregroundBlur_572_319"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_572_319"
+          x1={40.4527}
+          y1={21.4331}
+          x2={76.9327}
+          y2={121.971}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.025} stopColor="#FF8E63" />
+          <stop offset={0.56} stopColor="#FF7EB0" />
+          <stop offset={0.95} stopColor="#4B73FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export const ChatGPT = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      fillRule="evenodd"
+      height="1em"
+      style={{
+        flex: "none",
+        lineHeight: 1,
+      }}
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <title>{"OpenAI"}</title>
+      <path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z" />
+    </svg>
+  );
+};
+
+export const Gemini = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      style={{
+        flex: "none",
+        lineHeight: 1,
+      }}
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <title>{"Gemini"}</title>
+      <path
+        d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+        fill="#3186FF"
+      />
+      <path
+        d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+        fill="url(#lobe-icons-gemini-fill-0)"
+      />
+      <path
+        d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+        fill="url(#lobe-icons-gemini-fill-1)"
+      />
+      <path
+        d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+        fill="url(#lobe-icons-gemini-fill-2)"
+      />
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-gemini-fill-0"
+          x1={7}
+          x2={11}
+          y1={15.5}
+          y2={12}
+        >
+          <stop stopColor="#08B962" />
+          <stop offset={1} stopColor="#08B962" stopOpacity={0} />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-gemini-fill-1"
+          x1={8}
+          x2={11.5}
+          y1={5.5}
+          y2={11}
+        >
+          <stop stopColor="#F94543" />
+          <stop offset={1} stopColor="#F94543" stopOpacity={0} />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-gemini-fill-2"
+          x1={3.5}
+          x2={17.5}
+          y1={13.5}
+          y2={12}
+        >
+          <stop stopColor="#FABC12" />
+          <stop offset={0.46} stopColor="#FABC12" stopOpacity={0} />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export const Grok = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      fillRule="evenodd"
+      height="1em"
+      style={{
+        flex: "none",
+        lineHeight: 1,
+      }}
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <title>{"Grok"}</title>
+      <path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815" />
+    </svg>
+  );
+};
+
+export const Claude = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      style={{
+        flex: "none",
+        lineHeight: 1,
+      }}
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <title>{"Claude"}</title>
+      <path
+        d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+        fill="#D97757"
+        fillRule="nonzero"
+      />
+    </svg>
+  );
+};
+
+export const KlingAI = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      style={{
+        flex: "none",
+        lineHeight: 1,
+      }}
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <title>{"Kling"}</title>
+      <path
+        d="M5.412 13.775A23.193 23.193 0 017.41 9.32c3.17-5.492 7.795-8.757 10.33-7.294C12.038-1.266 4.598.944 1.122 6.964A13.378 13.378 0 00.085 9.22c-.259.739.092 1.534.77 1.926l4.557 2.63z"
+        fill="url(#lobe-icons-kling-fill-0)"
+      />
+      <path
+        d="M18.588 10.164a23.188 23.188 0 01-1.999 4.455c-3.17 5.492-7.795 8.758-10.33 7.294 5.703 3.293 13.143 1.082 16.619-4.938a13.392 13.392 0 001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z"
+        fill="url(#lobe-icons-kling-fill-1)"
+      />
+      <path
+        d="M16.59 14.62c3.17-5.492 3.686-11.13 1.15-12.594C15.207.563 10.582 3.83 7.41 9.32c2.074-3.59 5.809-5.315 8.344-3.852 2.534 1.464 2.908 5.56.835 9.151z"
+        fill="url(#lobe-icons-kling-fill-2)"
+      />
+      <path
+        d="M7.41 9.32c-3.17 5.492-3.686 11.13-1.15 12.593 2.534 1.464 7.159-1.802 10.33-7.294-2.074 3.591-5.809 5.316-8.344 3.852-2.534-1.463-2.908-5.56-.835-9.15z"
+        fill="url(#lobe-icons-kling-fill-3)"
+      />
+      <defs>
+        <radialGradient
+          cx={0}
+          cy={0}
+          gradientTransform="matrix(7.47772 -12.51022 17.14368 10.24728 5.173 13.637)"
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-kling-fill-0"
+          r={1}
+        >
+          <stop offset={0.095} stopColor="#FFF959" />
+          <stop offset={0.326} stopColor="#0DF35E" />
+          <stop offset={0.64} stopColor="#0BF2F9" />
+          <stop offset={1} stopColor="#04A6F0" />
+        </radialGradient>
+        <radialGradient
+          cx={0}
+          cy={0}
+          gradientTransform="rotate(120.868 6.491 10.491) scale(14.5747 19.9728)"
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-kling-fill-1"
+          r={1}
+        >
+          <stop offset={0.095} stopColor="#FFF959" />
+          <stop offset={0.326} stopColor="#0DF35E" />
+          <stop offset={0.64} stopColor="#0BF2F9" />
+          <stop offset={1} stopColor="#04A6F0" />
+        </radialGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-kling-fill-2"
+          x1={15.578}
+          x2={18.062}
+          y1={1.798}
+          y2={9.861}
+        >
+          <stop stopColor="#003EFF" />
+          <stop offset={1} stopColor="#0BFFE7" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="lobe-icons-kling-fill-3"
+          x1={8.422}
+          x2={5.938}
+          y1={22.142}
+          y2={14.079}
+        >
+          <stop stopColor="#003EFF" />
+          <stop offset={1} stopColor="#0BFFE7" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const APPS = [
+  { name: "Lovable", logo: <Lovable /> },
+  { name: "ChatGPT", logo: <ChatGPT /> },
+  { name: "Gemini", logo: <Gemini /> },
+  { name: "Grok", logo: <Grok /> },
+  { name: "Claude", logo: <Claude /> },
+  { name: "Kling AI", logo: <KlingAI /> },
+] as const;
+
+function IntegrationsColumn(props: {
+  reverse?: boolean;
+  className?: string;
+  apps: readonly (typeof APPS)[number][];
+  duration?: number;
+}) {
+  const orderedApps = props.reverse ? [...props.apps].reverse() : props.apps;
+  return (
+    <div
+      className={props.className}
+      style={
+        props.reverse
+          ? {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "flex-end",
+            }
+          : undefined
+      }
+    >
+      <motion.div
+        animate={{ translateY: props.reverse ? "50%" : "-50%" }}
+        transition={{
+          duration: 30,
+          repeat: Infinity,
+          ease: "linear",
+          repeatType: "loop",
+        }}
+        className="flex flex-col gap-4"
+        style={props.reverse ? { marginBottom: "140px" } : undefined}
+      >
+        {[
+          ...new Array(2).fill(0).map((_, index) => (
+            <React.Fragment key={index}>
+              {orderedApps.map(({ name, logo }) => (
+                <Card key={`${index}-${name}`} className="w-40 shadow-none">
+                  <CardContent className="flex flex-col items-center justify-center gap-3">
+                    <div className="shrink-0 *:size-12 [&_svg]:size-12">
+                      {logo}
+                    </div>
+                    <span className="font-semibold">{name}</span>
+                  </CardContent>
+                </Card>
+              ))}
+            </React.Fragment>
+          )),
+        ]}
+      </motion.div>
+    </div>
+  );
+}
+//
+export default function Testimonials() {
+  return (
+    <section className="bg-background py-20">
+      <div className="mx-auto max-w-7xl px-4 md:px-6">
+        <div className="grid gap-12 lg:grid-cols-[1fr_1.2fr] lg:items-center">
+          <div className="mx-auto flex max-w-2xl flex-col justify-center space-y-4">
+            <Badge variant="secondary">Integrations</Badge>
+            <h2 className="text-4xl font-bold leading-tight lg:text-4xl">
+              Integrate Bundui with your favourite apps
+            </h2>
+            <p className="text-muted-foreground leading-relaxed">
+              Automate and personalize your forms. Integrate existing tools from
+              your workflow to build a close knit data management system.
+            </p>
+            <Button variant="outline" className="w-fit">
+              Browse All Apps
+            </Button>
+          </div>
+
+          <div className="flex max-h-[440px] justify-center gap-4 overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)]">
+            <IntegrationsColumn apps={APPS} />
+            <IntegrationsColumn apps={APPS} reverse />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/integrations-6/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/integrations-6/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }