Update landing and about page

app/Http/Controllers/SiteController.php

@@ -13,143 +13,130 @@ use App\Util\ActivityPub\Helpers;
 
 class SiteController extends Controller
 {
-    public function home(Request $request)
-    {
-        if (Auth::check()) {
-            return $this->homeTimeline($request);
-        } else {
-            return $this->homeGuest();
-        }
-    }
-
-    public function homeGuest()
-    {
-        $data = Cache::remember('site:landing:data', now()->addHours(3), function() {
-            return [
-                'stats' => [
-                    'posts' => App\Util\Lexer\PrettyNumber::convert(App\Status::count()),
-                    'likes' => App\Util\Lexer\PrettyNumber::convert(App\Like::count()),
-                    'hashtags' => App\Util\Lexer\PrettyNumber::convert(App\StatusHashtag::count())
-                ],
-            ];
-        });
-        return view('site.index', compact('data'));
-    }
-
-    public function homeTimeline(Request $request)
-    {
-        $this->validate($request, [
-            'layout' => 'nullable|string|in:grid,feed'
-        ]);
-        $layout = $request->input('layout', 'feed');
-        return view('timeline.home', compact('layout'));
-    }
-
-    public function changeLocale(Request $request, $locale)
-    {
-        // todo: add other locales after pushing new l10n strings
-        $locales = Localization::languages();
-        if(in_array($locale, $locales)) {
-            if($request->user()) {
-                $user = $request->user();
-                $user->language = $locale;
-                $user->save();
-            }
-          session()->put('locale', $locale);
-        }
-
-        return redirect(route('site.language'));
-    }
-
-    public function about()
-    {
-        $page = Page::whereSlug('/site/about')->whereActive(true)->first();
-        $stats = Cache::remember('site:about:stats-v1', now()->addHours(12), function() {
-            return [
-                'posts' => Status::count(),
-                'users' => User::whereNull('status')->count(),
-                'admin' => User::whereIsAdmin(true)->first()
-            ];
-        });
-        $path = $page ? 'site.about-custom' : 'site.about';
-        return view($path, compact('page', 'stats'));
-    }
-
-    public function language()
-    {
-      return view('site.language');
-    }
-
-    public function communityGuidelines(Request $request)
-    {
-        return Cache::remember('site:help:community-guidelines', now()->addDays(120), function() {
-            $slug = '/site/kb/community-guidelines';
-            $page = Page::whereSlug($slug)->whereActive(true)->first();
-            return View::make('site.help.community-guidelines')->with(compact('page'))->render();
-        });
-    }
-
-    public function privacy(Request $request)
-    {
-        $page = Cache::remember('site:privacy', now()->addDays(120), function() {
-            $slug = '/site/privacy';
-            $page = Page::whereSlug($slug)->whereActive(true)->first();
-        });
-        return View::make('site.privacy')->with(compact('page'))->render();
-    }
-
-    public function terms(Request $request)
-    {
-        $page = Cache::remember('site:terms', now()->addDays(120), function() {
-            $slug = '/site/terms';
-            return Page::whereSlug($slug)->whereActive(true)->first();
-        });
-        return View::make('site.terms')->with(compact('page'))->render();
-    }
-
-    public function redirectUrl(Request $request)
-    {
-        abort_if(!$request->user(), 404);
-        $this->validate($request, [
-            'url' => 'required|url'
-        ]);
-        $url = request()->input('url');
-        abort_if(Helpers::validateUrl($url) == false, 404);
-        return view('site.redirect', compact('url'));
-    }
-
-    public function followIntent(Request $request)
-    {
-        $this->validate($request, [
-            'user' => 'string|min:1|max:15|exists:users,username',
-        ]);
-        $profile = Profile::whereUsername($request->input('user'))->firstOrFail();
-        $user = $request->user();
-        abort_if($user && $profile->id == $user->profile_id, 404);
-        $following = $user != null ? FollowerService::follows($user->profile_id, $profile->id) : false;
-        return view('site.intents.follow', compact('profile', 'user', 'following'));
-    }
-
-    public function legacyProfileRedirect(Request $request, $username)
-    {
-        $username = Str::contains($username, '@') ? '@' . $username : $username;
-        if(str_contains($username, '@')) {
-            $profile = Profile::whereUsername($username)
-                ->firstOrFail();
-
-            if($profile->domain == null) {
-                $url = "/$profile->username";
-            } else {
-                $url = "/i/web/profile/_/{$profile->id}";
-            }
-
-        } else {
-            $profile = Profile::whereUsername($username)
-                ->whereNull('domain')
-                ->firstOrFail();
-            $url = "/$profile->username";
-        }
-
-        return redirect($url);
-    }
+	public function home(Request $request)
+	{
+		if (Auth::check()) {
+			return $this->homeTimeline($request);
+		} else {
+			return $this->homeGuest();
+		}
+	}
+
+	public function homeGuest()
+	{
+		return view('site.index');
+	}
+
+	public function homeTimeline(Request $request)
+	{
+		$this->validate($request, [
+			'layout' => 'nullable|string|in:grid,feed'
+		]);
+		$layout = $request->input('layout', 'feed');
+		return view('timeline.home', compact('layout'));
+	}
+
+	public function changeLocale(Request $request, $locale)
+	{
+		// todo: add other locales after pushing new l10n strings
+		$locales = Localization::languages();
+		if(in_array($locale, $locales)) {
+			if($request->user()) {
+				$user = $request->user();
+				$user->language = $locale;
+				$user->save();
+			}
+		  session()->put('locale', $locale);
+		}
+
+		return redirect(route('site.language'));
+	}
+
+	public function about()
+	{
+		return Cache::remember('site.about_v2', now()->addMinutes(15), function() {
+			$user_count = number_format(User::count());
+			$post_count = number_format(Status::count());
+			$rules = config_cache('app.rules') ? json_decode(config_cache('app.rules'), true) : null;
+			return view('site.about', compact('rules', 'user_count', 'post_count'))->render();
+		});
+	}
+
+	public function language()
+	{
+	  return view('site.language');
+	}
+
+	public function communityGuidelines(Request $request)
+	{
+		return Cache::remember('site:help:community-guidelines', now()->addDays(120), function() {
+			$slug = '/site/kb/community-guidelines';
+			$page = Page::whereSlug($slug)->whereActive(true)->first();
+			return View::make('site.help.community-guidelines')->with(compact('page'))->render();
+		});
+	}
+
+	public function privacy(Request $request)
+	{
+		$page = Cache::remember('site:privacy', now()->addDays(120), function() {
+			$slug = '/site/privacy';
+			$page = Page::whereSlug($slug)->whereActive(true)->first();
+		});
+		return View::make('site.privacy')->with(compact('page'))->render();
+	}
+
+	public function terms(Request $request)
+	{
+		$page = Cache::remember('site:terms', now()->addDays(120), function() {
+			$slug = '/site/terms';
+			return Page::whereSlug($slug)->whereActive(true)->first();
+		});
+		return View::make('site.terms')->with(compact('page'))->render();
+	}
+
+	public function redirectUrl(Request $request)
+	{
+		abort_if(!$request->user(), 404);
+		$this->validate($request, [
+			'url' => 'required|url'
+		]);
+		$url = request()->input('url');
+		abort_if(Helpers::validateUrl($url) == false, 404);
+		return view('site.redirect', compact('url'));
+	}
+
+	public function followIntent(Request $request)
+	{
+		$this->validate($request, [
+			'user' => 'string|min:1|max:15|exists:users,username',
+		]);
+		$profile = Profile::whereUsername($request->input('user'))->firstOrFail();
+		$user = $request->user();
+		abort_if($user && $profile->id == $user->profile_id, 404);
+		$following = $user != null ? FollowerService::follows($user->profile_id, $profile->id) : false;
+		return view('site.intents.follow', compact('profile', 'user', 'following'));
+	}
+
+	public function legacyProfileRedirect(Request $request, $username)
+	{
+		$username = Str::contains($username, '@') ? '@' . $username : $username;
+		if(str_contains($username, '@')) {
+			$profile = Profile::whereUsername($username)
+				->firstOrFail();
+
+			if($profile->domain == null) {
+				$url = "/$profile->username";
+			} else {
+				$url = "/i/web/profile/_/{$profile->id}";
+			}
+
+		} else {
+			$profile = Profile::whereUsername($username)
+				->whereNull('domain')
+				->firstOrFail();
+			$url = "/$profile->username";
+		}
+
+		return redirect($url);
+	}
 }

