docs: update docusaurs front page, add logo and custom color palettes

README.md

@@ -1,16 +1,22 @@
 # Consent Manager
 
-> This toolkit helps you to integrate external services into your React project while staying compliant to GDPR and other privacy protection laws.
+**Effortless Compliance and User Empowerment for Modern Web Applications**
+
+> Consent Manager is a streamlined React toolkit enabling developers to effortlessly integrate external services into web applications, fully aligned with GDPR and other data protection laws. It simplifies user consent management for data processing and third-party interactions.
 
 [![NPM Version Badge](https://badgen.net/npm/v/@consent-manager/core)](https://www.npmjs.com/package/@consent-manager/core)
 [![Github Check Badge](https://badgen.net/github/checks/hashbite/consent-manager/main)](https://github.com/hashbite/consent-manager/actions)
 [![License Badge](https://badgen.net/npm/license/@consent-manager/core)](https://github.com/hashbite/consent-manager/blob/main/LICENSE)
 
-**Our philosophy:**
+**Key Highlights:**
+
+- **Minimalistic Design:** Strives to add the least possible overhead to your website, maintaining performance and user experience.
+- **Customizable and Extendable:** Tailor the toolkit to fit the unique requirements of your project, with extensive support for custom integrations of many popular services like Google Analytics, Matomo, ...
+- **User-Centric Approach:** Our default interface aims to deliver a fair, transparent, and user-friendly consent management experience, respecting user privacy and choice.
+- **Compliance Made Simple:** Eases the journey towards meeting GDPR and other privacy regulations, reducing the complexity of legal compliance for developers.
+- **React-Powered:** Harnesses the flexibility and efficiency of React, backed by TypeScript and comprehensive test coverage to ensure reliability and stability.
 
-- Add as little extra code to your website as needed
-- Create a reliable, extendable and customizable tool to extend your project
-- Provide an UX thats fair to the end-user and effective for the website owner
+Consent Manager is not just a tool; it's a philosophy to make the web a fairer, more transparent place for both users and website owners. It empowers developers to build privacy-respecting websites with ease and confidence.
 
 [Learn more about our ideas](https://hashbite.github.io/consent-manager/docs/)
 

packages/docs/docs/new-structure.md

@@ -6,11 +6,18 @@
     * show how to add addons, based on one example (matomo or google docs?)
     * offer next steps:
   * how to track and render while checking for user consent
+    * we have to reload the page to be SURE that nothing is tracked anymore
   * Style default interface
   * i18n integration of default interface (translate default interface)
-  * Implement your own interface
+  * Implement your own interface (demo/example already existing? show examples?)
   * Create a custom tracking integration 
-
+  * Frameworks: Basic tutorial + link to example
+    * NextJS
+    * Vite
+    * Parcel
+    * ~Create React App~
+    * GatsbyJS
+
 * integrations
   * make more examples on how to track with certain integrations (for example matomo track events, page view and so on)
   * make sure all config options are listed

packages/docs/docusaurus.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 
 module.exports = {
   title: 'Consent Manager',
-  tagline: 'A user-friendly way to get rid of GDPR headache',
+  tagline: 'Simplify GDPR Compliance: Seamless and User-Centric',
   url: 'https://hashbite.github.io/',
   baseUrl: '/consent-manager/',
   onBrokenLinks: 'throw',
@@ -48,10 +48,10 @@ module.exports = {
         {
           title: 'Community',
           items: [
-            {
-              label: 'Twitter @axe312ger',
-              href: 'https://twitter.com/axe312ger',
-            },
+            // {
+            //   label: 'Twitter @axe312ger',
+            //   href: 'https://twitter.com/axe312ger',
+            // },
             {
               label: 'Twitter @zcei_ger',
               href: 'https://twitter.com/zcei_ger',
@@ -74,9 +74,73 @@ module.exports = {
       id: 'support_us',
       content:
         'This project is still in early stage. Feel free to talk to us in our <a target="_blank" rel="noopener noreferrer" href="https://github.com/hashbite/consent-manager/issues">GitHub issues</a>',
-      backgroundColor: '#f9703e',
+      backgroundColor: '#e57c00',
       textColor: '#fff',
     },
+    headTags: [
+      // Apple Touch Icon
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'apple-touch-icon',
+          sizes: '180x180',
+          href: '/apple-touch-icon.png',
+        },
+      },
+      // Favicon 32x32
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '32x32',
+          href: '/favicon-32x32.png',
+        },
+      },
+      // Favicon 16x16
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'icon',
+          type: 'image/png',
+          sizes: '16x16',
+          href: '/favicon-16x16.png',
+        },
+      },
+      // Manifest
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'manifest',
+          href: '/site.webmanifest',
+        },
+      },
+      // Safari Pinned Tab Icon
+      {
+        tagName: 'link',
+        attributes: {
+          rel: 'mask-icon',
+          href: '/safari-pinned-tab.svg',
+          color: '#1e90ff',
+        },
+      },
+      // MS Application Tile Color
+      {
+        tagName: 'meta',
+        attributes: {
+          name: 'msapplication-TileColor',
+          content: '#1e90ff',
+        },
+      },
+      // Theme Color
+      {
+        tagName: 'meta',
+        attributes: {
+          name: 'theme-color',
+          content: '#ffffff',
+        },
+      },
+    ],
   },
   presets: [
     [

packages/docs/src/css/custom.css

@@ -7,13 +7,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #17b897;
-  --ifm-color-primary-dark: #15a688;
-  --ifm-color-primary-darker: #149c80;
-  --ifm-color-primary-darkest: #10816a;
-  --ifm-color-primary-light: #19caa6;
-  --ifm-color-primary-lighter: #1ad4ae;
-  --ifm-color-primary-lightest: #29e4be;
+  --ifm-color-primary: #1e90ff; /* Dodger Blue - Vibrant and Trustworthy */
+  --ifm-color-primary-dark: #1a75d3; /* Slightly Darker Blue */
+  --ifm-color-primary-darker: #1560aa; /* Deeper Blue */
+  --ifm-color-primary-darkest: #10468c; /* Navy Blue */
+  --ifm-color-primary-light: #4ea3ff; /* Lighter, Softer Blue */
+  --ifm-color-primary-lighter: #80b6ff; /* Even Lighter Blue */
+  --ifm-color-primary-lightest: #b0d4ff; /* Very Light Blue */
+  --ifm-color-primary-contrast-background: #ebf2fc; /* Light blue, great for backgrounds against primary */
+  --ifm-color-primary-contrast-foreground: #102445; /* Dark blue, for text on primary contrast background */
+
+  --ifm-color-secondary: #ff8c00; /* Vivid, saturated orange */
+  --ifm-color-secondary-dark: #e57c00; /* Slightly darker, saturated orange */
+  --ifm-color-secondary-darker: #cc6c00; /* Deeper saturated orange */
+  --ifm-color-secondary-darkest: #b35c00; /* Darkest saturated orange for strong contrast */
+  --ifm-color-secondary-light: #ffa233; /* Lighter, bright orange */
+  --ifm-color-secondary-lighter: #ffb966; /* Even lighter, soft orange */
+  --ifm-color-secondary-lightest: #ffd099; /* Palest orange, ideal for subtle backgrounds */
+  --ifm-color-secondary-contrast-background: #fdfdfe; /* Very light gray for secondary contrast background */
+  --ifm-color-secondary-contrast-foreground: #474748; /* Dark gray for secondary contrast foreground */
+
   --ifm-code-font-size: 95%;
 }
 

packages/docs/src/pages/index.js

@@ -8,37 +8,69 @@ import styles from './styles.module.css'
 
 const features = [
   {
-    title: 'Respect the user',
-    imageUrl: 'img/undraw_docusaurus_mountain.svg',
+    title: 'Empower User Consent',
+    imageUrl: 'img/undraw_control_panel.svg', // Changed to represent control and empowerment
     description: (
       <>
-        The user should have full control over the data he shares with external
-        services.
+        Empower users with full control over their data shared with external
+        services, enhancing trust and transparency.
       </>
     ),
   },
   {
-    title: 'Become respectful of privacy laws (like GDPR and more)',
-    imageUrl: 'img/undraw_docusaurus_tree.svg',
+    title: 'Compliance with Privacy Laws',
+    imageUrl: 'img/undraw_GDPR.svg', // Suggests legal terms and compliance
     description: (
       <>
-        Our goal is to provide a toolkit that enables developers to create GDPR
-        compliant websites.
+        Facilitate GDPR compliance and more, with a toolkit crafted for
+        developers to build privacy-respecting websites with ease.
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    imageUrl: 'img/undraw_docusaurus_react.svg',
+    title: 'React-Based, TypeScript-Ready',
+    imageUrl: 'img/undraw_react.svg', // Directly represents React
     description: (
       <>
-        Built with TypeScript, full test coverage and support for all styling
-        techniques.
+        Leverage a React-centric architecture, enriched with TypeScript support,
+        ensuring robust, maintainable, and scalable code.
+      </>
+    ),
+  },
+  {
+    title: 'Rich Integration Ecosystem',
+    imageUrl: 'img/undraw_online_connection.svg', // Reflects extensive connectivity and integration
+    description: (
+      <>
+        Enjoy a rich ecosystem with 10+ ready-to-use plugins for popular
+        services, coupled with the flexibility to create and implement your own
+        custom integrations with minimal effort.
+      </>
+    ),
+  },
+  {
+    title: 'Lightweight & Efficient',
+    imageUrl: 'img/undraw_fast_loading.svg', // Conveys the idea of efficiency and speed
+    description: (
+      <>
+        Designed for efficiency, it adds minimal overhead to your site,
+        prioritizing performance without compromising functionality.
+      </>
+    ),
+  },
+  {
+    title: 'User-Friendly Interface',
+    imageUrl: 'img/undraw_user_flow.svg', // Evokes a smooth, user-friendly experience
+    description: (
+      <>
+        Comes with a user-friendly default interface, ensuring a smooth user
+        experience while maintaining the option for custom interfaces.
       </>
     ),
   },
 ]
 
+
 function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl)
   return (
@@ -60,7 +92,7 @@ function Home() {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      description={siteConfig.description}
     >
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
         <div className="container">
@@ -69,7 +101,7 @@ function Home() {
           <div className={styles.buttons}>
             <Link
               className={clsx(
-                'button button--outline button--secondary button--lg',
+                'button button--secondary button--lg',
                 styles.getStarted
               )}
               to={useBaseUrl('docs/')}

packages/docs/static/img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#1e90ff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>