fix: removed unwanted image

feat: Redesign

community/fixtures/custom_field.json

@@ -104,5 +104,270 @@
   "translatable": 1,
   "unique": 0,
   "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "medium",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "github",
+  "label": "Medium ID",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-medium",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "city",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "mute_sounds",
+  "label": "City",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-city",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "college",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "city",
+  "label": "College Name",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-college",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "branch",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "college",
+  "label": "Branch",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-branch",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "profession",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "medium",
+  "label": "Profession",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-profession",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
  }
 ]

community/hooks.py

@@ -167,7 +167,8 @@ whitelist = [
     "/add-a-new-batch",
     "/new-sign-up",
     "/message",
-    "/about"
+    "/about",
+    "/edit-profile"
 ]
 whitelist_rules = [{"from_route": p, "to_route": p[1:]} for p in whitelist]
 
@@ -178,6 +179,10 @@ profile_rules = [
 
 website_route_rules = primary_rules + whitelist_rules + profile_rules
 
+website_redirects = [
+    {"source": "/update-profile", "target": "/edit-profile"},
+]
+
 update_website_context = 'community.widgets.update_website_context'
 
 ## Specify the additional tabs to be included in the user profile page.

community/lms/web_form/profile/profile.js

@@ -1,3 +1,7 @@
-frappe.ready(function() {
-	// bind events here
-})
+frappe.ready(function () {
+  frappe.web_form.after_load = () => {
+    if (!frappe.utils.get_url_arg("name")) {
+      window.location.href = `/edit-profile?name=${frappe.session.user}`;
+    }
+  }
+})

community/lms/web_form/profile/profile.json

@@ -12,6 +12,7 @@
  "breadcrumbs": "",
  "button_label": "Save",
  "creation": "2021-06-30 13:48:13.682851",
+ "custom_css": "[data-doctype=\"Web Form\"] {\n    max-width: 720px;\n    margin: 6rem auto;\n}",
  "doc_type": "User",
  "docstatus": 0,
  "doctype": "Web Form",
@@ -19,14 +20,14 @@
  "is_standard": 1,
  "login_required": 1,
  "max_attachment_size": 0,
- "modified": "2021-06-30 15:53:20.967466",
+ "modified": "2021-07-14 17:15:15.424855",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "profile",
  "owner": "Administrator",
  "payment_button_label": "Buy Now",
  "published": 1,
- "route": "profile",
+ "route": "edit-profile",
  "route_to_success_link": 0,
  "show_attachments": 0,
  "show_in_grid": 0,
@@ -84,18 +85,6 @@
    "reqd": 0,
    "show_in_filter": 0
   },
-  {
-   "allow_read_on_all_link_options": 0,
-   "fieldname": "username",
-   "fieldtype": "Data",
-   "hidden": 0,
-   "label": "Username",
-   "max_length": 0,
-   "max_value": 0,
-   "read_only": 0,
-   "reqd": 0,
-   "show_in_filter": 0
-  },
   {
    "allow_read_on_all_link_options": 0,
    "fieldname": "mobile_no",
@@ -120,6 +109,91 @@
    "read_only": 0,
    "reqd": 0,
    "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "linkedin",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "LinkedIn ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "github",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Github ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "medium",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Medium ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "city",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "City",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "college",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "College Name",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "depends_on": "college",
+   "fieldname": "branch",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Branch",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "profession",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Profession",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
   }
  ]
 }

community/lms/widgets/ChapterTeaser.html

@@ -25,7 +25,7 @@
           {{ lesson.title }}
 
           {% if membership %}
-          <img class="{{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
+          <img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
             src="/assets/community/icons/check.svg">
           {% endif %}
 

community/lms/widgets/CourseCard.html

@@ -29,12 +29,21 @@
       <span class="course-instructor">
         {{ course.get_instructor().full_name }}
       </span>
-      {% if course.get_students() | length %}
       <span class="course-student-count">
-        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
-        {{ course.get_students() | length }}
+        {% if course.get_students() | length %}
+        <span class="mr-4">
+          <img class="icon-background" src="/assets/community/icons/user.svg" />
+          {{ course.get_students() | length }}
+        </span>
+        {% endif %}
+        {% set avg_rating = course.get_average_rating() %}
+        {% if avg_rating %}
+        <span>
+          <img class="icon-background" src="/assets/community/icons/rating.svg" />
+          {{ avg_rating }}
+        </span>
+        {% endif %}
       </span>
-      {% endif %}
     </div>
     {% set membership = course.get_membership(frappe.session.user) %}
 
