Merge branch 'main' of github.com:Rootpie-Studios/RootPiWebsite

Author: kimhaafi

src/App.css

@@ -99,6 +99,8 @@ html {
 .hero-section {
   position: relative;
   background-color: var(--page-bg);
+  background-image:
+    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(96, 165, 250, 0.055) 0%, transparent 70%);
   overflow: hidden;
 }
 
@@ -141,21 +143,33 @@ html {
 
 /* Hero floating balls */
 @keyframes ballFadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes heroFadeUp {
+  from { opacity: 0; transform: translateY(18px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.hero-content-animate {
+  opacity: 0;
+  animation: heroFadeUp 0.7s ease-out forwards;
 }
 
 .hero-ball {
   position: absolute;
   border-radius: 50%;
   object-fit: cover;
-  border: 1px solid rgba(255,255,255,0.15);
+  border: 1px solid rgba(255,255,255,0.18);
   background: white;
   padding: 0;
   box-shadow:
-    0 8px 40px rgba(0, 0, 0, 0.5),
-    0 0 50px rgba(255, 255, 255, 0.09),
-    0 0 100px rgba(255, 255, 255, 0.04);
+    0 8px 40px rgba(0, 0, 0, 0.55),
+    0 0 0 1px rgba(96, 165, 250, 0.08),
+    0 0 40px rgba(96, 165, 250, 0.18),
+    0 0 90px rgba(96, 165, 250, 0.10),
+    0 0 160px rgba(96, 165, 250, 0.06);
   z-index: 5;
   opacity: 0;
   filter: brightness(0.88);
@@ -168,23 +182,23 @@ html {
   height: 190px;
   left: 6%;
   top: 16%;
-  animation: ballFadeIn 1s ease-out 0.2s forwards;
+  animation: ballFadeIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
 }
 
 .hero-ball-2 {
   width: 155px;
   height: 155px;
   left: 8%;
   bottom: 20%;
-  animation: ballFadeIn 1s ease-out 0.45s forwards;
+  animation: ballFadeIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards;
 }
 
 .hero-ball-3 {
   width: 200px;
   height: 200px;
   right: 5%;
   top: 20%;
-  animation: ballFadeIn 1s ease-out 0.35s forwards;
+  animation: ballFadeIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
 }
 
 @media (max-width: 1100px) {

src/MainRouter.js

@@ -10,6 +10,7 @@ import TraumaSimPrivacyPolicyPage from "./Pages/TraumaSimPrivacyPolicyPage";
 import StreaksPrivacyPolicyPage from "./Pages/StreaksPrivacyPolicyPage";
 import TimetrackerPrivacyPolicyPage from "./Pages/TimeTrackerPrivacyPolicyPage";
 import LekaosPrivacyPolicyPage from "./Pages/LekaosPrivacyPolicyPage";
+import BogeyBeastsPrivacyPolicyPage from "./Pages/BogeyBeastsPrivacyPolicyPage";
 import SetupGuidePage from "./Pages/SetupGuidePage";
 
 function MainRouter(props) {
@@ -42,6 +43,11 @@ function MainRouter(props) {
           path="/lekaos-privacy-policy"
           element={<LekaosPrivacyPolicyPage />}
         />
+        <Route
+          exact
+          path="/bogeybeasts-privacy-policy"
+          element={<BogeyBeastsPrivacyPolicyPage />}
+        />
         <Route exact path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>

src/Pages/BogeyBeastsPrivacyPolicyPage.js

@@ -0,0 +1,146 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import Header from "../Components/Header";
+import Footer from "../Components/Footer";
+import logo from "../images/LogoTextTransBlack.png";
+import "../css/privacy_policy.css";
+
+function BogeyBeastsPrivacyPolicyPage() {
+  const privacyPolicyMarkdown = `
+  **Privacy policy**
+
+  **1. Background**
+
+  This personal data policy ("Policy") states **rules** and **guidelines** how personal data is handled by **RootPi AB**'s game Bogey Beasts. The policy states how personal data is collected, what they are used for, how the app users control their personal data and how app users can contact the responsible with any questions.
+
+  **2. Purpose**
+
+  The purpose of this policy is to **give app users information** about how their personal data could be used by the app.
+
+  **3. Definition of personal data**
+
+  Personal data is any information that, either directly or indirectly, could be used to **identify a living physical individual**. With **direct personal data** an individual can be identified by one sole data point while **indirect personal data** can identifiy an individual together with other data points.
+
+  **4. User agreement**
+
+  **a) Requesting user agreement**
+
+  In order to collect personal data the user has to agree to what data is collected. The request should be made informative and clear so that all users know the meaning of it.
+
+  We collect agreement in the following way:
+
+  * Agreement is requested by asking a new user to read and accept this policy before they can use the app.
+
+  **b) Revoking the agreement**
+
+  A user can at any point revoke their agreement, which is made in the following way:
+
+  * Agreement can be revoked by deleting the account in the app or sending an email to [info@rootpi.xyz](mailto:info@rootpi.xyz).
+
+  **c) Right to have personal data deleted**
+
+  When the agreement is revoked the user can also request their personal data to be deleted from all servers. This is done with an email to [info@rootpi.xyz](mailto:info@rootpi.xyz).
+
+  **5. Processing of personal data**
+
+  **a) Personal data that is collected**
+
+  The following personal data is collected by the app and processed by us:
+
+  * Email
+  * Password (stored in encrypted form)
+
+  **b) Reason for collection of personal data**
+
+  The personal data is collected and processed for the following purposes:
+
+  * Personal data is collected to allow the user to create an account and use the app.
+
+  **c) Personal data is shared with**
+
+  All collected personal data will be contained in **RootPi AB** and will not be sold or given to any third parties.
+
+  **d) Period personal data is saved**
+
+  The personal data is only allowed to be saved for the period it is needed for the app functionallity.
+
+  **6. Safety and encryption**
+
+  All traffic to the server is encrypted with SSL-certificate (Secure Socket Layer) that ensures that the user's personal data is transfered in a secure and confidential way through encrypting the information. Passwords are stored in hashed and encrypted form and are never stored or transmitted in plain text. The app has taken suitable security measures to prevent that personal data that is stored on the server is lost or used in illegal or unproper ways. The access to the personal data that is collected is restricted to authorized personell and will only be handled confidentially.
+
+  If an incident regarding personal data occurs the affected users will be notified and it will be reported to **IMY** (Swedish Authority for Privacy Protection).
+
+  **7. User rights**
+
+
+  **a) Right to access own data**
+
+  After agreeing to the policy the user has the right to request information if their personal data is being proccessed. If they are proccessed the user has the right to access the data.
+
+  The request to access own personal data is made by sending an email to [info@rootpi.xyz](mailto:info@rootpi.xyz).
+
+  The data is sent to the user in text via digital email.
+
+  **b) Right to information and correction**
+
+  After agreeing to the policy the user has the right to request what personal data that is being stored and correct any faulty information. If any data is missing the user also have the right to complete them.
+
+  **c) Right to deletion**
+
+  The user has the right to request that all personal data connected to them is deleted. There are situations where this right is not valid but in following cases the data must be deleted:
+
+  - If the personal data is no longer needed for the purpose it was collected
+  - If the agreement of the policy is revoked
+  - If the personal data is used in direct marketing and the user opposes it
+  - If there is no legitimate reasons that outweighs the individual's interest in deleting the information
+  - If the personal data is processed in an illegal way
+  - If the deletion is required to fulfill a legal obligation
+
+  **d) Automated decision making**
+
+  Users have the right not to be subject to automated decisions, if such a decision can have legal consequences for the individual or similarly affect him to a significant degree.
+
+  **e) Identification**
+
+  If a user requests that information should be deleted, the user in question must be identified. This is done by the user being authorized to their account.
+
+  **f) Complaint**
+
+  If a user considers their personal data to being processed in violation of the GDPR in the app, a complaint can be submitted primarily to us and secondarily to the Swedish Privacy Protection Authority.
+
+  **g) Damages**
+
+  In a situation where a user's personal data has been processed in violation of the GDPR, a right to compensation may arise. A claim for damages can be brought in general court with the district court as the first instance.
+
+  **8. Changes to the Policy**
+
+  This policy was published on May 16, 2026
+
+  This policy may change, which is why the app's users are encouraged to read the policy periodically. Users will also be notified about any changes made
+
+  **9. Contact**
+
+  For questions related to the website and its content, we can be reached via e-mail sent to [info@rootpi.xyz](mailto:info@rootpi.xyz).
+
+  Response time: 3-5 work days.
+
+  `;
+
+  return (
+    <div className="App">
+      <Header
+        subtitle={<img className="header-image-container" src={logo} alt="" />}
+      />
+      <main>
+        <div>
+          <div className="about-container markdown-content">
+            <ReactMarkdown>{privacyPolicyMarkdown}</ReactMarkdown>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default BogeyBeastsPrivacyPolicyPage;

src/Pages/HomePage.js

@@ -56,14 +56,15 @@ function HomePage() {
 
           <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-4xl mx-auto">
             <h1
-              className="font-display font-bold tracking-tight leading-none mb-6 text-7xl md:text-[8rem] bg-gradient-to-b from-white to-zinc-400 bg-clip-text text-transparent"
+              className="hero-content-animate font-display font-bold tracking-tight leading-none mb-6 text-7xl md:text-[8rem] bg-gradient-to-b from-white to-zinc-400 bg-clip-text text-transparent"
+              style={{ animationDelay: "0.1s" }}
             >
               RootPi
             </h1>
-            <p className="text-lg md:text-xl text-ink-muted mb-4 font-normal">
+            <p className="hero-content-animate text-lg md:text-xl text-ink-muted mb-4 font-normal" style={{ animationDelay: "0.25s" }}>
               Fullstack applications &amp; AI solutions
             </p>
-            <p className="text-sm md:text-base text-ink-subtle max-w-xs leading-relaxed mb-10" style={{ textWrap: "balance" }}>
+            <p className="hero-content-animate text-sm md:text-base text-ink-subtle max-w-xs leading-relaxed mb-10" style={{ textWrap: "balance", animationDelay: "0.4s" }}>
               <span className="block">
                 We build custom software — web platforms, mobile apps, VR
                 simulations and AI tools.
@@ -74,7 +75,8 @@ function HomePage() {
             </p>
             <button
               onClick={scrollToContact}
-              className="px-8 py-3.5 rounded-lg bg-white text-surface-page text-sm font-bold hover:bg-zinc-200 transition-colors duration-200 cursor-pointer tracking-wide inline-block w-auto"
+              className="hero-content-animate px-8 py-3.5 rounded-lg bg-white text-surface-page text-sm font-bold hover:bg-zinc-200 transition-colors duration-200 cursor-pointer tracking-wide inline-block w-auto"
+              style={{ animationDelay: "0.55s" }}
             >
               Get in touch
             </button>