feat: add new theme

src/components/CoverImage.css

@@ -1,5 +1,4 @@
 .cover {
-    background-color: #00ff99;
     display: flex;
     height: 420px;
     width: 800px;

src/components/CoverImage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import "./CoverImage.css";
 import "../assets/css/patterns.css";
-import BasicTheme from "./Themes/BasicTheme";
+import ModernTheme from "./Themes/ModernTheme";
 
 class CoverImage extends React.Component {
 	// hexToRgbA(hex, opacity) {
@@ -21,7 +21,7 @@ class CoverImage extends React.Component {
 		// const { title, bgColor, pattern, author, icon,font } = this.props;
 	
 		return (
-			<BasicTheme config={ this.props}/>
+			<ModernTheme config={ this.props}/>
 		);
 	}
 }

src/components/Themes/ModernTheme.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+
+const ModernTheme = ({ config }) => {
+
+    const { title, bgColor, pattern, author, icon, font } = config;
+
+    return (
+        <div className="p-4 bg-white border">
+            <div className=" cover  flex  items-center">
+                <div className={`  h-full rounded-xl  p-4 text-gray-800 flex  items-center ${pattern} `}
+                    style={{ backgroundColor: bgColor }}
+                >
+                    <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                        <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                    </div>
+
+                    <div className="h-full w-2/3">
+                        <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
+                            <h1 className="text-3xl md:text-5xl font-bold ">{title}</h1>
+                            <h2 className="text-xl mt-10 font-semibold text-left "> - {author}</h2>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+
+        </div>
+    );
+}
+
+export default ModernTheme;