add landing page

IqbalLx · Jan 7, 2025 · 1faa948 · 1faa948
1 parent c55b22a
commit 1faa948
Show file tree

Hide file tree

Showing 16 changed files with 496 additions and 21 deletions.
diff --git a/landing-page/index.html b/landing-page/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Honest — Find the Best Deals, Honestly</title>
+  </head>
+
+  <body>
+    <div id="app-container"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
diff --git a/landing-page/package.json b/landing-page/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@extension/landing-page",
+  "version": "0.1.0",
+  "description": "chrome extension - landing page",
+  "private": true,
+  "sideEffects": true,
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "clean:node_modules": "pnpx rimraf node_modules",
+    "clean:turbo": "rimraf .turbo",
+    "clean": "pnpm clean:turbo && pnpm clean:node_modules",
+    "build": "vite build",
+    "dev": "cross-env __DEV__=true vite",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "pnpm lint --fix",
+    "prettier": "prettier . --write --ignore-path ../../.prettierignore",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@extension/ui": "workspace:*",
+    "lucide-react": "^0.469.0"
+  },
+  "devDependencies": {
+    "@extension/tailwindcss-config": "workspace:*",
+    "@extension/tsconfig": "workspace:*",
+    "@extension/vite-config": "workspace:*",
+    "postcss-load-config": "^6.0.1",
+    "cross-env": "^7.0.3",
+    "@vitejs/plugin-react-swc": "^3.7.2"
+  },
+  "postcss": {
+    "plugins": {
+      "tailwindcss": {},
+      "autoprefixer": {}
+    }
+  }
+}
diff --git a/landing-page/public/logo_horizontal.svg b/landing-page/public/logo_horizontal.svg
diff --git a/landing-page/public/logo_horizontal_dark.svg b/landing-page/public/logo_horizontal_dark.svg
diff --git a/landing-page/src/LandingPage.tsx b/landing-page/src/LandingPage.tsx
@@ -0,0 +1,95 @@
+import { Button } from '@extension/ui/lib/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@extension/ui/lib/components/ui/card';
+import { GithubIcon } from 'lucide-react';
+import { useState, useEffect } from 'react';
+
+export default function LandingPage() {
+  const githubUrl = 'https://github.com/IqbalLx/honest';
+
+  const [browser, setBrowser] = useState('chrome');
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes('firefox')) {
+      setBrowser('firefox');
+    } else {
+      setBrowser('chrome');
+    }
+  }, []);
+
+  const storeLink =
+    browser === 'firefox'
+      ? 'https://addons.mozilla.org/en-US/firefox/addon/honest/'
+      : 'https://chrome.google.com/webstore/detail/honest/';
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-between">
+      {/* Header */}
+      <header className="w-full py-4 bg-white shadow-md">
+        <div className="container mx-auto px-4 flex justify-between items-center">
+          <h1 className="text-2xl font-bold">Honest</h1>
+          <a href={githubUrl} target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-black">
+            <GithubIcon className="w-5 h-5" />
+          </a>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <main className="flex-1 flex items-center justify-center text-center px-4">
+        <div className="max-w-3xl">
+          <h1 className="text-4xl font-extrabold leading-tight">
+            Find the Best Deals, <span className="text-yellow-600">Honestly</span>
+          </h1>
+          <p className="mt-4 text-lg text-gray-600">
+            Honest is a community-driven coupon-finder extension that helps you save money without stealing your
+            affiliate referral cookies. We believe in transparency and user-first experience.
+          </p>
+          <a href={storeLink} target="_blank" rel="noopener noreferrer">
+            <Button className="mt-6 bg-yellow-600 hover:bg-yellow-500">
+              {browser === 'firefox' ? 'Add to Firefox' : 'Add to Chrome'} — It's free!
+            </Button>
+          </a>
+        </div>
+      </main>
+
+      {/* Features Section */}
+      <section className="bg-white py-12 w-full">
+        <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Card>
+            <CardHeader>
+              <CardTitle>Community-Driven</CardTitle>
+            </CardHeader>
+            <CardContent>Anyone can upload and vote for coupons. Honest is powered by its users.</CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>No Affiliate Stealing</CardTitle>
+            </CardHeader>
+            <CardContent>Your privacy is respected. We don’t steal or overwrite your affiliate cookies.</CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Open Source</CardTitle>
+            </CardHeader>
+            <CardContent>Honest is open-source. Check out our code and contribute on GitHub.</CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="w-full py-4 bg-gray-900 text-white text-center">
+        <p>
+          Made with ❤️ by the Honest team. Check out our code on
+          <a
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-yellow-500 hover:underline ml-1">
+            GitHub
+          </a>
+          .
+        </p>
+      </footer>
+    </div>
+  );
+}
diff --git a/landing-page/src/index.css b/landing-page/src/index.css
@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/landing-page/src/index.tsx b/landing-page/src/index.tsx
@@ -0,0 +1,15 @@
+import { createRoot } from 'react-dom/client';
+import '@src/index.css';
+import '@extension/ui/dist/global.css';
+import LandingPage from '@src/LandingPage';
+
+function init() {
+  const appContainer = document.querySelector('#app-container');
+  if (!appContainer) {
+    throw new Error('Can not find #app-container');
+  }
+  const root = createRoot(appContainer);
+  root.render(<LandingPage />);
+}
+
+init();
diff --git a/landing-page/tailwind.config.ts b/landing-page/tailwind.config.ts
@@ -0,0 +1,7 @@
+import baseConfig from '@extension/tailwindcss-config';
+import { withUI } from '@extension/ui';
+
+export default withUI({
+  ...baseConfig,
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+});
diff --git a/landing-page/tsconfig.json b/landing-page/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@extension/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"]
+    },
+    "types": ["chrome", "../../vite-env.d.ts"]
+  },
+  "include": ["src"]
+}
diff --git a/landing-page/vite.config.mts b/landing-page/vite.config.mts
@@ -0,0 +1,19 @@
+import { resolve } from 'node:path';
+import { withPageConfig } from '@extension/vite-config';
+import react from '@vitejs/plugin-react-swc';
+
+const rootDir = resolve(__dirname);
+const srcDir = resolve(rootDir, 'src');
+
+export default withPageConfig({
+  resolve: {
+    alias: {
+      '@src': srcDir,
+    },
+  },
+  publicDir: resolve(rootDir, 'public'),
+  build: {
+    outDir: resolve(rootDir, 'dist'),
+  },
+  envDir: "../.env"
+}, true);
diff --git a/packages/ui/lib/global.css b/packages/ui/lib/global.css
@@ -14,7 +14,7 @@
       --input: 214.3 31.8% 91.4%;
       --card: 0 0% 100%;
       --card-foreground: 222.2 47.4% 11.2%;