resources/views/site/about.blade.php

@@ -1,138 +1,238 @@
-@extends('layouts.anon')
-
-@section('content')
-<div class="jumbotron jumbotron-fluid bg-primary text-white mb-0 py-4">
-	<div class="container">
-		<p class="h1 font-weight-light">About</p>
-		<p class="h3 font-weight-light py-4">Pixelfed is an image sharing platform, an ethical alternative to centralized platforms.</p>
-	</div>
-</div>
-<div class="bg-white">
-	<div class="container d-flex justify-content-center">
-		<div class="card mr-3" style="width:500px;margin-top:-30px;">
-			<div class="card-header d-inline-flex align-items-center bg-white">
-				<img src="/storage/avatars/default.png" width="32px" height="32px" style="border-radius: 32px; border: 1px solid #ccc">
-				<span class="username font-weight-bold pl-2 text-dark">
-					username
-				</span>
-			</div>
-			<div class="card-body p-0">
-				<img class="img-fluid" src="/img/sample-post.jpeg">
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+<head>
+
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="mobile-web-app-capable" content="yes">
+	<title>{{ config('app.name', 'Pixelfed') }}</title>
+	<meta property="og:site_name" content="{{ config_cache('app.name', 'pixelfed') }}">
+	<meta property="og:title" content="{{ config_cache('app.name', 'pixelfed') }}">
+	<meta property="og:type" content="article">
+	<meta property="og:url" content="{{route('site.about')}}">
+	<meta property="og:description" content="{{config_cache('app.short_description')}}">
+	<meta name="medium" content="image">
+	<meta name="theme-color" content="#10c5f8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
+	<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
+	<link href="{{ mix('css/app.css') }}" rel="stylesheet">
+	<style type="text/css">
+		.section-spacer {
+			height: 13vh;
+		}
+	</style>
+</head>
+<body>
+	<main id="content">
+		<div class="container">
+			<p class="text-right mt-3">
+				<a href="/" class="font-weight-bold text-dark">Home</a>
+				<a href="/site/newsroom" class="ml-4 font-weight-bold text-dark">Newsroom</a>
+			</p>
+		</div>
+		<div class="px-4 py-5 my-5 text-center">
+			<a href="/">
+				<img class="d-block mx-auto mb-4" src="/img/pixelfed-icon-color.svg" alt="" width="72" height="57">
+			</a>
+			<h1 class="display-4 font-weight-bold py-3">{{ config_cache('about.title') ?? 'Photo Sharing. For Everyone' }}</h1>
+			<div class="col-lg-6 mx-auto py-3">
+			  <p class="mb-4 font-weight-light text-left" style="font-size: 26px; line-height: 40px;">
+				{!! config_cache('app.description') ?? config_cache('app.short_description') ?? 'Pixelfed is an image sharing platform, an ethical alternative to centralized platforms.'!!}
+			  </p>
 			</div>