@@ -61,3 +70,13 @@
     {% endif %}
   </div>
 </div>
+<script>
+  frappe.ready(() => {
+    $(".course-card-title").each((i, element) => {
+      var title = $(element).text();
+      var length = $(window).width() <= 375 ? 60 : 65;
+      var suffix = title.length > length ? "..." : "";
+      $(element).text(title.substring(0, length) + suffix);
+    })
+  })
+</script>

community/lms/widgets/MemberCard.html

@@ -1,5 +1,5 @@
 <div class="common-card-style member-card {{dimension_class}} ">
-  {% set avatar_class = "avatar-large" if not dimension_class else "avatar-xl"%}
+  {% set avatar_class = "avatar-large" if not dimension_class else "avatar-large"%}
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
   <div class="small-title member-card-title">
     {{ member.full_name }}

community/overrides/user.py

@@ -59,3 +59,12 @@ class CustomUser(User):
             filters["member_type"] = member_type
 
         return frappe.get_all("LMS Batch Membership", filters, ["name", "course"])
+
+    def get_mentored_courses(self):
+        """ Returns all courses mentored by this user """
+        return frappe.get_all("LMS Course Mentor Mapping",
+                    {
+                        "mentor": self.name
+                    },
+                    ["name", "course"]
+                )

community/public/css/style.css

@@ -303,6 +303,11 @@ input[type=checkbox] {
   height: 45px;
 }
 
