Skip to content

Commit

Permalink
Add dynamic testimonial and profile previews to landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmybisenius
jimmybisenius committed Feb 23, 2021
1 parent 03a3f0b commit 13cc74e
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 9 deletions.
8 changes: 6 additions & 2 deletions www/components/testimonial.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="w-12 h-12 rounded-full bg-gray-100 mr-4" :style="'background-position:center;background-repeat:no-repeat;background-size:cover;background-image:url(' + avatar + ')'"></div>
<div class="flex flex-col">
<span class="text-black font-semibold">{{ name }}</span>
<span class="text-sm text-gray-600 font-medium">@{{ handle }}</span>
<span class="text-sm text-gray-600 font-medium"><span v-if="at">@</span>{{ handle }}</span>
</div>
<img :src="'/' + platform + '.png'" class="mb-auto ml-auto w-4"/>
</div>
Expand All @@ -21,7 +21,11 @@ export default {
avatar: String,
content: String,
platform: String,
date: String
date: String,
at: {
type: Boolean,
default: true
}
}
};
</script>
6 changes: 3 additions & 3 deletions www/layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
</header>
<Nuxt class="interface" />
<footer class="interface">
<div class="flex-grow pb-20 flex flex-col text-center items-center justify-center" style="border-bottom: solid 5px rgba(0,0,100,.07);">
<h2 class="max-w-2xl mb-3">You're less than ten minutes away from more conversions.</h2>
<div class="flex-grow pb-20 flex flex-col text-center items-center justify-center">
<h2 class="max-w-2xl mb-3">You're less than ten minutes from your new micro-site</h2>
<p class="text-xl max-w-2xl mb-6">Our average user takes just under ten minutes from signup to site launch, and can expect a CTR of +50% instantly after publishing. It’s 100% free, no credit card required.</p>
<a class="text-center mb-8 w-full shadow-lg lg:w-auto font-bold text-white px-8 py-6 lg:py-5 rounded-lg purple-btn hover:bg-indigo-500" href="https://app.singlelink.co/create-account">Create your free Singlelink</a>
<div class="flex flex-col items-center justify-center relative rounded-lg shadow-lg mb-8 overflow-hidden w-full max-w-2xl video" style="height: 344px;background-image: url('/application-screenshot.png');background-repeat:no-repeat;background-position:center;background-size:cover;">
Expand All @@ -33,7 +33,7 @@
<a class="text-center w-full lg:w-auto text-sm font-medium text-gray-700 px-6 py-6 lg:py-5 rounded-lg bg-gray-400 hover:bg-gray-300" href="/gallery">View community examples</a>
</div>-->
</div>
<div class="flex-grow py-20 flex flex-col lg:flex-row items-start justify-center w-full space-y-8 lg:space-y-0 lg:space-x-8">
<div class="flex-grow py-20 flex flex-col lg:flex-row items-start justify-center w-full space-y-8 lg:space-y-0 lg:space-x-8" style="border-top: solid 5px rgba(0,0,100,.07);">
<div class="flex flex-col items-center text-center lg:text-left justify-center lg:justify-start lg:w-1/2">
<img class="lg:mr-auto mb-2" src="/singlelink-brandmark.svg"/>
<p class="text-sm font-medium leading-loose mb-1 text-gray-600">Simpler websites, better results.</p>
Expand Down
51 changes: 47 additions & 4 deletions www/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,12 @@
</section>

