feat(landing): added some sections (#4)

papra-hq · Feb 2, 2025 · e03e516 · e03e516
1 parent 6b4ad3e
commit e03e516
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 3 deletions.
diff --git a/src/components/BentoCard.astro b/src/components/BentoCard.astro
@@ -0,0 +1,27 @@
+---
+import { cn } from '../utils/cn';
+
+type Props = {
+  title: string;
+  description: string;
+  icon?: string;
+};
+
+const { title, description, icon } = Astro.props;
+---
+
+
+    <div class="border rounded-xl bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:24px_24px] overflow-hidden">
+      <div class="z-50">
+        <slot></slot>
+      </div>
+
+      <div class="relative z-60 bg-gradient-to-t from-background via-background to-transparent p-6 pt-24 mt--24">
+        {icon && (<div class={cn('size-9 text-muted-foreground mb-4', icon)} />)}
+        <h3 class="text-xl font-bold text-pretty">{title}</h3>
+
+        <p class="text-muted-foreground text-base mt-2 leading-tight">
+          {description}
+        </p>
+      </div>
+    </div>
diff --git a/src/components/FeaturesBento.astro b/src/components/FeaturesBento.astro
@@ -0,0 +1,100 @@
+---
+import { cn } from '../utils/cn';
+import BentoCard from './BentoCard.astro';
+
+const filesIcons = [
+  'i-tabler-file',
+  'i-tabler-file-text',
+  'i-tabler-file-code',
+  'i-tabler-file-code-2',
+  'i-tabler-file-invoice',
+  'i-tabler-file-euro',
+  'i-tabler-file-dollar',
+  'i-tabler-file-analytics',
+  'i-tabler-file-chart',
+  'i-tabler-file-description',
+  'i-tabler-file-music',
+  'i-tabler-file-lambda',
+  'i-tabler-file-3d',
+  'i-tabler-file-rss',
+];
+
+const getRandomIcon = () => filesIcons[Math.floor(Math.random() * filesIcons.length)];
+---
+
+<div class="py-32 bg-card p-6">
+
+  <h2 class="text-3xl font-semibold text-pretty mb-2 text-center">
+    Some Features
+  </h2>
+  <p class="text-base text-muted-foreground text-center max-w-500px mx-auto mb-24">
+    Manage your documents with ease. Papra offers a range of features to help you organize, search, and access your documents effortlessly.
+  </p>
+
+  <div class="max-w-1000px mx-auto flex flex-col sm:flex-row gap-4 items-start">
+
+    <div class="flex flex-col gap-4 w-full">
+
+      <BentoCard
+        title="All your documents in one place"
+        description="Say goodbye to scattered documents across different platforms. Papra helps you archive and organize all your documents in one place."
+        icon="i-tabler-archive"
+      >
+      <div class="grid grid-cols-8 grid-rows-2 gap-4 p-6 overflow-hidden mb--150px">
+        {Array.from({ length: 24 }).map(() => <div class={cn('size-8 sm:size-10 text-muted text-center', getRandomIcon())} />)}
+      </div>
+    </BentoCard>
+
+    <BentoCard
+      title="Email ingestion"
+      description="Generate a unique email address and forward your emails to Papra. We'll automatically save your email attachments as documents."
+      icon="i-tabler-mail"
+    >
+    <div class="mt-6" />
+  </BentoCard>
+  </div>
+
+    <div class="flex flex-col gap-4 w-full">
+      <BentoCard
+        title="Search and find documents easily"
+        description="With Papra's powerful search functionality, you can find any document in seconds. No more endless scrolling and searching."
+        icon="i-tabler-search"
+      >
+        <div class="mb--180px flex items-start justify-center pt-6 relative">
+          <div class="bg-background sm:min-w-64 border rounded-lg">
+            <div class="px-4 py-2 flex items-center gap-2">
+              <span class="i-tabler-search size-4 text-primary"></span>
+              <span class="text-muted-foreground text-xs">Search for documents...</span>
+            </div>
+
+            <div class="border-t p-4 text-xs text-muted-foreground">
+              <div class="flex items-center gap-2">
+                <span class="i-tabler-file-text size-4"></span>
+                Phone invoice.pdf
+              </div>
+
+              <div class="flex items-center gap-2 mt-2">
+                <span class="i-tabler-file-analytics size-4"></span>
+                Analytics report.pdf
+              </div>
+
+              <div class="flex items-center gap-2 mt-2">
+                <span class="i-tabler-file-code size-4"></span>
+                Code snippets.txt
+              </div>
+
+              <div class="flex items-center gap-2 mt-2">
+                <span class="i-tabler-file size-4"></span>
+                Document.docx
+              </div>
+            </div>
+          </div>
+        </div>
+      </BentoCard>
+
+      <BentoCard title="Documents tagging" description="Organize your documents with tags. Tags help you categorize and filter your documents easily." icon="i-tabler-tag">
+        <div class="mt-6" />
+      </BentoCard>
+    </div>
+  </div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,8 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import Hero from '../assets/papra-screenshot.png';
-import EarlyAccess from '../components/EarlyAccess.astro';
-
+import FeaturesBento from '../components/FeaturesBento.astro';
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
 import Layout from '../layouts/Layout.astro';
@@ -38,7 +37,37 @@ import '../styles/app.css';
     <Image src={Hero} alt="Papra Screenshot" class="mx-auto max-w-1000px w-full relative z-50 mt--300px" />
   </div>
 
-  <EarlyAccess />
+  <FeaturesBento />
+
+  <div class=" py-32 relative overflow-hidden border-y">
+    <div class="z-10 bg-primary size-64 rounded-full blur-84 op-20 transform translate-x--80% translate-y--33% absolute"></div>
+    <div class="z-10 bg-primary size-128 rounded-full blur-84 op-20 transform translate-x-80% translate-y-33% absolute right-0"></div>
+
+    <div class="max-w-800px mx-auto p-6">
+      <div class="text-center">
+        <p class="text-3xl font-bold text-pretty">"With Papra, we've streamlined our document management process."</p>
+        <div class="text-lg mt-4">- Ada, FICSIT Inc.</div>
+      </div>
+    </div>
+  </div>
+
+<div class="bg-card py-32">
+  <div class="max-w-1200px mx-auto px-6">
+    <div class="border rounded-xl bg-background pt-32 pb-24 bg-[linear-gradient(to_right,#80808010_1px,transparent_1px),linear-gradient(to_bottom,#80808010_1px,transparent_1px)] bg-[size:48px_48px] px-6">
+      <h2 class="text-2xl sm:text-4xl font-bold text-center max-w-650px mx-auto">
+        Trusted by home, startups, and enterprises of all sizes.
+      </h2>
+
+      <div class="flex mt-4 items-center justify-center">
+        <a href="https://dashboard.papra.app/register" class="font-semibold text-background px-4 py-2 hover:bg-primary/80 rounded-lg bg-primary transition mt-8 inline-block flex items-center">
+          Get started
+
+          <div class="i-tabler-arrow-right ml-2" aria-hidden="true"></div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 
   <Footer />
 </Layout>
diff --git a/uno.config.ts b/uno.config.ts
@@ -102,4 +102,34 @@ export default defineConfig({
     },
   },
   safelist: ['sm:grid-cols-1', 'sm:grid-cols-2', 'sm:grid-cols-3', 'sm:grid-cols-4'],
+  preflights: [
+    {
+      getCSS: () => `
+      @keyframes slideRight {
+        0% {left: -12px;}
+        50% {left: calc(100% + 12px);}
+        100% {left: calc(100% + 12px);}
+      }
+      @keyframes slideDown {
+        0% {top: -12px;}
+        50% {top: calc(100% + 12px);}
+        100% {top: calc(100% + 12px);}
+      }
+    `,
+    },
+  ],
+  rules: [
+    [
+      'animate-slideRight',
+      {
+        'animation-name': 'slideRight',
+      },
+    ],
+    [
+      'animate-slideDown',
+      {
+        'animation-name': 'slideDown',
+      },
+    ],
+  ],
 });