+@media (max-width: 360px) {
+  .course-card-title {
+    font-size: 14px;
+  }
+}
 .card-divider {
   border: 1px solid #F4F5F6;
   margin-bottom: 16px;
@@ -862,11 +867,30 @@ div.custom-checkbox>label>input:checked+img {
   margin: 0;
 }
 
-.avatar-xl {
+.avatar-large {
   width: 88px;
   height: 88px;
 }
 
+.avatar-xl {
+  width: 112px;
+  height: 112px;
+}
+
+@media (max-width: 500px) {
+  .avatar-xl {
+    width: 88px;
+    height: 88px;
+  }
+}
+
+@media (max-width: 375px) {
+  .avatar-xl {
+    width: 50px;
+    height: 50px;
+  }
+}
+
 .description-card {
   padding: 24px;
   flex-direction: column;
@@ -1066,25 +1090,148 @@ div.custom-checkbox>label>input:checked+img {
   font-weight: bold;
 }
 
-.lesson-progress-tick {
-  width: 16px;
-  height: 16px;
-  background: #4C5A67;
-  border-radius: 2px;
-  padding: 2px;
-  margin: 0px 4px 4px;
+.profile-page {
+  max-width: 1150px;
+  margin: 0 auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.profile-banner {
+  width: 100%;
+  height: 248px;
+  border-radius: 12px 12px 0px 0px;
+}
+
+@media (max-width: 500px) {
+  .profile-banner {
+    height: 150px;
+  }
+}
+
+.profile-info {
+  height: 68px;
+  background: #ffffff;
+  border-radius: 0px 0px 12px 12px;
+}
+
+.profile-avatar {
+  position: relative;
+  top: 188px;
+  left: 40px;
+  display: flex;
+}
+
+@media (max-width: 500px) {
+  .profile-avatar {
+    top: 95px;
+    left: 10px;
+  }
+}
+
+@media (max-width: 375px) {
+  .profile-avatar {
+    top: 120px;
+    left: 10px;
+  }
+}
+
+.profile-name {
+  color: #FFFFFF;
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 156%;
+  letter-spacing: -0.0175em;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.64);
+  padding: 20px;
+}
+
+@media (max-width: 375px) {
+  .profile-name {
+    font-size: 16px;
+    padding: 5px;
+  }
+}
+
+.creator-badge {
+  background: #48BB74;
+  padding: 4px 6px;
+  color: #ffffff;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 10px;
+  line-height: 120%;
+  text-align: center;
+  letter-spacing: 0.011em;
+  text-transform: uppercase;
+  height: fit-content;
+  box-shadow: 0px 1px 1px rgb(0 0 0 / 16%);
+  border-radius: 4px;
+  margin-top: 25px;
+}
+
+@media (max-width: 375px) {
+  .creator-badge {
+    font-size: 8px;
+    margin: 8px 0px 0px;
+  }
+}
+
+.profile-profession {
+  position: relative;
+  top: 16px;
+  left: 174px;
+  font-size: 12px;
+  line-height: 165%;
+}
+
+@media (max-width: 500px) {
+  .profile-profession {
+    top: 10px;
+    left: 120px;
+  }
+}
+
+@media (max-width: 375px) {
+  .profile-profession {
+    top: 5px;
+    left: 70px;
+  }
+}
+
+.social-icons {
+  float: right;
+  margin: 16px;
+}
+
+@media (max-width: 500px) {
+  .social-icons {
+    margin: 10px;
+  }
+}
+
+@media (max-width: 375px) {
+  .social-icons {
+    margin: 5px;
+  }
 }
 
 .profile-courses {
   margin-top: 3rem;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 500px) {
   .profile-courses {
     padding: 0px 24px 0px;
   }
 }
 
+@media (max-width: 360px) {
+  .profile-courses {
+    padding: 0px 10px 0px;
+  }
+}
+
 .progress-text {
   font-size: 12px;
   line-height: 165%;
@@ -1116,9 +1263,9 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .progress-card {
-    width: 312px;
+    width: 100%;
   }
 }
 

community/public/icons/github.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="2" width="20" height="20" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.05)"/>
+</pattern>
+<image id="image0" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABiUlEQVQ4EZWU4VUCMQzHOwIjMAIb6AhuIBvgArb9QkLDh3MD3EA3wA10A9wAN0D/PdLLld5DeI+XuzT95Z9cU+cavxi7maf0GCi9BU6HwHI6//eBUhd5e9/Y1nZFSk+B5GggCqvtPq5l0aY456AqsOz+ARrAJMdI6aEJ9ZReb4INbThdtCCXOQrgeWRZepJvTeI5/ZjniHKLCCiN3SwrzaVWPdMSsFYCz07bN88p2iQ9kGWpTrU1RBPUtihEdSTHvO5Z3hUE6zl91Run3q1C7M0fyPapOKcIDX/dW2fVZaA2t7G55fIkH8qA4kvgLVPgnLMVZiB6phlgPctLS0nLh/Nn9+L4OQCsM0M3smoBrK+Hjeb8lI9UnWWAp4PnbXgmuVNQZJ77jaz6S6NcGHkUR6fDNHZ3MTXVBWBih5nWI1Myr2WhyqAY5wkNxvhpjFqUpbFqkUTXi8XmHEDyeW1SFASLUifjoc4c1Mn7ToFQNglTqQjAlwcYCdRvbVY1dQ/awPr5avZ6w9/7L3HVAW99VdWzAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

community/public/icons/medium.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="3" width="20.7" height="18" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.0434783 0.05)"/>
+</pattern>
+<image id="image0" width="23" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAUCAYAAABmvqYOAAABtUlEQVRIDa2UTU7CQBSAOYJH4CgcxSNwAIPoAgSEqAmIbohR/iQIgiK0nU75q4BiKz0ALnStxoULTMZMzWvGoUBrbPLy5jUz3zd5M61nKxJ7iR0kjz0uH1HEPhErH93+7eK1m+EoobEd3Z25kbSQrAtIJjQkrMxsJQCH7EQiIuQHMJvnJADlM5UkUukNvls3GHsFJL+yUH5MJe2eGvbwULaOp9KfmXzeywpaklzlYXb1cDTWl8ITqSOSyRYqAKeHaAfi33V6KtEmhuIETjKneR/GeK2F5CkP4mtJxkTTH13As4VpQ5B2eJBdPRiNiD4xXMFJ+bJuXjs7ILxTOl0T7BqeyRZIQxCXCu4ftL/Dc+cXC+H9wcACO9p5PHn4TnfMRvXqek6AFMU8RAqFWHlbQnv72bNi6Y2Fn+SKpCmiX4Lh3diCOoYHwpEgveOlcs3PSkqVmgVvd3tzYEdtATh8RKyk3mgSQUJfY03/HzgrKZarz11VfYI28NnseTAc8wVCUYX9p8CY3znAIWuG4aMQHmy1BSbaSVbBYa2dxNw5TIDMSpzCYS0rsYXDRCqhAbWb/COZrH8Ddw70agzSigAAAAAASUVORK5CYII="/>
+</defs>
+</svg>

community/www/courses/index.html

@@ -22,16 +22,3 @@
   </div>
 </div>
 {% endblock %}
-
-{% block script %}
-<script>
-  frappe.ready(() => {
-    $(".course-card-title").each((i, element) => {
-      var title = $(element).text();
-      var length = $(window).width() <= 375 ? 60 : 65;
-      var suffix = title.length > length ? "..." : "";
-      $(element).text(title.substring(0, length) + suffix);
-    })
-  })
-</script>
-{% endblock %}

community/www/profiles/profile.html

@@ -6,23 +6,57 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-home-page">
-    {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
+  <div class="col profile-page">
+    {{ ProfileBanner(member) }}
     {{ AboutOverviewSection(member) }}
-    <div class="profile-courses">
-      {{ CoursesCreated(member) }}
-      {{ CoursesMentored(member) }}
-      {{ CoursesEnrolled(member) }}
-    </div>
+    {{ CoursesCreated(member) }}
+    {{ CoursesMentored(member) }}
+    {{ CoursesEnrolled(member) }}
     {{ ProfileTabs(profile_tabs) }}
   </div>
 </div>
 {% endblock %}
 
+{% macro ProfileBanner(member) %}
+<div class="col">
+  <div class="profile-banner" style="background: url(/assets/community/images/profile-banner.png)">
+  <div class="profile-avatar">
+    {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
+    <div class="profile-name"> {{ member.full_name }} </div>
+    {% if member.get_authored_courses() | length %}
+    <div class="creator-badge"> Creator </div>
+    {% endif %}
+   </div>
+  </div>
+  <div class="profile-info">
+    {% if member.profession %}
+    <span class="profile-profession"> {{ member.profession }} </span>
+    {% endif %}
+    <div class="social-icons">
+      {% if member.linkedin %}
+      <a class="linkedin" href="{{ member.linkedin }}">
+        <img src="/assets/community/images/linkedin.png">
+      </a>
+      {% endif %}
+      {% if member.medium %}
+      <a class="medium" href="{{ member.medium}}">
+        <img src="/assets/community/icons/medium.svg">
+      </a>
+      {% endif %}
+      {% if member.github %}
+      <a class="github" href="{{ member.github }}">
+        <img src="/assets/community/icons/github.svg">
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
 {% macro AboutOverviewSection(member) %}
 <div class="course-outline-instructor-parent">
   {% if member.bio %}
-  <div class="course-overview-section">
+  <div class="course-overview-section col">
     <div class="course-home-headings">
       About
     </div>
@@ -31,7 +65,7 @@
     </div>
   </div>
   {% endif %}
-  <div class="course-overview-section">
+  <div class="course-overview-section col-sm-auto">
     <div class="course-home-headings">
       Overview
     </div>
@@ -62,42 +96,48 @@
 
 {% macro CoursesCreated(member) %}
 {% if member.get_authored_courses() | length %}
-<div class="course-home-headings">
-  Courses Created
-</div>
-<div class="cards-parent">
-  {% for course in member.get_authored_courses() %}
-  {% set course_details = frappe.get_doc("LMS Course", course) %}
-  {{ widgets.CourseCard(course=course_details) }}
-  {% endfor %}
+<div class="profile-courses">
+  <div class="course-home-headings">
+    Courses Created
+  </div>
+  <div class="cards-parent">
+    {% for course in member.get_authored_courses() %}
+    {% set course_details = frappe.get_doc("LMS Course", course) %}
+    {{ widgets.CourseCard(course=course_details) }}
+    {% endfor %}
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
 
 {% macro CoursesMentored(member) %}
-{% if member.get_course_membership("Mentor") | length %}
-<div class="course-home-headings">
-  Courses Mentored
-</div>
-<div class="cards-parent">
-  {% for membership in member.get_course_membership("Mentor") %}
-  {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
-  {{ widgets.CourseCard(course=course_details) }}
-  {% endfor %}
+{% if member.get_mentored_courses() | length %}
+<div class="profile-courses">
+  <div class="course-home-headings">
+    Courses Mentored
+  </div>
+  <div class="cards-parent">
+    {% for mentorship in member.get_mentored_courses() %}
+    {% set course_details = frappe.get_doc("LMS Course", mentorship.course) %}
+    {{ widgets.CourseCard(course=course_details) }}
+    {% endfor %}
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
 
 {% macro CoursesEnrolled(member) %}
 {% if member.get_course_membership("Student") | length %}
-<div class="course-home-headings">
-  Courses Enrolled
-</div>
-<div class="cards-parent">
-  {% for membership in member.get_course_membership("Student") %}
-  {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
-  {{ widgets.CourseCard(course=course_details) }}
-  {% endfor %}
+<div class="profile-courses">
+  <div class="course-home-headings">
+    Courses Enrolled
+  </div>
+  <div class="cards-parent">
+    {% for membership in member.get_course_membership("Student") %}
+    {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+    {{ widgets.CourseCard(course=course_details) }}
+    {% endfor %}
+  </div>
 </div>
 {% endif %}
 {% endmacro %}