+
+ );
+};
+
+export default AccessData;
diff --git a/apps/landing/src/components/AppEmbed.tsx b/apps/landing/src/components/AppEmbed.tsx
new file mode 100644
index 000000000..86bc1189b
--- /dev/null
+++ b/apps/landing/src/components/AppEmbed.tsx
@@ -0,0 +1,82 @@
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import { getWindow } from '~/utils/util';
+
+const AppEmbed = () => {
+ const [showApp, setShowApp] = useState(false);
+ const [iFrameAppReady, setIframeAppReady] = useState(false);
+ const [forceImg, setForceImg] = useState(false);
+ const [imgFallback, setImageFallback] = useState(false);
+ // const iFrame = useRef
+
+ + Access data from anywhere +
++ users can enjoy the freedom of accessing their important files, documents, and + media assets from any device with an internet connection, ensuring productivity + and convenience on the go. +
+
+ {/* {renderBloom && ( */}
+
+ );
+};
+
+export const AppEmbedPlaceholder = () => {
+ return (
+
+ );
+};
+
+export default AppEmbed;
diff --git a/apps/landing/src/components/BentoBoxes.tsx b/apps/landing/src/components/BentoBoxes.tsx
new file mode 100644
index 000000000..17ca6167c
--- /dev/null
+++ b/apps/landing/src/components/BentoBoxes.tsx
@@ -0,0 +1,219 @@
+import dynamic from 'next/dynamic';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { Button, tw } from '@sd/ui';
+import { useWindowSize } from '~/hooks/useWindowSize';
+import { MagicCard, MagicContainer } from './MagicCard';
+import PlatformsArt from './PlatformsArt';
+import SpacedropArt from './SpacedropArt';
+
+const Heading = tw.h1`z-30 text-center font-semibold leading-tight text-white text-lg`;
+const Text = tw.p`leading-2 text-zinc-500 z-30 mb-8 mt-1 max-w-4xl text-center text-[14px] lg:leading-8"`;
+
+interface Props {
+ rowSpan?: number;
+ colSpan?: number;
+ className?: string;
+ bgUrl?: string;
+ children?: React.ReactNode;
+}
+
+const BentoBox = ({ rowSpan = 1, colSpan = 1, className = '', children, bgUrl = '' }: Props) => (
+
+
+
+
+
+ {/* )} */}
+
+
+
+
+
+ 
+
+
+
+ {children}
+
+);
+
+// const AppFrameOuter = tw.div`relative m-auto flex w-full max-w-7xl rounded-lg border border-black transition-opacity`;
+// const AppFrameInner = tw.div`z-30 flex w-full rounded-lg border-t border-app-line/50 bg-app/30 backdrop-blur`;
+
+const GitHubButton = dynamic(() => import('react-github-btn'), { ssr: false });
+
+const BentoBoxes = () => {
+ const { width } = useWindowSize();
+ const particleCount = useMemo(() => {
+ if (width) {
+ return width > 768 ? 50 : 25;
+ }
+ return 50;
+ }, [width]);
+ return (
+
+ Encryption
+
+ Your files and folders are fully encrypted through our algorithm, preventing
+ unauthorized access and guaranteed protection.
+
+
+
+
+
+
+
+
+
+ Powerful tags
+
+ Create and apply tags to your files and folders, and instantly locate
+ desired content through filterable tags.
+
+
+
+ Search everything
+
+ Easily find your files and folders through our search
+
+
+
+
+
+
+
+
+ Full Ownership & Control
+ Make Spacedrive yours
+
+
+ Spacedrop
+
+ Send files to other devices quickly and easily
+
+
+
+
+
+
+
+
+ Free & Opensource
+
+ Developers and users can contribute with new ideas and features
+
+
+
+
+
+
+
+
+ Star
+
+
+
+
+
+
+ Cross platform
+
+ Windows, macOS, Linux, iOS, Android, and the web. Spacedrive is everywhere.
+
+
+
+
+
+ );
+};
+
+interface Props {
+ logoUrl: string;
+ title: string;
+ imageWidth?: number;
+ children?: React.ReactNode;
+}
+
+const CloudCard = ({ logoUrl, title, imageWidth = 70, children }: Props) => {
+ return (
+
+
+
+
+
+
+
+
+ + Coming soon +
++ Combine all storage locations & clouds +
+
+ {children}
+
+ );
+};
+
+export default CloudStorage;
diff --git a/apps/landing/src/components/CloudStorageArt.tsx b/apps/landing/src/components/CloudStorageArt.tsx
new file mode 100644
index 000000000..870c53c30
--- /dev/null
+++ b/apps/landing/src/components/CloudStorageArt.tsx
@@ -0,0 +1,126 @@
+const CloudStorageArt = () => {
+ return (
+
+ );
+};
+
+export default CloudStorageArt;
diff --git a/apps/landing/src/components/CyclingImage.tsx b/apps/landing/src/components/CyclingImage.tsx
new file mode 100644
index 000000000..19c3ecb31
--- /dev/null
+++ b/apps/landing/src/components/CyclingImage.tsx
@@ -0,0 +1,47 @@
+import Image, { ImageProps } from 'next/image';
+import React, { useEffect, useState } from 'react';
+
+interface CyclingImageProps extends Omit
+
+ {title}
+ setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+ {images.map((src, index) => (
+
+ );
+};
+
+export default CyclingImage;
diff --git a/apps/landing/src/components/DocsLayout.tsx b/apps/landing/src/components/DocsLayout.tsx
index 6931b64c7..9812a6c02 100644
--- a/apps/landing/src/components/DocsLayout.tsx
+++ b/apps/landing/src/components/DocsLayout.tsx
@@ -1,5 +1,4 @@
import { CaretRight, List, X } from '@phosphor-icons/react';
-import Link from 'next/link';
import { PropsWithChildren, useState } from 'react';
import { slide as Menu } from 'react-burger-menu';
import { Button } from '@sd/ui';
diff --git a/apps/landing/src/components/DotPattern.tsx b/apps/landing/src/components/DotPattern.tsx
new file mode 100644
index 000000000..91ff7c1e0
--- /dev/null
+++ b/apps/landing/src/components/DotPattern.tsx
@@ -0,0 +1,52 @@
+import { useId } from 'react';
+import { cn } from './MagicCard';
+
+interface DotPatternProps {
+ width?: any;
+ height?: any;
+ x?: any;
+ y?: any;
+ cx?: any;
+ cy?: any;
+ cr?: any;
+ className?: string;
+ [key: string]: any;
+}
+export function DotPattern({
+ width = 16,
+ height = 16,
+ x = 0,
+ y = 0,
+ cx = 1,
+ cy = 1,
+ cr = 1,
+ className,
+ ...props
+}: DotPatternProps) {
+ const id = useId();
+
+ return (
+
+ );
+}
+
+export default DotPattern;
diff --git a/apps/landing/src/components/DownloadToday.tsx b/apps/landing/src/components/DownloadToday.tsx
new file mode 100644
index 000000000..495b64d87
--- /dev/null
+++ b/apps/landing/src/components/DownloadToday.tsx
@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { useInView } from 'framer-motion';
+import { Download } from '@phosphor-icons/react';
+import React, { useRef } from 'react';
+import { Button } from '@sd/ui';
+
+interface Props {
+ isWindows?: boolean;
+}
+
+const DownloadToday = ({ isWindows }: Props) => {
+ const ref = useRef
+
+ ))}
+
+
+ );
+};
+
+export default DownloadToday;
diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx
index 9d3933c7f..0925a5df0 100644
--- a/apps/landing/src/components/Footer.tsx
+++ b/apps/landing/src/components/Footer.tsx
@@ -19,6 +19,7 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
target={props.blank ? '_blank' : ''}
className="text-gray-300 duration-300 hover:text-white hover:opacity-50"
rel="noreferrer"
+ {...props}
>
{props.children}
@@ -27,12 +28,22 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
export function Footer() {
return (
-
+
+