From 001824eb1cd92dd19da0d3db73a87d5799a7a3c0 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Sun, 17 Apr 2022 21:39:42 +0530
Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Basic=20form=20structure=20of?=
 =?UTF-8?q?=20the=20social=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/meta/play-meta.js                 |  13 +++
 src/plays/index.js                    |   1 +
 src/plays/social-card/CardDetails.jsx |  23 +++++
 src/plays/social-card/CardForm.jsx    | 138 ++++++++++++++++++++++++++
 src/plays/social-card/SocialCard.jsx  |  38 +++++++
 src/plays/social-card/social-card.css |   0
 6 files changed, 213 insertions(+)
 create mode 100644 src/plays/social-card/CardDetails.jsx
 create mode 100644 src/plays/social-card/CardForm.jsx
 create mode 100644 src/plays/social-card/SocialCard.jsx
 create mode 100644 src/plays/social-card/social-card.css

diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 7b203caf36..70b5500cf5 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -5,6 +5,7 @@ import {
   MovieContainer,
   WhyReact,
   CounterApp,
+SocialCard,
 //import play here
 } from "plays";
 
@@ -75,6 +76,18 @@ export const plays = [
     tags: 'JSX, State, Props',
     github: 'murtuzaalisurti',
     featured: true
+  }, {
+    id: 'pl-social-card', 
+    name: 'Social Card', 
+    description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
+    component: () => {return <SocialCard />},
+    path: '/plays/social-card',
+    level: 'Intermediate',
+    tags: 'Form,Events,ComplexState',
+    github: 'atapas',
+    cover: '',
+    blog: '',
+    video: ''
   }, //replace new play item here
 ];
 
diff --git a/src/plays/index.js b/src/plays/index.js
index 58f8326fda..03dc2a3696 100644
--- a/src/plays/index.js
+++ b/src/plays/index.js
@@ -6,4 +6,5 @@ export { default as BasicTree } from 'plays/org-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
 export { default as CounterApp } from 'plays/counter/CounterApp';
+export { default as SocialCard } from 'plays/social-card/SocialCard';
 //add export here
diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
new file mode 100644
index 0000000000..8fa2c68a05
--- /dev/null
+++ b/src/plays/social-card/CardDetails.jsx
@@ -0,0 +1,23 @@
+
+const CardDetails = () => {
+
+  return (
+    <div className="card-details">
+      <div className="card-details-header">
+        <h3>Card Details</h3>
+      </div>
+      <div className="card-details-body">
+        <div className="card-details-body-item">
+          <div className="card-details-body-item-label">
+            <label>Card Type</label>
+          </div>
+          <div className="card-details-body-item-value">
+            <span>Social</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardDetails;
\ No newline at end of file
diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx
new file mode 100644
index 0000000000..e282c7f660
--- /dev/null
+++ b/src/plays/social-card/CardForm.jsx
@@ -0,0 +1,138 @@
+
+import { useState } from 'react';
+
+const CardForm = () => {
+  const [state, setState] = useState({
+    name: "",
+    email: "",
+    photo: "",
+    bio: "",
+    website: "",
+    twitter: "",
+    linkedIn: "",
+    showwcase: "",
+    github: ""
+  });
+
+
+  const handleChange = evt => {
+    const name = evt.target.name;
+    const value =
+    evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
+    setState({
+      ...state,
+      [name]: value
+    });
+  }
+
+  const handleSubmit = evt => {
+    evt.preventDefault();
+    console.log(state);
+  }
+
+  return (
+    <form>
+      <div className="form-group">
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          className="form-control"
+          id="name"
+          name="name"
+          value={state.name}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          className="form-control"
+          id="email"
+          name="email"
+          value={state.email}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="photo">Photo</label>
+        <input
+          type="file"
+          className="form-control"
+          id="photo"
+          name="photo"
+          value={state.photo}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="bio">Bio</label>
+        <textarea
+          className="form-control"
+          id="bio"
+          name="bio"
+          value={state.bio}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="website">Website</label>
+        <input
+          type="text"
+          className="form-control"
+          id="website"
+          name="website"
+          value={state.website}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="twitter">Twitter</label>
+        <input
+          type="text"
+          className="form-control"
+          id="twitter"
+          name="twitter"
+          value={state.twitter}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="linkedIn">LinkedIn</label>
+        <input
+          type="text"
+          className="form-control"
+          id="linkedIn"
+          name="linkedIn"
+          value={state.linkedIn}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="showcase">Showwcase</label>
+        <input
+          type="text"
+          className="form-control"
+          id="showwcase"
+          name="showwcase"
+          value={state.showwcase}
+          onChange={ handleChange }
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="github">Github</label>
+        <input
+          type="text"
+          className="form-control"
+          id="github"
+          name="github"
+          value={state.github}
+          onChange={ handleChange }
+        />
+      </div>
+      <button type="submit" className="btn btn-primary" onClick={ handleSubmit }>Submit</button>
+    </form>
+  );
+};
+
+export default CardForm;
\ No newline at end of file
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
new file mode 100644
index 0000000000..aef6fca667
--- /dev/null
+++ b/src/plays/social-card/SocialCard.jsx
@@ -0,0 +1,38 @@
+
+import { useLocation } from 'react-router-dom';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+import CardForm from './CardForm';
+import CardDetails from './CardDetails';
+
+import "./social-card.css";
+
+function SocialCard() {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const location = useLocation();
+  const { id } = location.state;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+        {/* Your Code Starts Here */}
+          <div>
+            <CardForm />
+            <CardDetails />
+          </div>
+        {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SocialCard;
\ No newline at end of file
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css
new file mode 100644
index 0000000000..e69de29bb2

From fe57d8fd4c4d224ab43b5534ec9e7d491cab6275 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Sun, 17 Apr 2022 23:41:32 +0530
Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20Now=20able=20to=20create=20the?=
 =?UTF-8?q?=20card=20based=20on=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plays/social-card/CardDetails.jsx         |  73 ++++++++++--
 src/plays/social-card/CardForm.jsx            |  52 ++++----
 src/plays/social-card/SocialCard.jsx          |  16 ++-
 .../social-card/context/SocialContext.js      |   6 +
 src/plays/social-card/social-card.css         | 112 ++++++++++++++++++
 5 files changed, 220 insertions(+), 39 deletions(-)
 create mode 100644 src/plays/social-card/context/SocialContext.js

diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
index 8fa2c68a05..4981dafcb6 100644
--- a/src/plays/social-card/CardDetails.jsx
+++ b/src/plays/social-card/CardDetails.jsx
@@ -1,23 +1,78 @@
+import { useState, useContext, useEffect } from "react";
+import { SocialContext } from "./context/SocialContext";
+import { BsGithub, BsTwitter, BsLinkedin } from "react-icons/bs";
+import { CgWebsite } from "react-icons/cg";
+import { AiOutlineMail } from "react-icons/ai";
 
 const CardDetails = () => {
+  const { social } = useContext(SocialContext);
+  const {
+    name,
+    email,
+    photo,
+    bio,
+    website,
+    twitter,
+    linkedIn,
+    github,
+  } = social;
+
+  const [picture, setPicture] = useState();
+
+  useEffect(() => {
+    if (photo) {
+      const reader = new FileReader();
+      reader.readAsDataURL(photo[0]);
+      reader.onload = () => {
+        setPicture(reader.result);
+      };
+    }
+  }, [photo]);
 
   return (
     <div className="card-details">
       <div className="card-details-header">
-        <h3>Card Details</h3>
+        {picture && <div className="card-details-header-image">
+          <img src={picture} alt="profile" />
+        </div>}
+        <div className="card-details-header-name">
+          <h3>{name}</h3>
+        </div>
       </div>
       <div className="card-details-body">
-        <div className="card-details-body-item">
-          <div className="card-details-body-item-label">
-            <label>Card Type</label>
-          </div>
-          <div className="card-details-body-item-value">
-            <span>Social</span>
-          </div>
+        <div className="card-details-body-bio">
+          <p>{bio}</p>
+        </div>
+        <div className="card-details-body-social">
+          {website && <div className="card-details-body-social-item">
+            <a href={website} target="_blank" rel="noopener noreferrer">
+              <CgWebsite size="24px" />
+            </a>
+          </div>}
+          {twitter && <div className="card-details-body-social-item">
+            <a href={twitter} target="_blank" rel="noopener noreferrer">
+              <BsTwitter size="24px" />
+            </a>
+          </div>}
+          {linkedIn && <div className="card-details-body-social-item">
+            <a href={linkedIn} target="_blank" rel="noopener noreferrer">
+              <BsLinkedin size="24px" />
+            </a>
+          </div>}
+          {github && <div className="card-details-body-social-item">
+            <a href={github} target="_blank" rel="noopener noreferrer">
+              <BsGithub size="24px" />
+            </a>
+          </div>}
+          {email && <div className="card-details-body-social-item">
+            <a href={`mailto:${email}`}>
+              <AiOutlineMail size="24px" />
+            </a>
+          </div>}
         </div>
       </div>
     </div>
   );
 };
 
-export default CardDetails;
\ No newline at end of file
+export default CardDetails;
diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx
index e282c7f660..d4e6f8fac9 100644
--- a/src/plays/social-card/CardForm.jsx
+++ b/src/plays/social-card/CardForm.jsx
@@ -1,5 +1,6 @@
 
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
+import { SocialContext } from './context/SocialContext';
 
 const CardForm = () => {
   const [state, setState] = useState({
@@ -10,32 +11,38 @@ const CardForm = () => {
     website: "",
     twitter: "",
     linkedIn: "",
-    showwcase: "",
     github: ""
   });
 
+  const { setSocial } = useContext(SocialContext);
 
   const handleChange = evt => {
     const name = evt.target.name;
     const value =
-    evt.target.type === "checkbox" ? evt.target.checked : evt.target.value;
+    evt.target.type === "file" ? evt.target.files : evt.target.value;
     setState({
       ...state,
       [name]: value
     });
   }
 
+  useEffect(() => {
+    setSocial(state);
+  }, [state]);
+
   const handleSubmit = evt => {
     evt.preventDefault();
     console.log(state);
+    
   }
 
   return (
-    <form>
+    <form className="social-card-form">
       <div className="form-group">
-        <label htmlFor="name">Name</label>
+        <label htmlFor="name"></label>
         <input
           type="text"
+          placeholder="Enter Name"
           className="form-control"
           id="name"
           name="name"
@@ -44,9 +51,10 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="email">Email</label>
+        <label htmlFor="email"></label>
         <input
           type="email"
+          placeholder="Enter Email"
           className="form-control"
           id="email"
           name="email"
@@ -55,19 +63,20 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="photo">Photo</label>
+        <label htmlFor="photo"></label>
         <input
           type="file"
           className="form-control"
           id="photo"
           name="photo"
-          value={state.photo}
+          accept=".jpg, .jpeg, .png"
           onChange={ handleChange }
         />
       </div>
       <div className="form-group">
-        <label htmlFor="bio">Bio</label>
+        <label htmlFor="bio"></label>
         <textarea
+          placeholder="Enter Bio"     
           className="form-control"
           id="bio"
           name="bio"
@@ -76,9 +85,10 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="website">Website</label>
+        <label htmlFor="website"></label>
         <input
           type="text"
+          placeholder="Enter Website"
           className="form-control"
           id="website"
           name="website"
@@ -87,9 +97,10 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="twitter">Twitter</label>
+        <label htmlFor="twitter"></label>
         <input
           type="text"
+          placeholder="Enter Twitter URL"
           className="form-control"
           id="twitter"
           name="twitter"
@@ -98,9 +109,10 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="linkedIn">LinkedIn</label>
+        <label htmlFor="linkedIn"></label>
         <input
           type="text"
+          placeholder="Enter LinkedIn URL"
           className="form-control"
           id="linkedIn"
           name="linkedIn"
@@ -109,20 +121,10 @@ const CardForm = () => {
         />
       </div>
       <div className="form-group">
-        <label htmlFor="showcase">Showwcase</label>
-        <input
-          type="text"
-          className="form-control"
-          id="showwcase"
-          name="showwcase"
-          value={state.showwcase}
-          onChange={ handleChange }
-        />
-      </div>
-      <div className="form-group">
-        <label htmlFor="github">Github</label>
+        <label htmlFor="github"></label>
         <input
           type="text"
+          placeholder="Enter GitHub URL"
           className="form-control"
           id="github"
           name="github"
@@ -130,7 +132,7 @@ const CardForm = () => {
           onChange={ handleChange }
         />
       </div>
-      <button type="submit" className="btn btn-primary" onClick={ handleSubmit }>Submit</button>
+      <button type="submit" className="form-group btn btn-primary" onClick={ handleSubmit }>Generate</button>
     </form>
   );
 };
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
index aef6fca667..7f81a77b4f 100644
--- a/src/plays/social-card/SocialCard.jsx
+++ b/src/plays/social-card/SocialCard.jsx
@@ -1,4 +1,4 @@
-
+import { useState } from "react";
 import { useLocation } from 'react-router-dom';
 import { getPlayById } from 'meta/play-meta-util';
 
@@ -7,6 +7,8 @@ import PlayHeader from 'common/playlists/PlayHeader';
 import CardForm from './CardForm';
 import CardDetails from './CardDetails';
 
+import { SocialContext } from './context/SocialContext';
+
 import "./social-card.css";
 
 function SocialCard() {
@@ -17,6 +19,8 @@ function SocialCard() {
   const play = getPlayById(id);
 
   // Your Code Start below.
+  const [social, setSocial] = useState({});
+  const value = { social, setSocial };
 
   return (
     <>
@@ -24,10 +28,12 @@ function SocialCard() {
         <PlayHeader play={play} />
         <div className="play-details-body">
         {/* Your Code Starts Here */}
-          <div>
-            <CardForm />
-            <CardDetails />
-          </div>
+          <SocialContext.Provider value={value}>
+            <div className="social-card">
+              <CardForm />
+              <CardDetails />
+            </div>
+          </SocialContext.Provider>
         {/* Your Code Ends Here */}
         </div>
       </div>
diff --git a/src/plays/social-card/context/SocialContext.js b/src/plays/social-card/context/SocialContext.js
new file mode 100644
index 0000000000..9f97775c5c
--- /dev/null
+++ b/src/plays/social-card/context/SocialContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const SocialContext = React.createContext({
+  social: {}, 
+  setSocial: () => {}
+});
\ No newline at end of file
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css
index e69de29bb2..08a0b3e284 100644
--- a/src/plays/social-card/social-card.css
+++ b/src/plays/social-card/social-card.css
@@ -0,0 +1,112 @@
+.social-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; 
+  padding: 1rem; 
+}
+
+.social-card-form .form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+
+.social-card-form .form-group .form-control {
+  width: 100%;
+  height: 30px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  padding: 0 20px;
+  font-size: 16px;
+  font-weight: 300;
+  color: #333;
+  background-color: #fff;
+  box-shadow: none;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  box-shadow: none;
+}
+
+.card-details .card-details-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+
+.card-details .card-details-header .card-details-header-name {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.card-details .card-details-header .card-details-header-name h3 {
+  padding: 0;
+  margin: 0;
+}
+
+.card-details .card-details-header .card-details-header-image img{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  padding: 5px;
+  border-radius: 50%;
+}
+
+.card-details .card-details-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+
+.card-details .card-details-body .card-details-body-bio {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+
+.card-details .card-details-body .card-details-body-bio p {
+  padding: 0;
+  margin: 0;
+}
+
+.card-details .card-details-body .card-details-body-social {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+

From ba2547beb813dc074311d23a81693f3783ab616e Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 18 Apr 2022 00:00:04 +0530
Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20Done=20most=20of=20the=20social?=
 =?UTF-8?q?=20card=20functionality?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plays/social-card/CardDetails.jsx | 80 ++++++++++++------------
 src/plays/social-card/CardForm.jsx    | 88 ++++++++++++---------------
 src/plays/social-card/SocialCard.jsx  |  1 +
 src/plays/social-card/social-card.css |  9 ++-
 4 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
index 4981dafcb6..38b0faed96 100644
--- a/src/plays/social-card/CardDetails.jsx
+++ b/src/plays/social-card/CardDetails.jsx
@@ -6,16 +6,8 @@ import { AiOutlineMail } from "react-icons/ai";
 
 const CardDetails = () => {
   const { social } = useContext(SocialContext);
-  const {
-    name,
-    email,
-    photo,
-    bio,
-    website,
-    twitter,
-    linkedIn,
-    github,
-  } = social;
+  const { name, email, photo, bio, website, twitter, linkedIn, github } =
+    social;
 
   const [picture, setPicture] = useState();
 
@@ -32,9 +24,11 @@ const CardDetails = () => {
   return (
     <div className="card-details">
       <div className="card-details-header">
-        {picture && <div className="card-details-header-image">
-          <img src={picture} alt="profile" />
-        </div>}
+        {picture && (
+          <div className="card-details-header-image">
+            <img src={picture} alt="profile" />
+          </div>
+        )}
         <div className="card-details-header-name">
           <h3>{name}</h3>
         </div>
@@ -44,31 +38,41 @@ const CardDetails = () => {
           <p>{bio}</p>
         </div>
         <div className="card-details-body-social">
-          {website && <div className="card-details-body-social-item">
-            <a href={website} target="_blank" rel="noopener noreferrer">
-              <CgWebsite size="24px" />
-            </a>
-          </div>}
-          {twitter && <div className="card-details-body-social-item">
-            <a href={twitter} target="_blank" rel="noopener noreferrer">
-              <BsTwitter size="24px" />
-            </a>
-          </div>}
-          {linkedIn && <div className="card-details-body-social-item">
-            <a href={linkedIn} target="_blank" rel="noopener noreferrer">
-              <BsLinkedin size="24px" />
-            </a>
-          </div>}
-          {github && <div className="card-details-body-social-item">
-            <a href={github} target="_blank" rel="noopener noreferrer">
-              <BsGithub size="24px" />
-            </a>
-          </div>}
-          {email && <div className="card-details-body-social-item">
-            <a href={`mailto:${email}`}>
-              <AiOutlineMail size="24px" />
-            </a>
-          </div>}
+          {twitter && (
+            <div className="card-details-body-social-item">
+              <a href={twitter} target="_blank" rel="noopener noreferrer">
+                <BsTwitter size="24px" />
+              </a>
+            </div>
+          )}
+          {linkedIn && (
+            <div className="card-details-body-social-item">
+              <a href={linkedIn} target="_blank" rel="noopener noreferrer">
+                <BsLinkedin size="24px" />
+              </a>
+            </div>
+          )}
+          {github && (
+            <div className="card-details-body-social-item">
+              <a href={github} target="_blank" rel="noopener noreferrer">
+                <BsGithub size="24px" />
+              </a>
+            </div>
+          )}
+          {website && (
+            <div className="card-details-body-social-item">
+              <a href={website} target="_blank" rel="noopener noreferrer">
+                <CgWebsite size="24px" />
+              </a>
+            </div>
+          )}
+          {email && (
+            <div className="card-details-body-social-item">
+              <a href={`mailto:${email}`}>
+                <AiOutlineMail size="24px" />
+              </a>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx
index d4e6f8fac9..4c8f448ed0 100644
--- a/src/plays/social-card/CardForm.jsx
+++ b/src/plays/social-card/CardForm.jsx
@@ -1,6 +1,5 @@
-
-import { useState, useContext, useEffect } from 'react';
-import { SocialContext } from './context/SocialContext';
+import { useState, useContext, useEffect } from "react";
+import { SocialContext } from "./context/SocialContext";
 
 const CardForm = () => {
   const [state, setState] = useState({
@@ -11,30 +10,24 @@ const CardForm = () => {
     website: "",
     twitter: "",
     linkedIn: "",
-    github: ""
+    github: "",
   });
 
   const { setSocial } = useContext(SocialContext);
 
-  const handleChange = evt => {
+  const handleChange = (evt) => {
     const name = evt.target.name;
     const value =
-    evt.target.type === "file" ? evt.target.files : evt.target.value;
+      evt.target.type === "file" ? evt.target.files : evt.target.value;
     setState({
       ...state,
-      [name]: value
+      [name]: value,
     });
-  }
+  };
 
   useEffect(() => {
     setSocial(state);
-  }, [state]);
-
-  const handleSubmit = evt => {
-    evt.preventDefault();
-    console.log(state);
-    
-  }
+  }, [state, setSocial]);
 
   return (
     <form className="social-card-form">
@@ -47,19 +40,7 @@ const CardForm = () => {
           id="name"
           name="name"
           value={state.name}
-          onChange={ handleChange }
-        />
-      </div>
-      <div className="form-group">
-        <label htmlFor="email"></label>
-        <input
-          type="email"
-          placeholder="Enter Email"
-          className="form-control"
-          id="email"
-          name="email"
-          value={state.email}
-          onChange={ handleChange }
+          onChange={handleChange}
         />
       </div>
       <div className="form-group">
@@ -70,30 +51,18 @@ const CardForm = () => {
           id="photo"
           name="photo"
           accept=".jpg, .jpeg, .png"
-          onChange={ handleChange }
+          onChange={handleChange}
         />
       </div>
       <div className="form-group">
         <label htmlFor="bio"></label>
         <textarea
-          placeholder="Enter Bio"     
+          placeholder="Enter Bio"
           className="form-control"
           id="bio"
           name="bio"
           value={state.bio}
-          onChange={ handleChange }
-        />
-      </div>
-      <div className="form-group">
-        <label htmlFor="website"></label>
-        <input
-          type="text"
-          placeholder="Enter Website"
-          className="form-control"
-          id="website"
-          name="website"
-          value={state.website}
-          onChange={ handleChange }
+          onChange={handleChange}
         />
       </div>
       <div className="form-group">
@@ -105,7 +74,7 @@ const CardForm = () => {
           id="twitter"
           name="twitter"
           value={state.twitter}
-          onChange={ handleChange }
+          onChange={handleChange}
         />
       </div>
       <div className="form-group">
@@ -117,7 +86,7 @@ const CardForm = () => {
           id="linkedIn"
           name="linkedIn"
           value={state.linkedIn}
-          onChange={ handleChange }
+          onChange={handleChange}
         />
       </div>
       <div className="form-group">
@@ -129,12 +98,35 @@ const CardForm = () => {
           id="github"
           name="github"
           value={state.github}
-          onChange={ handleChange }
+          onChange={handleChange}
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="website"></label>
+        <input
+          type="text"
+          placeholder="Enter Website"
+          className="form-control"
+          id="website"
+          name="website"
+          value={state.website}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="form-group">
+        <label htmlFor="email"></label>
+        <input
+          type="email"
+          placeholder="Enter Email"
+          className="form-control"
+          id="email"
+          name="email"
+          value={state.email}
+          onChange={handleChange}
         />
       </div>
-      <button type="submit" className="form-group btn btn-primary" onClick={ handleSubmit }>Generate</button>
     </form>
   );
 };
 
-export default CardForm;
\ No newline at end of file
+export default CardForm;
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
index 7f81a77b4f..3f67cf6135 100644
--- a/src/plays/social-card/SocialCard.jsx
+++ b/src/plays/social-card/SocialCard.jsx
@@ -28,6 +28,7 @@ function SocialCard() {
         <PlayHeader play={play} />
         <div className="play-details-body">
         {/* Your Code Starts Here */}
+          <h2 style={{textAlign: 'center'}}>Create your Social Card</h2>
           <SocialContext.Provider value={value}>
             <div className="social-card">
               <CardForm />
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css
index 08a0b3e284..20bc8c7b62 100644
--- a/src/plays/social-card/social-card.css
+++ b/src/plays/social-card/social-card.css
@@ -1,10 +1,14 @@
 .social-card {
   display: flex;
   align-items: center;
-  justify-content: space-between; 
+  justify-content: center; 
   padding: 1rem; 
 }
 
+.social-card-form {
+  margin: 0 1rem 0 0;
+}
+
 .social-card-form .form-group {
   display: flex;
   flex-direction: column;
@@ -33,7 +37,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  width: 400px;
+  min-height: 312px;
   height: 100%;
   padding: 5px;
   border-radius: 5px;

From f661b307de7a91e90c79450f3372452d8c531e7e Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 18 Apr 2022 12:09:18 +0530
Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20Now=20added=20the=20theming=20o?=
 =?UTF-8?q?ption=20in=20social=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plays/social-card/CardDetails.jsx | 157 ++++++++++++++++++--------
 src/plays/social-card/Readme.md       |   1 +
 src/plays/social-card/social-card.css |  61 ++++++++--
 3 files changed, 161 insertions(+), 58 deletions(-)
 create mode 100644 src/plays/social-card/Readme.md

diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
index 38b0faed96..a4475cde3d 100644
--- a/src/plays/social-card/CardDetails.jsx
+++ b/src/plays/social-card/CardDetails.jsx
@@ -10,6 +10,11 @@ const CardDetails = () => {
     social;
 
   const [picture, setPicture] = useState();
+  const [cardTheme, setCardTheme] = useState({
+    bc: "#f2d6d6",
+    fc: "#212121",
+    link: "#000000",
+  });
 
   useEffect(() => {
     if (photo) {
@@ -21,58 +26,116 @@ const CardDetails = () => {
     }
   }, [photo]);
 
+  const applyTheme = theme => {
+    let bc = '#f2d6d6';
+    let fc = '#212121';
+    let link = '#000000';
+    switch (theme) {
+      case "dark":
+        bc = '#212121';
+        fc = '#f2d6d6';
+        link = '#ffffff';
+        break;
+      case "light":
+        bc = '#f2d6d6';
+        fc = '#212121';
+        link = '#000000';
+        break;
+      case "red":
+        bc = '#f44336';
+        fc = '#ffffff';
+        link = '#ffffff';
+        break;
+      case "green":
+        bc = '#4caf50';
+        fc = '#ffffff';
+        link = '#ffffff';
+        break;
+      case "blue":
+        bc = '#2196f3';
+        fc = '#ffffff';
+        link = '#ffffff';
+        break;
+      case "yellow":
+        bc = '#ffeb3b';
+        fc = '#000000';
+        link = '#000000';
+        break; 
+      default:
+        break;
+    }
+    setCardTheme({
+      ...cardTheme,
+      'bc': bc,
+      'fc': fc,
+      'link': link
+    });
+  }
+
   return (
     <div className="card-details">
-      <div className="card-details-header">
-        {picture && (
-          <div className="card-details-header-image">
-            <img src={picture} alt="profile" />
-          </div>
-        )}
-        <div className="card-details-header-name">
-          <h3>{name}</h3>
-        </div>
+      <div className="card-details-theme">
+        <button className="light" onClick={ (theme) => applyTheme("light") }></button>
+        <button className="dark" onClick={ (theme) => applyTheme("dark")}></button>
+        <button className="red" onClick={ (theme) => applyTheme("red")}></button>
+        <button className="blue" onClick={ (theme) => applyTheme("blue")}></button>
+        <button className="yellow" onClick={ (theme) => applyTheme("yellow")}></button>
+        <button className="green" onClick={ (theme) => applyTheme("green")}></button>
       </div>
-      <div className="card-details-body">
-        <div className="card-details-body-bio">
-          <p>{bio}</p>
-        </div>
-        <div className="card-details-body-social">
-          {twitter && (
-            <div className="card-details-body-social-item">
-              <a href={twitter} target="_blank" rel="noopener noreferrer">
-                <BsTwitter size="24px" />
-              </a>
-            </div>
-          )}
-          {linkedIn && (
-            <div className="card-details-body-social-item">
-              <a href={linkedIn} target="_blank" rel="noopener noreferrer">
-                <BsLinkedin size="24px" />
-              </a>
-            </div>
-          )}
-          {github && (
-            <div className="card-details-body-social-item">
-              <a href={github} target="_blank" rel="noopener noreferrer">
-                <BsGithub size="24px" />
-              </a>
-            </div>
-          )}
-          {website && (
-            <div className="card-details-body-social-item">
-              <a href={website} target="_blank" rel="noopener noreferrer">
-                <CgWebsite size="24px" />
-              </a>
-            </div>
-          )}
-          {email && (
-            <div className="card-details-body-social-item">
-              <a href={`mailto:${email}`}>
-                <AiOutlineMail size="24px" />
-              </a>
+
+      <div className="card" style={{ backgroundColor: cardTheme.bc, color: cardTheme.fc}}>
+      
+        <div className="card-header">
+          {picture && (
+            <div className="card-header-image">
+              <img src={picture} alt="profile" />
             </div>
           )}
+          <div className="card-header-name">
+            <h3>{name}</h3>
+          </div>
+        </div>
+        <div className="card-body">
+          <div className="card-body-bio">
+            <p>{bio}</p>
+          </div>
+          <div className="card-body-social">
+            {twitter && (
+              <div className="card-body-social-item">
+                <a href={twitter} style={{color: cardTheme.link}} target="_blank" rel="noopener noreferrer">
+                  <BsTwitter size="24px"/>
+                </a>
+              </div>
+            )}
+            {linkedIn && (
+              <div className="card-body-social-item">
+                <a href={linkedIn} style={{color: cardTheme.link}} target="_blank" rel="noopener noreferrer">
+                  <BsLinkedin size="24px" />
+                </a>
+              </div>
+            )}
+            {github && (
+              <div className="card-body-social-item">
+                <a href={github} style={{color: cardTheme.link}} target="_blank" rel="noopener noreferrer">
+                  <BsGithub size="24px" />
+                </a>
+              </div>
+            )}
+            {website && (
+              <div className="card-body-social-item">
+                <a href={website} style={{color: cardTheme.link}} target="_blank" rel="noopener noreferrer">
+                  <CgWebsite size="24px" />
+                </a>
+              </div>
+            )}
+            {email && (
+              <div className="card-body-social-item">
+                <a href={`mailto:${email}`} style={{color: cardTheme.link}}>
+                  <AiOutlineMail size="24px" />
+                </a>
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/plays/social-card/Readme.md b/src/plays/social-card/Readme.md
new file mode 100644
index 0000000000..fec223f161
--- /dev/null
+++ b/src/plays/social-card/Readme.md
@@ -0,0 +1 @@
+# Social Card
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css
index 20bc8c7b62..618b44f57a 100644
--- a/src/plays/social-card/social-card.css
+++ b/src/plays/social-card/social-card.css
@@ -32,22 +32,61 @@
   box-shadow: none;
 }
 
-.card-details {
+.card-details-theme {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0.5rem;
+}
+
+.card-details-theme button {
+  border: none;
+  cursor: pointer;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0 0.3rem 0 0;
+  border-radius:5px;
+}
+
+.card-details-theme button.red {
+  background-color: #f44336;
+}
+
+.card-details-theme button.green {
+  background-color: #4caf50;
+}
+
+.card-details-theme button.blue {
+  background-color: #2196f3;
+}
+
+.card-details-theme button.yellow {
+  background-color: #ffeb3b;
+}
+
+.card-details-theme button.light {
+  background-color: #f2d6d6;
+}
+
+.card-details-theme button.dark {
+  background-color: #212121;
+}
+
+.card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 400px;
-  min-height: 312px;
+  min-height: 275px;
   height: 100%;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #ccc;
-  background-color: #fff;
+  background-color: #f2d6d6;
   box-shadow: none;
 }
 
-.card-details .card-details-header {
+.card .card-header {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -57,7 +96,7 @@
   padding: 5px;
 }
 
-.card-details .card-details-header .card-details-header-name {
+.card .card-header .card-header-name {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -66,12 +105,12 @@
   height: 100%;
 }
 
-.card-details .card-details-header .card-details-header-name h3 {
+.card .card-header .card-header-name h3 {
   padding: 0;
   margin: 0;
 }
 
-.card-details .card-details-header .card-details-header-image img{
+.card .card-header .card-header-image img{
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -82,7 +121,7 @@
   border-radius: 50%;
 }
 
-.card-details .card-details-body {
+.card .card-body {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -92,7 +131,7 @@
   padding: 5px;
 }
 
-.card-details .card-details-body .card-details-body-bio {
+.card .card-body .card-body-bio {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -102,12 +141,12 @@
   padding: 5px;
 }
 
-.card-details .card-details-body .card-details-body-bio p {
+.card .card-body .card-body-bio p {
   padding: 0;
   margin: 0;
 }
 
-.card-details .card-details-body .card-details-body-social {
+.card .card-body .card-body-social {
   display: flex;
   justify-content: space-evenly;
   width: 100%;

From 90ed4d5c9b03e9e18302fa1d68ee81ad352bf682 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 18 Apr 2022 13:18:40 +0530
Subject: [PATCH 5/6] =?UTF-8?q?=E2=9C=A8=20Added=20responsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/meta/play-meta.js                 |  2 +-
 src/plays/social-card/CardDetails.jsx |  6 +++---
 src/plays/social-card/CardForm.jsx    |  9 ++++++++-
 src/plays/social-card/SocialCard.jsx  |  5 ++++-
 src/plays/social-card/social-card.css | 17 ++++++++++++++++-
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 70b5500cf5..23bb87481f 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -83,7 +83,7 @@ export const plays = [
     component: () => {return <SocialCard />},
     path: '/plays/social-card',
     level: 'Intermediate',
-    tags: 'Form,Events,ComplexState',
+    tags: 'Form,Events,Complex State',
     github: 'atapas',
     cover: '',
     blog: '',
diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
index a4475cde3d..7c927aa272 100644
--- a/src/plays/social-card/CardDetails.jsx
+++ b/src/plays/social-card/CardDetails.jsx
@@ -27,9 +27,9 @@ const CardDetails = () => {
   }, [photo]);
 
   const applyTheme = theme => {
-    let bc = '#f2d6d6';
-    let fc = '#212121';
-    let link = '#000000';
+    let bc = '';
+    let fc = '';
+    let link = '';
     switch (theme) {
       case "dark":
         bc = '#212121';
diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx
index 4c8f448ed0..5095fe4d80 100644
--- a/src/plays/social-card/CardForm.jsx
+++ b/src/plays/social-card/CardForm.jsx
@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect } from "react";
+import { useState, useContext, useEffect, useRef } from "react";
 import { SocialContext } from "./context/SocialContext";
 
 const CardForm = () => {
@@ -15,6 +15,8 @@ const CardForm = () => {
 
   const { setSocial } = useContext(SocialContext);
 
+  const nameInputRef = useRef(null);
+
   const handleChange = (evt) => {
     const name = evt.target.name;
     const value =
@@ -25,6 +27,10 @@ const CardForm = () => {
     });
   };
 
+  useEffect(() => {
+    nameInputRef.current.focus();
+  }, []);
+
   useEffect(() => {
     setSocial(state);
   }, [state, setSocial]);
@@ -34,6 +40,7 @@ const CardForm = () => {
       <div className="form-group">
         <label htmlFor="name"></label>
         <input
+          ref = {nameInputRef}
           type="text"
           placeholder="Enter Name"
           className="form-control"
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
index 3f67cf6135..9b051055b0 100644
--- a/src/plays/social-card/SocialCard.jsx
+++ b/src/plays/social-card/SocialCard.jsx
@@ -28,7 +28,10 @@ function SocialCard() {
         <PlayHeader play={play} />
         <div className="play-details-body">
         {/* Your Code Starts Here */}
-          <h2 style={{textAlign: 'center'}}>Create your Social Card</h2>
+          <div style={{textAlign: 'center'}}>
+            <h2>Create your Social Card</h2>
+            <p>Please fill the form below to create a Social Card for you.</p>
+          </div>
           <SocialContext.Provider value={value}>
             <div className="social-card">
               <CardForm />
diff --git a/src/plays/social-card/social-card.css b/src/plays/social-card/social-card.css
index 618b44f57a..46364ce4bd 100644
--- a/src/plays/social-card/social-card.css
+++ b/src/plays/social-card/social-card.css
@@ -32,6 +32,10 @@
   box-shadow: none;
 }
 
+.card-details{
+  margin: 0 0 0 1rem;
+}
+
 .card-details-theme {
   display: flex;
   justify-content: flex-end;
@@ -76,7 +80,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 400px;
+  width: 300px;
   min-height: 275px;
   height: 100%;
   padding: 5px;
@@ -154,3 +158,14 @@
   padding: 5px;
 }
 
+
+@media only screen and (max-width: 760px) {
+  .social-card {
+    flex-direction: column;
+  }
+
+  .card-details{
+    margin: 1rem 0 0 0;
+  }
+}
+

From 4701fe5351a85cc3e3f26c8f703b794150fb82f9 Mon Sep 17 00:00:00 2001
From: Tapas Adhikary <tapas.adhikary@gmail.com>
Date: Mon, 18 Apr 2022 13:49:20 +0530
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=93=9D=20=E2=9C=A8=20Code=20comments?=
 =?UTF-8?q?=20and=20doc=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/meta/play-meta.js                          |   2 +-
 src/plays/social-card/CardDetails.jsx          |  12 ++++++++++++
 src/plays/social-card/CardForm.jsx             |  15 ++++++++++++++-
 src/plays/social-card/Readme.md                |  15 +++++++++++++++
 src/plays/social-card/SocialCard.jsx           |   7 +++----
 src/plays/social-card/context/SocialContext.js |   2 ++
 src/plays/social-card/cover.png                | Bin 0 -> 20605 bytes
 7 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/plays/social-card/cover.png

diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 23bb87481f..8167644dfe 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -86,7 +86,7 @@ export const plays = [
     tags: 'Form,Events,Complex State',
     github: 'atapas',
     cover: '',
-    blog: '',
+    blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
     video: ''
   }, //replace new play item here
 ];
diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx
index 7c927aa272..5a2d4d70ba 100644
--- a/src/plays/social-card/CardDetails.jsx
+++ b/src/plays/social-card/CardDetails.jsx
@@ -5,17 +5,28 @@ import { CgWebsite } from "react-icons/cg";
 import { AiOutlineMail } from "react-icons/ai";
 
 const CardDetails = () => {
+  // Get the user-filled values from the context
   const { social } = useContext(SocialContext);
+
+  // Destructure the values from the object.
   const { name, email, photo, bio, website, twitter, linkedIn, github } =
     social;
 
+  // We need a file reader to handle the photo uploaded by the user.
+  // We have to perform some computations and extract the actual picture
+  // from the file. So created a state variable to take care of this.  
   const [picture, setPicture] = useState();
+
+  // We have an option to set the theme of the social card.
+  // This state variable is the theme object.
   const [cardTheme, setCardTheme] = useState({
     bc: "#f2d6d6",
     fc: "#212121",
     link: "#000000",
   });
 
+  // Perform all calculations to get the profile photo
+  // from the file reader.
   useEffect(() => {
     if (photo) {
       const reader = new FileReader();
@@ -26,6 +37,7 @@ const CardDetails = () => {
     }
   }, [photo]);
 
+  // This method will be called when the user changes the theme
   const applyTheme = theme => {
     let bc = '';
     let fc = '';
diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx
index 5095fe4d80..b23f4e10b3 100644
--- a/src/plays/social-card/CardForm.jsx
+++ b/src/plays/social-card/CardForm.jsx
@@ -2,6 +2,8 @@ import { useState, useContext, useEffect, useRef } from "react";
 import { SocialContext } from "./context/SocialContext";
 
 const CardForm = () => {
+  // Declaring the state value with an object that contains
+  // all the information of the social card.
   const [state, setState] = useState({
     name: "",
     email: "",
@@ -13,10 +15,18 @@ const CardForm = () => {
     github: "",
   });
 
+  // We get the updater function from the context.
+  // It will help us to set the user filled information as the context data
+  // so that, other component can access it.
   const { setSocial } = useContext(SocialContext);
 
+  // We create a reference to focus on the 
+  // first input field of the form.
   const nameInputRef = useRef(null);
 
+  // This method will be called for the value
+  // change of each of the form fields. Please
+  // note how we handle the file input differently.
   const handleChange = (evt) => {
     const name = evt.target.name;
     const value =
@@ -27,10 +37,13 @@ const CardForm = () => {
     });
   };
 
+  // We set the focus of the name input field.
   useEffect(() => {
     nameInputRef.current.focus();
   }, []);
 
+  // Whenever the state value changes, we set the value
+  // of the context data.
   useEffect(() => {
     setSocial(state);
   }, [state, setSocial]);
@@ -112,7 +125,7 @@ const CardForm = () => {
         <label htmlFor="website"></label>
         <input
           type="text"
-          placeholder="Enter Website"
+          placeholder="Enter Website URL"
           className="form-control"
           id="website"
           name="website"
diff --git a/src/plays/social-card/Readme.md b/src/plays/social-card/Readme.md
index fec223f161..1a5e2e0214 100644
--- a/src/plays/social-card/Readme.md
+++ b/src/plays/social-card/Readme.md
@@ -1 +1,16 @@
 # Social Card
+The `Social Card` project demonstrate many key concepts of ReactJS.
+
+- Form Handling.
+- Managing Complex state data like object and how to update it with the single handler.
+- Usage of React Context with the `useContext` hook.
+- Usage of adding focus to the input element with the `useRef` hook.
+
+If you are planning to look into the code in details, please start with the `SocialCard.jsx` file. You will find that we are initializing the context there and wrapping the form and details component with it.
+
+Please check the `CardForm.jsx` file to understand how form handling works with the object
+as a the state value. We have used a single handler to handle every change in the form.
+
+The `CardDetails.jsx` file is the one that is responsible for the rendering of the details. We also use the theming option there.
+
+Happy Learning!
diff --git a/src/plays/social-card/SocialCard.jsx b/src/plays/social-card/SocialCard.jsx
index 9b051055b0..2d81aec384 100644
--- a/src/plays/social-card/SocialCard.jsx
+++ b/src/plays/social-card/SocialCard.jsx
@@ -12,13 +12,14 @@ import { SocialContext } from './context/SocialContext';
 import "./social-card.css";
 
 function SocialCard() {
-  // Do not remove the below lines. 
   // The following code is to fetch the current play from the URL
   const location = useLocation();
   const { id } = location.state;
   const play = getPlayById(id);
 
-  // Your Code Start below.
+  // The social state carry the information of the social
+  // in the context. This information is made available
+  // between the Card form and the Card details.
   const [social, setSocial] = useState({});
   const value = { social, setSocial };
 
@@ -27,7 +28,6 @@ function SocialCard() {
       <div className="play-details">
         <PlayHeader play={play} />
         <div className="play-details-body">
-        {/* Your Code Starts Here */}
           <div style={{textAlign: 'center'}}>
             <h2>Create your Social Card</h2>
             <p>Please fill the form below to create a Social Card for you.</p>
@@ -38,7 +38,6 @@ function SocialCard() {
               <CardDetails />
             </div>
           </SocialContext.Provider>
-        {/* Your Code Ends Here */}
         </div>
       </div>
     </>
diff --git a/src/plays/social-card/context/SocialContext.js b/src/plays/social-card/context/SocialContext.js
index 9f97775c5c..278b4b7f33 100644
--- a/src/plays/social-card/context/SocialContext.js
+++ b/src/plays/social-card/context/SocialContext.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+// Creating the context here to hold the social card data and 
+// the function to update the data.
 export const SocialContext = React.createContext({
   social: {}, 
   setSocial: () => {}
diff --git a/src/plays/social-card/cover.png b/src/plays/social-card/cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..06916b7de9332f000b7c1da04652d49cf3100144
GIT binary patch
literal 20605
zcmeHvXHZmIx8T7XP*gy2Frpv=0!nH?5m1yMpddL)2AiB|MG?u02$DpRoJ5qIRGKyr
zM35YmmYju#CeJ#D`|kI>SMSHvOx4t@soPbQC+xlU%6o-<e5j_PxMvsZE(AgLT)uQs
z9YMCqBFN@@JGQ}-Mdj6(@DGiXy5a>Sw}E{GZg$?jbkhkz_ST?(G*Nte*$`xlt(B&>
zv$pb82~!8V)5c~FCg!Kz?QX+p1d)<)zin)4WA4mtVs2q&kK>sttK#9dGQ;s`i7E>!
z-<C7Cw7TT!Xs+R@qG{@BV=8XOBO|>_%3T5g*qJ*UbGzHw+B-?O<9IN*5^#+^7T|$F
zj%K$c)GsRhH3aT(JeJPRw<QDw+}zwwy9u9maI_E*5*HU25IiGr<_tfK;CJ${cQ$tC
zw|6=M5O#56FfN)qnL1kCcD8b`=SE=~n>e^Q<9K*>asLJSytA{TmC4`G?VU~=V^3Vr
zDW`#G0b?^K0in}^C|cayQXAtX&YL-*w;PLSnB%dVjXPT_Y^B@Aj!x#99=FYLJnH67
z4la(S<`@KY(qBO29L<fL&CR6G2m%FyBK$&PQUd?w6}ra1Cdj)xUpA8#H5I=ldP_uv
z-&joO48O=(kz4#?#$uvybxTA{{FcaB(K8}{1KODKpTQ`Ypis_;o;fQjE+is!PFz$>
z@b3xO%l|xH)4|2m5+z0Y%-_TQ^$Z&;C4h3*)@p+(*v(&D`Fq9&%Qgo7n^^w$MP+9C
zx0r6bIND+=U}h>{ZfkC5Ztsi=N$4*jnVCvBTRGdB|4T&YZJqzKh(PxwY>n+La6In(
zX6CnyU2L6sq}9!hO`W;bY>hqs8+!f%Atmr{(El%}x&3cCjcOfcTByFk3m`@KFH+!6
z;=GHqrGulirtxiKC+_oRmR2^#j)396y#j5=c>aIHS1`xF8T+3waW}sGZ<-IoBruJ2
zaMW~gu$7iGws$p_68Nu=|65cxumghz(-!#K0l>}QF2vj({Dvbqh#mZOKM{l*xqR`w
zrhEK&k4H>`xzGB{)XiJ<b!Kl=&fGg1fgCy-aSx$6dg}3xPsamoZ?u^3Y3`F}VB|fW
z!>IY{<&6|0J9)dC3~Ec8UyN_Mdt%#;6ie-+<GVU;y{Vg{J0)}Tz?*pCg=fp<25rQx
zT5AN=+<TEui3=sq)4qv1maSpF4f%9Qh_Z1-P@<Q`t_b5hxUmaa*Dd?73vS6xJFtrg
z4w^04#iuZ26Lw*yh|pjcZ;lYKf02&;ve?BxVE*CFKYH_zG5q5w{&AxJ|LhED@tz1`
z8<Kj+PRKEs-=t=coa|)lCQ?)+Z+gW>q_A*hWGd&{snHd`+$tH$CM2nI*Zr2=NuEo~
zM{ZEE1Eao1D^3M5<~tJq4C@z)Je69#Dz)C8JkxC&P7GGXJ@Y({h+af!k_JP2ZYhN%
zoH<r&TVUsGCn~NG_IzJX!bkN+*mbSzGJAX72i>Ydhd6zX9u&}H4rc1*3T8ST(rf-z
zU3D|}oeOQBCcL>A2(jOrM31M|$8mK{R;Y%=oyAeu5yU9M%eCpHJGJ3CsY1(;L$%w_
za8w+j-AA*95c^HU?2_#{2VdK&zBM7=+Uyg>ewz_QZENFc9fk#i)n;nFs1}Lqx%*)N
zlz9oE;eK`@pE=UC_gJCd*c~DB#){+@87C=65hN*0>d%;0f18#*3!R>y{@f}3SkJu(
z<8cBa_*0^+%yhnMZ}`YE*FKJ9g|tLiqNU_|MMeH}z!*7NX6@Rk(&gM1CnO!kiKe-`
zX}?$baz*~v{fhD#`G-&%2yN7f1h*R1#>ER#3&Te;(va5=Ay&!E)jmyZP-JKHs$8I2
zP7YtfZ3lW2TC)x4tIAit7yr8JK>Q=KhJrZz7}+FyT{%XGZ?6QojyZpk+M)qkdiGM|
z_Z0lcqP3Hg)L#o4sx(GNAQ;k=chc1@U);<?3VXnL@cxAj975-7HZPFOEqu=;dW|>1
z^mYWoB*t@A4e?^X>k3}_{7%PU@|sY-^rCB%CYaW3vTweVfc0DbVSVD0xLA|k?b6JW
zRpd|D*v$Tg1^&QwYR$;Zhsa=9|K}cb{hGjf5^2Ao7*FYOWfk03;BV%Q^63kD^BKZq
zKVM&)(UVBFTt<$|+|3L{M6lSdtg#YbS29HWmMa9jK@d%SIVY#9eqVjB*;@uGPL@b6
zE&Eh4Cmj^0*;IYJV>wSXuw)7+O`!$O9_3sd=$Y|vmS)FYiB3)2RGkF~*gjD=m1B2b
zVi6+eY=?&k64BC3C&Ruz|02@lvxaI4jC+1El@qD{+1%ZF&=0?Mu7(bP1v2BT)Y;c3
zf=ybUMydlfjVQ2))I)Op`iASbuC^QB0@M*iG&wnouXlN3w`svdDh3S3WfwV`YOuRB
zlnA-Toy5p!i61O16dU|HM4ZNx0US5Tyj3G#FX)K$`u&(<a@fYG?AC?`vH9{m`Q`K`
zc+!FcHKI5Ur%BW6R#}C&2*ZNby#S#<VaP{RM?w<VoNfc6bFf@+tB_1>>=VE^ao%+9
z)o1+g4#N<2IdKXDq4XF5d99+c;Ndjx^r7!nA`OBF4x=QDyNxPpG$QG`DTS>~7Ac%G
zvUa1f<=5GrCS?>#UL2w@04L68cy(pu&y@_B%zW4msHaP+5RmCo9mxkoAwy{a*4S8h
zh#<@@d!<(Cg^XLnGAxi5h_(rB@76QY<Q28FMp*#wn_}b5&x31QTY-wvAY@aujjga-
zUd-8bei)A+X33^=!!d4uPNK6JVYZefi-gEtu?f?S*A}SV%?S7G+HI5s94`N`5-G#L
zk*t`85)+Z)FXIuQYfOXrf@nKwp9eAcpXWDb+JL7sZ8PnA=DAH)f1fPk-XYDC7~=_=
zAUi+E?qd6P57#4jH4hRweAwiBZdq;3%>rNwf_yRn;~DquE`z&IiO42dhAYGvzwaoD
zVE3UN4>&jzdV1i_Oc|l!POa~gQBaMI_k`+=Y|n{vXNkRjJ{N%Yn~<H1>b+14)DM&5
z#pF|3&{OH~a6UH|c=6^K0elGmP~F2xyR=l48Z|ei0rhd$I!Scdr^qI?p+R;J+tHn{
zsEZ9rjxPA=3pw-^_yILiX;A`e<Y3)p9Jrz+dr^^dq-?p~r$EosE&B)(XJ;eilGRRN
z5?5=x#qO>KU~V1&d^7={lU|ci8`!dm8=E-WRk#4QXc9E4x!~IT(vBL4X<T5S)okx$
z&rN7jMUW7+>s@J~2VAK1JaaU>st8TG9Qc*g`h|(Zpe;H=jvs260USy=3hLW%PNCy6
zAG~5M=<(*E(C}VHr_fu}tKfiGg4Q!J8xjC~a~Sw=$RQJ+SvMA2H7Bb%m+VbaFMqkI
z1$EW*x9YB<G!nE<0%wOmN1_}E01j9v*h)+51ngDD-nI#OG}veGAZBu~h;W>8+*4H0
zh>g&#tQ-y1zh=}b_eoRGY_Qd&V5Ir)#}Xvxv_yDXt>YXr`iI+@uxrM87r?(7AF%=C
z8gKN=7bW5pTEZz%L6=lJ>L-j7+7AZj!%z~qfrMuPskQ&{^pKo7ta*1Mjufroe~s`0
zUa$m#_4_xVSMxt!z0$V7grni!y^*Z8M3`he0e&C+FG(ysZ`!$!pae<`zoe%O>U78_
z@W$vJ@=wb4KO<%Pk^wvSk2bXs<|gfs7klno3NRghDMLBhZs~I^@Q2T8ex{6xi($>^
z+M0F;Q@)vtUwQGDDLW9L0Vss5LTu1|<}UTXYoYgtZBJZOlshEx<-X-<Ms-zxn*36k
zemcJ8{>7-(nU&1Ip&RqWNSsf8rU2y(Oy3p@ir}wpA$O?uEK_n;#y(S>AffE@!%3A<
zyZ0x@1_@=3toy!V@LAojx-d^P<y-1s;9DYR^i~c#sevtUdx7rJp5afqVEf}n&}F$@
zLa80(@}Hp$yZ4*M1`DN@FiY<78hP@G9-W9=ooW9gI@7Hriq2F-XKsR-S6S6VF3SZ8
z6{avZcvRQ&F&(ZgI%w)`Q<L3bBK7vI0H@w}Ce?*f)q@Bks{*>6Zj4SEJ3(~iAX?6_
z)1?=u_Fq{KSB59MvzEwJ(euO)$81bStkW)_1WG~$$NJmr+6&{~t_9_EU3uYEUCrF7
z7MKuF!NBgfdcm-Jq2HQL71+;QgF-)KH*leD@)YsxM9PU>ToD&-GWM126(H8VAQmqW
zE2;InvrJR=f$<0qgEgydj=dsqKYT*s9$h+PeaeM#scZ&~u3&s~K^FPZ0524gs*O+q
zT~H=ou$6hsEJ@3+C?`Z={YiNnwHsd@6X0&<Vc0!4Zr!*Y44nC>o;3~OA_%kHOH=$7
z9leZ^V9Yn2kmOp?+Pa1}kvc$+KY^YbiKuQLG#QsHWw$fex@IhBbwZ(z#UN;B&i&%G
zXFq28dDG6rNb9JnxJ}gv@5LIGk4pGUZvIpn|8|&HZdy>=URv?Q6YU__{MrIyh)6X#
zG(X0x=oUQ1CA*h3XukvJ^|1Q5-T1FgHZO}BtstQz=l~tn2y>5SNRe~N0ON1Vv3Yf8
zQ6_Q_F-wY@0~|{L$`5mm&MWytm*|uO;`i8{sOc(Y>;J=ZF@ilu`^~Az%B50t>k_^7
zy(XrdJP%u7#37JQrX|UEpxq<JVv8)!lCO&4e6Dsmufg=~x$JCr{N--f&#LO+wOd0x
zoVG&9`$72=O_Gx90hy%96~iqoO~ap<KryUAn>61yd{h$BT_KdVsPonw>e(Zd`B@ii
zgz&_hcQav^S974_xLBS3@fV4rjJxsQ+8t?~4xpOI0yywms_ULirE~eS+5O~QcB#Tc
z608?dsu@s~h!CnLwp%=j<f>k8)8VZ-Z_4`e-O;<iJz5cTYEq6~;A-iYYp$X6?onX@
z(FR;W23+uV+Y@9H5|^$Q*j|-&NXPpln|5$6h;6(>7G7>vLTCueB3|0!3TGd3RhQNe
zpCS(C^!mbPMa%HK8Zn{==9(&`JxJW_kiBpJatN<tq?a)$3GEJ8^Q^i?{=Vff-UnBn
zRWDidGnzC$dU+C*O%|NI(UE$Nn_*$w7B{yGMs_OYE0^s6byc$i4%y!OY)6dg9t^)`
zL>@m|&QO1hh7lwet5-rp*rOR3*pV>MB1|}+U7{J-6X3-GtEC@DSNqlyrcP@!S8r$3
zY};%QQm<3a0rrx9@Od#}v{{7Vh%4)0@2aeM9mmbRZXaN=^u6e;>ac_XOZ>Y7=@AV9
z7i@)UbRB`A*3(wIA%+F3YJMQGN~77j*FX!{k$C~wK@lk^U@(6mL)gUzYF3Zi4bn;K
z_x`?#K=}rIZ`s@TeOsn!>uX0WszE~zBb=>F%LrYPXKCE-rk?Q}aZrV0i%+&94oMlq
zbKBK?G&(C90K6tdJ&1!*e}sw1B0YWj8~z6j$?t9Uz-S^h5Jnqio%Pe(g!<oh$3P8k
zm=V<<v=?%WD;fLZN(5vCWw!v9gfBBY0eR!EhlnRUsp5jNXKhX^T=^Wl7hUy<1|1m5
z*^>GROZODgbN92He*GQVg)ez-%w>lpCiV`G=ri(p-lz>q>^;F4+|=E|%wHec)ZGpL
zD8t=8j)|On;yodu@&X)1^$zQeQ{~RPe)lr9zCyDP!Qq|U$m@gPMMCW6mB&3>nhVbO
zE(}M`Our<~$W(b9<}`RKhW`034@Wk2m03rw^?a1*GWlMU@3)k-JmA+`?xo4VaqjTp
zQeDt!1d9fY_!Z7Eei#^D%6I%RTD&@WA5XTcddTKbb`BsF^R6eztl+J>DOnHta}9BG
zf5I7q@5hMyIF7&Tn$K^WY&I>kJAU!SPdCGgQG4H!cWE*d6!3W!5ac^%@~@!|-MMxR
z{OrW;{@N~I`l8kTHSMN?GoQmME7yvb+vtcrRlX-G=R&WTwgkQqa%-~!n36S|WwuOm
zk^x6M<XKT-?Rjf7Dh{A-G!@lse!xD0o&RR3RBq*DZt-ZRB)QPAo6DwkE+uh}wNYx}
zf}ZD(9Q?@jqS}bo!I+|<I<ebprvdm#liIvqtfye*I|fxst_m9T8L2^l{nO>iuKoJT
z_UE4jAG;DwdUvjuUQ6H0qT6x#uJ$|6X(>bFjz5XirXMolT>7iC!<G)AMdKBw>|%b=
z?LKK4*LWW~myFJ@90IzPkAr(0L*3)!v2cF_LqornA&MJuaot;9YWkaL#*pnBrsz}Q
z>&5+p)NnrgFrT4@kjO9@vBKx2@}oC3-+wxe-wjA<fSji#0?uV}`FF&M`rrpd-D*%6
zKR9nCb~f6V^7y(o<MK)IR`~BT+es?Ig(|p*yR1(synS-`25sU;CD2?^=ui;anmV`%
zv<ko(;xVn>1BUAj*Jp;ws%eSB-1e0|=exa^@5WSoyfM=h8Mg1jnKRihnE9-ySwvyF
z|NR0ApwPKB;{4Dv3&TK-25OqvsuNSI@(R_-ZFT8|`_N7cl2)aMN48!GFNK}AdJN=V
zoeI|Y(}mXQ7yjGu*jV_~%FoXBq3Lkq^|sz;o+|2mS~+2}m8;|!w;G;)klAz3y>Xv5
zCgOLWLfoS+T%>jRg;&#lefwJcT1Rky<#w*ixRg|>rDco$cKU`e|G}vP7QWONW>H7W
z(aW}58V`e6w2MGeS)C;kZ4kuWQg|h|{8;Z=v>%Ue_Q$BU?)?uq7e=T*?)If7eo(MH
z?Qsm9zyMybTuGxzo}|+XHYDxXx)tA<CJ@+b&{*nzL{*C7T~4M}1*7P<Xtc|k3&;aY
z;-ExD(3(jZ>!g$^J`a%#U%m=@#-EW!%bRs0@1d&Sj2FINu`xX5>y1~5A3gu*fZuv;
z1$O4n*jJjXEK@Pbg#RYl7_^<sSBmoF{MhK&RFHqK$Bk1f&q?a4#yGLiZT~SLN`Z;P
zrlD$`nkqIzHVila>ZPvAGItO+ugSi=RzU7u_KWu1<&e}Q>4NH9zbPY1%}L6pHB~=9
zzxZX<Xc9@<%Xp4LNlT0j9a=9w8s^<MMCOqx6Q(e<zR<kQb_$($2<6&bS%U$+r&ewd
zUHlq_O4{uk@2T|E(^IQ<yUMz!p8JewM%wGWOW^0LYr#?ov9tZ(2WE2VyoG!{dj!-~
zKlfTxdE>nYuP`ZA{ee-kw}9ZJLGPvbDPlsEw;&~?6yLOv_Yjo|n!Y0GCty=ZKWVr)
zIDqd^wO7U^PkQ%HRnnj9%je!0z>E%Hi8gS#62D;AxN^yu5-W-^b~~r%DYUA9q@$Z(
z`p%+mydkP3>W%3(SE4C3UNY1H?Uj~UtQ=B(97XrH@A_{iZ1N8q@S*ApiQY?eGg@hh
zOdv9>q=cM(2%EyucQ4b<tu3|qg&aer_u=^|ZR(|Xm-(s`G^xf!k35!`<*H;`z)>%a
zvXp-zM)&NC*7I<}>JzV<u*jV<<`u2S1(@56vSbsVtxx9(nRdR4DVKK}JsF`{l5w(D
zwMPOnK-)cRT~Ux0K05#?9zA$UkHI2gwxUH?`$1xF)XZ9QC2O?4^DXDMMX8CKKRbu8
zA5=_mu|^lF-sT8qVpN@Tvzdu&y<48sQ+kI~xh39vATAm!W*}@=AxGTSU9~dZsr~w!
zlgzeYzr}^;#EOOW(-?Q#xk2>>lMc#IyuC-*qEiyzZ$k}LSbAL`|CX{LR+f6*3o<m4
z^%))a3mxF|)Mzx?ygGPCe#ZZ+!zI*bBCT=2GTIn6hh=3wFETE};`JkN;a~d~Wlm$Y
z1f(?>9T2#-wk9@Y6a6aj{c-BY-B-vfyL0~nu<_o;p`2&Z>zjY$_Of7sszV0u_?s9z
zrvoqqyvdSUDT%UM=jL;Rf-C)$|Mf0u)V|8bc*Xj?gGOW0h0{y#-!*|5V+3mRpt>QE
zCiCY{|KkDtjQKiNra-bI0VT~Jckc)Hr*<*DN<4qxXSPgBax1t4S!GmJGE2uZbv0Cz
zb|w1Ghkt-H0}+MF43c^4$LNn4@_IRrLYw*fF`olgc|ckra6>W&tL#h8C9abnw+N>{
zUN0T!)h;aO!O(Em2R^HbYOTqn$v75z*2fkvl^SBD6eRBoI@M$`sJD1>&@d(Oe3ZW9
z06)|nK)z$BMr2Y)8Ye>-aeP4Bmr3e?|Ax;-6)_KN7P*e@(3f#{XdH)dbg5|7VdFVt
zTVEg7xi#<eqb#)h@?jq#=p2RNj0@F%G6%0bJ*|rKr*WL+Sdcd~G~D3jE)+?8QQxZU
z=uX-sCIh{LySY52HVD{?@=>hlVy4VX2(6KK3V=25WNH^~J-N4g<_g^fu=b=vi1uaW
zaiD^uJCEM(`=AIl3s_eRwrN7p0ol>!{<P=e$F68?P%eP-Impw!i9UlTLe?;Jz`z(m
zHqHVV`bo_%TR?;lv!h}6la&{zQLkF*1a(upg1VHKXdu->f2n2!4XUkCqt$$(fl$U~
zi2WFTXmNyhv}4HdD(=ojPLGultdR2493@exQEK@DVEESdrYaUSPM<-ki(!ferrfy)
z?oSD=Cm{x~eIty`U1OWvabEa`2smWf35*u}rld+h3rcqf(3#9k)ni>>u4g4|0{uz4
zg>r$ogPV$j0kS#R1S@OnOSn5V5}lw^@RSgUKHX()%^*8^(^T%}79i}edDMA7A9@)W
zlYR`tb<-suC%D+iwE&x@<AfGr8nj4_CSM36`QRlAs+my4!PW&op<r`GW0d9S88m8y
zT?cW0hO(#S9zIz^m3x2HJUrUKJ00J11Rg!QOi$WSoDGpU?l1RMj%`oCN>$~k3*l8l
zG7MGLVd7uxuMOn@m$mb4p$M@(_ZL>htp17#rZ8UYIAzO$7!kbf6Qy1qV2GNex6)RG
z*Lv<#L%ZYM9qJCZre0s);QNNgc}+?HqTAZzJG%bTUv8ALArtr2X9eUZ8<Jy0q4&Ec
zmbfrLH%XY8TR7E@1>)n4wfQjGUG~}qpNu4d8$<A4g#laZM=0gQUWd*@u)wEWdk<8G
zdoZ(dAFGs1ON8vTw}Z35H3loTBIQsAgb6KnwWLB_yF|}z*IhsPI=y_MhlPiT0jgG+
zgGoi>P{h1GKkq*ewKiDCAUbc12Dv`l>f;tx&{%a8oP*idou($EXUQ6kgiNos1=ZTE
zTuYi@XC1LZ4)%3^efe0X%L8hV$s%L#JbuO|4s{#;gOa~M8Du9g96h^e%F+^LquBAE
zx-m8w<)CcH+}q)x62dAZLZRig?M)OmEf6}gVJz>kY1a1kAq!k?vZE}T?c4j@EHP%k
zRzda2g~VQ1q`}Sd4C3H+`!DyfvaC@83UxGo)92u3)ShU!!B9bNxcA?<KZxDO#<7t%
z`+3|RWwCv!p(-YYDVMeY`pzf}=RJjOZ7jC0O!s#26+V;N*kb;AuasgEKl36Pc8?>p
zR(4?;s?JM5CgDBG&}}V=Wy;|tPSEstzinxHx$odd$u20$!g~s8f}1Bp=(spS_dp)1
zt*WcS%tqo6$GQ{9#{TuQu+y=Cn&md}+;iL5h%nc3@QJ8$JJ5Wi+cTFBBA5DqFK`?v
z8yAC+qqllFT$0<h&jZ^)k=O5maPEfzj^dR|3p_QSesMs2b5OFeTS8?yuIR5lR31=#
z%pz)H=}npCQFx(t33p#>WRjKBaQVabm)di#`%yYR^XMSl8RC*E51ZEpr(1-n!UO6j
zD;HBD6B<B4u)KosTg83hPJW*>v;=;tHc+RVgzUc5YzQC{)n8??1z|r%;WSkx2!kqy
z(mn9qkCw4IJ`#soq4fnPCsV!KlP87nv$-uAqpd3yw}>oU(hx)duQtLU7GNFu!>lyJ
z$AH3=M0K}YSK}Cld?r^pq4S8yp7s8)6|w$ukW8xCI+S=oS$R)JT1)6ovI0rQZ{Ufg
zz5P|RuZHlV-rc$(dxD2lR5^E^>G$?(Dn6N9Hsp6Sz^yP1O+FFEV;~t(tI2q)nU4-W
z-S-!HV=E_WipO6Ho2(S09Vb|hh`R3jPT$dk_zt&*ketGC72Gk&?d2Y6)L%t1oJRs&
zutXNQj_zZkb{~qH@SpEn)HD<nUdA0`n-cf*jbEqZQMlryfkh%}qNoPXN_6Uw%M4d9
zv9A_Zpn>q({1H-ZU!vz#)G=tlx=EQJRU<V^YwN(O_1|UWcvTKAl++<wi5~rr<Udm@
zcICj`jlhs_B8?LQ?L)o3-{MR<3+emsH8+IIhvT9=8<JkHOBax*WELlf**l+l?xI!V
z=a|Uv>gtPyrbuD!)mXIkgGFuUEx!D&Cx7vi<ZF-^@<MaXSBV-0tY1>7)a~IR3+y-<
z3IlVCPUnM~xL!Qi&)>0|nl;<^1BOy#)Z(Ar8YZ@F(=ARLd{;fa7D5Hhk?nEZv;{h1
zz2&5kcDu9;d~cC21C#fZjA?yrWlQAaQFe)=Dl#LV+)0PL+`mDo197R}3DkeHv9b?o
zR`pfXTU~9e1xZ5eU)M#~c_g=LZa4n-3nwBSj2%s+2ML`;?WcI|gK+<w=iRJ^Wz%1%
z6Gv226Ggb^V}$utq}L*1aHd%sti?7r*S%h2llbAaG9si@oQ4%YgWTPl`dcD1P5MfN
z$*;(CVH0WgkFZ)|3p;F(pVafU1LfwsMEAzZ@Z^^Knxu|y)v8%tU$q>)$(TRY{R}_)
z@B!(`XJ}{s^6M&_9WEPNY9LRYinu4M9d-ShZPQ`vY+1$>os0P{V^$L(&FVSiGdVv>
zU%d0bemh>`UEr=0+B+q8y<yp5b705L%bz$e9JuhQlBddNy{E5dkd9qJ=-#QSzA2}v
zA!*K`-?vp%#5~^bTwt$kTwe4B7N_3?wTgK6=!jy?as%#2uiGR`zVl*f%o!Jh?sG1_
z<Ly75dUi^SPqaW5)a!M_d)UVzm_A$*ZD7M>519N-@OYxH(p9O|C&k0TT%q!+xevX#
zd=GQRR0_uGNT{oJ<*YN|*2c>V`hQ0nB%+pxH6{^Du_Fp0fx^eveB*^?7Rdd12K)FD
zJD7!U$uJ5Jo(evun)6U8CDyF1IDb2-!y@tEl+^Mb{G?<r0}rR))yGg@MItr>do3+d
zFwKSwnPRIhc|nanfBc)8I_L`qa{@`X1cHx!ZQDDtyM@Gc=B$eNVzJn4eO{<r!fJrn
zP)-_M#}sPtp{T)A_dHN#=Hha1yg74cA)d0*nA25!q}9Hi)27WK_#Imz>FGp$Q*#%W
z&+6u;KAC;1_wNjkaRny!t_22)jeo-nxsJaVvLBCOJ~#i9S#mHb=5{+(Z1Ghz$;QBC
zCC@K@9}l~mW~Sd&SPt!gBGU&jYzBUl`*Bm=PMC#P8?Ziuqb2CC+6cl!^!NYZ2xUSO
z+G%O=Z^(s;+(dX~<%PL<rk80&`+g|7<gN8KB`XrCa<w(ZcvJ9g`9k*HF=Eau?S~9d
zw;PHEU#vQAs(#shZ;za{?`4TAJWCAIw`=O|+^@{f(bWB&r9OwFsi#@yXw||aMRryJ
z$)#zr!Ss*hm}H)suVK<sDq{2LVvCHV+Rr={Qod6^cxXRQLA;KH%A%kZbiLf_^r_CL
zbPA6@J#EM~cGf<8J}mK-S7&FLDWx+<V97>BY%*O87)h=>_ng&2MM`vSdQTOTX)U`*
z2p=eTk~Hdv3ne7HOlsrJXKFrN7jpa6oR9yS+Y&k7QOJ>#Z>MM@CG9|*l{q&vr_rC|
z;GrKs+uBSX7goJeyq8tZ!b!K=Z{Qt7EM{Y(7Ud@!R;oR)@CCK)FU?u!h{*-f@b^4~
z__g(-xj<j@HB~^B=}L57aF#={%w7(ev%NElX{3@Vca3<jh8nS@PjHOKfBea=`|WQX
zv0kynXbqS@!mWY&_=VQ&zJqRkGCY$$?gqBKoliU)UXM<Wgm34%$xJ8xM)2_A2G7}y
znO_SP{Fqq<ekAc2fC!NhbRX64tSk_nEOl_b>fvsXty6G}5+5t%_jxp?%FIP?u7|BZ
z!NE&zg}B_uIkf&+xBMJL3WR_o1aO_nIytr3JWomWZc+!DE%@vIcxJtyYwu3$&o5CW
z{-UoXDN0krsBu+N=L}ZAm};O0kqE}v=9QORz~hTwFrAq#<FqU0%iSiYXrX$wbl^pd
z^H;f<`2v;Ts?{tv(xTs=r!575sL>^CZ?v`=3$n5I<+d+feFUnfisRW`Fq9Y4F{@R3
zl81}QZ+&Kg^nAUe0}5!@GAuxr)k$oqg;ei$ai!EQ<d)+a7Jq8>kFrfN$ploFhD!F^
z^d&O*%~cB2{AlZAs_?nr5{a&+hOIU{!B;cTb~UV^Z+)P6bZPlzo*y^m)%d%2Zlo$h
z53l&uH35=e?;OEz2<D)DZ^Zh;o+9O7H(zSjjDOaYYyXiuVGW7Y$#DDNS?NEN7ztB6
z9GgOr+tuZpw;-3SM?;AC&nZPUtsGDY+qb{V^=+-i>2j%F%KW+7^`)V3;$<H8NY4W>
zW1NXc7OEW*WuD~VKB|@X;D@ioa8?o1`8Q%yd27dV<DDHgst<<fUfy0GQ*o+yHQF%z
zGhKr+?mq4WL(t4>)?^4^A&_rf{}c{N0hP}|`qi&Tz=ZRBywtt>cSp-R*;tH<kEfvS
z>$&e78=fe-un}{3p>`WUjO1%2Ev^r|EM85#39;Yv(`8G!)M?V`hswIHa0UmU3cw))
zB%pgCuT*$#g&ghPrnv2Cjvm+4Y914jV`0}#7}8RRIgmwEnyP*y5Aw|xp;E|v@%{y&
zO3%-)v={4Ase||ZA~DZD{uK7y>InDIkv%hM>l1AKinY0AF4lU}9aHjJZW}e1X-Smo
zZ#^!3<J50`2JFi95SR+q+-fvr;VS>Bn{TeW;V-Ar!o882{!*kQnXhjN>Ls+vp}MZb
z<@Kew{M#c18zIgt2F!bgO(vAf(8~c*!*3luY)mWU1(W%esEttVBFZ{$l&x;-bE`2c
zKf7BrE~TrTsNMQ})!=GEz8F?&L$lV+&22LKxR$&9YD}FHm2mf2XP)gA2=AJDwozHx
z1GRo+UiXDsNVwnRchuxYPqxIM^3d}eYr&#jOCzxH*L~76_rIFFSD*3kDf|6hw?E7)
zVGAfY_a1O6?E=r2zSEgben^9&N39R#@n!s!+$@&jB+-B>S4%HH$kS&56II6fOU$S;
z=`#vH*M@Wrgs}(R%jQ3ytMrnSqJH`SNtN*P#XsRDO_7aQEG@fvKTuKOx+oe+ek#d@
z0?=eWQA?6`vyv*fbp_Kpkw8qKlwS=e!%1|xm68<NQEdmqL(;2JTtwVC19nArX=w_3
zyG=4F<e^rgE1FGoNc^FiLUxaNu<6G)vOAfX47{OCWo9(nno6D1@?|bEbh<Wr@^#yB
zb|*9Mx&Az?4l;g3%ZLW?YWd#E_?+5ro?#L3=>C=Gp$==y%2;k2A&xR6S=D#ujivSE
zC7gd<xAXE`vC|jw#%m#X?S5^2{-ZAWGvk;>Bew>+Z1&A6ek?6GbBur>WugvEnbeMY
zs1KbVTpRH-K<kajM(o<x^rMIAdDSO>tAO6-M*A=>Js&r$9%Ke*8xdbpTa{DJg0G<M
z>8e|fQWc(1S%8^lD3g7^t~MX6fj_99`7f4dy@nUeW+2<?^4!T@YU_f%63&0yTi1{C
z)NrmoI2i@+Sy1K=={t__!~O{8sP>HVv?)JyVS}s!gfDv>RF(ViVN}uGRGuZk`^l`n
zL^#2MVvA~DU?A0kE-`~9I6CJc<_pj)k{0#)ddss9Ovb{Vwg__{PAm(`DTC${x<QY|
zBb$&txfRJgVB3=|!aqIiCVKE4*WEU>ApydSr1$zlBZ<Q!6gw~LuP#L@F1$Md>Sm~~
zRPUzMR2N{D)^&SZ^G?R^1ckOehcB;$hjQ<?(vKE&lOBx*@B(V~N!!ELJ;<vWJk`Oa
z6s>S#Ks_9~x|I4zIv558pr>;L)N;?(YLHszbBkx9o1rd%D}8xK^^VAQD-l@j1=KvM
zcQdg5enD=u_vEH*alh==bFR!-^$r7X=zddRP5>NrLj=C<pyQA%^GsMvvS0aKdNPCO
zXwwNHs81TD0~4k<g-(C})pfivq_+~zi@nyeud=xD)@|-pqR_a~o_!b;wCgFLmVI$9
zN+XY1r)_QJMGL*r^X{cAXge^w_M~i3h1PV-nr_rB#I=Eyg>sa2sy7mR9LWM{DT#vP
zok5e;AQG{CAnb7kty-GjwOy=J=g&|amK$2JU4i9erVn>t;~}8z7fPA^@1^=N@TtT)
zo~Iz{<$-{0l3O3oUPej(*MPFgIH)>}7s39gpy8xA%JT6g>wXSc1gWM0#W6Y;E4+uh
zs<>>%;Ha`e>eaaCo*!NhpT;qr2OhWkZ6K4us-M!rx2>&QKFdVQ$!nD5wrr}DlmO+P
zaej_KqYV`m2U`6VI9#+n!mUS!hq6V?2vsLLNga(wW=GxS*`*a=_a$TJQ5r-o%k?1d
zOy|cxi@DXCo1s#S`1h|_&5|{k$^|GPhu(=6Ai7garJg2Dn?a;-A_1T0aebv%w>JjV
zodv2fKjp_i4YRd_&Vijpdv2o*I;k;a&LOL_Ewf4g&$bAi?`<87PLst@&>+|<dpC0J
z=0<2AdRMmYLj1E`l2}&<q&P1~|Dk>dDSeYFG4a_Dr&&Du?GiIP&|Ds9eKC9DGx_}Q
z7SdA`!O@5E(9{z&bM#u@haj@NC|};kPD*iJY=|j1McKlv>2&Zni|o>uAKHC!q#?90
zfF6|?e_yz!G}pQ)sy%y9h934V3N1P^`zp@(l2qJfXGj#%x1#Ia^OV{8#u>Iaz$mBZ
zH7+(*QoWJcIji&wR<=e12SW7g)UryhOQ-cKPs4%-oR|h(_T2a?E2^_?bh!pRh%7(I
z^XIYgQ<|n0FMPR_8g$Ef(SgCwbs{}KBsrqhA*0*i>R&TGeH*2&+AbjJ`c57~;ZYXB
zqc@}rPEzij*GRu8)qK6LZ33j#!U}G1{=-tQ(p#pnDTcrWzlegg8+Mm)#^18XPbt1o
z_j@h`40{K46hg(@?BuoFw3#(J$5u#W;tI!=aAZPMCS`FElv-^Jd{Fz9M&}=W=iWwJ
z%<b`LPl(DITW8IVN*EaCZ)>vvvzNtzGcpp0%G^JzGd8B%8CN6<2ma(TdpBQ7Va<P4
zQ7MfcU>LoRY(kce%q_%S8ApfYiQ;;6TfF{^m)d3UutyB2_`wib^q|T7dC|kSM5B{A
zIkoJ2nxM2uTQVUzw$SLIn!!5TrG)u;Gw2f#eBNfMJ&a0t=VxC3G)EbHO+;5^0YBy5
z>e;Lk2I7*q8n{?BHxz%m*{&~5hUB(Z+uq}Zh${X1i430cXi7ztc3+k+y6!P_T{*uJ
z*5+92<<Z!B-3lb3_O*|N&FIeMSK1zvbK7B*9J=W0+mfOKeAZOnZ2qpT`&d7Q=~G<x
zw1y0t%ssJQ-h#?<FRUnrIO$$#x|v<S{TW9B4p4iYo`(Fns&%Z@xoine6&Z<vf4YqX
zMFoy1r=%0NeDBhN+GzkB>h-Cq%vBe?b(RS$`B^f9im@kgtVYF_H&#_afVzeGAPxtP
zwfvQmX#cN-l-sj#KBamZ^#}X1hflS2FUu}1B_J<^oEKVsk!O83g7mj)8G=sGqRpRe
zpUM0w?Y)MQbYfmG==|IqoC|oZxV!5Mh^cVXNkIPyD$5AX%>8r|r{vv2yYb{LJ3?Qk
z1*j5ESqYHt7Iu~$hGI$5ejq?F5Ui%y%}c1%n)|N%b{KXeuUe<$W*CnST2LWq0w<Ww
zCWzKod!I_*b#`f+e<v%bU1~Gkxb&sLvCj4&TG>|zw_voxIVv%jdxAK}bDrBR%Gz$#
zt?*?5d$?%y%fcIgy9g)X9uT-=Q>X>r>+@$6Hmi^X1#;(`4kfH^_8ft;;kXkjtV3Sg
zBMLln2DG~kRB-->Znr!n5!-who6$gv;Pd-3Ekc`rN2%t?1W~(b<o$`?*0-Ea9xRev
zgeBCj#DjE=)!++?h(cOTa=fVmDX_(#aK7oRTBwzBisfld>^Sz%tte3nd=g)qu4UIQ
zk~kT*OFr1?Vs}$fJkgS0zQYF9C+o+G0*GK;;oSB9TIKuNKL(Uer7QXjSa+9IFc;`z
z=iqe);aJ&G*m<NnHG|&aqTJhrl1*1EqfO4|WGU1Hg*n#Q@DT}Yc_=irK(NzpG^fT+
zHwZu9l-%#~AXEvr-F?6EeI=<@y|Cj`OE4^*4Rqz`jdV?NQ>uEM4L>O^oS89Am6`Df
z$BsL(f@%+AKp6%&25xtO#>o1B#w01sJ<Sp-OJPuTeL~JYqDahm5W0(F%lBb^E%N6u
zB~T~%rWYu)OOFx|+0c>G*U67k)lXUSkw)khYOUxMNbiqm<lU|Prk`2+J<JhYi`RQ`
zfQ>~F3NBHZLPhV`gFC;@EbUAt@1a-lyeUEZsKG?^sq+)l>ssQxAHb@x!?@}A%~65J
zCQ`IJIr06)k7i<Lj*y?s95Ed~A+%-h#V%RV8*W-AFvF8$0SLvuG<AW!P<M$pKPB&g
zaGaq;fcN6m`r$7Ff2Qf~8_#EIaTc{z73S%MT9onSmzEt+-YS62M0-Cj!{<ytnbz-r
z5W>2j6wby%3T1(RIrb}ZNu7~i&!9_5+<BRiZ$JO$C@_?VIX*wyTMcInP&RCX7)W-T
z=hq+FUHW0~de+y6_R3gZyeejSkzLyJBKuhhle$m)g<M+#nT2^xx<3uAc?R0NP1m@u
zBnpPEF8We4Lm{8F>3X(;jnK;+?T4**tep@3fDMPBa2x=qN(B8FK5@g;Y4i{fiR=uy
zinh$)XY?98Kl=OU>)ZcHpA-{x)Rl1vHyv0V{8}Q^@!*}Y6YOxSCdZp%0-dIt;7#F|
z6u__@4*9=_;17PX{3oL|1pak^{goaV<F>yJoQs+zr9l*i0os#VmU0YhEX^lXW%2#}
z)PuZ)HNe{a@6vN4{%|tTQm~%w9M&(a4j#6*dgz!BAs1>}glz@nXBJrN`KP?tJ32vk
z^jY&8D><wWR=y)`o@QG(vgw;qZ0q7#=-$ZYbpC011K{5rA|N6$iG{80`JQM|3d$6<
zwZvfb<URBSzY)%!GQhs}fGE7sNB6A*G#$3do<*U*9egN`1wYf9Y@Wx&d2W)ufj!1I
z^`F?ofF-U!&t*R&f3-&Zp`KtVn{wxZt-&A>Eq1;$BY!8N9~wZT$x@9kRaqJBDH05I
zDeWP{Q{(Wh0yp2L9kTv9qU5F%OjodIVBh{LY2D~DuIMs9np;^L8$7U9Jt5%Sw>Bo5
z!KHO!!h0|>5y3t|h-xl549r=n3~#2Tq1lpj2Pf>L;5^w4`4><x=k>?eP-QbSG-GA`
z<NQbhSc}?HyXyvygN;c5I-lHE&{w*1S!FM)3WU+DiVz^OFc|kzCkK+K2nZ#T-c#IM
zYw4?2<T1AGNi&~K)m|Ka3)>L-Rm#3u`!dm>`;d|Vy?e}CT_Rtq^FkUB!B4Y=05pbd
z?M07X2-=p$#`R}B;Pl&FdJ{o*KSuvw05~JUjeeN4f4`8^_r{k_q%f?A!1^IsrsB&8
z9pMlVxo`je`-$)+&cMJ%tmHs`ET8{7@iW|+!Dl5uJ-((%GmIUqQ$-J~aO)1-G3j2e
zs)_{Z$$_>~`RVkQrmmgT!sPVndp28M=+pW*xU<{=3s<Fhd<=;3=xN+|t@3qHd4{^D
z4bB366NH`7msEGTt)_Hwqdf6RAw~URSrsMk8s`c4Mr>n*;yZXIuy$+C&2{6uvHQ>3
z)=m}Xq7@5SIk1HGoXMwy#S3Kyb+A9&PJ%a_!aVvYejiy}h7So;iBWbS)*8)A6#R5C
zekSN#<w@*=s?wIWAB^XG)(TYGHy`~8+pCwz1WBvri()F4POC*vF3YSRoalm9AkDW3
zKz4q(WZ}+=&A8sIEmr7oF&|}=31V#K1SuyOgVQa4rT$`Hk@w>6rV=NMjUmRJ;dz1L
z=lW3dl7noyoljrVt+w89MbG)22-XZ#Yv!z)S&H!?Q-I+jQXtcc*0=Wh-PDftLw7;q
z<$)zKRpP1Z)F2QYoYo@vw3HkBqbHDGvxWEF)|XmI=7L&CbsiuvF1#P=u|JEHmp?}d
zt@3Drf>k?!klF?6+0NFyQuRITDpe+dQE!&{!@7IDVybqWE%yp;D}f0e=D^WaM0};X
zrk@?NbQ>e!^3}D5WBETDAW4A?Qh~$s(^pXHO@yWEC!<XVjx?Jl<p~)0)ZP>_`5lN=
zO9S+}T66HtLu-dx>k=ZNjU`}GlTRwIjP=}tc)0)2?LEL%I;@NT{g4Nfrl8ru)zL|J
zs$w)z)&Z?rj^9BxRVPVMBjoy51oWBxs4wU+HVLLLm6rBvMSBb1XpDUZaJ|kWG)9-=
zJsY@44^A(&G5h_#hE?O(Uo&cOg>CnnUIoVn=h6rjM+u0a*<SJfPhvy#>$u*frYh{X
zno-qT`;G$|mCFg*RkzQhOCJI59&)SM$y4L8PF)n6=$U%B|48{!=oO{=q};g^<I_wL
z8Y>-psmBiAg%Vc5I}6&XQ2m?xd(hznbp=?+*PioT_R!O-iR=aTrP8IYlUHHvW_0X$
znBT-$za0~FP}h2<LLVh7z@an**|*x$BeXu>W%6FYA$YPCEypr%0n_=+?z^&cCM<ki
z|El-;c9XgHrs|C}2*RqiJa3n8_UCtu-*Qe<Urz!QM*Yz*X-o3ykJs2VdRWA-_0E!i
zSj00XD}*cIc0vTC?dRr}9WTxQw8ziTR<BeHx^Dr2$R=53@!x?*$aHJJyTvBD-AH^q
zD$Zv>ftVR^c6Ry3zwWx<YOQl$YEpbD0*(8fn72?XP~Z@eP;u`WBQw(T)PAP#W6$#@
z$C-@Z+lkfKU6Q^v)3ZgN3Zv{EB$aNRO}6UkOuvEKw%PJ1(Bv}kI=VtCOk(Dh*q>KJ
zzU(gFFAM!@HzmJLHatiUm*CyYdG0jjBE&GvQNbye9dCtVTXRD7$6Do^OGWc-dP*&O
z-iT*LDUEs{M?tC)QIDXz6a$~)2|Zvxa758F8ur%T$*cqF;$Mg+Prjy{prgH5q8;Q2
zTdg2sjeb3V{>&`Qpg4j3{ISzNaQQzeQuqfO<e&d0=AZvU=b!%<2plH*`^Omme=vqw
ZKbk9W)Tt#i<uWSN%knB0b1xX({a+yqguDO%

literal 0
HcmV?d00001