Tuned Notify Landing Page

Tuned Notify is an Australian sneaker community providing the latest information related to reselling sneakers, electronics, collectibles & anything in between. The owner Filip approach me to redesign and code their landing page, formulating a visual that better suits the business's image.

Key sections that he asked for was an eye catching hero, traffic to their success page, perks layout, testimonials, and FAQs.

For each icon used, I implemented a transition that pulls the icon in from the right side as well as give it a "hover bounce" effect using CSS. This can be seen in the succes, and perks sections, where I created a infinite linear attribute that moves the image up and down.

                        
@keyframes MoveUpDown {
    0%,to{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    50%{
        -webkit-transform:translateY(-15px);
        transform:translateY(-15px)
    }
}
                        
.keyM {
    display:none;
    -webkit-animation:MoveUpDown 1.9s linear infinite;
    animation:MoveUpDown 1.9s linear infinite;
    display:block!important
}

.keyD {
    -webkit-animation:MoveUpDown 1.9s linear infinite;
    animation:MoveUpDown 1.9s linear infinite;
    display:none!important
}
                    

For the perks section, I went for a layout that summarised all the amazing features that this community offers in an engaging way. Keeping in mind the different media queries, I went for a 3x3 grid for desktops, 2x4 grid for tablets and 1x8 grid for mobile.

Communication was kept close with Filip to decide on titles and descriptions for each feature that Tuned Notify offers, as well as selecting the right icons that was derived from the icon library Iconic.

For the FAQs section, I decided on using an accordian from the component library DaisyUI, consisting of 3 components for each FAQ; checkbox, collapsible title, collapsible content.

This method of fulfilling the idea of "Frequently Asked Questions" was chosen because it is clutter-free, stylish and easily accessible for everyone to utilise.

                    
<input type="checkbox" name="my-accordion-2" checked="checked"/> 
<div class="collapse-title">
    Question
</div>
<div class="collapse-content"> 
    <p>Answer</p>
</div>