added dashboard and explore pages

README.md

@@ -7,7 +7,9 @@ ## Tasks :-
 - [X] Create Home Page
 - [X] Create Login Page
 - [X] Create Signup Page
-- [ ] Create an simple Dashboard page
+- [X] Create an simple layout page
+- [X] Create an simple Dashboard page
+- [X] Create an simple explore skills page
 
 
 ## Steps to run :-

app/Http/Controllers/DashboardController.php

@@ -10,4 +10,7 @@ class DashboardController extends Controller
     public function home(){
         return view('dashboard.home');
     }
+    public function explore(){
+        return view('dashboard.explore');
+    }
 }

public/css/dashboard/explore.css

@@ -0,0 +1,102 @@
+#main_section{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+}
+#search_skill_form{
+    margin: 2rem;
+    /* marigin: */
+    margin-top:4rem;
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+#search_skill_form>.search_input{
+    font-size:1.4rem;
+    padding: 0.3rem;
+    width: 500px;
+    margin-inline:1rem;
+    border:none;
+    outline:none;
+    border-bottom:2px solid #000;
+}
+#search_skill_form>.search_btn{
+    padding:1rem 1.5rem;
+    font-size:1rem;
+    border:none;
+    margin-inline:1rem;
+    background-color:blue;
+    border-radius: 50px;
+    color:#fff;
+    cursor: pointer;
+}
+
+.skills_container{
+    width:90%;
+    min-height:200px;
+    border-radius: 10px;
+    box-shadow: #000 0px 0px 20px -10px;
+    padding: 1rem;
+    position:relative;
+    margin-bottom: 2rem;
+}
+
+.create_skill_container{
+    display:flex;
+    justify-content: end;
+}
+
+.create_skill_btn{
+    /* width:100%; */
+    top:20px;
+    right:20px;
+
+    display: inline-block;
+    padding:1rem 1.5rem;
+    font-size:1rem;
+    border:none;
+    /* margin-inline:1rem; */
+    background-color:blue;
+    border-radius: 50px;
+    color:#fff;
+}
+.skills{
+    display:flex;
+    align-items: center;
+    justify-content: start;
+    flex-wrap: wrap;
+    margin-top:2rem;
+}
+
+.skill{
+    margin:1rem;
+    margin-right:2rem;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 15px;
+    padding:10px;
+    box-shadow: #000 0px 0px 20px -10px;
+
+}
+
+.skill>.title{
+    margin:1rem;
+    font-weight: 500;
+    letter-spacing: 2px;
+}
+.skill>.start_btn{
+    display: inline-block;
+    margin:1rem;
+
+
+    padding:0.5rem 1rem;
+    font-size:1rem;
+    border:none;
+    /* margin-inline:1rem; */
+    background-color:blue;
+    border-radius: 50px;
+    color:#fff;
+}

public/css/dashboard/home.css

