From aa2ac2ab42c597079f62f0b7a03d71faf5a20336 Mon Sep 17 00:00:00 2001
From: tony <tonyantony300@gmail.com>
Date: Fri, 24 Jan 2025 18:13:20 +0530
Subject: [PATCH] ready

---
 src/components/FooterV2.jsx                  |   2 +-
 src/components/Hero.jsx                      |  18 +-
 src/components/Navbar.jsx                    |  17 +-
 src/components/additional/Data.js            | 168 +++----------------
 src/components/additional/DemoComponent.jsx  |   2 +-
 src/components/additional/FaqComponent.jsx   |  14 +-
 src/components/additional/StoryComponent.jsx |  73 ++++++++
 src/pages/demo.astro                         |   2 +-
 src/pages/story.astro                        |  14 ++
 9 files changed, 138 insertions(+), 172 deletions(-)
 create mode 100644 src/components/additional/StoryComponent.jsx
 create mode 100644 src/pages/story.astro

diff --git a/src/components/FooterV2.jsx b/src/components/FooterV2.jsx
index 62a0852..2a552bb 100644
--- a/src/components/FooterV2.jsx
+++ b/src/components/FooterV2.jsx
@@ -11,7 +11,7 @@ import Mastodon from "../assets/logos/Mastodon";
 
 export const Footer = () => {
   return (
-    <section className="w-full bg-blue1">
+    <section className="w-full bg-blue1 z-50">
       <footer className="relative mx-auto h-[56rem] px-[24px] pt-[32px]  max-w-[1312px]  min-h-[545px] lg:px-[60px] lg:pt-[60px]">
         <div className="flex h-full flex-col gap-32">
           <div className="flex flex-col gap-24">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 60d202b..594adfb 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -77,15 +77,6 @@ export const Hero = () => (
           Google Sheets */}
         </div>
         <div className="flex items-center justify-center gap-4 md:flex-row text-sm flex-wrap pt-12">
-          <a
-            className="rounded-lg font-medium text-black bg-blue1 px-3 py-2 text-sm whitespace-nowrap flex cursor-pointer"
-            href="https://docs.osvauld.com/installation/setting-up-osvauld/"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="get started"
-          >
-            <span className="pt-px">Join waitlist</span>
-          </a>
           <a
             className="text-blue1 bg-dark4 border rounded-lg border-blue1 flex justify-center items-center cursor-pointer transition whitespace-nowrap px-3 py-2"
             href="/"
@@ -96,6 +87,15 @@ export const Hero = () => (
             <PlayButton />
             <span className="ml-1 font-medium"> Watch Demo</span>
           </a>
+          <a
+            className="rounded-lg font-medium text-black bg-blue1 px-3 py-2 text-sm whitespace-nowrap flex cursor-pointer"
+            href="https://docs.osvauld.com/installation/setting-up-osvauld/"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="get started"
+          >
+            <span className="pt-px">Join waitlist</span>
+          </a>
         </div>
         <div className="flex justify-center items-center pt-12">
           <img
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 43f670e..810cc2f 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -15,11 +15,11 @@ import { Tick } from "../assets/icons/Tick";
 import { BuyMeCoffee } from "../assets/icons/BuyMeCoffee";
 
 const navbarLinks = [
-  // {
-  //   label: "Book a Demo",
-  //   href: "/demo",
-  //   ariaLabel: "Book a Demo",
-  // },
+  {
+    label: "Book a Demo",
+    href: "/demo",
+    ariaLabel: "Book a Demo",
+  },
   // {
   //   label: "Pricing",
   //   href: "/pricing",
@@ -31,8 +31,8 @@ const navbarLinks = [
     ariaLabel: "FAQ",
   },
   {
-    label: "Our Story",
-    href: "/",
+    label: "Our story",
+    href: "/story",
     ariaLabel: "our story",
   },
   // {
@@ -316,8 +316,7 @@ export const Navbar = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <BuyMeCoffee />
-                <span className="ml-1">Join the Waitlist</span>
+                <span className="ml-1">Join Waitlist</span>
               </a>
             </div>
           </div>
diff --git a/src/components/additional/Data.js b/src/components/additional/Data.js
index b2baee5..f8d1701 100644
--- a/src/components/additional/Data.js
+++ b/src/components/additional/Data.js
@@ -1,163 +1,43 @@
 const Data = [
   {
-    Question: "Is Osvauld free to use?",
-    Answer:
-      "Osvauld Community edition is free to use under AGPL 3.0, no strings attached.",
+    question: "Do I need internet to access my passwords?",
+    answer:
+      "No! You can access all your passwords anytime, even without internet. Changes automatically sync across your devices when you're back online.",
   },
   {
-    Question: "How does Osvauld reduce cyber security risks?",
-    Answer:
-      "Osvauld enterprise password manager facilitates secure sharing of credentials, mitigates common security risks such as password reuse and weak passwords, enforces password hygiene, and enhances the visibility of credential access across the team.",
+    question: "How is this different from other password managers?",
+    answer:
+      "You don't rely on any external servers or cloud services. Everything stays on your personal devices, giving you complete control over your data.",
   },
   {
-    Question: "Is Osvauld only suitable for big companies?",
-    Answer:
-      "Osvauld is suitable for both big and small companies alike. It's a good fit if you have a team and want to securely manage access to credentials within the team effectively.",
+    question: "What if my laptop crashes or gets stolen?",
+    answer:
+      "Don't worry! Your passwords are automatically backed up across your connected devices. You can recover everything by logging in from any of your other devices.",
   },
   {
-    Question: "How many people can share their passwords using Osvauld?",
-    Answer:
-      "Osvauld imposes no limit on the number of users who can share passwords within the system. The platform is designed to accommodate organizations of any size, from small teams to large enterprises, without any restrictions on the user count.",
+    question: "Is it safe to store all passwords in one place?",
+    answer:
+      "Absolutely. Your passwords are strongly encrypted and only accessible to you. Even if one device is compromised, your passwords stay safe.",
   },
   {
-    Question: "What is the cost of implementing Osvauld into a workplace?",
-    Answer:
-      "The cost to implement Osvauld in a workplace is limited to the infrastructure expenses associated with hosting it within your company's environment. Due to Osvauld's lightweight architecture and optimized code base, these costs are typically minimal.",
+    question: "How do I add a new device?",
+    answer:
+      "Just install the app and scan a QR code to connect your new device. No accounts or complex setup needed!",
   },
   {
-    Question:
-      "How safe is Osvauld as an enterprise password management solution?",
-    Answer:
-      "Osvauld enterprise password management system has secure storage with multiple levels of encryption. On top of that, it has a two-factor authentication for its users for additional safety.",
+    question: "Can I organize my passwords?",
+    answer:
+      "Yes! Create different vaults to organize passwords by category - like work, personal, or finance. Access them easily across all your devices.",
   },
   {
-    Question:
-      "Can my organization trust Osvauld enterprise password management software?",
-    Answer: `Yes, your organization can trust Osvauld enterprise password management software as it has robust security features designed to protect sensitive information.\n
-        1) Two-Factor Authentication: Osvauld implements two-factor authentication by default, enhancing security significantly. This involves the use of OpenPGP encryption and signing certificates alongside a passphrase. Users must register these certificates with the server, which are then used with a passphrase for secure access.\n
-        2) Secure Storage and Use of Certificates: The encryption certificates are securely stored in a local storage. Upon entering the passphrase, these certificates are decrypted but only remain in memory while they are needed and are not stored persistently. This approach minimizes the risk of unauthorized access and exposure.\n
-        3) Secure Communication: Osvauld hashes and signs the payload for certain critical requests. These signed hashes are then verified on the backend to ensure the integrity and security of the data transmitted over the network.\n
-        4) Client-Side Decryption: All sensitive fields are decrypted exclusively on the client side, ensuring that sensitive data is never exposed in decrypted form outside of the client’s secure environment.`,
+    question: "What if I'm offline for a long time?",
+    answer:
+      "No problem! You can still view and update passwords. All changes will sync across your devices when you're back online.",
   },
   {
-    Question:
-      "What if the database gets leaked? Is it safe to save all my passwords in one place?",
-    Answer:
-      "Osvauld employs a zero-knowledge architecture, ensuring robust security for stored passwords. Your sensitive data in Osvauld's database is encrypted using OpenPGP, a widely respected encryption standard. Crucially, the decryption of sensitive data occurs exclusively within the client-side browser extension, never on the server. Osvauld never stores any of the user's cryptographic keys or their derivatives.",
-  },
-  {
-    Question: "Do I need to be connected to the internet to use Osvauld?",
-    Answer:
-      "Yes, you need internet access to use Osvauld. An active internet connection is required to fetch the encrypted passwords from your self-hosted backend. This ensures that you have access to the most up-to-date version of your passwords stored in the centralized system.",
-  },
-  {
-    Question: "What is a super Admin?",
-    Answer:
-      "Super admin is the first user ever created in Osvauld. By default, all the shared folders will be shared with the super admin.",
-  },
-  {
-    Question: "Can I share an entire folder with another user?",
-    Answer:
-      "Yes, folders can be shared with users or groups. Any new credential added to a shared folder automatically inherits the same sharing properties, ensuring all authorized users or groups have access.",
-  },
-  {
-    Question: "How do I revoke permissions to certain users using folders?",
-    Answer:
-      "Permissions can be adjusted by accessing the 'Access List' option for folders. This list allows you to modify or revoke access rights for specific users or groups.",
-  },
-  {
-    Question: "Can I remove access to a single credential?",
-    Answer:
-      "Yes, you can remove access to a single credential, If a credential was shared individually, you can adjust its access settings to remove specific users or groups by clicking on the credential details. However, if the folder itself was shared, you cannot selectively remove access to that specific credential without altering the access settings for the entire folder. This is because the credential inherits the sharing properties of the folder.",
-  },
-  {
-    Question: "What are environments?",
-    Answer:
-      "Environments are a way to organize and manage credentials and settings that developers use in their local development.  They are collections of credentials grouped under a single name. This allows developers to invoke an environment-specific command (e.g., osvauld env env_name npm run dev) to inject these credentials into the shell, and when a credential changes they don't have to manage it as it will be automatically synced, thus eliminating the need for .env files.",
-  },
-  {
-    Question:
-      "How do environments help developers with local secrets management?",
-    Answer:
-      "Environments help by centralizing the management of local credentials used during development workflow, allowing developers to access all necessary configurations under one label. This approach minimizes the risks associated with hard-coded credentials in source code and makes it easier to update credentials without changing multiple configuration files. When a credential is updated in Osvauld, it's automatically reflected in the development processes that rely on that environment.",
-  },
-  {
-    Question:
-      "Can users add a secret to a folder that someone else has created and shared with them?",
-    Answer:
-      "Users with 'Manage' access to a folder can add secrets to it, even if the folder was created and shared by someone else.",
-  },
-  {
-    Question: "What are the recovery options that Osvauld has?",
-    Answer: `Osvauld provides two primary recovery options:\n
-      1. Users have the option to retrieve their certificates and store them somewhere safe, allowing them to recover their account when logging in from a new browser.\n
-      2. For enhanced safety, shared folders are by default accessible to a super admin, who can recover data in case a user's PGP certificates are lost or if they forget their passphrase.`,
-  },
-  {
-    Question: "How can I contribute to Osvauld?",
-    Answer:
-      "You can contribute to Osvauld by joining our community on Discord. We welcome contributions from developers and enthusiasts in improving the project.",
-  },
-  {
-    Question:
-      "What is the difference between Osvauld Community Edition (CE) and Pro Edition (PE)?",
-    Answer: `The main differences between the Osvauld Community Edition (CE) and the Pro Edition (EE) are focused on the added functionalities tailored for larger organizations that require more robust security and management features. The Pro Edition includes: \n
-  
-      1) Audit Logs: Comprehensive logging of all actions and changes within the system crucial for compliance and security audits.\n
-      2) Multi-Factor Authentication (MFA): An additional layer of security that requires users to verify their identity using more than one authentication method, thus significantly reducing the risk of unauthorized access.`,
-  },
-  {
-    Question:
-      "Is a business password manager scalable for growing organizations?",
-    Answer:
-      "Yes, business password managers are designed to be scalable and can accommodate the needs of growing organizations.\n There is no limit on how many passwords, folders, or persons can use Osvauld. ",
-  },
-  {
-    Question: " How do I get started with  Osvauld? ",
-    Answer:
-      "Osvauld is an on-premise first solution, i.e., you need to self-host the Osvauld-backed instance in the cloud provider of your choice. Refer to Osvauld documentation for detailed instructions - https://docs.osvauld.com/installation/setting-up-osvauld/",
-  },
-  {
-    Question:
-      "What is an organization? How do I add a user who is already registered with another organization to my Vault?",
-    Answer:
-      "Each backend will represent an individual organization. Someone who is already registered with another organization does not exist in your organization, and you will not be able to add them to a folder or share credentials with them.",
-  },
-  {
-    Question: "Who can add new users? ",
-    Answer:
-      "When a user is created, the user has the option to make them an admin or a regular user. Only admin users can add new users.",
-  },
-  {
-    Question: "Is it possible to join two teams at the same time?",
-    Answer:
-      "By using different profiles in Chrome, you can be part of two different teams simultaneously. Keep in mind you have to install and register for each profile separately.",
-  },
-  {
-    Question: "What is the difference between shared vs. private Folders?",
-    Answer:
-      "Private Folders will not be shared with anyone. It will not be part of your organization's backup. All Shared folders are shared by default with the super admin for recovery purposes.",
-  },
-  {
-    Question: "Why can't I edit Secrets that are shared with me?",
-    Answer:
-      "If you are assigned read-only access at the time of sharing, you will not be able to edit the credential. You can ask your Manager/Assignee for elevated access.",
-  },
-  {
-    Question:
-      "What happens to new Secrets added to a Folder that has already been shared with other users?",
-    Answer:
-      "It will automatically get shared with everyone who has access to the folder. The credential inherits the sharing properties of the folder.",
-  },
-  {
-    Question:
-      "Is there a restriction on the number of Secrets stored in Vault?",
-    Answer: "No, there are no limits.",
-  },
-  {
-    Question: "How to do I revoke access to or unshare Secrets?",
-    Answer:
-      "Each credential comes with an Access list where you can edit the assigned permission or delete access.",
+    question: "How does syncing work between my devices?",
+    answer:
+      "Your devices connect directly to each other from anywhere, ensuring fast and secure syncing. No data goes through external servers - everything transfers directly between your devices.",
   },
 ];
 
diff --git a/src/components/additional/DemoComponent.jsx b/src/components/additional/DemoComponent.jsx
index fcc8405..33441f7 100644
--- a/src/components/additional/DemoComponent.jsx
+++ b/src/components/additional/DemoComponent.jsx
@@ -23,7 +23,7 @@ export const DemoComponent = () => {
       whileInView={{ opacity: 1 }}
       viewport={{ once: true }}
       transition={{ duration: 0.2 }}
-      className="w-full mb-[6rem] max-w-[1200px] mx-auto bg-dark4 px-4 pt-28 text-white"
+      className="w-full mb-[8rem] max-w-[1200px] mx-auto bg-dark4 px-4 pt-28 text-white"
     >
       <div className="relative flex">
         <img
diff --git a/src/components/additional/FaqComponent.jsx b/src/components/additional/FaqComponent.jsx
index 75b4de0..4680329 100644
--- a/src/components/additional/FaqComponent.jsx
+++ b/src/components/additional/FaqComponent.jsx
@@ -21,10 +21,10 @@ export const FaqComponent = () => {
       >
         <div className="grid grid-cols-1 md:grid-cols-[40%_60%] gap-2">
           <div className="flex flex-col justify-start items-center md:items-start ">
-            <h1 className="md:fixed md:top-24 text-[36px] mb-6 mt-[2rem] md:text-[68px] font-Jakartha font-medium w-full md:w-[350px] md:h-[246px] leading-[41px] md:leading-[81px]  gradient-text text-center md:text-left md:ml-[1.5rem]">
+            <h1 className="z-10 md:fixed md:top-24 text-[36px] mb-6 mt-[4rem] md:text-[68px] font-Jakartha font-medium w-full md:w-[350px] md:h-[246px] leading-[41px] md:leading-[81px]  gradient-text text-center md:text-left md:ml-[1.5rem]">
               Frequently Asked Questions
             </h1>
-            <div className="z-30 md:fixed md:top-[23.5rem]  hidden md:visible px-6 py-4 h-[200px] md:h-[156px] md:flex flex-col justify-between bg-dark4 rounded-2xl font-Jakartha mt-4 md:mt-8 text-center md:text-left">
+            <div className="z-10 md:fixed md:top-[23.5rem]  hidden md:visible px-6 py-4 h-[200px] md:h-[156px] md:flex flex-col justify-between bg-dark4 rounded-2xl font-Jakartha mt-4 md:mt-24 text-center md:text-left">
               <span className="font-light text-xl">
                 Still have a question? <br />
               </span>
@@ -47,12 +47,12 @@ export const FaqComponent = () => {
             <img
               src={questionLeft.src}
               alt="questionLeft"
-              className="hidden md:block  md:mt-[30rem] "
+              className="hidden md:block  md:mt-[10rem] "
             />
             <img
               src={questionLeft.src}
               alt="questionLeft"
-              className="hidden md:block md:mt-[40rem] "
+              className="hidden md:block  "
             />
           </div>
           <div className="z-30 questions px-0 md:px-10 w-full md:w-auto mt-8 md:mt-10">
@@ -62,14 +62,14 @@ export const FaqComponent = () => {
                 key={index}
               >
                 <summary className="cursor-pointer flex justify-between items-center text-xl list-none font-Jakarta font-light">
-                  <span>{item.Question}</span>
+                  <span>{item.question}</span>
                   <span className="rotate-45 group-open:rotate-90 transition-transform duration-75 ease-in ml-5">
                     <CloseIcon color={"#BFC0CC"} />
                   </span>
                 </summary>
                 <div className="mt-6 text-base text-faqAnswer font-Inter font-light">
                   <p>
-                    {item.Answer.split("\n").map((line, i) => (
+                    {item.answer.split("\n").map((line, i) => (
                       <span key={i}>
                         {line}
                         <br />
@@ -81,7 +81,7 @@ export const FaqComponent = () => {
             ))}
           </div>
 
-          <div className=" cta md:hidden px-6 py-4 h-[170px]  flex flex-col justify-between bg-dark4 rounded-2xl font-Jakartha mt-4 md:mt-8 text-center md:text-left">
+          <div className=" cta md:hidden px-6 py-4 h-[170px]  flex flex-col justify-between bg-dark4 rounded-2xl font-Jakartha my-16 md:mt-8 text-center md:text-left">
             <span className="font-light text-xl">
               Still have a question? <br />
             </span>
diff --git a/src/components/additional/StoryComponent.jsx b/src/components/additional/StoryComponent.jsx
new file mode 100644
index 0000000..51e28f2
--- /dev/null
+++ b/src/components/additional/StoryComponent.jsx
@@ -0,0 +1,73 @@
+import { motion } from "framer-motion";
+import meetOsvauld from "../../assets/images/meetOsvauld.png";
+import calendarLeft from "../../assets/images/calendarLeft.png";
+import calendarRight from "../../assets/images/calendarRight.png";
+import Cal, { getCalApi } from "@calcom/embed-react";
+import { useEffect } from "react";
+
+export const StoryComponent = () => {
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.2 }}
+      className="w-full mb-[6rem] max-w-[1200px] mx-auto bg-dark4 px-4 pt-28 text-white"
+    >
+      <div className="">
+        <span className="flex flex-col items-center mb-14 mt-6 text-[40px] md:text-[48px] lg:text-7xl font-Jakartha font-medium tracking-tight text-balance gradient-text-bottom leading-10 md:leading-[54px]">
+          <h1 className="text-center lg:text-left ">Our story</h1>
+        </span>
+        <p className="text-lg text-white">
+          {" "}
+          Our Journey Every great project starts with a challenge, and ours
+          began when we saw a gap in the way organizations handle shared
+          credentials. As backend engineers venturing into new territories, we
+          were driven by a deep commitment to data privacy. The spark came from
+          a conversation with a CTO friend who highlighted the need for a better
+          shared credentials management solution. This insight, combined with
+          our acceptance into the buildspace program, set us on an exciting path
+          of creation and discovery. <br /> <br />
+          <h2 className="text-white  text-xl mb-2"> Evolution of Our Vision</h2>
+          <p className="text-lg text-white">
+            Our initial approach was building an open-source, self-hosted
+            credentials manager. We chose Go for the backend, transitioned from
+            a web app to a browser extension for enhanced security, and learned
+            valuable lessons along the way. However, we soon discovered that
+            while organizations needed such a solution, the complexities of
+            self-hosting and compliance created significant barriers. This
+            realization led us to pivot towards a personal password manager, but
+            with an ambitious twist. We wanted to create something that would
+            work seamlessly across desktop and mobile platforms. We built our
+            core encryption and identity protocols in Rust, compiled to
+            WebAssembly for maximum performance and security. Using Tauri for
+            our desktop applications, we began addressing one of the most
+            frustrating aspects of existing offline password managers like
+            KeePass: synchronization.
+          </p>
+          <br />
+          <h2 className="text-white  text-xl  mb-2">The Breakthrough</h2>{" "}
+          <p className="text-lg text-white">
+            While developing our peer-to-peer synchronization solution using
+            iroh, we had an epiphany. What if users had a dedicated device for
+            managing their digital identity and credentials? This thought
+            evolved into something even more powerful: a platform where
+            individuals could host their data and selectively share it with
+            fine-grained access control.{" "}
+          </p>
+          <br />
+          <h2 className="text-white  text-xl  mb-2">Looking Forward</h2> Today,
+          osvauld is growing beyond its origins as a password manager. We're
+          building a privacy-first platform that enables secure data hosting and
+          sharing, with user control at its core. Our vision extends to creating
+          applications and porting open-source projects to our platform, all
+          while maintaining our commitment to privacy and security. We're not
+          just building another password manager – we're creating a new paradigm
+          for personal data management where privacy isn't just a feature, it's
+          the foundation. Join us as we continue to evolve and shape the future
+          of personal data management and privacy.
+        </p>
+      </div>
+    </motion.section>
+  );
+};
diff --git a/src/pages/demo.astro b/src/pages/demo.astro
index c41b21b..26c81f4 100644
--- a/src/pages/demo.astro
+++ b/src/pages/demo.astro
@@ -9,6 +9,6 @@ import { UseOsvauld } from "../components/UseOsvauld";
 <Layout title="Demo">
   <!-- <Navbar client:load /> -->
   <DemoComponent client:load />
-  <UseOsvauld client:load />
+  <!-- <UseOsvauld client:load /> -->
   <ScrollUpButton client:load />
 </Layout>
diff --git a/src/pages/story.astro b/src/pages/story.astro
new file mode 100644
index 0000000..d81540f
--- /dev/null
+++ b/src/pages/story.astro
@@ -0,0 +1,14 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { ScrollUpButton } from "../components/ScrollUpButton";
+import "../styles/Theme.css";
+import { UseOsvauld } from "../components/UseOsvauld";
+import { StoryComponent } from "../components/additional/StoryComponent";
+---
+
+<Layout title="story">
+  <!-- <Navbar client:load /> -->
+  <StoryComponent client:load />
+  <!-- <UseOsvauld client:load /> -->
+  <ScrollUpButton client:load />
+</Layout>