dark mode

Author: pgajek2

website/docs/docs/installation.md

@@ -56,4 +56,4 @@ Click the button below to deploy SOQL Lib to your environment.
 
 You are ready to build your selector classes.
 
-Go to the [Build Your Selector](./build-your-selector.md) section to see more details.
+Go to the [Build Your Selector](../soql/build-selector.md) section to see more details.

website/docusaurus.config.js

@@ -67,6 +67,10 @@ const config = {
         { name: 'keywords', content: 'SOQL Lib, Selector Layer Apex, Apex Selector Layer, Query Builder' },
         { name: 'canonical', content: 'https://soql.beyondthecloud.dev' }
       ],
+      colorMode: {
+        defaultMode: 'dark',
+        disableSwitch: true,
+      },
       docs: {
         sidebar: {
           hideable: true,

website/src/pages/index.js

@@ -1,18 +1,20 @@
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
-import MDXContent from '@theme/MDXContent';
-import SOQLLibBenefits from './soqlLibBenefits.mdx';
 
 export default function Home() {
     return (
         <Layout
             title="Home | SOQL Lib"
             description="The SOQL Lib provides functional constructs for SOQL queries in Apex.">
-            <div class="relative isolate px-6 pt-14 lg:px-8">
-                <div class="text-center">
-                    <Heading class="text-5xl mb-10 font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl" as="h1">SOQL Lib</Heading>
-                    <div class="space-x-4">
-                        <a href="/getting-started" class="rounded-md bg-sky-600 px-4 py-3 text-sm font-semibold text-white shadow-xs hover:bg-sky-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600">Get Started</a>
+            <div className="relative isolate px-6 pt-14 lg:px-8">
+                <div className="text-center">
+                    <Heading className="text-5xl mb-6 font-semibold tracking-tight text-balance text-white sm:text-7xl" as="h1">SOQL Lib</Heading>
+                    <p className="text-lg mb-10 text-gray-300 max-w-2xl mx-auto">
+                        Everything you need to build SOQL queries in Salesforce APEX.
+                    </p>
+                    <div className="space-x-4">
+                        <a href="/docs/getting-started" className="rounded-md bg-sky-600 px-4 py-3 text-sm font-semibold text-white shadow-xs hover:scale-110 transition-transform focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600">Get Started</a>
+                        <a href="/docs/overview" className="rounded-md bg-gray-800 px-4 py-3 text-sm font-semibold text-white shadow-xs ring-1 ring-gray-600 hover:scale-110 transition-transform">Learn More</a>
                     </div>
                 </div>
             </div>
@@ -22,12 +24,54 @@ export default function Home() {
 }
 
 export function Features() {
+    const features = [
+        {
+            title: "Dynamic Query Builder",
+            description: "Build SOQL queries dynamically with fluent API. No more string concatenation or massive selector classes with hundreds of methods."
+        },
+        {
+            title: "Advanced Caching System", 
+            description: "Cache records in Apex transactions, Session Cache, or Org Cache for dramatic performance improvements."
+        },
+        {
+            title: "Built-in Security Controls",
+            description: "Enforce field-level security and sharing rules with WITH USER_MODE, WITH SYSTEM_MODE, and sharing settings by default."
+        },
+        {
+            title: "Comprehensive Testing Support",
+            description: "Mock SOQL results in unit tests without complex test data setup. Perfect for external objects and custom metadata."
+        },
+        {
+            title: "Result Transformation",
+            description: "Transform query results easily with built-in methods: toMap(), toIds(), toValuesOf(), and many more powerful utilities."
+        },
+        {
+            title: "Lightweight Selectors",
+            description: "Keep selector classes minimal and focused. Define business-specific queries inline where they're needed."
+        }
+    ];
+
     return (
-        <div className="my-10 px-4 sm:px-6 lg:px-8 w-full max-w-5xl mx-auto overflow-x-auto">
-            <div className="w-full">
-                <MDXContent>
-                    <SOQLLibBenefits />
-                </MDXContent>
+        <div className="my-20 px-6 lg:px-8">
+            <div className="mx-auto max-w-7xl">
+                <div className="text-center mb-16">
+                    <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl mb-4">
+                        What's in SOQL Lib?
+                    </h2>
+                    <p className="text-lg text-gray-300 max-w-2xl mx-auto">
+                        The SOQL Lib provides functional constructs for SOQL queries in Apex.
+                    </p>
+                </div>
+                
+                <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                    {features.map((feature, index) => (
+                        <div key={index} className="relative rounded-2xl border border-gray-700 p-8 shadow-lg hover:shadow-xl transition-shadow bg-gray-800/50 backdrop-blur-sm">
+                            <h3 className="text-lg font-semibold text-white mb-4">{feature.title}</h3>
+                            <p className="text-gray-300 leading-relaxed">{feature.description}</p>
+                        </div>
+                    ))}
+                </div>
+
             </div>
         </div>
     )