-			<div class="card-footer bg-white">
-				<div class="likes font-weight-bold mb-2">
-					<span class="like-count">124k</span> likes
-				</div>
-				<div class="caption">
-					<p class="mb-1">
-						<span class="username font-weight-bold">
-							<bdi>username</bdi>
-						</span>
-						<span class="caption-body" data-processed="false">Hello world! <a href="#">#introduction</a></span>
-					</p>
+		</div>
+
+		<div class="container">
+			<div class="row align-items-stretch pt-5">
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/3.jpeg');min-height:400px;border-radius:1rem;">
+					</div>
+				</div>
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/8.jpeg');min-height:400px;border-radius:1rem;">
+					</div>
 				</div>
+
 			</div>
-		</div>
-		<div style="width:300px;margin-top:-30px;text-align: center;">
-			<div class="card border-left-blue mb-3">
-				<div class="card-body">
-					<p class="h2 mb-0">{{$stats['posts']}}</p>
-					<p class="font-weight-bold mb-0">Posts</p>
+
+			<div class="row align-items-stretch pt-5">
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/6.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
+				</div>
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/4.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
+				</div>
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/7.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
 				</div>
+
 			</div>
+			<div class="row align-items-stretch py-5">
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/1.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
+				</div>
+
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/5.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
+				</div>
 
-			<div class="card border-left-blue mb-3">
-				<div class="card-body">
-					<p class="h2 mb-0">{{$stats['users']}}</p>
-					<p class="font-weight-bold mb-0">Users</p>
+				<div class="col">
+					<div class="card h-100 shadow-lg" style="background-image: url('/_landing/9.jpeg');min-height:200px;border-radius:1rem;background-size: cover;">
+					</div>
 				</div>
