IP-107: Implement the Mockup changes in the UI (only what is strictly…

… needed for now)

database/seeders/AirQualityProjectSeeder.php

@@ -33,13 +33,13 @@ public function run(): void {
         $project = [
             'id' => 4,
             'slug' => 'air-quality-europe',
-            'external_url' => 'https://www.scify.gr/site/en/',
+            'external_url' => 'https://ecas.org/projects/indeu/',
             'img_path' => '/images/projects/air-quality-europe/logo-bg.webp',
             'logo_path' => '/images/projects/air-quality-europe/logo.webp',
             'user_creator_id' => 1,
             'language_id' => 6,
             'should_send_email_after_questionnaire_response' => 1,
-            'lp_primary_color' => '#707070',
+            'lp_primary_color' => '#f5ba16',
             'lp_questionnaire_image_path' => '/images/projects/air-quality-europe/logo.webp',
             'lp_show_speak_up_btn' => 1,
             'sm_featured_img_path' => '/images/projects/air-quality-europe/logo.webp',
@@ -55,7 +55,7 @@ public function run(): void {
                 'motto_title' => 'Please share with us your opinion on the air quality in Europe. Your voice matters!',
                 'motto_subtitle' => 'You can make an impact! Share your opinion with us!',
                 'description' => 'Lorem ipsum dolor site amet',
-                'about' => '<p>Contribute to solving air quality problems in Athens and across Europe. Write points for and against the proposed solutions. Your contributions will be a valuable contribution to official policy to improve air quality in Athens and across Europe.</p>',
+                'about' => '<h2>About the Project</h2><p>Contribute to solving air quality problems in Athens and across Europe. Write points for and against the proposed solutions. Your contributions will be a valuable contribution to official policy to improve air quality in Athens and across Europe.</p><p>Nunc at nisl eget ante sollicitudin elementum at quis magna. Nullam semper scelerisque lacus ut condimentum. Sed non finibus lacus. Fusce nec ornare turpis. Praesent ut sem sed metus semper auctor. Aenean in dui nec libero tempus convallis. Aenean rutrum felis laoreet dolor semper, commodo laoreet risus ultrices. Maecenas non urna hendrerit, faucibus arcu sed, commodo nulla. Phasellus eu tempor dui, ut sodales eros. Aliquam velit libero, malesuada eget laoreet ut, lobortis non sapien. Cras ex nulla, blandit nec luctus non, euismod at ipsum. Maecenas venenatis congue massa. Sed a odio quis mi scelerisque ornare eu sed libero. Sed malesuada diam nisl, ut maximus ligula tristique et. Sed vestibulum id felis ut blandit. Mauris mollis lectus lorem, vulputate tempor est egestas vel.</p><h2>Why you can help us</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar mi quis erat commodo rhoncus. Etiam at sapien leo. Vivamus non placerat mi, placerat consectetur ante. Pellentesque egestas mi sit amet leo feugiat bibendum. Donec ut placerat mauris. Donec dapibus varius venenatis. Cras congue est in gravida lobortis.</p><p>Nunc at nisl eget ante sollicitudin elementum at quis magna. Nullam semper scelerisque lacus ut condimentum. Sed non finibus lacus. Fusce nec ornare turpis. Praesent ut sem sed metus semper auctor. Aenean in dui nec libero tempus convallis. Aenean rutrum felis laoreet dolor semper, commodo laoreet risus ultrices. Maecenas non urna hendrerit, faucibus arcu sed, commodo nulla. Phasellus eu tempor dui, ut sodales eros. Aliquam velit libero, malesuada eget laoreet ut, lobortis non sapien. Cras ex nulla, blandit nec luctus non, euismod at ipsum. Maecenas venenatis congue massa. Sed a odio quis mi scelerisque ornare eu sed libero. Sed malesuada diam nisl, ut maximus ligula tristique et. Sed vestibulum id felis ut blandit. Mauris mollis lectus lorem, vulputate tempor est egestas vel.</p><h2>What is crowdsourcing?</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar mi quis erat commodo rhoncus. Etiam at sapien leo. Vivamus non placerat mi, placerat consectetur ante. Pellentesque egestas mi sit amet leo feugiat bibendum. Donec ut placerat mauris. Donec dapibus varius venenatis. Cras congue est in gravida lobortis.</p><p>Nunc at nisl eget ante sollicitudin elementum at quis magna. Nullam semper scelerisque lacus ut condimentum. Sed non finibus lacus. Fusce nec ornare turpis. Praesent ut sem sed metus semper auctor. Aenean in dui nec libero tempus convallis. Aenean rutrum felis laoreet dolor semper, commodo laoreet risus ultrices. Maecenas non urna hendrerit, faucibus arcu sed, commodo nulla. Phasellus eu tempor dui, ut sodales eros. Aliquam velit libero, malesuada eget laoreet ut, lobortis non sapien. Cras ex nulla, blandit nec luctus non, euismod at ipsum. Maecenas venenatis congue massa. Sed a odio quis mi scelerisque ornare eu sed libero. Sed malesuada diam nisl, ut maximus ligula tristique et. Sed vestibulum id felis ut blandit. Mauris mollis lectus lorem, vulputate tempor est egestas vel.</p>',
                 'footer' => '<p style="font-size: 12px;">© SCIFY ' . now()->year . '&nbsp;|&nbsp;
                     <a href="https://www.scify.gr/site/en/" target="_blank" title="Read more">Terms of use</a>&nbsp;|&nbsp;
                     <a href="https://www.scify.gr/site/en/" target="_blank" title="Read more">Privacy Policy</a>&nbsp;|&nbsp;

resources/assets/sass/common.scss

@@ -8,6 +8,12 @@
 @import url("jquery-toast-plugin/dist/jquery.toast.min.css");
 @import "../../../node_modules/bootstrap-sweetalert/dist/sweetalert.css";
 
+// Supports weights 100-900
+@import '@fontsource-variable/noto-sans';
+
+// Supports weights 300-800
+@import '@fontsource-variable/open-sans';
+
 @import "sidebar";
 
 html,
@@ -28,7 +34,12 @@ h6,
 .h4,
 .h5,
 .h6 {
-	font-family: "Open Sans", sans-serif;
+
+	font-family: "Noto Sans Variable", sans-serif;
+}
+
+p {
+	font-family: "Open Sans Variable", sans-serif;
 }
 
 @media print {
@@ -438,21 +449,39 @@ footer {
 }
 
 .call-to-action {
-	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-	border-radius: 3px;
-	background-color: $white;
-	font-size: 18px;
-	font-weight: 500;
-	line-height: 1.7em;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+	border: none;
+	border-radius: 21px;
+	background-color: var(--project-primary-color);
+	padding: 27px 30px;
+	min-width: 283px;
+	font-family: "Noto Sans Variable", sans-serif;
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 27px;
 	color: $black;
 	transition: all 0.2s;
-	padding: toRem(12) toRem(30);
-	width: 100%;
 
 	&:hover {
+		background-color: var(--project-primary-color);
 		box-shadow:
-			0 14px 28px rgba(0, 0, 0, 0.25),
-			0 10px 10px rgba(0, 0, 0, 0.22);
+			0 4px 4px rgba(0, 0, 0, 0.25),
+			0 4px 4px rgba(0, 0, 0, 0.25);
+		color: $black;
+	}
+
+	&.focus,
+	&:focus,
+	&:focus-visible {
+		outline: 4px solid black;
+		color: $black;
+		background-color: var(--project-primary-color);
+		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+	}
+
+	&:active {
+		color: $black !important;
+		background-color: var(--project-primary-color) !important;
 	}
 }
 
@@ -466,14 +495,6 @@ footer {
 	color: $white;
 }
 
-.call-to-action.btn-primary.focus,
-.call-to-action.btn-primary:focus,
-.call-to-action.btn-primary:hover {
-	background-color: $grey-light;
-	color: $black;
-	border-color: $grey;
-}
-
 #userListTable_info {
 	display: none;
 }

resources/assets/sass/project/landing-page.scss

@@ -6,7 +6,6 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: "Open Sans", sans-serif;
 	color: $landing-page-primary;
 }
 
@@ -87,7 +86,7 @@ body {
 		overflow: hidden;
 		width: 100%;
 		height: 100%;
-		background-color: rgba(255, 255, 255, 0.8);
+		background-color: rgba(255, 255, 255, 0.60);
 		content: "";
 		top: 0;
 		left: 0;
@@ -134,9 +133,26 @@ section {
 		text-align: center;
 	}
 
-	.content-container {
+	#about .content-container {
 		padding: 10vh 5%;
 		font-size: 20px;
+
+		h1,
+		h2 {
+			text-align: left;
+			font-size: 32px;
+			line-height: 44px;
+			margin-bottom: 7px;
+
+			&~h2 {
+				margin-top: 60px;
+			}
+		}
+
+		p {
+			font-size: 16px;
+			line-height: 22px;
+		}
 	}
 }
 
@@ -146,15 +162,9 @@ ol {
 	}
 }
 
-#about {
-	.btn.btn-primary {
-		color: white;
-	}
-}
-
 #questionnaire-section,
 #collective-goal {