-      --primary: 222.2 47.4% 11.2%;
+      --primary: 41 96% 40%;
       --primary-foreground: 210 40% 98%;
       --secondary: 210 40% 96.1%;
       --secondary-foreground: 222.2 47.4% 11.2%;

diff --git a/packages/vite-config/lib/withPageConfig.mjs b/packages/vite-config/lib/withPageConfig.mjs
@@ -18,12 +18,12 @@ export const watchOption = isDev ? {
  * @param {UserConfig} config
  * @returns {UserConfig}
  */
-export function withPageConfig(config) {
+export function withPageConfig(config, landingPage = false) {
   return defineConfig(
     deepmerge(
       {
         base: '',
-        plugins: [react(), isDev && watchRebuildPlugin({ refresh: true })],
+        plugins: [react(), !landingPage && isDev && watchRebuildPlugin({ refresh: true })],
         build: {
           sourcemap: isDev,
           minify: isProduction,

diff --git a/pages/options/src/Options.tsx b/pages/options/src/Options.tsx
@@ -1,25 +1,19 @@
 import '@src/Options.css';
 import { withErrorBoundary, withSuspense } from '@extension/shared';
-import { Button } from '@extension/ui/lib/components/ui/button';
 
 const Options = () => {
-  const isLight = false;
-  const logo = isLight ? 'options/logo_horizontal.svg' : 'options/logo_horizontal_dark.svg';
-  const goGithubSite = () =>
-    chrome.tabs.create({ url: 'https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite' });
-
   return (
-    <div className={`App ${isLight ? 'bg-slate-50 text-gray-900' : 'bg-gray-800 text-gray-100'}`}>
-      <button onClick={goGithubSite}>
-        <img src={chrome.runtime.getURL(logo)} className="App-logo" alt="logo" />
-      </button>
-      <p>
-        Edit <code>pages/options/src/Options.tsx</code>
-      </p>
-      <Button className="mt-4" onClick={() => {}}>
-        Toggle theme
-      </Button>
-    </div>
+    <main className="flex-1 flex items-center justify-center text-center px-4">
+      <div className="max-w-3xl">
+        <h1 className="text-4xl font-extrabold leading-tight">
+          Find the Best Deals, <span className="text-yellow-600">Honestly</span>
+        </h1>
+        <p className="mt-4 text-lg text-gray-600">
+          Honest is a community-driven coupon-finder extension that helps you save money without stealing your affiliate
+          referral cookies. We believe in transparency and user-first experience.
+        </p>
+      </div>
+    </main>
   );
 };
 

diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
@@ -69,7 +69,9 @@ export default function Popup() {
 
   return (
     <div className="w-[300px] h-[600px] p-4 flex flex-col">
-      <h1 className="text-2xl font-bold mb-4">Coupons for {currentSite}</h1>
+      <h1 className="text-2xl font-bold mb-4">
+        Coupons for <span className="text-yellow-600">{currentSite}</span>
+      </h1>
       <ScrollArea className="flex-grow mb-4">
         {coupons.length > 0 ? <CouponList coupons={coupons} /> : <EmptyState />}
       </ScrollArea>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - "backend"
   - "chrome-extension"
+  - "landing-page"
   - "pages/*"
   - "packages/*"
   - "tests/*"