Skip to content

Commit acc850a

Browse files
jsvigneshkannajsvigneshkanna
authored
Merge pull request #144 from javamultiplex/Issue#134
Added new component for social buttons
2 parents 572cf36 + 410c1ac commit acc850a

File tree

4 files changed

+70
-0
lines changed

4 files changed

+70
-0
lines changed

‎components/homebanner.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Image from "next/image";
33
import {useState, useRef, useEffect} from "react";
44
import {FaPrayingHands} from "react-icons/fa";
55
import {BallTriangle} from "react-loader-spinner";
6+
import SocialButtons from "./socialbuttons";
67

78
const Homebanner = () => {
89
const [loading, setloading] = useState(false);
@@ -55,6 +56,9 @@ const Homebanner = () => {
5556
<img src="/home_banner.png" alt="banner" />
5657
</div>
5758
</div>
59+
<div className="social_buttons">
60+
<SocialButtons />
61+
</div>
5862
</div>
5963
)}
6064
</div>

‎components/socialbuttons.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Link from "next/link";
2+
3+
const SocialButtons = () => {
4+
return (
5+
<div className="flex flex-row items-center justify-center">
6+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
7+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#4267B2]">
8+
<i className="fab fa-facebook-f text-2xl leading-[60px] transition-all ease-out text-white"></i>
9+
</div>
10+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#4267B2]">
11+
<Link href="#">Facebook</Link>
12+
</span>
13+
</div>
14+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
15+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#1DA1F2]">
16+
<i className="fab fa-twitter text-2xl leading-[60px] transition-all ease-out text-white"></i>
17+
</div>
18+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#1DA1F2]">
19+
<Link href="#">Twitter</Link>
20+
</span>
21+
</div>
22+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
23+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#E1306C]">
24+
<i className="fab fa-instagram text-2xl leading-[60px] transition-all ease-out text-white"></i>
25+
</div>
26+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#E1306C]">
27+
<Link href="#">Instagram</Link>
28+
</span>
29+
</div>
30+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
31+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#333]">
32+
<i className="fab fa-github text-2xl leading-[60px] transition-all ease-out text-white"></i>
33+
</div>
34+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#333]">
35+
<Link href="#">Github</Link>
36+
</span>
37+
</div>
38+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
39+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#ff0000]">
40+
<i className="fab fa-youtube text-2xl leading-[60px] transition-all ease-out text-white"></i>
41+
</div>
42+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#ff0000]">
43+
<Link href="#">YouTube</Link>
44+
</span>
45+
</div>
46+
<div className="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full float-left overflow-hidden cursor-pointer">
47+
<div className="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#0A66C2]">
48+
<i className="fab fa-linkedin text-2xl leading-[60px] transition-all ease-out text-white"></i>
49+
</div>
50+
<span className="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#0A66C2]">
51+
<Link href="#">Linkedin</Link>
52+
</span>
53+
</div>
54+
</div>
55+
);
56+
};
57+
58+
export default SocialButtons;

‎pages/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ export default function Home() {
99
<Head>
1010
<title>Tailwind Bootstrap</title>
1111
<link rel="icon" href="/favi-tailwind.png" type="image/png" />
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
15+
/>
1216
<meta name="title" content="Tailwind Bootstrap" />
1317
<meta name="description" content="TailwindCSS ui component bootstrap" />
1418

‎styles/components/homebanner.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
object-fit: contain;
5555
}
5656

57+
.social_buttons{
58+
padding-top: 100px;
59+
}
60+
5761
@media (max-width: 900px) {
5862
.banner {
5963
font-family: "poppins";

0 commit comments

Comments
 (0)