Add vercel to webpage

frontegg · Oct 31, 2023 · 01beb1e · 01beb1e
1 parent 1d01319
commit 01beb1e
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 56 deletions.
diff --git a/web/package.json b/web/package.json
@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react-terminal-ui": "^1.1.0",
+    "@vercel/analytics": "^1.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-terminal-ui": "^1.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,4 +1,4 @@
-// import Example1 from './examples/example1.tsx';
+import { Analytics } from '@vercel/analytics/react';
 
 import example1 from './assets/harmor_1_n.mp4'
 import example2 from './assets/harmor_2_n.mp4'
@@ -13,69 +13,71 @@ const Separator = () => <div style={{
 }}/>
 
 function App() {
-
-
   return (
-    <div className="container">
-      <div className="relative mb-16 max-w-4xl z-30 text-center mx-auto pt-8">
-        <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold leading-tight pt-8 mb-8">🛡️ Harmor</h1>
-        <br/>
-        <br/>
-        <div className="pb-8 leading-relaxed max-w-[50rem] text-2xl mx-auto">
-          Ever find yourself navigating the maze of HAR files, worrying about the hidden risks they might pose? Ever
-          wished there was a shield to guard against unintended data exposures? Your search ends with <b>Harmor</b>.
-          <br/>
+    <>
+      <div className="container">
+        <div className="relative mb-16 max-w-4xl z-30 text-center mx-auto pt-8">
+          <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold leading-tight pt-8 mb-8">🛡️ Harmor</h1>
           <br/>
           <br/>
-          <span className="font-light text-3xl"> Sanitizing and securing HAR files with precision</span>
-        </div>
-
-        <div className="text-center fixed left-8 top-8">
-          <a href="https://frontegg.com" target="_blank" rel="noreferrer" className="inline-block">
-            <img alt="frontegg logo" src="https://frontegg.com/wp-content/themes/frontegg/images/logos/logo-black.svg"/>
-          </a>
-        </div>
-
-
-        <Separator/>
-        <p className="mt-12 text-left text-lg">
-          HAR files are intricate blueprints of web interactions, elegantly capturing a web session's every nuance. In
-          the domain of web diagnostics, these files stand as critical repositories, meticulously cataloging everything
-          from headers to payload content. However, their granular details also make them susceptible to potential data
-          exposures.
-          <br/>
+          <div className="pb-8 leading-relaxed max-w-[50rem] text-2xl mx-auto">
+            Ever find yourself navigating the maze of HAR files, worrying about the hidden risks they might pose? Ever
+            wished there was a shield to guard against unintended data exposures? Your search ends with <b>Harmor</b>.
+            <br/>
+            <br/>
+            <br/>
+            <span className="font-light text-3xl"> Sanitizing and securing HAR files with precision</span>
+          </div>
 
-        </p>
-        <h2 className="mt-12 text-left font-bold text-2xl">
-          Two sophisticated modes for HAR sanitization:
-        </h2>
+          <div className="text-center fixed left-8 top-8">
+            <a href="https://frontegg.com" target="_blank" rel="noreferrer" className="inline-block">
+              <img alt="frontegg logo"
+                   src="https://frontegg.com/wp-content/themes/frontegg/images/logos/logo-black.svg"/>
+            </a>
+          </div>
 
-        <div className="mt-8 text-left">
-          <h3 className="text-xl font-bold mb-3">Direct Sanitization Mode</h3>
-          <p>Experience an interactive journey, guiding users through a structured
-            questionnaire, ensuring each data point is reviewed and sanitized as needed.</p>
 
-          <div className="text-center mt-8">
-            <video src={example1} autoPlay loop muted controls={false}/>
-            {/*<Example1/>*/}
+          <Separator/>
+          <p className="mt-12 text-left text-lg">
+            HAR files are intricate blueprints of web interactions, elegantly capturing a web session's every nuance. In
+            the domain of web diagnostics, these files stand as critical repositories, meticulously cataloging
+            everything
+            from headers to payload content. However, their granular details also make them susceptible to potential
+            data
+            exposures.
+            <br/>
+
+          </p>
+          <h2 className="mt-12 text-left font-bold text-2xl">
+            Two sophisticated modes for HAR sanitization:
+          </h2>
+
+          <div className="mt-8 text-left">
+            <h3 className="text-xl font-bold mb-3">Direct Sanitization Mode</h3>
+            <p>Experience an interactive journey, guiding users through a structured
+              questionnaire, ensuring each data point is reviewed and sanitized as needed.</p>
+
+            <div className="text-center mt-8">
+              <video src={example1} autoPlay loop muted controls={false}/>
+              {/*<Example1/>*/}
+            </div>
           </div>
-        </div>
-        <div className="mt-12 text-left mb-12">
-          <h3 className="text-xl font-bold mb-3">Template Mode</h3>
-          <p>For streamlined efficiency without compromise, employ predefined templates to consistently
-            sanitize HAR files across sessions.</p>
-
-          <div className="text-center mt-8">
-            <video src={example2} autoPlay loop muted controls={false}/>
-            {/*<Example1/>*/}
+          <div className="mt-12 text-left mb-12">
+            <h3 className="text-xl font-bold mb-3">Template Mode</h3>
+            <p>For streamlined efficiency without compromise, employ predefined templates to consistently
+              sanitize HAR files across sessions.</p>
+
+            <div className="text-center mt-8">
+              <video src={example2} autoPlay loop muted controls={false}/>
+              {/*<Example1/>*/}
+            </div>
           </div>
-        </div>
 
-        <Separator/>
+          <Separator/>
+        </div>
       </div>
-
-
-    </div>
+      <Analytics/>
+    </>
   )
 }
 

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -586,6 +586,13 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vercel/analytics@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.1.1.tgz#2a712378a95014a548b4f9d2ae1ea0721433908d"
+  integrity sha512-+NqgNmSabg3IFfxYhrWCfB/H+RCUOCR5ExRudNG2+pcRehq628DJB5e1u1xqwpLtn4pAYii4D98w7kofORAGQA==
+  dependencies:
+    server-only "^0.0.1"
+
 "@vitejs/plugin-react@^4.0.3":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz#e4f56f46fd737c5d386bb1f1ade86ba275fe09bd"
@@ -1426,6 +1433,11 @@ semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+server-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"