@@ -1,66 +1,27 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
-
-*{
-    margin:0;
-    padding:0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
-a{
-    color:#000;
-    /* border:none; */
-    text-decoration: none;
-}
-
-header{
-    height:80px;
-    background-color: #FFC3C3;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding:0.7rem 2rem;
-}
-header .circle{
-    border:2px solid #000;
-    border-radius: 50%;
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.6rem;
-}
-header>.title{
-    font-size:2rem;
-    cursor: pointer;
+section{
+    min-height:400px;
+    border-bottom: 1px solid black;
+    padding:1rem 2rem;
 }
 
-header>.sub_header{
-    display: flex;
+/*only shown to new user with no skills*/
+#new_user_section{
+    display:flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-}
+    justify-content: space-around;
 
-header>.sub_header a{
-    margin-inline:10px;
-    cursor: pointer;
 }
-header>.sub_header a:hover{
-    border-bottom:2px solid #000;
+#new_user_section>img{
+    width:60%;
 }
-
-section{
-    min-height:400px;
-    border-bottom: 1px solid black;
-    padding:1rem 2rem;
+#new_user_section>.sub_container{
+    padding:1rem;
 }
-
-section>p{
+section p{
     font-size:1.5rem;
-    width:50ch;
     /* margin-inline:2rem; */
+    margin:1rem 0;
 }
 #get_started_btn{
     background-color: #44d;
@@ -71,4 +32,5 @@ #get_started_btn{
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
+    display: inline-block;
 }

public/css/home.css

@@ -1,49 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
-
-*{
-    margin:0;
-    padding:0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
-a{
-    color:#000;
-    /* border:none; */
-    text-decoration: none;
-}
-
-header{
-    height:80px;
-    background-color: #FFC3C3;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding:0.7rem 2rem;
-}
-
-header>.title{
-    font-size:2rem;
-    cursor: pointer;
-}
-
-header>.sub_header{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-header>.sub_header a{
-    margin-inline:10px;
-    cursor: pointer;
-}
-header>.sub_header a:hover{
-    border-bottom:2px solid #000;
-}
-
-
 #info_container,#topdown_container,#bottomup_container{
     min-height:500px;
     padding:2rem 4rem;

public/css/layouts/main.css

@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+a{
+    color:#000;
+    /* border:none; */
+    text-decoration: none;
+}
+
+header{
+    height:80px;
+    background-color: #FFC3C3;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding:0.7rem 2rem;
+}
+
+header>.title{
+    font-size:2rem;
+    cursor: pointer;
+}
+
+header>.sub_header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header>.sub_header a{
+    margin-inline:10px;
+    cursor: pointer;
+}
+header>.sub_header a:hover{
+    border-bottom:2px solid #000;
+}
+header #user_badge{
+    border-radius:50%;
+    background-color: #0000004c;
+    aspect-ratio: 1;
+    color:#fff;
+    padding:1rem;
+
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}

resources/views/dashboard/explore.blade.php

@@ -0,0 +1,29 @@
+@extends('layouts.main')
+@section('head')
+    <title>Explore Skills</title>
+    <link rel="stylesheet" href="{{ asset('css/dashboard/explore.css') }}">
+@endsection
+@section('main')
+    <section id="main_section">
+        <form id="search_skill_form">
+            <input type='text' class='search_input'>
+            <input type='submit' class='search_btn' value='Search'>
+        </form>
+        <div class="skills_container">
+            <div class="create_skill_container">
+                <a href='#' class="create_skill_btn">Create New Skill</a>
+            </div>
+
+            <div class="skills">
+                @for ($i = 0; $i < 10; $i++)
+                    <div class="skill">
+                        <span class='title'>Singing Skill</span>
+
+                        <a href="#" class="start_btn">Start</a>
+                    </div>
+                @endfor
+            </div>
+
+        </div>
+    </section>
+@endsection

resources/views/dashboard/home.blade.php

@@ -1,35 +1,18 @@
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Learn Guide | Home Page</title>
-    <link rel="stylesheet" href="{{ asset('css/dashboard/home.css') }}">
-</head>
-
-<body>
-    <header>
-        <a class='title' href="{{ route('home') }}">LearnGuide</a>
-        <div class="sub_header">
-            <div>
-                <a href="{{ route('dashboard') }}">Dashboard</a>
-                <a>My Skills</a>
-                <a>Explore</a>
-            </div>
-            <div class='circle'>
-                {{ Auth::guard('customuser')->user()->username }}
-            </div>
+@extends('layouts.main')
+@section('head')
+<title>Dashboard</title>
+<link rel="stylesheet" href="{{ asset('css/dashboard/home.css') }}">
+@endsection
+@section('main')
+    <section id="new_user_section">
+        <div class='sub_container'>
+            <p>
+                Start learning the skills which you always wanted to the right way.
+            </p>
+            <a href="{{ route('dashboard.explore') }}" id="get_started_btn">Get Started</a>
         </div>
-    </header>
-    <section>
-        <p>
-            you should start learning the skills which interests you or which can help you with your career.
-        </p>
-        <button id="get_started_btn">Get Started</button>
-        @include('components.topdown')
-        @include('components.bottomup')
+        <img src="{{ asset('images/skills collage.png') }}">
+        {{-- @include('components.topdown')
+        @include('components.bottomup') --}}
     </section>
-</body>
-
-</html>
+@endsection

resources/views/home.blade.php

@@ -1,27 +1,9 @@
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Learn Guide | Home Page</title>
-    <link rel="stylesheet" href="{{ asset('css/home.css') }}">
-</head>
-
-<body>
-    <header>
-        <a class='title'>LearnGuide</a>
-        <div class="sub_header">
-            <div>
-                <a>Dashboard</a>
-                <a>My Skills</a>
-                <a>Explore</a>
-            </div>
-            <div>
-                <a href="{{ route('login.form') }}">Login</a>
-            </div>
-        </div>
-    </header>
+@extends('layouts.main')
+@section('head')
+<title>Learn Guide | Home Page</title>
+<link rel='stylesheet' href="{{ asset('css/home.css') }}">
+@endsection
+@section('main')
     <section id='info_container'>
         <p>
             Let’s learn skills the right way
@@ -34,7 +16,11 @@
     <section id='topdown_container'>
         <h2 class="heading">Top Down Approach</h2>
         <div class="main_section">
-            <p>Top-down learning is a teaching style that focuses on providing students a large view of a subject, without explaining the components that make up the subject. It is based on the idea that a teacher drives the classroom and determines what is to be taught. Top-down learning also involves perceiving the world by drawing from what we already know in order to interpret new information. Top-down learning is influenced by higher mental processes such as expectations, beliefs, values, and social influences.</p>
+            <p>Top-down learning is a teaching style that focuses on providing students a large view of a subject, without
+                explaining the components that make up the subject. It is based on the idea that a teacher drives the
+                classroom and determines what is to be taught. Top-down learning also involves perceiving the world by
+                drawing from what we already know in order to interpret new information. Top-down learning is influenced by
+                higher mental processes such as expectations, beliefs, values, and social influences.</p>
             @include('components.topdown')
         </div>
     </section>
@@ -42,10 +28,12 @@
         <h2 class="heading">Bottom Up Approach</h2>
         <div class="main_section">
             @include('components.bottomup')
-            <p>Bottom-up learning is a teaching style that focuses on providing students the components that make up a subject, and then building up to a larger view of the subject. It is based on the idea that students are active learners who construct their own knowledge from the bottom up. Bottom-up learning also involves perceiving the world by processing sensory information and building up to higher levels of cognition. Bottom-up learning is influenced by lower mental processes such as perception, attention, memory, and reasoning.</p>
+            <p>Bottom-up learning is a teaching style that focuses on providing students the components that make up a
+                subject, and then building up to a larger view of the subject. It is based on the idea that students are
+                active learners who construct their own knowledge from the bottom up. Bottom-up learning also involves
+                perceiving the world by processing sensory information and building up to higher levels of cognition.
+                Bottom-up learning is influenced by lower mental processes such as perception, attention, memory, and
+                reasoning.</p>
         </div>
     </section>
-
-</body>
-
-</html>
+@endsection

resources/views/layouts/main.blade.php

@@ -0,0 +1,37 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="{{ asset('css/layouts/main.css') }}">
+    @yield('head')
+</head>
+
+<body>
+    <header>
+        <a class='title' href="{{ route('home') }}">LearnGuide</a>
+        <div class="sub_header">
+            <div>
+                <a href="{{ route('dashboard') }}">Dashboard</a>
+                <a>My Skills</a>
+                <a href="{{ route('dashboard.explore') }}">Explore</a>
+            </div>
+
+            @if (!Auth::guard('customuser')->check())
+                <div>
+                    <a href="{{ route('login.form') }}">Login</a>
+                </div>
+            @else
+                <div id="user_badge">
+                    {{ Auth::guard('customuser')->user()->username }}
+                </div>
+            @endif
+        </div>
+        </div>
+    </header>
+    @yield('main')
+
+</body>
+
+</html>

routes/web.php

@@ -25,5 +25,6 @@
 Route::prefix('/dashboard')->middleware('is_customuser')->controller(DashboardController::class)->group(function(){
 
     Route::get("/",'home')->name("dashboard");
+    Route::get("/explore",'explore')->name("dashboard.explore");
 
 });