huncholanesocials bar looks nice
huncholane4 files changed, +67 -0
+2-0twench_landing_page/app/page.tsx
| @@ -6,6 +6,7 @@ import Header from "@/components/Header"; | ||
| 6 | 6 | import LandingSection from "@/components/LandingSection"; |
| 7 | 7 | import MotivationSection from "@/components/MotivationSection"; |
| 8 | 8 | import RoadMapSection from "@/components/RoadMapSection"; |
| 9 | +import SocialBar from "@/components/SocialBar"; | |
| 9 | 10 | import VideoSection from "@/components/VideoSection"; |
| 10 | 11 | |
| 11 | 12 | export default function Home() { |
| @@ -20,6 +21,7 @@ export default function Home() { | ||
| 20 | 21 | <BuySection /> |
| 21 | 22 | <RoadMapSection /> |
| 22 | 23 | <FinalArtSection /> |
| 24 | + <SocialBar /> | |
| 23 | 25 | </div> |
| 24 | 26 | ); |
| 25 | 27 | } |
+45-0twench_landing_page/components/SocialBar/SocialBar.css
| @@ -0,0 +1,45 @@ | ||
| 1 | +.SocialBar { | |
| 2 | + @apply w-screen h-[50px] flex justify-center items-center gap-3 bg-white; | |
| 3 | +} | |
| 4 | + | |
| 5 | +.Twitter { | |
| 6 | + background: url("/images/socials/twitter.png") no-repeat center center; | |
| 7 | + background-size: 50%; | |
| 8 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 9 | + box-shadow: 4px 4px 0px black; | |
| 10 | +} | |
| 11 | + | |
| 12 | +.Telegram { | |
| 13 | + background: url("/images/socials/telegram.png") no-repeat center center; | |
| 14 | + background-size: 50%; | |
| 15 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 16 | + box-shadow: 4px 4px 0px black; | |
| 17 | +} | |
| 18 | + | |
| 19 | +.Youtube { | |
| 20 | + background: url("/images/socials/youtube.png") no-repeat center center; | |
| 21 | + background-size: 50%; | |
| 22 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 23 | + box-shadow: 4px 4px 0px black; | |
| 24 | +} | |
| 25 | + | |
| 26 | +.Instagram { | |
| 27 | + background: url("/images/socials/instagram.png") no-repeat center center; | |
| 28 | + background-size: 50%; | |
| 29 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 30 | + box-shadow: 4px 4px 0px black; | |
| 31 | +} | |
| 32 | + | |
| 33 | +.TikTok { | |
| 34 | + background: url("/images/socials/tiktok.png") no-repeat center center; | |
| 35 | + background-size: 50%; | |
| 36 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 37 | + box-shadow: 4px 4px 0px black; | |
| 38 | +} | |
| 39 | + | |
| 40 | +.SoundCloud { | |
| 41 | + background: url("/images/socials/soundcloud.png") no-repeat center center; | |
| 42 | + background-size: 50%; | |
| 43 | + @apply size-[40px] my-auto hover:bg-primary border-black border-2 cursor-pointer; | |
| 44 | + box-shadow: 4px 4px 0px black; | |
| 45 | +} |
+18-0twench_landing_page/components/SocialBar/SocialBar.tsx
| @@ -0,0 +1,18 @@ | ||
| 1 | +import React from "react"; | |
| 2 | +import "./SocialBar.css"; | |
| 3 | + | |
| 4 | +const SocialBar: React.FC = () => { | |
| 5 | + return ( | |
| 6 | + <div className="SocialBar"> | |
| 7 | + <div className="Twitter"></div> | |
| 8 | + <div className="Telegram"></div> | |
| 9 | + <div className="Youtube"></div> | |
| 10 | + <div className="Instagram"></div> | |
| 11 | + <div className="TikTok"></div> | |
| 12 | + <div className="Instagram"></div> | |
| 13 | + <div className="SoundCloud"></div> | |
| 14 | + </div> | |
| 15 | + ); | |
| 16 | +}; | |
| 17 | + | |
| 18 | +export default SocialBar; |
+2-0twench_landing_page/components/SocialBar/index.ts
| @@ -0,0 +1,2 @@ | ||
| 1 | +import SocialBar from './SocialBar'; | |
| 2 | +export default SocialBar; |