landing page

frontend/src/components/shared/LandingPage.tsx

@@ -1,28 +1,142 @@
 import React from 'react';
-import { Container, Stack, Text, Button } from '@mantine/core';
-import FolderIcon from '@mui/icons-material/FolderRounded';
-import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import AddIcon from '@mui/icons-material/Add';
+import { useFileHandler } from '../../hooks/useFileHandler';
 
-interface LandingPageProps {
-  title: string;
+const LandingPage = () => {
+  const { addMultipleFiles } = useFileHandler();
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const { colorScheme } = useMantineColorScheme();
+
+  const handleFileDrop = async (files: File[]) => {
+    await addMultipleFiles(files);
+  };
+
+  const handleAddFilesClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(event.target.files || []);
+    if (files.length > 0) {
+      await addMultipleFiles(files);
     }
+    // Reset the input so the same file can be selected again
+    event.target.value = '';
+  };
 
-const LandingPage = ({ title }: LandingPageProps) => {
-  const { openFilesModal } = useFilesModalContext();
   return (
-    <Container size="lg" p="xl" h="100%" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Stack align="center" gap="lg">
-        <Text size="xl" fw={500} c="dimmed">
-          {title}
-        </Text>
-        <Button
-          leftSection={<FolderIcon />}
-          size="lg"
-          onClick={openFilesModal}
+    <Container size="lg" p="xl" h="100%" className="flex items-center justify-center">
+      {/* White PDF Page Background */}
+      <Dropzone
+        onDrop={handleFileDrop}
+        accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
+        multiple={true}
+        className="w-4/5 flex items-center justify-center h-full relative"
+        style={{
+          borderRadius: '.5rem',
+          filter: 'var(--drop-shadow-filter)',
+          backgroundColor: 'var(--landing-paper-bg)',
+          transition: 'background-color 0.2s ease',
+        }}
+        activateOnClick={false}
+        styles={{
+          root: {
+            '&[data-accept]': {
+              backgroundColor: 'var(--landing-drop-paper-bg)',
+            },
+          },
+        }}
       >
-          Open Files
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: ".5rem",
+            zIndex: 10,
+
+          }}
+        >
+          <img
+            src={colorScheme === 'dark' ? '/StirlingLandingLogoDark.png' : '/StirlingLandingLogoLight.png'}
+            alt="Stirling PDF Logo"
+            style={{
+              width: '10rem',
+              height: 'auto',
+              pointerEvents: 'none',
+            }}
+          />
+        </div>
+        <div
+          className={`min-h-[25vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[360px] border transition-all duration-200 dropzone-inner relative`}
+          style={{
+            borderRadius: '0.5rem',
+            backgroundColor: 'var(--landing-inner-paper-bg)',
+            borderColor: 'var(--landing-inner-paper-border)',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+          }}
+        >
+          {/* Logo positioned absolutely in top right corner */}
+
+
+          {/* Centered content container */}
+          <div className="flex flex-col items-center gap-4 flex-none w-full">
+            {/* Stirling PDF Branding */}
+            <Group gap="xs" align="center">
+              <span className="text-[var(--text-brand)]"
+                style={{ fontWeight: 'bold', fontSize: '2rem' }}>
+                Stirling{' '}
+                <span className="text-[var(--text-brand-accent)]"
+                  style={{ fontWeight: 'bold', fontSize: '2rem' }}>
+                  PDF
+                </span>
+              </span>
+            </Group>
+
+            {/* Add Files Button */}
+            <Button
+              style={{
+                backgroundColor: 'var(--landing-button-bg)',
+                color: 'var(--landing-button-color)',
+                border: '1px solid var(--landing-button-border)',
+                borderRadius: '2rem',
+                height: '38px',
+                width: '80%',
+                marginTop: '0.8rem',
+                marginBottom: '0.8rem',
+
+              }}
+              onClick={handleAddFilesClick}
+            >
+              <AddIcon className="text-[var(--accent-interactive)]" />
+              <span>
+                Add Files
+              </span>
             </Button>
-      </Stack>
+
+            {/* Hidden file input for native file picker */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              accept=".pdf,.zip"
+              onChange={handleFileSelect}
+              style={{ display: 'none' }}
+            />
+
+          </div>
+
+          {/* Instruction Text */}
+          <span
+            className="text-[var(--accent-interactive)]"
+            style={{ fontSize: '.8rem' }}
+          >
+            Drag files in or click "Add Files" to browse
+          </span>
+        </div>
+      </Dropzone>
     </Container>
   );
 };

frontend/src/styles/theme.css

@@ -106,6 +106,30 @@
   /* Inactive icon colors for light mode */
   --icon-inactive-bg: #9CA3AF;
   --icon-inactive-color: #FFFFFF;
+
+  --accent-interactive: #4A90E2;
+  --text-instruction: #4A90E2;
+  --text-brand: var(--color-gray-700);
+  --text-brand-accent: #DC2626;
+
+  /* container */
+  --landing-paper-bg: var(--bg-surface);
+  --landing-inner-paper-bg: #EEF8FF;
+  --landing-inner-paper-border: #CDEAFF;
+  --landing-button-bg: var(--bg-surface);
+  --landing-button-color: var(--icon-tools-bg);
+  --landing-button-border: #E0F2F7;
+  --landing-button-hover-bg: rgb(251, 251, 251);
+
+  /* drop state */
+  --landing-drop-paper-bg: #E3F2FD;
+  --landing-drop-inner-paper-bg: #BBDEFB;
+  --landing-drop-inner-paper-border: #90CAF9;
+
+  /* shadows */
+  --drop-shadow-color: rgba(0, 0, 0, 0.08);
+  --drop-shadow-color-strong: rgba(0, 0, 0, 0.04);
+  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
 }
 
 [data-mantine-color-scheme="dark"] {
@@ -177,6 +201,29 @@
   --icon-inactive-bg: #2A2F36;
   --icon-inactive-color: #6E7581;
 
+  --accent-interactive: #ffffff;
+  --text-instruction: #ffffff;
+  --text-brand: var(--color-gray-800);
+  --text-brand-accent: #EF4444;
+
+  /* container */
+  --landing-paper-bg: #171A1F;
+  --landing-inner-paper-bg: var(--bg-raised);
+  --landing-inner-paper-border: #2D3237;
+  --landing-button-bg: #2B3037;
+  --landing-button-color: #ffffff;
+  --landing-button-border: #2D3237;
+  --landing-button-hover-bg: #4c525b;
+
+  /* drop state */
+  --landing-drop-paper-bg: #1A2332;
+  --landing-drop-inner-paper-bg: #2A3441;
+  --landing-drop-inner-paper-border: #3A4451;
+
+  /* shadows */
+  --drop-shadow-color: rgba(255, 255, 255, 0.08);
+  --drop-shadow-color-strong: rgba(255, 255, 255, 0.04);
+  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(200, 200, 200, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(200, 200, 200, 0.06)) drop-shadow(0 1.2rem 1rem rgba(200, 200, 200, 0.04));
   /* Adjust shadows for dark mode */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
@@ -185,6 +232,12 @@
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
 }
 
+/* Dropzone drop state styling */
+[data-accept] .dropzone-inner {
+  background-color: var(--landing-drop-inner-paper-bg) !important;
+  border-color: var(--landing-drop-inner-paper-border) !important;
+}
+
 /* Smooth transitions for theme switching */
 * {
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;