+
 			</div>
+		</div>
 
-			@if($stats['admin'])
-			<div class="card border-left-blue mb-3">
-				<div class="card-body">
-					<p class="h2 mb-0">
-						<a href="{{$stats['admin']->url()}}">
-							&commat;{{$stats['admin']->username}}
-						</a>
-					</p>
-					<p class="font-weight-bold mb-0">Instance Admin</p>
+		@if($rules)
+		<div class="section-spacer"></div>
+		<div class="section-spacer"></div>
+
+		<div id="rules" class="container">
+			<div class="row mb-4">
+				<div class="col">
+					<h1 class="display-4 font-weight-bold mb-0 text-center">Rules</h1>
+				</div>
+			</div>
+			<div class="row justify-content-center">
+				<div class="col-12 mb-2 col-lg-8 mb-lg-0">
+					<ol>
+						@foreach($rules as $rule)
+						<li class="h3 my-4">{{$rule}}</li>
+						@endforeach
+					</ol>
+					<p class="h5 text-center pt-4">For more information, please review our <a href="/site/terms">Terms of Use</a></p>
 				</div>
 			</div>
-			@endif
 		</div>
-	</div>
-	<div class="container py-5">
-	</div>
-</div>
-<div class="bg-primary pt-5 pb-4">
-	<div class="container">
-		<div class="row">
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Ad Free
-						</p>
-						<p class="font-weight-light mb-0">No Ads or Trackers</p>
+
+		<div class="section-spacer"></div>
+		<div class="section-spacer"></div>
+		@endif
+
+		<section class="container">
+			<div class="row">
+				<div class="col-12 col-md-8 offset-md-2">
+					<div class="mt-5">
+						<p class="text-center display-4 font-weight-bold">Feature Packed.</p>
+					</div>
+					<div class="my-2">
+						<p class="h3 font-weight-light text-muted text-center">The best for the brightest 📸</p>
 					</div>
 				</div>
 			</div>
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Chronological
-						</p>
-						<p class="font-weight-light mb-0">Timelines in order</p>
-					</div>
+		</section>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Albums</h1>
+					<p class="h4 font-weight-light">Share posts with up to {{config_cache('pixelfed.max_album_length')}} photos</p>
+				</div>
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/1.jpeg" alt="" width="720">
 				</div>
 			</div>
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Federated
-						</p>
-						<p class="font-weight-light mb-0">A network of millions</p>
-					</div>
+		</div>
+		<div class="section-spacer"></div>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/2.jpeg" alt="" width="720">
+				</div>
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Comments</h1>
+					<p class="h4 font-weight-light text-justify">Comment on a post, or send a reply</p>
 				</div>
 			</div>
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Discover
-						</p>
-						<p class="font-weight-light mb-0">Discover popular posts</p>
-					</div>
+		</div>
+		<div class="section-spacer"></div>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Collections</h1>
+					<p class="h4 font-weight-light text-justify">Organize and share collections of multiple posts</p>
+				</div>
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/3.jpeg" alt="" width="720">
 				</div>
 			</div>
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Photo Filters
-						</p>
-						<p class="font-weight-light mb-0">Add an optional filter</p>
-					</div>
+		</div>
+		<div class="section-spacer"></div>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/4.jpeg" alt="" width="720">
+				</div>
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Discover</h1>
+					<p class="h4 font-weight-light text-justify">Explore categories, hashtags and topics</p>
 				</div>
 			</div>
