diff --git a/src/assets/svg/background.svg b/src/assets/svg/background.svg
new file mode 100644
index 0000000..e15137a
--- /dev/null
+++ b/src/assets/svg/background.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx
new file mode 100644
index 0000000..be6a1b8
--- /dev/null
+++ b/src/components/AspectRatio.tsx
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+ /**
+ * The style of component
+ */
+ className?: string;
+ /**
+ * The optional child
+ */
+ children?: React.ReactNode;
+};
+const AspectRatio = ({ className, children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+ className,
+ children,
+}: Props) {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AspectRatio;
diff --git a/src/components/typography/Heading.tsx b/src/components/typography/Heading.tsx
index a476ea4..324d888 100644
--- a/src/components/typography/Heading.tsx
+++ b/src/components/typography/Heading.tsx
@@ -1,9 +1,20 @@
import React from "react";
+import classNames from "classnames";
type Props = {
+ className?: string | undefined;
children: React.ReactNode;
};
-export default function Heading({ children }: Props) {
- return {children}
;
+export default function Heading({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f4d294..3c733b6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -96,6 +96,9 @@ module.exports = {
],
theme: {
extend: {
+ backgroundImage: {
+ 'main': "url('/src/assets/svg/background.svg')",
+ },
screens: {
tall: { raw: "(min-height: 1200px) and (orientation: portrait)" },
skewed: { raw: "(max-height: 600px)" },