Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-27 14:59:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add integrations animation on the homepage

Browse Source 
Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
This commit is contained in:
Adithya Krishna
2024-06-11 17:24:30 +05:30
parent cc43139573
commit 5f22fd48d1
8 changed files with 288 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/marketing/package.json
View File

@@ -36,7 +36,7 @@
"react-confetti": "^6.1.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.43.9",
"react-icons": "^4.11.0",
"react-icons": "^5.2.1",
"recharts": "^2.7.2",
"sharp": "^0.33.1",
"typescript": "5.2.2",

83
apps/marketing/src/components/(marketing)/integrations-data-flow.tsx Normal file
View File

@@ -0,0 +1,83 @@
'use client';
import React, { forwardRef, useRef } from 'react';
import { FileText, Hexagon, Shapes } from 'lucide-react';
import { LiaGoogleDrive } from 'react-icons/lia';
import { PiMicrosoftTeamsLogo } from 'react-icons/pi';
import { TbBrandAirtable, TbBrandZapier } from 'react-icons/tb';
import { AnimatedDataFlow } from '@documenso/ui/components/animate/animated-data-flow';
import { cn } from '@documenso/ui/lib/utils';
// eslint-disable-next-line react/display-name
const Circle = forwardRef<HTMLDivElement, { className?: string; children?: React.ReactNode }>(
({ className, children }, ref) => {
return (
<div
ref={ref}
className={cn(
'border-border z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
className,
)}
>
{children}
</div>
);
},
);
export function DocumensoIntegrationsDataFlow() {
const containerRef = useRef<HTMLDivElement>(null);
const div1Ref = useRef<HTMLDivElement>(null);
const div2Ref = useRef<HTMLDivElement>(null);
const div3Ref = useRef<HTMLDivElement>(null);
const div4Ref = useRef<HTMLDivElement>(null);
const div5Ref = useRef<HTMLDivElement>(null);
const div6Ref = useRef<HTMLDivElement>(null);
const div7Ref = useRef<HTMLDivElement>(null);
return (
<div
className="bg-background relative z-[-2] flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden p-10"
ref={containerRef}
>
<div className="flex h-full w-full flex-row items-stretch justify-between gap-10">
<div className="flex flex-col justify-center gap-2">
<Circle className="bg-background" ref={div1Ref}>
<Shapes color="#A2E771" className="h-6 w-6" />
</Circle>
<Circle className="bg-background" ref={div2Ref}>
<Hexagon color="#A2E771" className="h-6 w-6" />
</Circle>
<Circle className="bg-background" ref={div3Ref}>
<FileText color="#A2E771" className="h-6 w-6" />
</Circle>
</div>
<div className="flex flex-col justify-center">
<Circle ref={div4Ref} className="bg-background h-16 w-16">
<TbBrandZapier color="#FF4A00" className="h-6 w-6" />
</Circle>
</div>
<div className="flex flex-col justify-center gap-2">
<Circle className="bg-background" ref={div5Ref}>
<LiaGoogleDrive color="#A2E771" className="h-6 w-6" />
</Circle>
<Circle className="bg-background" ref={div6Ref}>
<PiMicrosoftTeamsLogo color="#A2E771" className="h-6 w-6" />
</Circle>
<Circle className="bg-background" ref={div7Ref}>
<TbBrandAirtable color="#A2E771" className="h-6 w-6" />
</Circle>
</div>
</div>
<AnimatedDataFlow containerRef={containerRef} fromRef={div1Ref} toRef={div4Ref} />
<AnimatedDataFlow containerRef={containerRef} fromRef={div2Ref} toRef={div4Ref} />
<AnimatedDataFlow containerRef={containerRef} fromRef={div3Ref} toRef={div4Ref} />
<AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div5Ref} />
<AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div6Ref} />
<AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div7Ref} />
</div>
);
}

12
apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx
View File

@@ -3,13 +3,14 @@ import type { HTMLAttributes } from 'react';
import Image from 'next/image';
import backgroundPattern from '@documenso/assets/images/background-pattern.png';
import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
import { cn } from '@documenso/ui/lib/utils';
import { Card, CardContent } from '@documenso/ui/primitives/card';
import { DocumensoIntegrationsDataFlow } from './integrations-data-flow';
export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
export const ShareConnectPaidWidgetBento = ({
@@ -56,12 +57,9 @@ export const ShareConnectPaidWidgetBento = ({
favorite tools.
</p>
<div className="flex items-center justify-center p-8">
<Image
src={cardConnectionsFigure}
alt="its fast"
className="w-full max-w-sm dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
/>
<div className="flex w-full items-center justify-center p-0 md:p-8">
{/* Add Animated Beam */}
<DocumensoIntegrationsDataFlow />
</div>
</CardContent>
</Card>