-			<div class="col-12 col-md-4 mb-4">
-				<div class="card bg-transparent" style="box-shadow: none;border:1px solid #fff">
-					<div class="card-body text-white text-center">
-						<p class="font-weight-bold lead mb-0">
-							Stories
-						</p>
-						<p class="font-weight-light mb-0">Coming Soon!</p>
-					</div>
+		</div>
+		<div class="section-spacer"></div>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Photo Filters</h1>
+					<p class="h4 font-weight-light text-justify">Add a special touch to your photos</p>
+				</div>
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/5.jpeg" alt="" width="720">
+				</div>
+			</div>
+		</div>
+		<div class="section-spacer"></div>
+		<div class="container my-5">
+			<div class="row p-4 pb-0 pt-lg-5 align-items-center rounded-3">
+				<div class="col-lg-6 overflow-hidden">
+					<img class="rounded-lg img-fluid filter-inkwell" src="/_landing/6.jpeg" alt="" width="720">
+				</div>
+				<div class="col-lg-6 p-3 p-lg-5 pt-lg-3">
+					<h1 class="display-4 font-weight-bold lh-1">Stories</h1>
+					<p class="h4 font-weight-light text-justify">Share moments with your followers that disappear after 24 hours</p>
+				</div>
+			</div>
+		</div>
+
+		<div class="section-spacer"></div>
+		<div class="section-spacer"></div>
+
+		<div id="stats" class="container">
+			<div class="row mb-4">
+				<div class="col">
+					<p class="display-3 font-weight-bold">
+						<span class="text-primary">{{$user_count}}</span>
+						people have shared
+						<span class="text-primary">{{$post_count}}</span>
+						photos and videos on {{config_cache('app.name')}}!
+					</p>
+					@if(config_cache('pixelfed.open_registration'))
+					<div class="section-spacer"></div>
+					<p class="display-4 font-weight-bold mb-0">
+						<a class="text-primary" href="/register">Sign up today</a>
+						and join our community of photographers from around the world.
+					</p>
+					@endif
 				</div>
 			</div>
 		</div>
-	</div>
-</div>
-@endsection
 
-@push('meta')
-<meta property="og:description" content="Pixelfed is an image sharing platform, an ethical alternative to centralized platforms.">
-@endpush
+		<div class="section-spacer"></div>
+		<div class="section-spacer"></div>
+	</main>
+  </div>
+	@include('layouts.partial.footer')
+</body>
+</html>

resources/views/site/index.blade.php

@@ -1,309 +1,144 @@
 <!DOCTYPE html>
 <html lang="{{ app()->getLocale() }}">
 <head>
-    
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <meta name="mobile-web-app-capable" content="yes">
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+	<meta name="mobile-web-app-capable" content="yes">
 
-    <meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
-    <meta property="og:title" content="{{ config('app.name', 'pixelfed') }}">
-    <meta property="og:type" content="article">
-    <meta property="og:url" content="{{request()->url()}}">
-    <meta property="og:description" content="Federated Image Sharing">
+	<title>{{ config('app.name', 'Laravel') }}</title>
 
-    <meta name="medium" content="image">
-    <meta name="theme-color" content="#10c5f8">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
-    <link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
-    <link href="{{ mix('css/landing.css') }}" rel="stylesheet">
-    <style type="text/css">
-        .feature-circle {
-            display: flex !important;
-            -webkit-box-pack: center !important;
-            justify-content: center !important;
-            -webkit-box-align: center !important;
-            align-items: center !important;
-            margin-right: 1rem !important;
-            background-color: #08d !important;
-            color: #fff;
-            border-radius: 50% !important;
-            width: 60px;
-            height:60px;
-        }
-        .section-spacer {
-            height: 13vh;
-        }
-    </style>
+	<meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
+	<meta property="og:title" content="{{ config('app.name', 'pixelfed') }}">
+	<meta property="og:type" content="article">
+	<meta property="og:url" content="{{request()->url()}}">
+	<meta property="og:description" content="Federated Image Sharing">
+
+	<meta name="medium" content="image">
+	<meta name="theme-color" content="#10c5f8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
+	<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
+	<link href="{{ mix('css/landing.css') }}" rel="stylesheet">
+	<style type="text/css">
+		.feature-circle {
+			display: flex !important;
+			-webkit-box-pack: center !important;
+			justify-content: center !important;
+			-webkit-box-align: center !important;
+			align-items: center !important;
+			margin-right: 1rem !important;
+			background-color: #08d !important;
+			color: #fff;
+			border-radius: 50% !important;
+			width: 60px;
+			height:60px;
+		}
+		.section-spacer {
+			height: 13vh;
+		}
+	</style>
 </head>
 <body class="">
