KlineAccounts Landing Page

Kline Accounts is a company that specialises in premium accounts for reselling needs. Following a comprehensive consultation with the founder, we worked together to come up with an intricate landing page that closely represents their brand. An original mockup UI was provided which roughly mapped out what they wanted on this page and where they want it.

It was to my understanding that they wanted a singular long page, instead of multiple pages, with the key components included a nav bar, hero, testimonials, pricing list, FAQ, and Twitter page preview.

For the testimonials section, I have created a vertical reviews section where individual cards would infinitely rotate upwards and slowly fade when it becomes the top card.

                        
.cards .card {
    animation: animate 15s infinite linear;
    animation-delay: calc(3s * var(--delay));
}
    
.outer:hover .card {
    animation-play-state: paused;
}

.cards .card:last-child {
    animation-delay: calc(-3s * var(--delay));
}
    
@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
    }
    5%,
    20% {
        opacity: 0.4;
        transform: translateY(100%) scale(0.7);
    }
    25%,
    40% {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0%) scale(1);
    }
    45%,
    60% {
        opacity: 0;
        transform: translateY(-100%) scale(0.7);
    }
    65%,
    100% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
    }
}                    
                    

Instead of a collage or slider of success pictures with the products of Kline Accounts, I suggested to the client to integrate Twitter's Embedded Timeline which let's users view an account's tweets from their website. This is convenient as Kline Accounts already posts and retweets it's users' success stories and posts on their Twitter account, and adds a stylish touch to the end of the lannding page.

                        
<a class="twitter-timeline" data-width="600" data-height="700" data-theme="dark" href="https://twitter.com/KlineAccounts?ref_src=twsrc%5Etfw">Tweets by KlineAccounts</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                        
                    

Other small details of this website includes the animations used, when sections have been anchored to, from the Javascript library AOS (animate on scroll) and the ability to join their Discord server at a click of a button.

This project is open source and can be viewed using the steps I have provided on my github repository. The repository can be viewed here