Rebranding applying new styles (#490)

* Add variables and replace font * update fonts * update cta's * Home page updates * update inner pages * updates cta image component * Directory page updates * update profile * more style updates * update navigation --------- Co-authored-by: Omnia <[email protected]>
Sitecore · Nov 25, 2024 · 787b792 · 787b792
1 parent bd9b4cc
commit 787b792
Show file tree

Hide file tree

Showing 63 changed files with 7,981 additions and 4,340 deletions.
diff --git a/headapps/MvpSite/MvpSite.Rendering/Models/Directory/DirectoryResultViewModel.cs b/headapps/MvpSite/MvpSite.Rendering/Models/Directory/DirectoryResultViewModel.cs
@@ -26,7 +26,7 @@ public static DirectoryResultViewModel FromMvpProfile(MvpProfile profile, Uri? p
         result.Name = profile.Name;
         result.Type = last.MvpType.Name;
         result.Country = profile.Country?.Name;
-        result.Image = profile.ImageUri.AddGravatarSizing("250") ?? new Uri("/images/mvp-base-user-grey.png", UriKind.Relative);
+        result.Image = profile.ImageUri.AddGravatarSizing("250") ?? new Uri("/images/sc_power-gradient-desktop.svg", UriKind.Relative);
         result.Year = last.Application.Selection.Year.ToString();
         if (pageUri != null && !string.IsNullOrWhiteSpace(result.Name))
         {

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/ColumnContainer.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/ColumnContainer.cshtml
@@ -1,7 +1,11 @@
-<section class="column-container two-column-equal background-grey">
+<section class="column-container two-column-equal  ">
     <div class="container">
+        <div class="row inner ">
+        <div class="sc-power-gradient-bg">
         <div class="row">
             <sc-placeholder name="column-container"></sc-placeholder>
+            </div>
+            </div>
         </div>
     </div>
 </section>
diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/Default.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/Default.cshtml
@@ -3,40 +3,42 @@
 
 <section class="mvp-fp-directory bg-white">
     <div class="container">
-        <div class="row">
+        <div class="row inner">
             <div class="col-12 mb-5">
-                <h2 asp-for="TopTitleLabel"></h2>
+                <h2 class="mb-4" asp-for="TopTitleLabel"></h2>
                 <h1 asp-for="TitleLabel"></h1>
             </div>
         </div>
         <form>
-            <div class="row">
-                <div class="input-group col-12 mb-5">
+            <div class="row inner ">
+                <div class="input-group col-12 mb-5 bg-white">
                     <input asp-for="Query" name="@DirectoryViewModel.QueryQueryStringKey" class="form-control" placeholder="@Model.SearchLabel?.Value" />
                     <div class="input-group-append">
                         <button type="submit" class="btn btn-primary">
                             <i class="fa fa-search text-white" aria-hidden="true"></i>
                         </button>
                     </div>
                 </div>
+                <div class="results sc-gradient-light-bg extended-background">
+                <div class="row">
                 <div class="col-sm-12 col-md-3">
                     @foreach (FacetViewModel facet in Model.ViewFacets.OrderBy(f => f.SortOrder))
                     {
                         <partial name="~/Views/Shared/Components/Directory/_Facet.cshtml" model="facet" />
                     }
                 </div>
-                <div class="col-sm-12 col-md-9">
-                    <div>
+                <div class="col-sm-12 col-md-9 mb-3 ">
+                    <div class="mb-3">
                         <span asp-for="PagingResults"></span> @string.Format(Model.PagingResultsFormat.Value, Model.FirstResult, Model.LastResult, Model.TotalResults)
                     </div>
-                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
+                    <div class="grid mb-3">
                         @foreach (DirectoryResultViewModel result in Model.Results)
                         {
                             <partial name="~/Views/Shared/Components/Directory/_Result.cshtml" model="result" />
                         }
                     </div>
                     <nav aria-label="Paging">
-                        <ul class="pagination justify-content-center">
+                        <ul class="pagination justify-content-center border">
                             @if (Model.Page > 1)
                             {
                                 <li class="page-item">
@@ -60,6 +62,8 @@
                         </ul>
                     </nav>
                 </div>
+                </div>
+                </div>
             </div>
         </form>
     </div>

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/_Facet.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/_Facet.cshtml
@@ -7,7 +7,8 @@
     string id = "fcid_" + Model.Identifier;
     <div class="mvp-facet mb-4">
         <a data-toggle="collapse" href="#@id" role="button" aria-expanded="true" aria-controls="@id">
-            <h3 asp-for="Name"></h3>
+            <h3 asp-for="Name"> </h3>
+            <span class="icon-chevron-down "></span>
         </a>
         <ul id="@id" class="list-group collapse show">
             @foreach (FacetOption option in Model.FacetOptions)

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/_Result.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Directory/_Result.cshtml
@@ -1,17 +1,22 @@
 @model MvpSite.Rendering.Models.Directory.DirectoryResultViewModel
 
-<div class="col mb-3">
-    <div class="card m-0 h-100">
-        <img src="@Model.Image" class="card-img-top" alt="@Model.Name" />
+<div class="col ">
+
+    <a href="@Model.ProfileUri"  class="card m-0 h-100">
+
         <div class="card-img-overlay">
-            <span class="badge badge-primary">@Model.Year</span>
+             <img src="@Model.Image" class="card-img-top" alt="@Model.Name" />
+            <span class=""><b>@Model.Year</b></span>
         </div>
         <div class="card-body">
+           <h5 class="card-title">@Model.Name</h5>
             <div>@Model.Type</div>
-            <a href="@Model.ProfileUri" class="stretched-link">
-                <h5 class="card-title">@Model.Name</h5>
-            </a>
-            <p class="card-text"><i class="fa fa-globe" aria-hidden="true"></i> @Model.Country</p>
+
+
+
+            <span class="card-text"><i class="fa fa-globe" aria-hidden="true"></i> @Model.Country</span>
         </div>
-    </div>
+
+    </a>
+
 </div>
diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/Default.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/Default.cshtml
@@ -5,33 +5,45 @@
 {
     <section class="mvp-fp-profile bg-white">
         <div class="container">
+
+        <div class="row inner col-12">
+        <div class="profile-image">
             @if (Model.Mvp.ImageUri != null)
             {
-                <img src="@Model.Mvp.ImageUri.AddGravatarSizing("250")" class="float-right w-25 ml-5" alt="@Model.Mvp.Name Avatar">
+                <img src="@Model.Mvp.ImageUri.AddGravatarSizing("250")" class="" alt="@Model.Mvp.Name Avatar">
             }
             else
             {
-                <img src="/images/mvp-base-user-grey.png" class="float-right w-25 ml-5" alt="@Model.Mvp.Name Avatar">
+                <img src="/images/sc_power-gradient-desktop.svg" class="" alt="@Model.Mvp.Name Avatar">
             }
+            </div>
             <div class="row">
                 <h2 asp-for="TitleLabel" class="col-12"></h2>
-                <h1 class="col-12 mb-xl-5">@Model.Mvp.Name</h1>
-            </div>
-            <div class="row mb-lg-5">
+                <h1 class="col-12 ">@Model.Mvp.Name</h1>
+                             <div class="row col-12 ">
                 @if (Model.Mvp.Country != null)
                 {
                     <p class="col-12"><i class="fa fa-globe" aria-hidden="true"></i> @Model.Mvp.Country?.Name</p>
                 }
                 <partial name="Components/Profile/_ProfileLinks" model="Model.Mvp.ProfileLinks" />
             </div>
-            <div class="row mb-5">
-                <h3 asp-for="TitlesLabel" class="col-12"></h3>
+            </div>
+
+            </div>
+       </div>
+       <section class="sc-power-gradient-bg">
+            <div class="row inner">
+                <h4 asp-for="TitlesLabel" class="title-label col-2 mr-2 card border-0"></h4>
+                <div class="col-10 row">
                 <partial name="Components/Profile/_Titles" model="Model.Mvp.Titles" />
+                </div>
             </div>
-            <div class="timeline row mb-5">
+            </section>
+            <div class=" timeline row inner mb-5">
                 <h3 asp-for="TimelineLabel" class="col-12"></h3>
                 <partial name="Components/Profile/_Timeline" model="Model.GetTimelineEvents()" />
             </div>
-        </div>
+
+
     </section>
-}
+}
diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/_Timeline.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/_Timeline.cshtml
@@ -13,7 +13,9 @@
             </div>
             <div class="card col-10 col-sm-5 p-0 mb-3 @(even ? "order-2" : "order-2 order-sm-1")">
                 <div class="card-header">
-                    @e.Date.ToString("d")
+                <h4>  @e.Date.ToString("yyyy")</h4>
+                <p>     @e.Date.ToString("d/MMM")</p>
+
                     @if (e.Uri != null)
                     {
                         <a href="@e.Uri" target="_blank" class="float-right">

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/_Titles.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/Profile/_Titles.cshtml
@@ -4,15 +4,17 @@
 
 @foreach (Title title in Model.OrderByDescending(t => t.Application.Selection.Year))
 {
-    <div class="card border-0 mb-2 col-xs-12 col-sm-9 col-md-6 col-lg-4">
-        <div class="row no-gutters align-items-center">
-            <div class="col-4">
+
+    <div class=" border-0  p-1  col-xs-12 col-sm-9 col-md-4 col-lg-3">
+        <div class="row card no-gutters align-items-center">
+            <!-- <div class="col-4">
                 <img src="@ProfileViewModel.GenerateImageUri(title)" class="card-img" />
-            </div>
-            <div class="col-8">
+            </div> -->
+            <div class="col-12">
                 <div class="card-body">
-                    <h4 class="card-title">@title.MvpType.Name @title.Application.Selection.Year</h4>
-                    <p class="card-text"><i class="fa fa-globe" aria-hidden="true"></i> @title.Application.Country.Name</p>
+                <h6> MVP @title.Application.Selection.Year</h6>
+                    <p class="card-title">@title.MvpType.Name </p>
+                    <div class="card-text"><i class="fa fa-globe" aria-hidden="true"></i> <span> @title.Application.Country.Name</span></div>
                 </div>
             </div>
         </div>

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/Footer.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/Footer.cshtml
@@ -2,9 +2,9 @@
 @model MvpSite.Rendering.Models.Footer
 
     <footer class="fixed-footer">
-        <div class="container-fluid bg-gray4 py-3">
+        <div class="container-fluid py-3">
             <div class="container">
-                <div class="row">
+                <div class="row inner">
                    <div class="footer-copyright col-9">@Html.Raw(Model.CopyrightText?.Value)</div>
                    <div class="footer-social col-3">
                         @foreach (ChildItems<FooterFields> socialLink in Model.SocialLinks ?? [])
@@ -15,4 +15,5 @@
                 </div>
             </div>
         </div>
+        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="footer-gradient"><rect width="100%" height="100%" fill="#F9F9FA"></rect><defs><filter id="blur" x="0" y="0" width="100%" height="100%"><feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur></filter><radialGradient id="blueGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:#1d08bd;stop-opacity:1"></stop><stop offset="70%" style="stop-color:#1d08bd;stop-opacity:0.3"></stop><stop offset="90%" style="stop-color:#1d08bd;stop-opacity:0.05"></stop><stop offset="100%" style="stop-color:#1d08bd;stop-opacity:0"></stop></radialGradient><radialGradient id="redGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:#f71924;stop-opacity:1"></stop><stop offset="70%" style="stop-color:#f71924;stop-opacity:0.3"></stop><stop offset="90%" style="stop-color:#f71924;stop-opacity:0.05"></stop><stop offset="100%" style="stop-color:#f71924;stop-opacity:0"></stop></radialGradient></defs><g><circle id="StaticredCircle" cx="50%" cy="110%" r="100%" opacity="10%" fill="url(#redGradient)" filter="url(#blur)"></circle><circle id="blueCircleBase" cx="40%" cy="90%" r="80%" fill="url(#blueGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="blueCircleMid" cx="45%" cy="80%" r="20%" fill="url(#blueGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="redCircleBase" cx="75%" cy="75%" r="90%" fill="url(#redGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="redCircleBase2" cx="75%" cy="75%" r="40%" fill="url(#redGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="blueCircleBottom" cx="35%" cy="120%" r="60%" fill="url(#blueGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="redCircleMid" cx="75%" cy="100%" r="60%" fill="url(#redGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="redCircleTop" cx="65%" cy="78%" r="25%" fill="url(#redGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle><circle id="blueCircleB" cx="40%" cy="70%" r="20%" fill="url(#blueGradient)"><animateTransform filter="url(#blur)"></animateTransform></circle></g></svg>
     </footer>
diff --git a/...vpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HalfWidthBanner.cshtml b/...vpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HalfWidthBanner.cshtml
@@ -2,7 +2,7 @@
 
 <section class="half-width-banner background-white">
     <div class="container">
-        <div class="row">
+        <div class="row inner">
             <div class="col-12 col-md-8 offset-md-1 order-2 order-md-2 text">
                 <p class="eyebrow"></p>
                 <h2><sc-text asp-for="@Model.CtaTitle" /></h2>

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroBig.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroBig.cshtml
@@ -5,7 +5,7 @@
         <div class="background-image" data-module="image-src" style="background-image: url('@Model.HeroImage?.Value.Src'); background-position: right;"></div>
     }
     <div class="container">
-        <div class="row">
+        <div class="row inner">
             <div class="col-12">
                 <p class="top" asp-for="HeroSubtitle"></p>
                 <h1 class="static" asp-for="HeroTitle"></h1>

diff --git a/...pps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroMedium.cshtml b/...pps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroMedium.cshtml
@@ -3,8 +3,8 @@
 <section class="hero background-white medium">
     <div class="background-image" min_desktop_width="1199.98px" min_tablet_width="767.98px" desktop_src="" tablet_src="" mobile_src="" data-module="image-src"></div>
     <div class="container">
-        <div class="row">
-            <div class="col-12 col-md-6">
+        <div class="row inner">
+            <div class="col-12 col-md-6 side-content">
                 <p class="top" asp-for="HeroSubtitle"></p>
                 <h1 class="static" asp-for="HeroTitle"></h1>
                 <p asp-for="HeroDescription"></p>

diff --git a/...ite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroMediumWithLink.cshtml b/...ite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/HeroMediumWithLink.cshtml
@@ -3,7 +3,7 @@
 <section class="hero background-white medium">
     <div class="background-image" min_desktop_width="1199.98px" min_tablet_width="767.98px" desktop_src="" tablet_src="" mobile_src="" data-module="image-src"></div>
     <div class="container">
-        <div class="row">
+        <div class="row inner">
             <div class="col-12 col-md-6">
                 <p class="top" asp-for="HeroSubtitle"></p>
                 <h1 class="static" asp-for="HeroTitle"></h1>

diff --git a/...ps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/ImageTeaser.cshtml b/...ps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/ImageTeaser.cshtml
@@ -1,9 +1,12 @@
 @model MvpSite.Rendering.Models.ImageTeaser
 
-<section class="cta-overlapped-image  background-grey" id="overlap54630191">
+<section class="cta-overlapped-image " id="overlap54630191">
     <div class="container">
-        <div class="row justify-content-end">
-            <div class="col-12 col-lg-7">
+        <div class="row justify-content-end inner">
+         <div class="col-lg-6" style="opacity: 1; top: 0px;">
+                <sc-img asp-for="@Model.TeaserImage" loading="lazy" />
+            </div>
+            <div class="col-12 col-lg-6">
                 <div class="text ">
                     <h3><sc-text asp-for="@Model.TeaserTitle" /></h3>
                     <sc-text asp-for="@Model.TeaserText" />
@@ -14,9 +17,7 @@
 
                 </div>
             </div>
-            <div class="floated" style="opacity: 1; top: 0px;">
-                <sc-img asp-for="@Model.TeaserImage" loading="lazy" />
-            </div>
+
         </div>
     </div>
 </section>
diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/MainNav.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/MainNav.cshtml
@@ -3,25 +3,36 @@
 
 <div class="main-nav">
     <div class="container" id="main-menu">
-        <nav class="navbar navbar-expand-lg navbar-light">
-            <a href="/">
+        <nav class="navbar navbar-expand-lg navbar-light inner">
+            <a class="mr-5" href="/">
                 <img src="/images/sitecore.svg" class="logo d-inline-block align-top" alt="" />
             </a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+            <div class="collapse navbar-collapse " id="navbarNavDropdown">
                 <ul class="navbar-nav">
                     @foreach (MainNavItems link in Model.Items ?? [])
                     {
                         if ((link.Fields?.IncludeInMenu?.Value ?? false) && 
                             (!(link.Fields.RequiresAuthentication?.Value ?? false) || (link.Fields.RequiresAuthentication.Value && (User.Identity?.IsAuthenticated ?? false))))
                         {
                             <li class="nav-item mx-2">
-                                 <a class="nav-link" href="@link.Url" asp-for="@link">@link.Fields.MenuTitle?.Value</a>
+                                 <a class="nav-link" href="@link.Url" asp-for="@link">@link.Fields.MenuTitle?.Value </a>
                             </li>
                         }
                     }
+              <li class="nav-item mx-2">
+                                 <a href="#otherSites" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="otherSites" class="nav-link" >our sites <span class="icon icon-chevron-down "></span></a>
+                                 <ul class="sub-menu collapse" id="otherSites">
+                                 <li>   <a class="nav-item nav-link" target="_blank" href="https://developers.sitecore.com/">For Downloads <span class="icon icon-external"></span></a> </li>
+                <li><a class="nav-item nav-link" target="_blank" href="https://sitecore.stackexchange.com/">Stack Exchange <span class="icon icon-external"></span></a></li>
+               <li> <a class="nav-item nav-link" target="_blank" href="#https://community.sitecore.net/">Sitecore Community <span class="icon icon-external"></span></a></li>
+                <li><a class="nav-item nav-link" target="_blank" href="https://www.youtube.com/c/discoversitecore">Discover Sitecore <span class="icon icon-external"></span></a></li>
+                <li><a class="nav-item nav-link" target="_blank" href="#https://doc.sitecore.com/">Documentation <span class="icon icon-external"></span></a></li>
+              <li>  <a class="nav-item nav-link" target="_blank" href="https://sitecore.chat/">Sitecore Chat/Slack <span class="icon icon-external"></span></a></li>
+                                 </ul>
+                            </li>
                 </ul>
             </div>
         </nav>

diff --git a/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/TopLinks.cshtml b/headapps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/TopLinks.cshtml
@@ -3,7 +3,7 @@
 
 <nav class="navbar navbar-expand p-0" id="topbar">
     <div class="container">
-        <div class="nav navbar-nav d-none d-md-flex col-md-9">
+        <div class="nav navbar-nav d-none d-md-flex col-md-9 inner py-0">
             @foreach (TopLink topLink in Model.Items ?? [])
             {
                 <a class="nav-item nav-link" target="_blank" href="@topLink.Fields?.Link?.Value.Href">@topLink.Fields?.Link?.Value.Text</a>

diff --git a/...ps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/VideoTeaser.cshtml b/...ps/MvpSite/MvpSite.Rendering/Views/Shared/Components/SitecoreComponent/VideoTeaser.cshtml
@@ -2,9 +2,9 @@
 
     <section class="autoplay-video">
         <div class="container">
-            <div class="row justify-content-end">
-                <div class="text col-lg-6 col-md-12 order-md-2 order-lg-1  order-1" style="opacity: 1; top: -70px;">
-                    <div class="col-md-6 overlap"></div>
+            <div class="row justify-content-center inner">
+                <div class="text col-lg-6 col-md-12 order-md-2 order-lg-1  order-1 flex justify-content-center " >
+
                     <h2><sc-text asp-for="@Model.TeaserTitle" /></h2>
                     <p><sc-text asp-for="@Model.TeaserText" /></p>
 
@@ -15,7 +15,7 @@
                         </sc-link>
                     }
                 </div>
-                <div class="col-12 col-lg-6 video  order-md-1 order-lg-2 ">
+                <div class="col-12 col-lg-6 video  order-md-1 order-lg-2 justify-content-end flex ">
                     @Html.Raw(Model.TeaserEmbed?.Value)
                 </div>