-    <main id="content">
-        <section class="container">
-            <div class="section-spacer"></div>
-            <div class="row pt-md-5 mt-5">
-                <div class="col-12 col-md-6 d-none d-md-block">
-                    <div class="m-my-4">
-                        <p class="display-2 font-weight-bold">Photo Sharing</p>
-                        <p class="h1 font-weight-bold">For Everyone.</p>
-                    </div>
-                </div>
-                <div class="col-12 col-md-5 offset-md-1">
-                    <div>
-                        <div class="pt-md-3 d-flex justify-content-center align-items-center">
-                            <img src="/img/pixelfed-icon-color.svg" loading="lazy" width="50px" height="50px">
-                            <span class="font-weight-bold h3 ml-2 pt-2">Pixelfed</span>
-                        </div>
-                        <div class="d-block d-md-none">
-                            <p class="font-weight-bold mb-0 text-center">Photo Sharing. For Everyone</p>
-                        </div>
-                        <div class="card my-4 shadow-none border">
-                            <div class="card-body px-lg-5">
-                                <div class="text-center">
-                                    <p class="small text-uppercase font-weight-bold text-muted">Account Login</p>
-                                </div>
-                                <div>
-                                    <form class="px-1" method="POST" action="{{ route('login') }}" id="login_form">
-                                        @csrf
-                                        <div class="form-group row">
+	<main id="content">
+		<section class="container">
+			<div class="section-spacer"></div>
+			<div class="row pt-md-5 mt-5">
+				<div class="col-12 col-md-6 d-none d-md-block">
+					<div class="m-my-4">
+						<p class="display-2 font-weight-bold">Photo Sharing</p>
+						<p class="h1 font-weight-bold">For Everyone.</p>
+					</div>
+				</div>
+				<div class="col-12 col-md-5 offset-md-1">
+					<div>
+						<div class="pt-md-3 d-flex justify-content-center align-items-center">
+							<img src="/img/pixelfed-icon-color.svg" loading="lazy" width="50px" height="50px">
+							<span class="font-weight-bold h3 ml-2 pt-2">Pixelfed</span>
+						</div>
+						<div class="d-block d-md-none">
+							<p class="font-weight-bold mb-0 text-center">Photo Sharing. For Everyone</p>
+						</div>
+						<div class="card my-4 shadow-none border">
+							<div class="card-body px-lg-5">
+								<div class="text-center">
+									<p class="small text-uppercase font-weight-bold text-muted">Account Login</p>
+								</div>
+								<div>
+									<form class="px-1" method="POST" action="{{ route('login') }}" id="login_form">
+										@csrf
+										<div class="form-group row">
 
-                                            <div class="col-md-12">
-                                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{__('Email')}}" required autofocus>
+											<div class="col-md-12">
+												<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{__('Email')}}" required autofocus>
 
-                                                @if ($errors->has('email'))
-                                                    <span class="invalid-feedback">
-                                                        <strong>{{ $errors->first('email') }}</strong>
-                                                    </span>
-                                                @endif
-                                            </div>
-                                        </div>
+												@if ($errors->has('email'))
+													<span class="invalid-feedback">
+														<strong>{{ $errors->first('email') }}</strong>
+													</span>
+												@endif
+											</div>
+										</div>
 
-                                        <div class="form-group row">
+										<div class="form-group row">
 
-                                            <div class="col-md-12">
-                                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{__('Password')}}" required>
+											<div class="col-md-12">
+												<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{__('Password')}}" required>
 
-                                                @if ($errors->has('password'))
-                                                    <span class="invalid-feedback">
-                                                        <strong>{{ $errors->first('password') }}</strong>
-                                                    </span>
-                                                @endif
-                                            </div>
-                                        </div>
+												@if ($errors->has('password'))
+													<span class="invalid-feedback">
+														<strong>{{ $errors->first('password') }}</strong>
+													</span>
+												@endif
+											</div>
+										</div>
 
-                                        <div class="form-group row">
-                                            <div class="col-md-12">
-                                                <div class="checkbox">
-                                                    <label>
-                                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> 
-                                                        <span class="font-weight-bold small ml-1 text-muted">
-                                                            {{ __('Remember Me') }}
-                                                        </span>
-                                                    </label>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        @if(config('captcha.enabled'))
-                                        <div class="d-flex justify-content-center mb-3">
-                                            {!! Captcha::display() !!}
-                                        </div>
-                                        @endif
-                                        <div class="form-group row mb-0">
-                                            <div class="col-md-12">
-                                                <button type="submit" class="btn btn-primary btn-block py-0 font-weight-bold text-uppercase">
-                                                    {{ __('Login') }}
-                                                </button>
+										<div class="form-group row">
+											<div class="col-md-12">
+												<div class="checkbox">
+													<label>
+														<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
+														<span class="font-weight-bold small ml-1 text-muted">
+															{{ __('Remember Me') }}
+														</span>
+													</label>
+												</div>
+											</div>
+										</div>
+										@if(config('captcha.enabled'))
+										<div class="d-flex justify-content-center mb-3">
+											{!! Captcha::display() !!}
+										</div>
+										@endif
+										<div class="form-group row mb-0">
+											<div class="col-md-12">
+												<button type="submit" class="btn btn-primary btn-block py-0 font-weight-bold text-uppercase">
+													{{ __('Login') }}
+												</button>
 
