Merge pull request #9 from sudarshanmaan/FinalComponents

FinalComponents Added

Author: MananJethwani

frontend/React Components/ComponentTMP_0-image.png

@@ -7,87 +7,71 @@
 
 import React from "react";
 
-const TheProgrammingClubBetaComponent = () => (
-  <svg width={1920} height={1080} viewBox="0 0 1920 1080">
+const TheProgrammingClubFinalComponent = props => (
+  <svg {...props} width={1920} height={1080} viewBox="0 0 1920 1080">
     <defs>
       <style>
         {
-          ".a{clip-path:url(#d);}.b{fill:url(#b);}.c{fill:#f0f0f0;font-size:63px;font-family:Poppins-Black, Poppins;font-weight:800;}.d{fill:rgba(207,118,151,0.8);}.e{fill:rgba(207,118,151,0.73);}.f{fill:#fff;}.f,.j{font-size:28px;font-family:Poppins-Regular, Poppins;}.g{fill:#c67096;}.g,.k{stroke:#707070;}.h{fill:#071e3d;font-size:32px;font-family:Poppins-Bold, Poppins;font-weight:700;}.i{fill:rgba(255,255,255,0.38);}.j{fill:#e2f3f5;}.k,.m{fill:none;}.l{stroke:none;}.n{fill:url(#a);}"
+          ".a{clip-path:url(#c);}.b{fill:#132d57;}.c{fill:#0e153a;font-size:63px;font-family:Poppins-Black, Poppins;font-weight:800;}.d{fill:#fff;}.d,.i{font-size:28px;font-family:Poppins-Regular, Poppins;}.e{fill:#3e3d55;}.f{fill:#101f46;}.g{fill:rgba(20,51,95,0.71);}.h{fill:rgba(255,255,255,0.38);}.i{fill:#e2f3f5;}.j{fill:none;stroke:#707070;}.k{fill:#c7c7c7;font-size:32px;font-family:Poppins-Bold, Poppins;font-weight:700;}.l{fill:url(#a);}"
         }
       </style>
       <linearGradient id="a" x2={1} y2={1} gradientUnits="objectBoundingBox">
-        <stop offset={0} stopColor="#a029fb" />
-        <stop offset={1} stopColor="#27057e" />
+        <stop offset={0} stopColor="#3650c7" />
+        <stop offset={1} stopColor="#42abdc" />
       </linearGradient>
-      <linearGradient
-        id="b"
-        y1={0.5}
-        x2={1}
-        y2={0.5}
-        gradientUnits="objectBoundingBox"
-      >
-        <stop offset={0} stopOpacity={0.31} />
-        <stop offset={1} stopColor="#545454" stopOpacity={0} />
-      </linearGradient>
-      <clipPath id="d">
+      <clipPath id="c">
         <rect width={1920} height={1080} />
       </clipPath>
     </defs>
-    <g id="c" className="a">
-      <rect className="n" width={1920} height={1080} />
-      <image
-        width={777}
-        height={583}
-        transform="translate(169 238)"
-        xlinkHref="ComponentTMP_0-image.png"
-      />
-      <rect className="b" width={120} height={1080} />
-      <text className="c" transform="translate(139 240)">
-        <tspan x={0} y={0}>
-          {"The Programming Club IIITDMJ"}
-        </tspan>
-      </text>
+    <g id="b" className="a">
+      <rect className="l" width={1920} height={1080} />
       <path
-        className="d"
-        d="M1095.7-55.6c494.537,709.1,256.427,1194.477,256.427,1194.477l659.353,25.23L1969.47-118.29,1162.446-55.6Z"
-        transform="translate(-10 -10)"
-      />
-      <path
-        className="e"
-        d="M1095.7-55.6c494.537,709.1,256.427,1194.477,256.427,1194.477l659.353,25.23L1969.47-118.29,1162.446-55.6Z"
-        transform="translate(-55 -10)"
+        className="b"
+        d="M-4,0S147.906,157.909,136.474,453.721-4,1075.355-4,1075.355Z"
+        transform="translate(4)"
       />
       <image
         width={50}
         height={50}
         transform="translate(35 351)"
-        xlinkHref="ComponentTMP_0-image2.png"
+        xlinkHref="ComponentTMP_0-image.png"
       />
       <image
         width={50}
         height={50}
         transform="translate(35 679)"
-        xlinkHref="ComponentTMP_0-image3.png"
+        xlinkHref="ComponentTMP_0-image2.png"
       />
       <image
         width={50}
         height={50}
         transform="translate(35 597)"
-        xlinkHref="ComponentTMP_0-image4.png"
+        xlinkHref="ComponentTMP_0-image3.png"
       />
       <image
         width={50}
         height={50}
         transform="translate(35 433)"
-        xlinkHref="ComponentTMP_0-image5.png"
+        xlinkHref="ComponentTMP_0-image4.png"
       />
       <image
         width={50}
         height={50}
         transform="translate(35 515)"
+        xlinkHref="ComponentTMP_0-image5.png"
+      />
+      <image
+        width={777}
+        height={583}
+        transform="translate(169 238)"
         xlinkHref="ComponentTMP_0-image6.png"
       />
-      <text className="f" transform="translate(156 798)">
+      <text className="c" transform="translate(139 240)">
+        <tspan x={0} y={0}>
+          {"The Programming Club IIITDMJ"}
+        </tspan>
+      </text>
+      <text className="d" transform="translate(156 798)">
         <tspan x={0} y={0}>
           {"An Open Coding Community to explore and"}
         </tspan>
@@ -97,74 +81,85 @@ const TheProgrammingClubBetaComponent = () => (
         <tspan x={0} y={84} />
       </text>
       <g transform="translate(124 -11)">
-        <g className="g" transform="translate(419 927)">
-          <rect className="l" width={240} height={69} rx={34.5} />
-          <rect className="m" x={0.5} y={0.5} width={239} height={68} rx={34} />
-        </g>
-        <text className="f" transform="translate(456 972)">
+        <path
+          className="e"
+          d="M34.5,0h171a34.5,34.5,0,0,1,0,69H34.5a34.5,34.5,0,0,1,0-69Z"
+          transform="translate(419 927)"
+        />
+        <text className="d" transform="translate(456 972)">
           <tspan x={0} y={0}>
             {"Explore Now"}
           </tspan>
         </text>
       </g>
-      <text className="h" transform="translate(1310 227)">
+      <path
+        className="f"
+        d="M1095.7-55.6c494.537,709.1,256.427,1194.477,256.427,1194.477l659.353,25.23L1969.47-118.29,1162.446-55.6Z"
+        transform="translate(-10 -10)"
+      />
+      <path
+        className="g"
+        d="M1095.7-55.6c494.537,709.1,256.427,1194.477,256.427,1194.477l659.353,25.23L1969.47-118.29,1162.446-55.6Z"
+        transform="translate(-55 -10)"
+      />
+      <image
+        width={580}
+        height={431}
+        transform="translate(1340 661)"
+        xlinkHref="ComponentTMP_0-image7.png"
+      />
+      <g transform="translate(-134)">
+        <rect
+          className="h"
+          width={400}
+          height={44}
+          rx={22}
+          transform="translate(1512 37)"
+        />
+        <text className="i" transform="translate(1553 68)">
+          <tspan x={0} y={0}>
+            {"About Us"}
+          </tspan>
+        </text>
+        <text className="i" transform="translate(1727 68)">
+          <tspan x={0} y={0}>
+            {"Contact Us"}
+          </tspan>
+        </text>
+        <line className="j" y2={44} transform="translate(1705.5 37.5)" />
+      </g>
+      <text className="k" transform="translate(1310 227)">
         <tspan x={0} y={0}>
           {"Club Registrations"}
         </tspan>
       </text>
-      <text className="h" transform="translate(1415 455)">
+      <text className="k" transform="translate(1415 455)">
         <tspan x={0} y={0}>
           {"Sessions"}
         </tspan>
       </text>
-      <text className="h" transform="translate(1378 383)">
+      <text className="k" transform="translate(1378 383)">
         <tspan x={0} y={0}>
           {"Events"}
         </tspan>
       </text>
-      <text className="h" transform="translate(1351 305)">
+      <text className="k" transform="translate(1351 305)">
         <tspan x={0} y={0}>
           {"Leaderboard"}
         </tspan>
       </text>
-      <text className="h" transform="translate(1429 527)">
+      <text className="k" transform="translate(1429 527)">
         <tspan x={0} y={0}>
           {"Domains"}
         </tspan>
       </text>
-      <g transform="translate(-134)">
-        <rect
-          className="i"
-          width={400}
-          height={44}
-          rx={22}
-          transform="translate(1512 37)"
-        />
-        <text className="j" transform="translate(1553 68)">
-          <tspan x={0} y={0}>
-            {"About Us"}
-          </tspan>
-        </text>
-        <text className="j" transform="translate(1727 68)">
-          <tspan x={0} y={0}>
-            {"Contact Us"}
-          </tspan>
-        </text>
-        <line className="k" y2={44} transform="translate(1705.5 37.5)" />
-      </g>
-      <text className="h" transform="translate(1443 604)">
+      <text className="k" transform="translate(1443 604)">
         <tspan x={0} y={0}>
           {"Projects"}
         </tspan>
       </text>
-      <image
-        width={580}
-        height={431}
-        transform="translate(1340 661)"
-        xlinkHref="ComponentTMP_0-image7.png"
-      />
     </g>
   </svg>
 );
 
-export default TheProgrammingClubBetaComponent;
+export default TheProgrammingClubFinalComponent;

frontend/React Components/ComponentTMP_0-image2.png

@@ -9,7 +9,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import TheProgrammingClubBeta from "./TheProgrammingClubBetaComponent";
+import TheProgrammingClubFinal from "./TheProgrammingClubFinalComponent";
 
 export const myProps = {
   id: "1",
@@ -23,11 +23,11 @@ export const actions = {
   onActionTwo: action("onActionTwo")
 };
 
-storiesOf("TheProgrammingClubBeta", module)
-  .add("default", () => <TheProgrammingClubBeta {...myProps} {...actions} />)
+storiesOf("TheProgrammingClubFinal", module)
+  .add("default", () => <TheProgrammingClubFinal {...myProps} {...actions} />)
   .add("pinned", () => (
-    <TheProgrammingClubBeta {...myProps} pinned={true} {...actions} />
+    <TheProgrammingClubFinal {...myProps} pinned={true} {...actions} />
   ))
   .add("archived", () => (
-    <TheProgrammingClubBeta {...myProps} archived={true} {...actions} />
+    <TheProgrammingClubFinal {...myProps} archived={true} {...actions} />
   ));