feat(dimentorin): slicing landing page (#46)

* feat(landing): slicing navigation bar

* feat(landing): slicing hero section

* feat(landing): slicing what we offer section

* feat(landing): add animation on hero and what we offer section

* feat(landing): slicing testimonial section

* feat(landing): change the animation for what we offer section

* feat: add utility for readable looping and conditional rendering of components

* feat(landing): slicing faq section

* feat(landing): change border radius of card on `what we offer` and `testimonial` section

* feat(landing): slicing cta section

* feat: modify accordion component

* feat(landing): add shape background at faq section

* feat(landing): slicing footer

* feat: toggle header visibility on scroll

libs/utils/src/logic/for.tsx

@@ -0,0 +1,27 @@
+export interface ForProps<T, U> {
+  data: readonly T[]
+  children: (item: T, index: number) => U | null
+  fallback?: React.ReactNode | null
+}
+
+/**
+ * A functional component that renders a list of children components from a given
+ * array of data.
+ *
+ * @param data - The array of data to render
+ * @param children - A function that takes the current item and index and returns
+ *                   the child component to render
+ * @param fallback - An optional fallback component to render when the data is empty
+ *
+ * @returns An array of rendered child components if the data is not empty, otherwise
+ *          the fallback component if it is provided, null otherwise
+ */
+export function For<T, U extends React.JSX.Element>({
+  data,
+  children,
+  fallback = null
+}: ForProps<T, U>): (U | null)[] | React.ReactNode | null {
+  if (!Array.isArray(data) || !data?.length) return fallback
+
+  return data.map((item, idx) => children(item, idx))
+}