-                                            </div>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card shadow-none border card-body">
-                            <p class="text-center mb-0 font-weight-bold small">
-                                @if(config('pixelfed.open_registration'))
-                                <a href="/register">Register</a>
-                                <span class="px-1">·</span>
-                                @endif
-                                <a href="/password/reset">Password Reset</a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="section-spacer"></div>
-            <div class="row py-5 mt-5 mb-5">
-                <div class="col-12 col-md-6 d-none d-md-block">
-                    <div>
-                        <div class="row mt-4 mb-1">
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/1.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/2.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/3.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/4.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/5.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/6.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/7.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/8.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                            <div class="col-4 mt-2 px-0">
-                                <div class="px-1 shadow-none">
-                                    <img src="/_landing/9.jpeg" class="img-fluid" loading="lazy" width="640px" height="640px">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-5 offset-md-1">
-                    <div class="section-spacer"></div>
-                    <div class="mt-5">
-                        <p class="text-center h1 font-weight-bold">Simple. Powerful.</p>
-                    </div>
-                    <div class="mt-5">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <span class="text-center">
-                                <span class="font-weight-bold h1">{{$data['stats']['posts']}}</span>
-                                <span class="d-block text-muted text-uppercase">Posts</span>
-                            </span>
-                            <span class="text-center">
-                                <span class="font-weight-bold h1">{{$data['stats']['likes']}}</span>
-                                <span class="d-block text-muted text-uppercase">Likes</span>
-                            </span>
-                            <span class="text-center">
-                                <span class="font-weight-bold h1">{{$data['stats']['hashtags']}}</span>
-                                <span class="d-block text-muted text-uppercase">Hashtags Used</span>
-                            </span>
-                        </div>
-                    </div>
-                    <div class="mt-5">
-                        <p class="lead text-muted text-center">A free and ethical photo sharing platform.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="row py-5 mb-5">
-                <div class="col-12 col-md-8 offset-md-2">
-                    <div class="section-spacer"></div>
-                    <div class="mt-5">
-                        <p class="text-center display-4 font-weight-bold">Feature Packed.</p>
-                    </div>
-                    <div class="my-2">
-                        <p class="h4 font-weight-light text-muted text-center">The best for the brightest.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="row pb-5 mb-5">
-                <div class="col-12 col-md-5 offset-md-1">
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="far fa-images fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Albums</p>
-                                Create an album with up to <span class="font-weight-bold">{{config('pixelfed.max_album_length')}}</span> photos
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="far fa-folder fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Collections</p>
-                                Organize your posts
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="fas fa-image fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Filters</p>
-                                Add a filter to your photos
-                            </div>
-                        </div>
-                    </div>
-                    
-                </div>
-                <div class="col-12 col-md-5 offset-md-1">
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="far fa-comment fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Comments</p>
-                                Comment on a post, or send a reply
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="far fa-list-alt fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Discover</p>
-                                Explore categories, hashtags and topics
-                            </div>
-                        </div>
-                    </div>
-                    @if(config('instance.stories.enabled'))
-                    <div class="mb-5">
-                        <div class="media">
-                            <div class="feature-circle">
-                                <i class="fas fa-history fa-lg"></i>
-                            </div>
-                            <div class="media-body">
-                                <p class="h5 font-weight-bold mt-2 mb-0">Stories</p>
-                                Share posts that disappear after 24h
-                            </div>
-                        </div>
-                    </div>
-                    @endif
-                </div>
-            </div>
-        </section>
-    </main>
-    @include('layouts.partial.footer')
+											</div>
+										</div>
+									</form>
+								</div>
+							</div>
+						</div>
+						<div class="card shadow-none border card-body">
+							<p class="text-center mb-0 font-weight-bold small">
+								@if(config('pixelfed.open_registration'))
+								<a href="/register">Register</a>
+								<span class="px-1">·</span>
+								@endif
+								<a href="/password/reset">Password Reset</a>
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
+	@include('layouts.partial.footer')
 </body>
 </html>