Add Data collection principles to services page

website/docs/getting_started/what_is_walkeros.mdx

@@ -149,34 +149,6 @@ flowchart LR
   are processed server-side.
 - **g**: Events are formatted correctly and sent to tools from the server.
 
-## Our principles of data collection
-
-- **Step-by-step**: While everyone has become an AI expert in no time, we should
-  remember everything that has to be done before going there. It's a journey
-  that requires lots of work from the ground up. No shortcuts.
-- **Don't build on rented land**: In the ever-evolving world of data, relying
-  solely on external platforms can be risky. Prioritize building your own robust
-  data infrastructures to maintain control and adaptability. Sunsets are
-  inevitable, also for features.
-- **Resilience is key**: As data environments are dynamic, designing resilient
-  systems can help withstand changes and unexpected challenges, ensuring
-  continuous data flow and integrity. Yes, more legal requirements are coming.
-- **Focus on what you can control**: In data management, focusing on elements
-  within your control, like data quality and security, can lead to more reliable
-  and effective outcomes. It's your responsibility and a great chance to set the
-  rules.
-- **Use tools only for what they are made for**: Utilize each data tool for its
-  intended purpose to maximize efficiency and avoid unnecessary complications in
-  data processes. Just don't misuse them, please!
-
-- **Data is never done**: The journey of data is ongoing. Continuous analysis,
-  refinement, and updating are crucial to keep data relevant and actionable.
-  Build-measure-learn-grow.
-
-- **Internalize data**: Embrace data as a core part of your strategy and
-  operations. Integrating data into your processes ensures it becomes an
-  intrinsic part of decision-making.
-
 :::info
 
 If you need professional support with your walkerOS implementation, check out

website/src/components/home/features.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import {

website/src/components/services/collectionPrinciples.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+type CollectionPrinciple = {
+  name: string;
+  description: string;
+};
+
+const collectionPrinciples: CollectionPrinciple[] = [
+  {
+    name: 'Do not build on rented land',
+    description:
+      'In the ever-evolving world of data, relying solely on external platforms is risky. Prioritize building your own robust data infrastructure to maintain control and adaptability. Sunsets are inevitable — even for features.',
+  },
+  {
+    name: 'Step-by-step',
+    description:
+      'While anyone can become an AI expert in no time, it is essential to remember the groundwork required to get there. Data development is a journey that demands effort from the ground up. No shortcuts.',
+  },
+  {
+    name: 'Use tools only for what they are made for',
+    description:
+      'Utilize each data tool for its intended purpose to maximize efficiency and avoid unnecessary complications. Misusage leads to inefficiencies and potential risks.',
+  },
+  {
+    name: 'Focus on what you can control',
+    description:
+      'In data management, focusing on factors within your control, like data quality and security, can lead to more reliable and effective outcomes. It is your responsibility and a huge opportunity to set the rules.',
+  },
+  {
+    name: 'Internalize data',
+    description:
+      'Treat data as a fundamental part of your strategy and operations. By fully integrating it into your processes, data becomes intrinsic to decision-making.',
+  },
+  {
+    name: 'Data is never done',
+    description:
+      'The data journey is ongoing. Continuous analysis, refinement, and updates are essential to keeping data relevant and actionable. Build. Measure. Learn. Grow.',
+  },
+  {
+    name: 'Resilience is key',
+    description:
+      'Data environments are dynamic. Designing resilient systems ensures they can withstand changes and unexpected challenges while maintaining continuous data flow and integrity. And yes, probably more legal requirements are coming.',
+  },
+];
+
+export default function CollectionPrinciples() {
+  return (
+    <div className="py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="text-pretty text-4xl font-semibold tracking-tight text-white sm:text-5xl">
+            Data collection principles{' '}
+          </h2>
+          <p className="mt-6 text-lg/8 text-gray-50">
+            Seven principles we follow when working on data projects.
+          </p>
+        </div>
+        <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {collectionPrinciples.map((principle) => (
+            <div key={principle.name}>
+              <dt className="font-semibold text-gray-50">{principle.name}</dt>
+              <dt className="mt-1 text-gray-300">{principle.description}</dt>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  );
+}

website/src/components/services/features.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import {
@@ -10,7 +11,7 @@ import Link from '@docusaurus/Link';
 
 type FeatureItem = {
   title: string;
-  link: string;
+  link?: string;
   icon: JSX.Element;
   children: React.ReactNode;
 };

website/src/components/services/sparring.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '../atoms/buttons';
 
 import { CheckIcon } from '@heroicons/react/20/solid';
 

website/src/pages/index.tsx

@@ -4,7 +4,7 @@ import Hero from '@site/src/components/home/hero';
 import Features from '@site/src/components/home/features';
 import CTAStart from '@site/src/components/ctas/start';
 
-export default function Home(): JSX.Element {
+export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout

website/src/pages/services.tsx

@@ -1,13 +1,13 @@
+import { JSX } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Hero from '@site/src/components/services/hero';
 import Features from '@site/src/components/services/features';
 import CTAServices from '@site/src/components/ctas/services';
-import Team from '../components/services/team';
-import Sparring from '../components/services/sparring';
-import Projects from '../components/services/projects';
-import Principle from '../components/services/principles';
-import Principles from '../components/services/principles';
+import Team from '@site/src/components/services/team';
+import Sparring from '@site/src/components/services/sparring';
+import Projects from '@site/src/components/services/projects';
+import CollectionPrinciples from '@site/src/components/services/collectionPrinciples';
 
 export default function Services(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
@@ -19,6 +19,7 @@ export default function Services(): JSX.Element {
         <Sparring />
         <Projects />
         <Team />
+        <CollectionPrinciples />
         <CTAServices />
       </main>
     </Layout>