Merge branch 'develop' into feature/search-bar

src/assets/svg/background.svg

@@ -0,0 +1,7 @@
+<svg width="1187" height="1234" viewBox="0 0 1187 1234" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M408.998 745.256C206.829 467.159 -0.745132 678.488 53.4493 872.858C189.728 1182.79 541.828 1319.16 839.898 1177.41C942.643 1128.57 1029.84 1050.24 1091.25 951.643C934.96 1103.83 651.196 1078.4 408.998 745.208V745.256Z" fill="#F0F0F0"/>
+<path d="M589.732 553.768C311.677 115.242 0.000483082 348.859 0.000483082 616.83C-0.108684 705.549 18.2856 793.237 53.9153 873.85C16.9159 692.296 217.547 552.363 404.339 812.896C675.684 1191.27 941.763 1124.69 1090.72 952.538C1138.53 876.188 1169.42 789.736 1181.14 699.443V700.63C1117.18 906.92 834.959 940.474 589.732 553.768Z" fill="#F5F5F5"/>
+<path d="M780.298 357.556C573.819 3.33809 311.98 35.3415 134.904 225.06C47.4877 335.363 -0.21692 473.901 0.000741558 616.829C18.6403 357.604 320.112 177.116 593.041 616.829C835.635 1008.16 1137.87 906.216 1180.86 701.744V699.781C1184.64 671.939 1186.24 643.826 1185.66 615.715V587.685C1080.6 665.864 942.439 635.678 780.252 357.532L780.298 357.556Z" fill="#FAFAFA"/>
+<path d="M781.72 420.618C970.818 736.727 1133.84 655.859 1186.06 588.242C1183.96 540.989 1176.61 494.146 1164.16 448.648C1076.01 450.611 1055.46 435.275 968.721 297.983C836.17 86.7264 669.183 -55.8716 377.451 42.2463C282.888 80.7758 199.359 143.787 134.788 225.303C335.256 33.4762 581.228 85.5393 781.72 420.618Z" fill="white"/>
+<path d="M955.787 325.116C1042.25 462.675 1094.88 469.676 1164.15 448.672C1074.33 120.595 745.743 -69.6327 430.245 23.761C412.352 29.0424 394.753 35.204 377.449 42.2459C638.053 -43.2499 822.887 113.86 955.787 325.116Z" fill="white"/>
+</svg>

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 (
+    <div
+      className={classNames(
+        "relative overflow-hidden pt-[55%] rounded w-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+  className,
+  children,
+}: Props) {
+  return (
+    <div className={classNames([className, "absolute top-0 w-full h-full"])}>
+      {children}
+    </div>
+  );
+};
+
+export default AspectRatio;

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 <h3 className="text-2xl text-current font-medium leading-relaxed">{children}</h3>;
+export default function Heading({ children, className }: Props) {
+  return (
+    <h3
+      className={classNames([
+        className,
+        "text-2xl text-current font-medium leading-7 ",
+      ])}
+    >
+      {children}
+    </h3>
+  );
 }

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)" },