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/src/components/shared/LandingPage.tsx

@@ -1,28 +1,146 @@
 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 { useTranslation } from 'react-i18next';
+import { useFileHandler } from '../../hooks/useFileHandler';
 
-interface LandingPageProps {
-  title: string;
-}
+const LandingPage = () => {
+  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' }}>
-      <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={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
+      {/* 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-[95vh]"
+        style={{
+          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
-        </Button>
-      </Stack>
+          <img
+            src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
+            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>
   );
 };