Feature/v2/landing page (#4128)

# Description of Changes

- Added landing page styling
- Clicking add files now opens native file manager

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/public/branding/StirlingPDFLogoNoTextDark.svg

@@ -0,0 +1,4 @@
+<svg width="146" height="157" viewBox="0 0 146 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#E6E6E6" fill-opacity="0.9"/>
+<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#E6E6E6" fill-opacity="0.8"/>
+</svg>

frontend/public/branding/StirlingPDFLogoNoTextLight.svg

@@ -0,0 +1,4 @@
+<svg width="146" height="146" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#ACACAC" fill-opacity="0.3"/>
+<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#FC9999" fill-opacity="0.5"/>
+</svg>

frontend/src/components/shared/LandingPage.tsx

@@ -1,28 +1,146 @@
 import React from 'react';
-import { Container, Stack, Text, Button } from '@mantine/core';
+import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
-import FolderIcon from '@mui/icons-material/FolderRounded';
+import { Dropzone } from '@mantine/dropzone';
-import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import AddIcon from '@mui/icons-material/Add';
+import { useTranslation } from 'react-i18next';
+import { useFileHandler } from '../../hooks/useFileHandler';
 
-interface LandingPageProps {
+const LandingPage = () => {
-  title: string;
+  const { addMultipleFiles } = useFileHandler();
-}
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const { colorScheme } = useMantineColorScheme();
+  const { t } = useTranslation();
+
+  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' }}>
+    <Container size="lg" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
-      <Stack align="center" gap="lg">
+      {/* White PDF Page Background */}
-        <Text size="xl" fw={500} c="dimmed">
+      <Dropzone
-          {title}
+        onDrop={handleFileDrop}
-        </Text>
+        accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
-        <Button
+        multiple={true}
-          leftSection={<FolderIcon />}
+        className="w-4/5 flex items-center justify-center h-[95vh]"
-          size="lg"
+        style={{
-          onClick={openFilesModal}
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          bottom: 0,
+          borderRadius: '0.5rem 0.5rem 0 0',
+          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)',
+            },
+          },
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: ".5rem",
+            zIndex: 10,
+
+          }}
         >
-          Open Files
+          <img
-        </Button>
+            src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
-      </Stack>
+            alt="Stirling PDF Logo"
+            style={{
+              width: '10rem',
+              height: 'auto',
+              pointerEvents: 'none',
+              marginTop: '-0.5rem'
+            }}
+          />
+        </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">
+              <img
+                src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoWhiteText.svg' : '/branding/StirlingPDFLogoGreyText.svg'}
+                alt="Stirling PDF"
+                style={{ height: '2.2rem', width: 'auto' }}
+              />
+            </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>
+                {t('fileUpload.addFiles', 'Add Files')}
+              </span>
+            </Button>
+
+            {/* 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' }}
+          >
+            {t('fileUpload.dragFilesInOrClick', '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;