Skip to content

Commit 239feb0

Browse files
jsvigneshkannajsvigneshkanna
authored
Merge pull request #200 from deepaksuthar40128/master
Added about us page
2 parents 4f01e37 + f90e4db commit 239feb0

File tree

3 files changed

+134
-2
lines changed

3 files changed

+134
-2
lines changed

‎components/aboutUs.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
import { useState, useEffect } from "react";
3+
import { BallTriangle } from "react-loader-spinner";
4+
import Link from "next/link";
5+
6+
const AboutUs = () => {
7+
const [loading, setloading] = useState(true);
8+
useEffect(() => {
9+
setTimeout(() => {
10+
setloading(false);
11+
}, 600);
12+
}, []);
13+
fetch('https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors').then(res => res.json()).then(res => {
14+
if (document.getElementById('contributors').innerHTML == "") {
15+
for (var xx = 0; xx < res.length; xx++) {
16+
document.getElementById('contributors').innerHTML += ` <a href="${res[xx].url}" class=" overflow-hidden flex flex-col justify-evenly w-28 m-4"><img class="inline rounded-full"
17+
src="${res[xx].avatar_url}"
18+
alt=""/><span
19+
class="text-white"><div class="w-full text-center">${res[xx].login}</div></span></a>`
20+
}
21+
}
22+
})
23+
return (
24+
<div>
25+
{loading ? (
26+
<div
27+
style={{
28+
height: "100vh",
29+
backgroundColor: "rgba(0,0,0,0.99)",
30+
display: "flex",
31+
justifyContent: "center",
32+
}}
33+
className="banner">
34+
<BallTriangle
35+
height="100"
36+
width="100"
37+
color="#e39a09"
38+
ariaLabel="loading"
39+
/>
40+
</div>
41+
) : (
42+
<div className="banner">
43+
<div>
44+
<div class="w-full flex justify-evenly flex-wrap">
45+
<div class="w-5/12 my-5 p-2 m border-white border-2 rounded">
46+
<p class="w-full text-xl text-white">Our website motivation</p>
47+
<hr class="bg-white" />
48+
<p class="w-full text-white">We do know tailwind css is an emerging CSS framework which makes
49+
our website/ app unique without styling compared to
50+
other market bootstraps.</p>
51+
52+
</div>
53+
<div class="w-5/12 my-5 p-2 m border-white border-2 rounded">
54+
<p class="w-full text-xl text-white">Solution we are providing</p>
55+
<hr class="bg-white" />
56+
<p class="w-full text-white">You can get almost all layouts and components built under Tailwind
57+
CSS, and the best part is we can play around with them
58+
in inbuilt code editor and copy the codebase too for your projects.</p>
59+
</div>
60+
</div>
61+
<div>
62+
<div>
63+
<p class=" mt-8 ml-10 text-xl text-white">Our contributers:</p>
64+
65+
<div class="p-6 px-5 overflow-auto ">
66+
<div id="contributors" class="overflow-auto whitespace-nowrap w-auto flex flex-wrap justify-evenly border-white border-2 rounded">
67+
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
)}
75+
</div>
76+
);
77+
};
78+
79+
export default AboutUs;

‎components/navbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Navbar = () => {
3838
<Link href="/">Documentation</Link>
3939
</div>
4040
<div className="nav_links">
41-
<Link href="/">About Us</Link>
41+
<Link href="/aboutUs">About Us</Link>
4242
</div>
4343
</div>
4444
<div className="flex sm:hidden hamburger" onClick={showMenu}>
@@ -53,7 +53,7 @@ const Navbar = () => {
5353
<Link href="/">Documentation</Link>
5454
</div>
5555
<div className="nav_links">
56-
<Link href="/">About Us</Link>
56+
<Link href="/aboutUs">About Us</Link>
5757
</div>
5858
</div>
5959
</div>

‎pages/aboutUs.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import Head from "next/head";
2+
3+
import Navbar from "../components/navbar";
4+
import AboutUs from "../components/aboutUs";
5+
import Footer from "../components/footer";
6+
import SocialButtons from "../components/socialbuttons";
7+
8+
export default function Home() {
9+
return (
10+
<>
11+
<Head>
12+
<title>Tailwind Bootstrap</title>
13+
<link rel="icon" href="/favi-tailwind.png" type="image/png" />
14+
<link
15+
rel="stylesheet"
16+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
17+
/>
18+
<meta name="title" content="Tailwind Bootstrap" />
19+
<meta name="description" content="TailwindCSS ui component bootstrap" />
20+
21+
<meta property="og:type" content="website" />
22+
<meta
23+
property="og:url"
24+
content="https://tailwindcsscomponents.vercel.app/"
25+
/>
26+
<meta property="og:title" content="Tailwind Bootstrap" />
27+
<meta
28+
property="og:description"
29+
content="TailwindCSS ui component bootstrap"
30+
/>
31+
32+
<meta
33+
property="twitter:url"
34+
content="https://tailwindcsscomponents.vercel.app/"
35+
/>
36+
<meta property="twitter:title" content="Tailwind Bootstrap" />
37+
<meta
38+
property="twitter:description"
39+
content="TailwindCSS ui component bootstrap"
40+
/>
41+
</Head>
42+
43+
<div className=" bg-slate-100 w-full min-h-screen font-poppins">
44+
<Navbar />
45+
<AboutUs />
46+
<div className="social_buttons">
47+
<SocialButtons />
48+
</div>
49+
<Footer />
50+
</div>
51+
</>
52+
);
53+
}

0 commit comments

Comments
 (0)