Change Design on homepage

database/factories/UserFactory.php

@@ -26,7 +26,7 @@ public function definition()
             'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi',
             'admin' => 'false',
             'picture' => 'no-picture',
-            'random' => 'https://source.unsplash.com/random',
+            'random' => 'avatar.png',
             'created_at' => Carbon::now(),
             'created_at' => Carbon::now(),
             'remember_token' => Str::random(10),

public/css/style.css

@@ -74,3 +74,102 @@
     transition: 0.2s;
 }
 
+/* Three latest blog posts */
+
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 1200px;
+  margin-block: 2rem;
+  gap: 2rem;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: clamp(20rem, calc(20rem + 2vw), 22rem);
+  overflow: hidden;
+  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
+  border-radius: 1em;
+  background: #ECE9E6;
+  background: linear-gradient(to right, #FFFFFF, #ECE9E6);
+}
+
+
+.card__body {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+
+
+.tag {
+  align-self: flex-start;
+  padding: .25em .75em;
+  border-radius: 1em;
+  font-size: .75rem;
+}
+
+.tag + .tag {
+  margin-left: .5em;
+}
+
+.tag-blue {
+  background: #56CCF2;
+background: linear-gradient(to bottom, #2F80ED, #56CCF2);
+  color: #fafafa;
+}
+
+.tag-brown {
+  background: #D1913C;
+background: linear-gradient(to bottom, #FFD194, #D1913C);
+  color: #fafafa;
+}
+
+.tag-red {
+  background: #cb2d3e;
+background: linear-gradient(to bottom, #ef473a, #cb2d3e);
+  color: #fafafa;
+}
+
+.card__body h4 {
+  font-size: 1.5rem;
+  text-transform: capitalize;
+}
+
+.card__footer {
+  display: flex;
+  padding: 1rem;
+  margin-top: auto;
+}
+
+.user {
+  display: flex;
+  gap: .5rem;
+}
+
+.user__image {
+  border-radius: 50%;
+}
+
+.user__info > small {
+  color: #666;
+}

resources/views/home.blade.php

@@ -50,10 +50,37 @@
 
 <div class="flex justify-center mt-5">
 
-<img
+{{-- <img
 class="rounded-lg mb-5" 
-src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/988/posts/30254/image/website-homepage%20(1).jpg" 
-alt="">
+src="http://i0.wp.com/joyenergizer.com/wp-content/uploads/2017/05/IceIce.gif?fit=750,563" 
+alt=""> --}}
+
+<div class="container">
+
+  @foreach ($posts as $post)
+  <div class="card">
+    <div class="card__header">
+      <img src="https://source.unsplash.com/600x400/?computer" alt="Post Image" class="card__image" width="600">
+    </div>
+    <div class="card__body">
+      {{-- <span class="tag tag-blue">Technology</span> --}}
+      <h4><a href="">{{$post->title}}</a></h4>
+      <p>{!! $post->body !!}</p>
+    </div>
+    <div class="card__footer">
+      <div class="user">
+      <img style="height: 40px" 
+      src="{{$post->user->picture == "/storage/profile_images/no-picture" ? $post->user->random : $post->user->picture}}"
+      alt="User Image" class="user__image">
+        <div class="user__info">
+          <h5>{{$post->user->name}}</h5>
+          <small>{{$post->created_at->diffForHumans()}}</small>
+        </div>
+      </div>
+    </div>
+  </div>
+  @endforeach
+</div>
 
 </div>
 

routes/web.php

@@ -10,6 +10,7 @@
 use App\Http\Controllers\QuoteController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\UserPostController;
+use App\Models\Post;
 use App\Models\Quote;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Route;
@@ -20,11 +21,13 @@
 // Home
 Route::get('/home', function() {
     $quote = Quote::latest('created_at')->first();
+    $posts = Post::orderBy('created_at', 'desc')->take(3)->get();
     $user = Auth::user();
 
     return view('home', [
         'quote' => $quote,
         'user' => $user,
+        'posts' => $posts,
     ]);
 })->name('home');