diff --git a/docs/src/components/landing-page/cards/CardDetails.tsx b/docs/src/components/landing-page/cards/CardDetails.tsx
new file mode 100644
index 0000000..5c98906
--- /dev/null
+++ b/docs/src/components/landing-page/cards/CardDetails.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Card, Flex } from "@hover-design/react";
+import { cardBox, cardTitle } from "./card-details.styles.css";
+import EasyToUse from "./icons/easytouse.svg";
+import FocusOnWhatMatters from "./icons/focusonwhatmatters.svg";
+import PlatformAgnostic from "./icons/platformagnostic.svg";
+import Themeing from "./icons/themeing.svg";
+
+const CardData = [
+ {
+ icon: ,
+ title: "Easy To Use",
+ data: "Hover focuses on easy to use betteries included method, so use it as you would use a native element, no need to learn fancy complex apis to do simple things"
+ },
+ {
+ icon: ,
+ title: "Focus On What Matters",
+ data: "Easily extend the components and use it to conform to your brand identity."
+ },
+ {
+ icon: ,
+ title: "Platform agnostic",
+ data: "Hover focuses on easy to use betteries included method, so use it as you would use a native element, no need to learn fancy complex apis to do simple things"
+ },
+ {
+ icon: ,
+ title: "Themeing",
+ data: "Hover focuses on easy to use betteries included method, so use it as you would use a native element, no need to learn fancy complex apis to do simple things"
+ }
+];
+
+const CardDetails = (props) => {
+ return (
+
+