+
{loading ? null : data?.user.id ? (
) : (
<>
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index e402b4f5..d79cf335 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
- 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+ 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out overflow-y-auto data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
{...props}
>
{children}
-
+
diff --git a/src/utils/elementScroll.ts b/src/utils/elementScroll.ts
new file mode 100644
index 00000000..81d6a4dd
--- /dev/null
+++ b/src/utils/elementScroll.ts
@@ -0,0 +1,5 @@
+export const elementScroll = (selector: string) => {
+ const element = document.querySelector(selector);
+ if (!element) return;
+ element.scrollIntoView({ behavior: 'smooth' });
+};
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
index 94a52d8b..5a6349cd 100644
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -27,4 +27,9 @@ export const ROUTES = {
restore: '/setup/wallet/restore',
},
},
+ external: {
+ github: 'https://github.com/AmbossTech/amboss-banco',
+ x: 'https://x.com/ambosstech',
+ support: 'mailto:support@amboss.tech',
+ },
};
diff --git a/src/views/landing/Believe.tsx b/src/views/landing/Believe.tsx
new file mode 100644
index 00000000..b4b061c7
--- /dev/null
+++ b/src/views/landing/Believe.tsx
@@ -0,0 +1,68 @@
+import Image, { StaticImageData } from 'next/image';
+import { FC } from 'react';
+
+import groupPhone from '/public/images/group-phone.webp';
+import manPhone from '/public/images/man-phone.webp';
+import womanCard from '/public/images/woman-card.webp';
+import womanPhone from '/public/images/woman-phone.webp';
+
+const Card: FC<{ title: string; subtitle: string; image: StaticImageData }> = ({
+ title,
+ subtitle,
+ image,
+}) => {
+ return (
+
+
+ );
+};
diff --git a/src/views/landing/Footer.tsx b/src/views/landing/Footer.tsx
new file mode 100644
index 00000000..5f924ecc
--- /dev/null
+++ b/src/views/landing/Footer.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import x from '/public/icons/x.svg';
+import { elementScroll } from '@/utils/elementScroll';
+import { ROUTES } from '@/utils/routes';
+
+const links = ['about', 'features', 'community', 'security', 'support'];
+const year = new Date().getFullYear();
+
+export const Footer = () => {
+ return (
+
+ );
+};
diff --git a/src/views/landing/Header.tsx b/src/views/landing/Header.tsx
new file mode 100644
index 00000000..40991fe3
--- /dev/null
+++ b/src/views/landing/Header.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { Menu } from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { useUserQuery } from '@/graphql/queries/__generated__/user.generated';
+import { elementScroll } from '@/utils/elementScroll';
+import { ROUTES } from '@/utils/routes';
+
+const links = ['about', 'features', 'community', 'security', 'support'];
+
+export const Header = () => {
+ const { data, loading } = useUserQuery();
+
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ return (
+
+
+ Banco
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/views/landing/Hero.tsx b/src/views/landing/Hero.tsx
new file mode 100644
index 00000000..f939cdcc
--- /dev/null
+++ b/src/views/landing/Hero.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+
+import bitcoin from '/public/icons/bitcoin.svg';
+import tether from '/public/icons/tether.svg';
+import usdc from '/public/icons/usdc.svg';
+import { ROUTES } from '@/utils/routes';
+
+import { Header } from './Header';
+
+export const Hero = () => {
+ const [email, setEmail] = useState('');
+
+ return (
+
+
+ );
+};
diff --git a/src/views/landing/Ready.tsx b/src/views/landing/Ready.tsx
new file mode 100644
index 00000000..8e03b8bb
--- /dev/null
+++ b/src/views/landing/Ready.tsx
@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import dollar from '/public/icons/dollar.svg';
+import euro from '/public/icons/euro.svg';
+import pound from '/public/icons/pound.svg';
+import { ROUTES } from '@/utils/routes';
+
+export const Ready = () => {
+ return (
+
+
+ );
+};
diff --git a/src/views/landing/Security.tsx b/src/views/landing/Security.tsx
new file mode 100644
index 00000000..e36493ec
--- /dev/null
+++ b/src/views/landing/Security.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+
+import womanLaptop from '/public/images/woman-laptop.webp';
+
+export const Security = () => {
+ return (
+
+
+ );
+};
diff --git a/src/views/landing/Welcome.tsx b/src/views/landing/Welcome.tsx
new file mode 100644
index 00000000..e8b00575
--- /dev/null
+++ b/src/views/landing/Welcome.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+
+import welcome from '/public/images/welcome.webp';
+
+export const Welcome = () => {
+ return (
+
+
+ );
+};
diff --git a/src/views/landing/Why.tsx b/src/views/landing/Why.tsx
new file mode 100644
index 00000000..2ba3ee3b
--- /dev/null
+++ b/src/views/landing/Why.tsx
@@ -0,0 +1,61 @@
+import Image, { StaticImageData } from 'next/image';
+import { FC } from 'react';
+
+import why1 from '/public/icons/why-1.svg';
+import why2 from '/public/icons/why-2.svg';
+import why3 from '/public/icons/why-3.svg';
+import why4 from '/public/icons/why-4.svg';
+
+const Card: FC<{ title: string; subtitle: string; image: StaticImageData }> = ({
+ title,
+ subtitle,
+ image,
+}) => {
+ return (
+
+
+ );
+};
+
+ );
+};
+
+export const Believe = () => {
+ return (
+
+
+ {title}
+ +{subtitle}
+
+
+
+ + Banco +
+ ++ Access global finance in four simple steps. +
+
+
+
+ {loading ? null : data?.user.id ? (
+
+ Go to App
+
+ ) : (
+ <>
+
+ Login
+
+
+
+ Sign up
+
+
+ )}
+
+
+
+ {loading ? null : data?.user.id ? (
+
+ Go to App
+
+ ) : (
+ <>
+
+ Login
+
+
+
+ Sign up
+
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/views/landing/OpenSource.tsx b/src/views/landing/OpenSource.tsx
new file mode 100644
index 00000000..06832c07
--- /dev/null
+++ b/src/views/landing/OpenSource.tsx
@@ -0,0 +1,46 @@
+import { Github } from 'lucide-react';
+import Image from 'next/image';
+
+import coins from '/public/icons/coins.svg';
+import womenPhones from '/public/images/women-phones.webp';
+import { ROUTES } from '@/utils/routes';
+
+export const OpenSource = () => {
+ return (
+
+
+
+ + Your Money, Your Way. +
+ ++ Pay and get paid in dollars and bitcoin. Simple, secure and always + in your control. +
+ +
+ setEmail(e.target.value)}
+ className="mb-2 h-12 w-full rounded-lg border border-neutral-200 bg-white px-4 py-2 text-base text-black placeholder:text-black/45 lg:mb-0 lg:h-14 lg:pr-48"
+ />
+
+
+ Get Started Today
+
+
+
+
+
+
+
+
+
+
+ + Join our open source community +
+ + +
+
+ + Banco is built by the community, for the community. Contribute to + our code, suggest features, and be a part of a banking revolution. + Visit our GitHub repository to get involved. +
+
+
+
+
+
+ + Ready to Experience the Future of Banking? +
+ ++ Join Banco today and take control of your financial future. +
+ + + Sign Up Now + +
+
+
+
+
+ + Our platform uses encryption so that only you have access and + control over your money. +
+
+
+
+
+
+ + Security made simple. +
++ Safeguard your financial future. +
+
+
+
+
+ + Welcome to Banco +
+ ++ Your gateway to secure and simple banking. +
+
+
+ );
+};
+
+export const Why = () => {
+ return (
+
+
+
+ {title}
+ +{subtitle}
++ Why choose{' '} + + Banco? + +
+ +
+
+