<section class="interface wide row mx-none">
<img style="max-width:468px;" class="w-full" src="/umberto-screenshot.png"/>
<div class="flex flex-col relative justify-start">
<div class="phone-display relative" style="right:50px; height:550px;">
<iframe class="w-full" id="preview-frame" src="https://singlel.ink/u/umberto" scrolling="no"/>
</div>
<testimonial :at="false" style="top:300px;" class="shadow absolute right-0" date="Dec 18, 2020" avatar="/adrenaline-hunter.png" platform="discord" name="Umberto Gnocchi" handle="CGI & Motion Design Artist" content="Thank you! What I like is that in 5 minutes I’ve configured everything."/>
</div>
<div class="flex flex-col lg:ml-12 flex-grow justify-start">
<h3>Getting online has never been easier</h3>
<p class="text-xl mb-8">Building your Singlelink takes just minutes, and publishing to your link or custom domain is instant. There’s no-code needed, and we have hundreds of available themes for you to choose from.</p>
Expand All @@ -25,11 +30,21 @@
<p class="text-xl mb-8">Building & customizing your Singlelink from top-to-bottom is easy with our optimized no-code builder. You can control every detail without code from your phone or desktop, and go further with available custom HTML & CSS if you choose.</p>
<a style="width:fit-content;" class="text-center shadow-lg lg:w-auto font-bold text-white px-8 py-6 lg:py-5 rounded-lg purple-btn hover:bg-indigo-500" href="https://app.singlelink.co/create-account">Create your free Singlelink</a>
</div>
<img style="max-width:468px;" class="w-full" src="/vibez-screenshot.png"/>
<div class="flex flex-col relative justify-start">
<div class="phone-display relative" style="left:50px;">
<iframe class="w-full" id="preview-frame" src="https://singlel.ink/u/Vibez" scrolling="no"/>
</div>
<testimonial :at="false" style="top:300px;" class="shadow absolute left-0" date="Jan 22, 2021" avatar="/vibez.png" platform="ph" name="VibeszCS" handle="Twitch Streamer" content="TL:DR: Doesn't get much better than this... Beginners can easily add links and colors & have a working landing page in less then five minutes.... Neutron Creative sure knows how to make a good program!"/>
</div>
</section>

<section class="interface wide row mx-none">
<img style="max-width:468px;" class="w-full" src="/remi-screenshot.png"/>
<div class="flex flex-col relative justify-start">
<div class="phone-display relative" style="right:50px;">
<iframe class="w-full" id="preview-frame" src="https://singlel.ink/u/remi" scrolling="no"/>
</div>
<testimonial :at="false" style="top:300px;" class="shadow absolute right-0" date="Feb 23, 2021" avatar="https://pbs.twimg.com/profile_images/1361677841654497281/Mys20SoV_400x400.jpg" platform="twitter" name="Rémi Carreiro" handle="Architectural Photographer" content="If you’re looking to set up a little landing page for yourself, check out @SingleLink. I stumbled across it while looking for alternatives to Linktree and couldn’t be happier with it."/>
</div>
<div class="flex flex-col lg:ml-12 flex-grow justify-start">
<h3>Scale to infinite heights instantly</h3>
<p class="text-xl mb-8">Never worry about downtime again. Singlelink is built-to-scale and has no traffic caps so you can go from zero to zeroes in minutes without outages, slowing, or an unexpected bill.</p>
Expand All @@ -51,9 +66,10 @@
</template>

<script>
import Testimonial from '../components/testimonial.vue';
import wallOfLove from '../components/wall-of-love.vue';
export default {
components: { wallOfLove },
components: { wallOfLove, Testimonial },
head: {
title: 'Singlelink - You don\'t need a website, you need a Singlelink 🔗🔥',
meta: [
Expand Down Expand Up @@ -199,4 +215,31 @@ import wallOfLove from '../components/wall-of-love.vue';
.video:hover {
box-shadow: inset 0 -1000px 0 0 rgba(0,0,0,.3);
}
.phone-display {
display: flex;
margin: 0 auto 0 0;
border-radius: 65px;
overflow: hidden;
background: linear-gradient(to bottom, #FFF, #EEE);
padding: 14px;
width: 375px;
/*height: 812px;*/
height: 600px;
transform: scale(.8);
box-shadow: inset 0 0 5px rgba(0,0,0,.25);
-webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
mask-image: linear-gradient(to bottom, black 4%, transparent 100%);
}
.phone-display > iframe {
border: none;
width: 348px;
height: 784px;
border-radius: 50px;
}
.phone-display > div {
border-radius: 50px;
}
</style>

0 comments on commit 13cc74e

Please sign in to comment.