chore: Add a hero section to the docs

README.md

@@ -14,22 +14,14 @@ The transformation process involves two main steps:
 
 ### Features
 
-- **Intelligent Memoization:** React Unforget unwraps JSX elements and memoizes each element and expression separately, leading to more granular and effective memoization.
-
-- **Dependency Graph Computation:** It builds a comprehensive dependency graph that captures the relationships between different code segments, ensuring that transformations are done with a full understanding of the codebase.
-
-- **Optimized Transformation:** Through a topological sort and depth-first search, segments are transformed in an optimized order, replacing variables and expressions with their memoized counterparts to reduce re-renders.
-
-- **Custom Cache Hook:** Utilizes a custom hook `useCreateCache$unforget` from `@react-unforget/runtime` to manage state and cache effectively, ensuring that components only re-render when necessary.
+- **Intelligent component and hook memoization**: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
+- **Granular JSX element unwrapping**: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`.
+- **Memoization beyond early returns**: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.
 
 ## Comparison with React Compiler
 
 React Compiler (Forget) is still under development and its release date remains uncertain. React Unforget offers an alternative approach to optimizing React applications, similar to how Preact serves as an alternative to React. It not only provides a fallback option but also pushes the boundaries of what's possible within the React ecosystem, encouraging innovation and diversity in optimization techniques.
 
-## Contributing
-
-We welcome contributions from the community! Whether you're interested in fixing bugs, adding new features, or improving documentation, your help is appreciated. Please refer to our contributing guidelines for more information on how to get involved.
-
 ## License
 
 React Unforget is open-source software licensed under the MIT license. Feel free to use, modify, and distribute it as per the license terms.

apps/docs/components/Hero.tsx

@@ -0,0 +1,17 @@
+import { OldAndNewCodeReveal } from "./OldAndNewCodeReveal";
+
+export const Hero = () => (
+  <div className="py-10 w-full bg-[rgba(17,17,17,var(--tw-bg-opacity))]  dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center">
+    <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-[rgba(17,17,17,var(--tw-bg-opacity))] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+    <div>
+      <h1 className="text-4xl sm:text-7xl font-bold relative z-10 bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-500 py-8">
+        React Unforget
+      </h1>
+      <p>
+        A compiler for React that optimizes components and hooks for performance
+        and readability.
+      </p>
+      <OldAndNewCodeReveal />
+    </div>
+  </div>
+);

apps/docs/components/ui/text-reveal-card.tsx

@@ -79,7 +79,7 @@ export const TextRevealCard = ({
                 }
           }
           transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
-          className="absolute bg-[#1d1c20] z-20  will-change-transform"
+          className="absolute bg-[#1d1c20] z-10  will-change-transform"
         >
           <pre
             style={{
@@ -96,7 +96,7 @@ export const TextRevealCard = ({
             opacity: widthPercentage > 0 ? 1 : 0,
           }}
           transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
-          className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-50 will-change-transform"
+          className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-20 will-change-transform"
         ></motion.div>
 
         <div className="overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,white,transparent)] text-left">

apps/docs/package.json

@@ -19,6 +19,7 @@
     "framer-motion": "^11.0.8",
     "html-entities": "^2.5.2",
     "mermaid": "^10.9.0",
+    "mini-svg-data-uri": "^1.4.4",
     "next": "^14.0.4",
     "nextra": "^2.13.3",
     "nextra-theme-docs": "^2.13.3",

apps/docs/pages/index.mdx

@@ -3,13 +3,9 @@ title: "Home"
 ---
 
 import { DynamicLiveCodeSandpack } from "@components/DynamicLiveCodeSandpack";
-import { OldAndNewCodeReveal } from "@components/OldAndNewCodeReveal";
+import { Hero } from "@components/Hero";
 
-# React Unforget
-
-React Unforget is a project inspired by the principles of React Forget, designed to streamline and optimize React component rendering. The mission of React Unforget is to enhance the performance of React applications as well as developer experience by automating the memoization process, making it unnecessary to manually use `useMemo`, `useCallback` or `React.memo`.
-
-<OldAndNewCodeReveal />
+<Hero />
 
 ## See it in action
 
@@ -19,22 +15,22 @@ React Unforget is a project inspired by the principles of React Forget, designed
 export default function CounterWithMutationTracking() {
   const [state, setState] = useState(0);
 
-let text = "The number is: ";
-
-if (state % 2 === 0) {
-text += "even";
-} else {
-text += "odd";
-}
-
-return (
-<div>
-<button onClick={() => setState(state + 1)}>Increment</button>
-<div>
-<span>Count: {state}</span> {text}
-</div>
-</div>
-);
+  let text = "The number is: ";
+
+  if (state % 2 === 0) {
+    text += "even";
+  } else {
+    text += "odd";
+  }
+
+  return (
+    <div>
+      <button onClick={() => setState(state + 1)}>Increment</button>
+      <div>
+        <span>Count: {state}</span> {text}
+      </div>
+    </div>
+  );
 }
 `}
 
@@ -44,12 +40,9 @@ Dive into the [collection of examples](./examples.mdx) and documentation to see
 
 ## Why React Unforget?
 
-1. Intelligent Component and Hook Memoization: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
-1. Granular JSX Element Unwrapping: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`.
-1. Memoization Beyond Early Returns: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.
-1. Segmented Transformation Approach: Transforms code segments based on dependency analysis, ensuring efficient execution and minimizing unnecessary computations.
-
-Ensures segment execution is conditional based on dependency changes, reducing redundant computations and improving performance.
+1. **Intelligent component and hook memoization**: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
+1. **Granular JSX element unwrapping**: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`.
+1. **Memoization beyond early returns**: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.
 
 ### How about React Compiler (Forget)?
 

apps/docs/tailwind.config.js

@@ -1,3 +1,9 @@
+const svgToDataUri = require("mini-svg-data-uri");
+
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -13,7 +19,34 @@ module.exports = {
       },
     },
   },
-  plugins: [require("daisyui")],
+  plugins: [
+    require("daisyui"),
+    function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          "bg-grid": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
+            )}")`,
+          }),
+          "bg-grid-small": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
+            )}")`,
+          }),
+          "bg-dot": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
+            )}")`,
+          }),
+        },
+        {
+          values: flattenColorPalette(theme("backgroundColor")),
+          type: "color",
+        },
+      );
+    },
+  ],
   daisyui: {
     base: false,
     themes: ["synthwave"],

yarn.lock

@@ -7736,6 +7736,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 [email protected], minimatch@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"