forked from sagi/seepur
changes that diego wanted to landing page
This commit is contained in:
parent
30e48960d0
commit
9a6e6226b8
8 changed files with 899 additions and 290 deletions
1025
public/style.css
1025
public/style.css
File diff suppressed because it is too large
Load diff
|
|
@ -5,8 +5,9 @@
|
|||
@import './mixins.scss';
|
||||
@import "../../node_modules/bulma/bulma.sass";
|
||||
// @import '../../node_modules/animate.css/source/_base.css';
|
||||
.navbar {
|
||||
background:#fafafa;
|
||||
nav.navbar {
|
||||
padding-left: 5rem;
|
||||
padding-right: 5rem;
|
||||
}
|
||||
.hero-bg{
|
||||
// @include pattern(#c0ebfa, #7FD7F5);
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
// background-repeat: no-repeat;
|
||||
}
|
||||
.landing-featue-image{
|
||||
max-height: 128px !important;
|
||||
max-height: 180px !important;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
z-index: 0;
|
||||
|
|
@ -75,6 +76,7 @@ $sizes: (
|
|||
('lg', 2),
|
||||
('xl', 4),
|
||||
('xxl', 8),
|
||||
('diego', 6.25),
|
||||
);
|
||||
$positions: (
|
||||
('t', 'top'),
|
||||
|
|
@ -307,3 +309,10 @@ video{
|
|||
opacity: 0;
|
||||
transform: translate(-2em, 0);
|
||||
}
|
||||
|
||||
.has-diego-width-800{
|
||||
max-width: 50rem;
|
||||
}
|
||||
.is-boarderless{
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
// Update Bulma's global variables
|
||||
// $family-sans-serif: "Nunito", sans-serif;
|
||||
$grey-dark: $brown;
|
||||
$grey-light: $beige-light;
|
||||
$primary: $purple;
|
||||
// $grey-dark: $brown;
|
||||
// $grey-light: $beige-light;
|
||||
// $primary: $purple;
|
||||
// $primary: #7FD7F5;
|
||||
$link: $pink;
|
||||
$widescreen-enabled: false;
|
||||
$fullhd-enabled: false;
|
||||
// $link: $pink;
|
||||
// $widescreen-enabled: false;
|
||||
// $fullhd-enabled: false;
|
||||
|
||||
$navbar-height: 5rem;
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@
|
|||
@else
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary" href='/register'>
|
||||
<a class="button is-info is-rounded" href='/register'>
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light" href='/login'>
|
||||
<a class="button is-rounded is-transparent is-outlined" href='/login'>
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
Seepur | Our Time together
|
||||
@endsection
|
||||
@section('hero')
|
||||
<section class="hero is-medium hero-bg has-inner-shadow-bottom">
|
||||
<section class="hero is-large hero-bg">
|
||||
@!component('components.nav.nav', isLanding = false, auth=auth)
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
|
|
@ -17,8 +17,8 @@ Seepur | Our Time together
|
|||
A <span class="has-text-weight-bold">safe</span> and <span class="has-text-weight-bold">fun</span> way to spend time with far away loved ones
|
||||
</h2>
|
||||
<div class="buttons">
|
||||
<a class="button is-primary" href="/register">Sign Up</a>
|
||||
<a class="button is-link" href='/login'>Log In</a>
|
||||
<a class="button is-info is-rounded" href="/register">Sign Up</a>
|
||||
<a class="button is-rounded is-transparent is-outlined" href='/login'>Log In</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half ">
|
||||
|
|
@ -35,28 +35,29 @@ Seepur | Our Time together
|
|||
@endsection
|
||||
@section('content')
|
||||
|
||||
<section class="section">
|
||||
<section class="section m-b-diego">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">Being far, but never apart</h1>
|
||||
<p>
|
||||
Not just a video call. Choose one of the fun activities Seepur offers and start making the most out of your time together!
|
||||
<h1 class="title is-1">Being far, but never apart</h1>
|
||||
<h3 class="subtitle is-3">Not just a video call</h3>
|
||||
<p class="has-diego-width-800 m-l-a m-r-a">
|
||||
Choose one of the fun activities Seepur offers and start making the most out of your time together!
|
||||
</p>
|
||||
<p>
|
||||
<p class="has-diego-width-800 m-l-a m-r-a">
|
||||
With Seepur you can simply choose your grandchild/niece/nephew you wish to connect with, click on your chosen activity for the day, and share a fun experience together.
|
||||
</p>
|
||||
{{-- <a href="#" class="button m-t-md">More...</a> --}}
|
||||
</div>
|
||||
</section>
|
||||
{{-- 3 Important feature bloks --}}
|
||||
<section>
|
||||
<section class="section m-b-diego">
|
||||
<div class="columns">
|
||||
<div class="column is-flex">
|
||||
<div class="message has-text-centered p-sm is-info">
|
||||
<div class="message has-text-centered p-lg is-info">
|
||||
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
|
||||
<img src="/images/shield.svg" class="landing-featue-image">
|
||||
</figure>
|
||||
<div class="message-body-y m-t-sm">
|
||||
<div class="subtitle">Secure</div>
|
||||
<div class="message-body-y m-t-lg">
|
||||
<div class="subtitle is-3">Secure</div>
|
||||
<p>
|
||||
Using the best practices and security messures to protect all.
|
||||
</p>
|
||||
|
|
@ -65,12 +66,12 @@ Seepur | Our Time together
|
|||
</div>
|
||||
</div>
|
||||
<div class="column is-flex">
|
||||
<div class="message has-text-centered p-sm is-info">
|
||||
<div class="message has-text-centered p-lg is-info">
|
||||
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
|
||||
<img src="/images/coding.svg" class="landing-featue-image">
|
||||
</figure>
|
||||
<div class="message-body-y m-t-sm">
|
||||
<div class="subtitle">Open Source</div>
|
||||
<div class="message-body-y m-t-lg">
|
||||
<div class="subtitle is-3">Open Source</div>
|
||||
<p>
|
||||
Seepur is an open source project
|
||||
</p>
|
||||
|
|
@ -80,12 +81,12 @@ Seepur | Our Time together
|
|||
</div>
|
||||
</div>
|
||||
<div class="column is-flex">
|
||||
<div class="message has-text-centered p-sm is-info">
|
||||
<div class="message has-text-centered p-lg is-info">
|
||||
<figure class="image m-l-a m-r-a m-t-sm m-b-sm">
|
||||
<img src="/images/easy.svg" class="landing-featue-image">
|
||||
</figure>
|
||||
<div class="message-body-y m-t-sm">
|
||||
<div class="subtitle">Easy to use</div>
|
||||
<div class="message-body-y m-t-lg">
|
||||
<div class="subtitle is-3">Easy to use</div>
|
||||
<p>
|
||||
Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your far away loved one.
|
||||
</p>
|
||||
|
|
@ -95,15 +96,9 @@ Seepur | Our Time together
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<section class="section m-b-diego">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<figure class="image is-5by4">
|
||||
<img src="/images/be-there.svg" alt="" srcset="">
|
||||
</figure>
|
||||
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<div class="title">Be There</div>
|
||||
<p>
|
||||
Make an actual impact on the child by creating shared memories. You will be surprised how engaged and comunicative a little child could be during active sessions.
|
||||
|
|
@ -111,24 +106,30 @@ Seepur | Our Time together
|
|||
</p>
|
||||
{{-- <a href="#" class="button m-t-md">More...</a> --}}
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
<figure class="image m-l-diego m-r-diego p-l-diego p-r-diego">
|
||||
<img src="/images/be-there.svg" alt="" srcset="">
|
||||
</figure>
|
||||
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="columns">
|
||||
<div class="column has-text-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<figure class="image m-l-diego m-r-diego p-l-diego p-r-diego">
|
||||
<img src="/images/build.svg" alt="" srcset="">
|
||||
</figure>
|
||||
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="title">Yours</div>
|
||||
<p>
|
||||
Seepur is all about you and the child. You can upload your own books and read together, create puzzles with your own photos and more!
|
||||
</p>
|
||||
{{-- <a href="#" class="button m-t-md">More...</a> --}}
|
||||
</div>
|
||||
<div class="column">
|
||||
<figure class="image is-5by4">
|
||||
<img src="/images/build.svg" alt="" srcset="">
|
||||
</figure>
|
||||
{{-- <small><a href="https://www.freepik.com/free-photos-vectors/health">Health vector created by freepik - www.freepik.com</a></small> --}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,17 +24,18 @@
|
|||
</div>
|
||||
|
||||
</section>
|
||||
<div class="hero hero-bg has-inner-shadow-top">
|
||||
<section class="section has-text-centered">
|
||||
<h1 class="title">Join Now</h1>
|
||||
<h2 class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</h2>
|
||||
<div class="hero is-light">
|
||||
<section class="section has-text-centered p-diego">
|
||||
<div class="title">Join Now</div>
|
||||
<div></div>
|
||||
<div class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</div>
|
||||
<form class="form register" method="POST" action="{{ route('register') }}" id="form-register">
|
||||
{{ csrfField() }}
|
||||
<nav class="level">
|
||||
<div class="field">
|
||||
<label class="label ">Name</label>
|
||||
{{-- <label class="label ">Name</label> --}}
|
||||
<div class="control has-icons-left">
|
||||
<input class="input {{ getErrorFor('name') ? 'is-danger' : ''}}" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
|
||||
<input class="input {{ getErrorFor('name') ? 'is-danger' : ''}} is-boarderless" required="true" name="name" type="text" placeholder="John Snow" value="{{ old('name', '') }}">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-id-card"></i>
|
||||
</span>
|
||||
|
|
@ -44,9 +45,9 @@
|
|||
|
||||
|
||||
<div class="field">
|
||||
<label class="label ">Email</label>
|
||||
{{-- <label class="label ">Email</label> --}}
|
||||
<div class="control has-icons-left">
|
||||
<input class="input {{ getErrorFor('email') ? 'is-danger' : ''}}" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
|
||||
<input class="input {{ getErrorFor('email') ? 'is-danger' : ''}} is-boarderless" name="email" required="true" type="email" placeholder="j.snow@thewall.com" value="{{ old('email', '') }}">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
|
|
@ -56,9 +57,9 @@
|
|||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label ">Password</label>
|
||||
{{-- <label class="label ">Password</label> --}}
|
||||
<div class="control has-icons-left">
|
||||
<input class="input {{ getErrorFor('password') ? 'is-danger' : ''}}" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
|
||||
<input class="input {{ getErrorFor('password') ? 'is-danger' : ''}} is-boarderless" id="txt-register-password" name="password" required="true" type="password" placeholder="password">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-lock"></i>
|
||||
</span>
|
||||
|
|
@ -66,9 +67,9 @@
|
|||
<p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
|
||||
</div>
|
||||
<div class="field m-b-xxs">
|
||||
<label class="label ">Confirm Password</label>
|
||||
{{-- <label class="label ">Confirm Password</label> --}}
|
||||
<div class="control has-icons-left">
|
||||
<input class="input" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
|
||||
<input class="input is-boarderless" type="password" id="txt-register-confirm-password" placeholder="confirm password" required="true">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-lock"></i>
|
||||
</span>
|
||||
|
|
@ -76,20 +77,19 @@
|
|||
<p class="help is-danger">{{ '' }}</p>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="level">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="chk-register-terms" name="terms">
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
<div class="is-inline-block">
|
||||
<div class="control m-b-sm">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="chk-register-terms" name="terms">
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
<p class="help is-danger">{{ getErrorFor('terms') ? getErrorFor('terms') : '' }}</p>
|
||||
<div class="control">
|
||||
<button id="btn-register-submit" class="button is-link" disabled="true">Submit</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="control is-inline-block">
|
||||
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@layout('layouts.main')
|
||||
|
||||
@section('page-title')
|
||||
Seepur| Login
|
||||
Seepur| Login
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
|
@ -22,7 +22,7 @@ Seepur| Login
|
|||
|
||||
<form class="form register" method="POST" action="{{ route('login') }}">
|
||||
{{ csrfField() }}
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Email</label>
|
||||
<div class="control has-icons-left">
|
||||
|
|
@ -33,7 +33,7 @@ Seepur| Login
|
|||
</div>
|
||||
<p class="help is-danger">{{ getErrorFor('email') ? getErrorFor('email') : '' }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control has-icons-left">
|
||||
|
|
@ -44,14 +44,14 @@ Seepur| Login
|
|||
</div>
|
||||
<p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link">Submit</button>
|
||||
<button class="button is-rounded is-info">Submit</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-link is-light" href='/'>Cancel</a>
|
||||
<a class="button is-rounded is-outlined is-rounded" href='/'>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -63,4 +63,4 @@ Seepur| Login
|
|||
<a href="#">Help, I forgot my password!</a>
|
||||
</small>
|
||||
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -75,10 +75,10 @@ Seepur| Register
|
|||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button id="btn-register-submit" class="button is-link" disabled="true">Submit</button>
|
||||
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-link is-light" href='/'>Cancel</a>
|
||||
<a class="button is-outlined is-rounded" href='/'>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in a new issue