ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Fix Mobile Accordion

#33
Merged glennmichael123 wants to merge develop into staging
1 file +117 -32
src/views/Home.vuemodified+117-32
@@ -589,9 +589,9 @@ import AppFooter from "@/components/AppFooter.vue";
589589 >
590590 <div class="flex items-center justify-between">
591591 <div class="flex flex-col">
592 <h1 class="text-pink-nude text-caption font-sora">Variety</h1>
593 <h1 class="text-white text-body font-sora">
594 Over 200 attributes
592 <h1 class="text-pink-nude text-caption font-sora">Variety &amp; Popularity</h1>
593 <h1 class="text-white font-sora text-body-2">
594 7 Traits &amp; Over 50 Attributes
595595 </h1>
596596 </div>
597597 <button
@@ -611,12 +611,75 @@ import AppFooter from "@/components/AppFooter.vue";
611611 </button>
612612 </div>
613613 <p
614 v-if="accordion.variety"
614 v-show="accordion.variety"
615 class="mt-6 text-gray-4 font-sora text-body-2"
616 >
617 Creativity is our second name! We designed over 50 attributes
618 for our Hoodratz so that each and every one of them would be
619 beautiful and one-of-a-kind!
620 </p>
621 <p
622 v-show="accordion.variety"
623 class="mt-4 text-gray-4 font-sora text-body-2"
624 >
625 Aside from creating awesome tech &amp; art, we specialize in
626 building social communities. Whether it is
627 <a
628 href="https://www.instagram.com/earthpix/"
629 target="_blank"
630 class="text-gray-2 hover:text-gray-1"
631 >@earthpix</a
632 >
633 that Kyle founded or
634 <a
635 href="https://www.instagram.com/nakednfts/"
636 target="_blank"
637 class="text-gray-2 hover:text-gray-1"
638 >@NakedNFTs</a
639 >, we have scaled communities enormously.
640 </p>
641 </div>
642
643 <div
644 class="flex flex-col p-6 mt-5 bg-hoodratz-grey-7 rounded-3xl sm:w-full md:w-3/4"
645 >
646 <div class="flex items-center justify-between">
647 <div class="flex flex-col">
648 <h1 class="text-pink-nude font-sora text-caption">Free For 12 Months</h1>
649 <h1 class="text-white font-sora text-body-2">The First Decentralized File Manager</h1>
650 </div>
651 <button
652 v-if="!accordion.free"
653 @click.prevent="accordion.free = !accordion.free"
654 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
655 >
656 <img src="/images/home/chevron-down.svg" alt="" />
657 </button>
658
659 <button
660 v-else
661 @click.prevent="accordion.free = !accordion.free"
662 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
663 >
664 <img src="/images/home/chevron-up.svg" alt="" />
665 </button>
666 </div>
667 <p
668 v-show="accordion.free"
615669 class="mt-6 text-gray-4 font-sora text-body-2"
616670 >
617 Creativity is our second name! We designed over 200 attributes for
618 our Hoodratz so that each and every one of them would be amazing and
619 one-of-a-kind!
671 Think of <em>Dropbox for Web 3.</em> For the past two years, we
672 have been working on a custom file management experience &amp;
673 ecosystem that ensures a blazing fast "media delivery." Our
674 public launch is February 2022. Though, beta testers will
675 receive early access.
676 </p>
677 <p
678 v-show="accordion.free"
679 class="mt-3 italic text-gray-4 font-sora text-body-2"
680 >
681 Every holder will receive 12 months of service for free! This is
682 a value of at least 120 USD per year.
620683 </p>
621684 </div>
622685
@@ -625,12 +688,14 @@ import AppFooter from "@/components/AppFooter.vue";
625688 >
626689 <div class="flex items-center justify-between">
627690 <div class="flex flex-col">
628 <h1 class="text-pink-nude font-sora text-caption">Rarity</h1>
629 <h1 class="text-white font-sora text-body">4 rarity levels</h1>
691 <h1 class="text-pink-nude font-sora text-caption">Reduced Trading Fees</h1>
692 <h1 class="text-white font-sora text-body-2">
693 The First Cross-Chain NFT Marketplace
694 </h1>
630695 </div>
631696 <button
632 v-if="!accordion.rarity"
633 @click.prevent="accordion.rarity = !accordion.rarity"
697 v-if="!accordion.marketplace"
698 @click.prevent="accordion.marketplace = !accordion.marketplace"
634699 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
635700 >
636701 <img src="/images/home/chevron-down.svg" alt="" />
@@ -638,19 +703,35 @@ import AppFooter from "@/components/AppFooter.vue";
638703
639704 <button
640705 v-else
641 @click.prevent="accordion.rarity = !accordion.rarity"
706 @click.prevent="accordion.marketplace = !accordion.marketplace"
642707 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
643708 >
644709 <img src="/images/home/chevron-up.svg" alt="" />
645710 </button>
646711 </div>
647712 <p
648 v-if="accordion.rarity"
713 v-show="accordion.marketplace"
649714 class="mt-6 text-gray-4 font-sora text-body-2"
650715 >
651 Excepteur labore mollit esse minim ullamco cillum anim est ipsum.
652 Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet
653 reprehenderit dolor aliqua.
716 Our brand
717 <a
718 href="https://www.instagram.com/nakednfts/"
719 target="_blank"
720 class="text-gray-2 hover:text-gray-1"
721 >@NakedNFTs</a
722 >
723 is releasing an incredibly thoroughly designed &amp; architected
724 NFT marketplace on 12/12 as well, the day of our Hoodratz
725 launch! It will be our primary marketplace.
726 </p>
727 <p
728 v-show="accordion.marketplace"
729 class="mt-3 text-gray-4 font-sora text-body-2"
730 >
731 Not only will you, as a hodler, pay fewer taxes automatically,
732 but also get to experience history listing on the first
733 marketplace that will support Ethereum, Cardano, and Solana. The
734 more eyes, the more exposure.
654735 </p>
655736 </div>
656737
@@ -659,14 +740,14 @@ import AppFooter from "@/components/AppFooter.vue";
659740 >
660741 <div class="flex items-center justify-between">
661742 <div class="flex flex-col">
662 <h1 class="text-pink-nude font-sora text-caption">POPULARITY</h1>
743 <h1 class="text-pink-nude text-caption font-sora">Airdrops</h1>
663744 <h1 class="text-white font-sora text-body-2">
664 Amazing NFT community
745 Our creativity keeps creating
665746 </h1>
666747 </div>
667748 <button
668 v-if="!accordion.popularity"
669 @click.prevent="accordion.popularity = !accordion.popularity"
749 v-if="!accordion.airdrops"
750 @click.prevent="accordion.airdrops = !accordion.airdrops"
670751 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
671752 >
672753 <img src="/images/home/chevron-down.svg" alt="" />
@@ -674,19 +755,21 @@ import AppFooter from "@/components/AppFooter.vue";
674755
675756 <button
676757 v-else
677 @click.prevent="accordion.popularity = !accordion.popularity"
758 @click.prevent="accordion.airdrops = !accordion.airdrops"
678759 class="px-4 py-5 bg-hoodratz-grey-6 rounded-xl"
679760 >
680761 <img src="/images/home/chevron-up.svg" alt="" />
681762 </button>
682763 </div>
683764 <p
684 v-if="accordion.popularity"
765 v-show="accordion.airdrops"
685766 class="mt-6 text-gray-4 font-sora text-body-2"
686767 >
687 Excepteur labore mollit esse minim ullamco cillum anim est ipsum.
688 Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet
689 reprehenderit dolor aliqua.
768 Our "creative team" is one of the most qualified in the
769 industry. Join our Discord to find out more about our upcoming
770 cross-chain collection launches! Not only will we airdrop
771 several to hodlers but you are not going to want to miss those
772 mints, either.
690773 </p>
691774 </div>
692775
@@ -695,9 +778,9 @@ import AppFooter from "@/components/AppFooter.vue";
695778 >
696779 <div class="flex items-center justify-between">
697780 <div class="flex flex-col">
698 <h1 class="text-pink-nude text-caption font-sora">OUR MISSION</h1>
699 <h1 class="text-white text-body font-sora">
700 Helping charities worldwide
781 <h1 class="text-pink-nude text-caption font-sora">Giving Back</h1>
782 <h1 class="text-white font-sora text-body-2">
783 Helping good causes worldwide
701784 </h1>
702785 </div>
703786 <button
@@ -717,12 +800,14 @@ import AppFooter from "@/components/AppFooter.vue";
717800 </button>
718801 </div>
719802 <p
720 v-if="accordion.mission"
803 v-show="accordion.mission"
721804 class="mt-6 text-gray-4 font-sora text-body-2"
722805 >
723 Excepteur labore mollit esse minim ullamco cillum anim est ipsum.
724 Cillum consequat Lorem elit cillum cupidatat mollit et laboris amet
725 reprehenderit dolor aliqua.
806 Our passion and focus lies and lives on the intersection of
807 where technology meets humanity. We try to connect and improve
808 lives by leveraging our creative and technological skills by
809 working with educational &amp; environmental nonprofits all
810 throughout the world.
726811 </p>
727812 </div>
728813