diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..11089f8
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,112 @@
+import React, { Children } from "react";
+import classNames from "classnames";
+
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Typography from "./typography/Typography";
+import Heading from "./typography/Heading";
+import Link from "./Link";
+
+/* -------------------------------------------------------------------------- */
+/* Props */
+/* -------------------------------------------------------------------------- */
+type Props = {
+ /**
+ * Card component accept children
+ */
+ children: React.ReactNode;
+ /**
+ * Styling the card component
+ */
+ className?: string | undefined;
+};
+
+const Card = ({ children, className }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+// Avatar props and function
+type AvatarProps = {
+ children?: React.ReactNode;
+};
+Card.Avatar = function CardAvatar({ children }: AvatarProps) {
+ return <>{children};
+};
+// The end of Body props and function
+
+// Title props and function
+Card.Title = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+// The end Title props and function
+
+// Body props and function
+Card.Body = function CardTitle({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+// The end of Body props and function
+
+// Cardheader props and function
+Card.Cardheader = function CardCardheader({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+// The end of Cardheader props and function
+
+// Cardcontent props and function
+Card.Cardcontent = function CardCardcontent({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+};
+// The end of Cardcontent props and function
+
+// Cardaction props and function
+type CardactionProps = {
+ children: React.ReactNode;
+ className?: string | undefined;
+ href?: string;
+};
+Card.Cardaction = function CardCardaction({
+ children,
+ className,
+ href = "#",
+}: CardactionProps) {
+ return (
+
+ {children}
+
+ );
+};
+// The end of Cardaction props and function
+
+export default Card;
diff --git a/src/components/Featuredauthors.tsx b/src/components/Featuredauthors.tsx
new file mode 100644
index 0000000..39d12c1
--- /dev/null
+++ b/src/components/Featuredauthors.tsx
@@ -0,0 +1,126 @@
+import { useDraggable } from "react-use-draggable-scroll";
+import { useRef } from "react";
+
+/* -------------------------------------------------------------------------- */
+/* Components */
+/* -------------------------------------------------------------------------- */
+import Heading from "./typography/Heading";
+import { Button } from "./Button/Button";
+import Card from "./Card";
+import Avatar from "./Avatar";
+import Link from "./Link";
+
+import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+
+export default function Featuredauthors(): JSX.Element {
+ const ref =
+ useRef() as React.MutableRefObject;
+ const { events } = useDraggable(ref);
+
+ return (
+
+ Featured Authors
+ {/* cards start */}
+
+ {/* First Card */}
+
+
+
+
+ A
+
+ Jhon Addams
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+ salar
+
+
+
+
+ See More
+
+
+
+ {/* Second Card */}
+
+
+
+
+ B
+
+ Jhon Addams
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+
+
+
+ See More
+
+
+
+
+ {/* Third Card */}
+
+
+
+
+ K
+
+ Jhon Addams
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+
+
+
+ See More
+
+
+
+
+ {/* Fourth Card */}
+
+
+
+
+
+ C
+
+
+ Jhon Addams
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Consequuntur maxime, libero est unde sapiente repellendus quam
+
+
+
+ See More
+
+
+
+
+ {/* The End of cards */}
+
+ {/* Show All button */}
+
+