From e66599cd57ddd81bb78e7ea117f731d6f2ff7e03 Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Wed, 6 Aug 2025 15:23:23 +0100 Subject: [PATCH] landing page --- frontend/public/StirlingLandingLogoDark.png | Bin 0 -> 2800 bytes frontend/public/StirlingLandingLogoLight.png | Bin 0 -> 3334 bytes .../src/components/shared/LandingPage.tsx | 154 +++++++++++++++--- frontend/src/styles/theme.css | 53 ++++++ 4 files changed, 187 insertions(+), 20 deletions(-) create mode 100644 frontend/public/StirlingLandingLogoDark.png create mode 100644 frontend/public/StirlingLandingLogoLight.png diff --git a/frontend/public/StirlingLandingLogoDark.png b/frontend/public/StirlingLandingLogoDark.png new file mode 100644 index 0000000000000000000000000000000000000000..22b32687e2f70f818e82b725def36a7a10b670b7 GIT binary patch literal 2800 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 AYybcN literal 0 HcmV?d00001 diff --git a/frontend/public/StirlingLandingLogoLight.png b/frontend/public/StirlingLandingLogoLight.png new file mode 100644 index 0000000000000000000000000000000000000000..6468a138209f5e973bebd6081d76ac83239f74d0 GIT binary patch literal 3334 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 D^5$}% literal 0 HcmV?d00001 diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx index 977f1f280..5f524aa30 100644 --- a/frontend/src/components/shared/LandingPage.tsx +++ b/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(null); + const { colorScheme } = useMantineColorScheme(); + + const handleFileDrop = async (files: File[]) => { + await addMultipleFiles(files); + }; + + const handleAddFilesClick = () => { + fileInputRef.current?.click(); + }; + + const handleFileSelect = async (event: React.ChangeEvent) => { + 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 ( - - - - {title} - - - + Stirling PDF Logo + +
+ {/* Logo positioned absolutely in top right corner */} + + + {/* Centered content container */} +
+ {/* Stirling PDF Branding */} + + + Stirling{' '} + + PDF + + + + + {/* Add Files Button */} + + + {/* Hidden file input for native file picker */} + + +
+ + {/* Instruction Text */} + + Drag files in or click "Add Files" to browse + +
+ ); }; diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 7cdb46c55..71443411f 100644 --- a/frontend/src/styles/theme.css +++ b/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;