-	background-color: #efefef;
+	background-color: #e8e9eb;
 }
 
 #questionnaire-section {
@@ -164,23 +174,21 @@ ol {
 }
 
 #questionnaire-wrapper {
-	background-color: #efefef;
-	padding-top: 7rem;
+	background-color: #e8e9eb;
 }
 
 #questionnaire {
 	background-size: cover;
 	width: 100%;
 	@include media-breakpoint-up(md) {
 		padding: 7vh 10vh;
+		padding-bottom: 0;
 	}
 
 	.content-container {
 		font-size: 20px;
-		color: white;
 		@include media-breakpoint-up(md) {
 			padding: 5vh 12vh;
-			min-height: 340px;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
@@ -192,8 +200,7 @@ ol {
 	}
 
 	.questionnaire-description {
-		font-size: 1.3rem;
-		margin: auto;
+		margin: 0 auto 2rem;
 		text-align: justify;
 	}
 
@@ -204,7 +211,6 @@ ol {
 		margin-right: auto;
 		text-align: center;
 		font-weight: bold;
-		color: $white;
 	}
 
 	.wrapper-box {

resources/views/crowdsourcing-project/layout.blade.php

@@ -32,7 +32,6 @@
 <div id="app" style="padding-top: @if (App::environment('staging')) 128.75px @else 93.75px @endif">
     @yield('content')
 </div>
-
 @if(isset($viewModel->project))
     <footer class="py-5">
         <div class="container">

resources/views/crowdsourcing-project/partials/about.blade.php

@@ -5,33 +5,33 @@
               class="h-0 hidden"
               data-name="{{ $viewModel->project->currentTranslation->name }}"
               data-id="{{ $viewModel->project->id }}"></span>
-
-        <div class="col-md-10 col-sm-12 p-0 mx-auto">
-            <div class="content-container">
+
+        <div class="content-container">
+
+            <div class="col-12 col-md-8 p-0">
                 {!! $viewModel->project->currentTranslation->about !!}
+            </div>
 
-                @if($viewModel->project->external_url)
+            @if($viewModel->project->external_url)
+                <div class="col-md-10 col-sm-12 p-0 mx-auto">
                     <div class="text-center">
                         <div class="container-fluid">
                             <div class="row">
-                                <div class="col-md-5 col-sm-12 mx-auto mt-5">
-                                    <a style="background-color: {{ $viewModel->project->lp_primary_color }}"
-                                       href="{{$viewModel->project->external_url}}" target="_blank"
-                                       class="btn btn-primary visit-project-website call-to-action">
+                                <div class="col-12 mx-auto mt-5">
+                                    <a href="{{$viewModel->project->external_url}}" target="_blank"
+                                    class="btn btn-primary visit-project-website call-to-action">
                                         {{ __("questionnaire.visit_projects_site") }}
                                     </a>
                                 </div>
                             </div>
                         </div>
-
                     </div>
-
-                @endif
-            </div>
-
+                </div>
+            @endif
+
         </div>
-    </div>
 
+    </div>
 </div>
 
 

resources/views/crowdsourcing-project/partials/external-url.blade.php

@@ -1,6 +1,6 @@
 @if($viewModel->project->external_url)
     <div class="col-md-5 col-sm-12 mx-auto mt-5">
-        <a href="{{$viewModel->project->external_url}}" target="_blank" class="btn btn-outline-dark call-to-action">
+        <a href="{{$viewModel->project->external_url}}" target="_blank" class="btn call-to-action">
             {{ __("questionnaire.visit_projects_site") }}
         </a>
     </div>

resources/views/crowdsourcing-project/partials/motto.blade.php

@@ -1,8 +1,7 @@
 <div id="project-motto-container" class="row h-100 w-100 align-items-center mx-0 bg-img"
      style="background-image: url({{asset($viewModel->project->img_path)}});">
     <div class="overlay-filter {{ $viewModel->thankYouMode ? 'overlay-thanks' : '' }}"
-         style="background-color: {{ $viewModel->project->lp_primary_color }};
-                 top: @if (App::environment('staging')) 128.75px @else 93.75px @endif"></div>
+         style="top: @if (App::environment('staging')) 128.75px @else 93.75px @endif"></div>
     <div class="col-lg-7 col-md-8 col-sm-11 mx-auto motto-content px-0">
         <div class="frosted"></div>
         <div id="project-motto" class="container-fluid">
@@ -96,7 +95,7 @@ class="btn btn-primary w-100 respond-questionnaire call-to-action
                                 @endif
                             @elseif($viewModel->projectHasPublishedProblems)
                                 <a href="{{ route('project.problems-page', ['project_slug' => $viewModel->project->slug]) }}"
-                                   class="btn btn-primary w-100 call-to-action">
+                                   class="btn btn-primary call-to-action mx-auto">
                                     {{__("project-problems.project_landing_page_problems_action_button")}} <i
                                             class="fas fa-arrow-right"></i></a>
                             @else

resources/views/crowdsourcing-project/partials/questionnaire.blade.php

@@ -4,15 +4,17 @@
              class="align-items-center mx-0"
              style="background-image: url('{{ asset($viewModel->project->lp_questionnaire_img_path) }}')">
             @if ($viewModel->questionnaire)
-                <div class="text-center content-container"
-                     style="background: {{ $viewModel->project->lp_primary_color }}D9">
+                <div class="text-center content-container">
                     <h3 class="questionnaire-section-title">
                         {{ $viewModel->userResponse? __("questionnaire.already_participated"):   $viewModel->questionnaire->fieldsTranslation->title }}
                     </h3>
                     @if(!$viewModel->userResponse)
                         <div class="questionnaire-description mb-5">
                             {!! $viewModel->questionnaire->fieldsTranslation->description !!}
                         </div>
+
+                        <div style="background-image: url('/images/project_lp_questionnaire.webp'); background-size: contain; background-repeat: no-repeat; width: 70%; aspect-ratio: 2.782;"></div>
+
                         <div class="container-fluid">
                             <div class="row">
                                 <div class="col-lg-10 col-md-10 col-sm-11 mx-auto">

resources/views/crowdsourcing-project/problems/partials/problems-list.blade.php

@@ -44,10 +44,13 @@
             </ul>
         </div>
     </div>
+
+{{--
     <div class="row pb-5">
         <div class="col-12 d-flex justify-content-center">
             <button class="cta-btn">{{ __("project-problems.list_of_problems") }}</button> <!-- bookmark - add click handler / or hide for now -->
         </div>
     </div>
+--}}
 
 </div>

resources/views/crowdsourcing-project/project-unavailable.blade.php

@@ -14,8 +14,7 @@
             <div id="project-motto-container" class="row h-100 w-100 align-items-center mx-0 bg-img"
                  style="background-image: url({{asset($viewModel->project->img_path)}});">
                 <div class="overlay-filter"
-                     style="background-color: {{ $viewModel->project->lp_primary_color }};
-                 top: @if (App::environment('staging')) 128.75px @else 93.75px @endif"></div>
+                     style="top: @if (App::environment('staging')) 128.75px @else 93.75px @endif"></div>
                 <div class="col-lg-7 col-md-8 col-sm-11 mx-auto motto-content px-0">
                     <div class="frosted"></div>
                     <div id="project-motto" class="container-fluid">

resources/views/partials/signup_to_newsletter.blade.php

@@ -1,15 +1,15 @@
 <div class="row w-100 align-items-center mx-0" id="newsletter">
     <div class="col-md-12 p-0">
-        <h2 style="color: {{ $viewModel->project->lp_primary_color }}; font-weight: bold">{{ __("questionnaire.newsletter") }}</h2>
+        <h2 style="font-weight: bold">{{ __("questionnaire.newsletter") }}</h2>
         <div class="content-container">
             <p class="text-center">
                 {{ __("questionnaire.learn_about_new_projects") }}
             </p>
             <div class="sign-up container">
                 <div class="row">
-                    <div class="col-md-4 col-sm-12 mx-auto">
+                    <div class="col-md-4 col-sm-12 mx-auto d-flex justify-content-center">
                         <a href="https://ecas.org/#gform_wrapper_1" target="_blank"
-                           class="btn btn-outline-dark signup-btn call-to-action">{{ __("questionnaire.sign_up") }}</a>
+                           class="btn signup-btn call-to-action">{{ __("questionnaire.sign_up") }}</a>
                     </div>
                 </div>
             </div>