From d8e8325c187e44418b72ea69a6e617853bc5df90 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:05:40 +0000
Subject: [PATCH] feat: add BeanScan mobile interface component

Co-Authored-By: Andrew Lawrence <andrew.lawrence@voiceflow.com>
---
 .../react-chat/src/assets/svg/arrow-right.svg |  4 +
 packages/react-chat/src/assets/svg/coffee.svg |  7 ++
 packages/react-chat/src/assets/svg/index.ts   |  2 +
 .../src/components/BeanScan/index.tsx         | 84 +++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 packages/react-chat/src/assets/svg/arrow-right.svg
 create mode 100644 packages/react-chat/src/assets/svg/coffee.svg
 create mode 100644 packages/react-chat/src/components/BeanScan/index.tsx

diff --git a/packages/react-chat/src/assets/svg/arrow-right.svg b/packages/react-chat/src/assets/svg/arrow-right.svg
new file mode 100644
index 0000000000..8326ced402
--- /dev/null
+++ b/packages/react-chat/src/assets/svg/arrow-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M5 12h14"/>
+  <path d="m12 5 7 7-7 7"/>
+</svg>
diff --git a/packages/react-chat/src/assets/svg/coffee.svg b/packages/react-chat/src/assets/svg/coffee.svg
new file mode 100644
index 0000000000..35e1549a4f
--- /dev/null
+++ b/packages/react-chat/src/assets/svg/coffee.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M17 8h1a4 4 0 1 1 0 8h-1"/>
+  <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/>
+  <line x1="6" y1="2" x2="6" y2="4"/>
+  <line x1="10" y1="2" x2="10" y2="4"/>
+  <line x1="14" y1="2" x2="14" y2="4"/>
+</svg>
diff --git a/packages/react-chat/src/assets/svg/index.ts b/packages/react-chat/src/assets/svg/index.ts
index 8dcfef7653..2aa7869faf 100644
--- a/packages/react-chat/src/assets/svg/index.ts
+++ b/packages/react-chat/src/assets/svg/index.ts
@@ -1,5 +1,7 @@
 export { default as close } from './close.svg?react';
 export { default as closeV2 } from './closeV2.svg?react';
+export { default as coffee } from './coffee.svg?react';
+export { default as arrowRight } from './arrow-right.svg?react';
 export { default as largeArrowLeft } from './large-arrow-left.svg?react';
 export { default as microphone } from './microphone.svg?react';
 export { default as minus } from './minus.svg?react';
diff --git a/packages/react-chat/src/components/BeanScan/index.tsx b/packages/react-chat/src/components/BeanScan/index.tsx
new file mode 100644
index 0000000000..5ae248c6f4
--- /dev/null
+++ b/packages/react-chat/src/components/BeanScan/index.tsx
@@ -0,0 +1,84 @@
+import Icon from '../Icon';
+import { styled } from '../../styles';
+import React from 'react';
+
+const Container = styled('div', {
+  minHeight: '100vh',
+  background: 'white',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '1rem',
+});
+
+const LogoContainer = styled('div', {
+  position: 'relative',
+  marginBottom: '2rem',
+});
+
+const MainIcon = styled(Icon, {
+  width: '6rem',
+  height: '6rem',
+  color: '$stone800',
+});
+
+const SmallIcon = styled(Icon, {
+  width: '3rem',
+  height: '3rem',
+  color: '$stone600',
+  position: 'absolute',
+  '&.top': {
+    top: '-1rem',
+    right: '-1rem',
+    transform: 'rotate(45deg)',
+  },
+  '&.bottom': {
+    bottom: '-1rem',
+    left: '-1rem',
+    transform: 'rotate(-45deg)',
+  },
+});
+
+const Title = styled('h1', {
+  fontSize: '1.875rem',
+  fontWeight: 'bold',
+  marginBottom: '0.5rem',
+  color: '$gray900',
+});
+
+const Subtitle = styled('p', {
+  fontSize: '1rem',
+  color: '$gray600',
+  marginBottom: '4rem',
+});
+
+const Button = styled('button', {
+  backgroundColor: '$gray900',
+  color: 'white',
+  padding: '0.75rem',
+  borderRadius: '9999px',
+  '&:hover': {
+    backgroundColor: '$gray800',
+    transition: 'background-color 0.2s',
+  },
+});
+
+export const BeanScan: React.FC = () => {
+  return (
+    <Container>
+      <LogoContainer>
+        <MainIcon svg="coffee" />
+        <SmallIcon svg="coffee" className="top" />
+        <SmallIcon svg="coffee" className="bottom" />
+      </LogoContainer>
+      <Title>BeanScan</Title>
+      <Subtitle>Scan & Explore Origins</Subtitle>
+      <Button>
+        <Icon svg="arrowRight" />
+      </Button>
+    </Container>
+  );
+};
+
+export default BeanScan;