sagi/seepur
sagi/seepur
Archived
1
0
Fork 1
Code Issues 1 Pull requests Releases Wiki Activity

changes that diego wanted to landing page

Browse source
This commit is contained in:
Sagi Dayan 2020-05-06 20:02:18 -04:00
parent 30e48960d0
commit 9a6e6226b8
8 changed files with 899 additions and 290 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1025
public/style.css
View file

File diff suppressed because it is too large Load diff

15
resources/sass/main.scss
View file

@ -5,8 +5,9 @@
@import './mixins.scss'; @import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass"; @import "../../node_modules/bulma/bulma.sass";
// @import '../../node_modules/animate.css/source/_base.css'; // @import '../../node_modules/animate.css/source/_base.css';
.navbar { nav.navbar {
background:#fafafa; padding-left: 5rem;
padding-right: 5rem;
} }
.hero-bg{ .hero-bg{
// @include pattern(#c0ebfa, #7FD7F5); // @include pattern(#c0ebfa, #7FD7F5);
@ -21,7 +22,7 @@
// background-repeat: no-repeat; // background-repeat: no-repeat;
} }
.landing-featue-image{ .landing-featue-image{
max-height: 128px !important; max-height: 180px !important;
width: auto; width: auto;
object-fit: contain; object-fit: contain;
z-index: 0; z-index: 0;
@ -75,6 +76,7 @@ $sizes: (
('lg', 2), ('lg', 2),
('xl', 4), ('xl', 4),
('xxl', 8), ('xxl', 8),
('diego', 6.25),
); );
$positions: ( $positions: (
('t', 'top'), ('t', 'top'),
@ -307,3 +309,10 @@ video{
opacity: 0; opacity: 0;
transform: translate(-2em, 0); transform: translate(-2em, 0);
} }
.has-diego-width-800{
max-width: 50rem;
}
.is-boarderless{
border: none;
}

14
resources/sass/variables.scss
View file

@ -1,9 +1,11 @@
// Update Bulma's global variables // Update Bulma's global variables
// $family-sans-serif: "Nunito", sans-serif; // $family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown; // $grey-dark: $brown;
$grey-light: $beige-light; // $grey-light: $beige-light;
$primary: $purple; // $primary: $purple;
// $primary: #7FD7F5; // $primary: #7FD7F5;
$link: $pink; // $link: $pink;
$widescreen-enabled: false; // $widescreen-enabled: false;
$fullhd-enabled: false; // $fullhd-enabled: false;
$navbar-height: 5rem;

4
resources/views/components/nav/nav.edge
View file

@ -49,10 +49,10 @@
@else @else
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a class="button is-primary" href='/register'> <a class="button is-info is-rounded" href='/register'>
<strong>Sign up</strong> <strong>Sign up</strong>
</a> </a>
<a class="button is-light" href='/login'> <a class="button is-rounded is-transparent is-outlined" href='/login'>
Log in Log in
</a> </a>
</div> </div>

65
resources/views/landing.edge
View file

@ -4,7 +4,7 @@
Seepur | Our Time together Seepur | Our Time together
@endsection @endsection
@section('hero') @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) @!component('components.nav.nav', isLanding = false, auth=auth)
<div class="hero-body"> <div class="hero-body">
<div class="container"> <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 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> </h2>
<div class="buttons"> <div class="buttons">
<a class="button is-primary" href="/register">Sign Up</a> <a class="button is-info is-rounded" href="/register">Sign Up</a>
<a class="button is-link" href='/login'>Log In</a> <a class="button is-rounded is-transparent is-outlined" href='/login'>Log In</a>
</div> </div>
</div> </div>
<div class="column is-half "> <div class="column is-half ">
@ -35,28 +35,29 @@ Seepur | Our Time together
@endsection @endsection
@section('content') @section('content')
<section class="section"> <section class="section m-b-diego">
<div class="container has-text-centered"> <div class="container has-text-centered">
<h1 class="title">Being far, but never apart</h1> <h1 class="title is-1">Being far, but never apart</h1>
<p> <h3 class="subtitle is-3">Not just a video call</h3>
Not just a video call. Choose one of the fun activities Seepur offers and start making the most out of your time together! <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> <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. 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> </p>
{{-- <a href="#" class="button m-t-md">More...</a> --}} {{-- <a href="#" class="button m-t-md">More...</a> --}}
</div> </div>
</section> </section>
{{-- 3 Important feature bloks --}} {{-- 3 Important feature bloks --}}
<section> <section class="section m-b-diego">
<div class="columns"> <div class="columns">
<div class="column is-flex"> <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"> <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/shield.svg" class="landing-featue-image"> <img src="/images/shield.svg" class="landing-featue-image">
</figure> </figure>
<div class="message-body-y m-t-sm"> <div class="message-body-y m-t-lg">
<div class="subtitle">Secure</div> <div class="subtitle is-3">Secure</div>
<p> <p>
Using the best practices and security messures to protect all. Using the best practices and security messures to protect all.
</p> </p>
@ -65,12 +66,12 @@ Seepur | Our Time together
</div> </div>
</div> </div>
<div class="column is-flex"> <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"> <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/coding.svg" class="landing-featue-image"> <img src="/images/coding.svg" class="landing-featue-image">
</figure> </figure>
<div class="message-body-y m-t-sm"> <div class="message-body-y m-t-lg">
<div class="subtitle">Open Source</div> <div class="subtitle is-3">Open Source</div>
<p> <p>
Seepur is an open source project Seepur is an open source project
</p> </p>
@ -80,12 +81,12 @@ Seepur | Our Time together
</div> </div>
</div> </div>
<div class="column is-flex"> <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"> <figure class="image m-l-a m-r-a m-t-sm m-b-sm">
<img src="/images/easy.svg" class="landing-featue-image"> <img src="/images/easy.svg" class="landing-featue-image">
</figure> </figure>
<div class="message-body-y m-t-sm"> <div class="message-body-y m-t-lg">
<div class="subtitle">Easy to use</div> <div class="subtitle is-3">Easy to use</div>
<p> <p>
Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your far away loved one. Seepur wasn’t built for tech savvy users. Simply click your chosen activity and connect directly to your far away loved one.
</p> </p>
@ -95,15 +96,9 @@ Seepur | Our Time together
</div> </div>
</section> </section>
<section class="section"> <section class="section m-b-diego">
<div class="columns"> <div class="columns">
<div class="column"> <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> <div class="title">Be There</div>
<p> <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. 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> </p>
{{-- <a href="#" class="button m-t-md">More...</a> --}} {{-- <a href="#" class="button m-t-md">More...</a> --}}
</div> </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> </div>
</section> </section>
<section class="section"> <section class="section">
<div class="columns"> <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> <div class="title">Yours</div>
<p> <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! 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> </p>
{{-- <a href="#" class="button m-t-md">More...</a> --}} {{-- <a href="#" class="button m-t-md">More...</a> --}}
</div> </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> </div>
</section> </section>

46
resources/views/layouts/landing.edge
View file

@ -24,17 +24,18 @@
</div> </div>
</section> </section>
<div class="hero hero-bg has-inner-shadow-top"> <div class="hero is-light">
<section class="section has-text-centered"> <section class="section has-text-centered p-diego">
<h1 class="title">Join Now</h1> <div class="title">Join Now</div>
<h2 class="subtitle">It takes less then a minute. You could have been done by now, but you are still reading...</h2> <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"> <form class="form register" method="POST" action="{{ route('register') }}" id="form-register">
{{ csrfField() }} {{ csrfField() }}
<nav class="level"> <nav class="level">
<div class="field"> <div class="field">
<label class="label ">Name</label> {{-- <label class="label ">Name</label> --}}
<div class="control has-icons-left"> <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"> <span class="icon is-small is-left">
<i class="fa fa-id-card"></i> <i class="fa fa-id-card"></i>
</span> </span>
@ -44,9 +45,9 @@
<div class="field"> <div class="field">
<label class="label ">Email</label> {{-- <label class="label ">Email</label> --}}
<div class="control has-icons-left"> <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"> <span class="icon is-small is-left">
<i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i>
</span> </span>
@ -56,9 +57,9 @@
</div> </div>
<div class="field"> <div class="field">
<label class="label ">Password</label> {{-- <label class="label ">Password</label> --}}
<div class="control has-icons-left"> <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"> <span class="icon is-small is-left">
<i class="fa fa-lock"></i> <i class="fa fa-lock"></i>
</span> </span>
@ -66,9 +67,9 @@
<p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p> <p class="help is-danger">{{ getErrorFor('password') ? getErrorFor('password') : '' }}</p>
</div> </div>
<div class="field m-b-xxs"> <div class="field m-b-xxs">
<label class="label ">Confirm Password</label> {{-- <label class="label ">Confirm Password</label> --}}
<div class="control has-icons-left"> <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"> <span class="icon is-small is-left">
<i class="fa fa-lock"></i> <i class="fa fa-lock"></i>
</span> </span>
@ -76,20 +77,19 @@
<p class="help is-danger">{{ '' }}</p> <p class="help is-danger">{{ '' }}</p>
</div> </div>
</nav> </nav>
<nav class="level"> <div class="is-inline-block">
<div class="field is-grouped"> <div class="control m-b-sm">
<div class="control"> <label class="checkbox">
<label class="checkbox"> <input type="checkbox" id="chk-register-terms" name="terms">
<input type="checkbox" id="chk-register-terms" name="terms"> I agree to the <a href="#">terms and conditions</a>
I agree to the <a href="#">terms and conditions</a>
</label>
<p class="help is-danger">{{ getErrorFor('terms') ? getErrorFor('terms') : '' }}</p> <p class="help is-danger">{{ getErrorFor('terms') ? getErrorFor('terms') : '' }}</p>
<div class="control"> </label>
<button id="btn-register-submit" class="button is-link" disabled="true">Submit</button>
</div>
</div> </div>
<div class="control is-inline-block">
<button id="btn-register-submit" class="button is-info is-rounded" disabled="true">Submit</button>
</div>
</div> </div>
</nav>
</form> </form>
</section> </section>

4
resources/views/login.edge
View file

@ -48,10 +48,10 @@ Seepur| Login
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<button class="button is-link">Submit</button> <button class="button is-rounded is-info">Submit</button>
</div> </div>
<div class="control"> <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>
</div> </div>
</form> </form>

4
resources/views/register.edge
View file

@ -75,10 +75,10 @@ Seepur| Register
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <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>
<div class="control"> <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>
</div> </div>
</form> </form>