feat: upcoming/trending list views and larger title cards

src/components/Common/Header/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface HeaderProps {
+  extraMargin?: number;
+}
+
+const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
+  return (
+    <div className="md:flex md:items-center md:justify-between mt-8 mb-8">
+      <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
+        <h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
+          <span className="bg-clip-text text-transparent bg-gradient-to-br from-indigo-400 to-purple-400">
+            {children}
+          </span>
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Header;