--update: new website basic str

dsckiet · May 24, 2020 · 0d831ad · 0d831ad
1 parent f37858d
commit 0d831ad
Show file tree

Hide file tree

Showing 21 changed files with 6,053 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.next
 # dependencies
 /node_modules
 /.pnp

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+    "printWidth": 80,
+    "tabWidth": 4,
+    "useTabs": true,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "preserve"
+}
diff --git a/components/Header.js b/components/Header.js
@@ -0,0 +1,64 @@
+import React from "react";
+// import { func, string } from "prop-types";
+import styled from "styled-components";
+import Link from "next/link";
+import Lottie from "react-lottie";
+import animationData from "../public/static/images/lf30_editor_qQ1FOd.json";
+
+const Heading = styled.h2`
+	font-family: Sen;
+	font-weight: 700;
+	color: #424242;
+	margin-top: 120px;
+`;
+
+const SubText = styled.p`
+	font-family: Sen;
+	font-size: 18px;
+	color: #707070;
+	margin-top: 16px;
+`;
+
+const Button = styled.button`
+	font-family: Sen;
+	margin-top: 16px;
+	font-weight: 700;
+	padding: 8px 32px;
+	border-radius: 4px;
+	background: #4285f4;
+	border: none;
+	font-size: 16px;
+	color: #fff;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.2);
+`;
+
+const Header = ({ theme, toggleTheme }) => {
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationData,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice"
+		}
+	};
+	return (
+		<div className="container">
+			<div className="row mt-5">
+				<div className="col-lg-1"></div>
+				<div className="col-lg-5">
+					<Heading>
+						Developer Student Clubs KIET Group of Institutions
+					</Heading>
+					<SubText>powered by Google Developers</SubText>
+					<Button>Become a member</Button>
+				</div>
+				<div className="col-lg-5">
+					<Lottie options={defaultOptions} height={400} width={400} />
+				</div>
+				<div className="col-lg-1"></div>
+			</div>
+		</div>
+	);
+};
+
+export default Header;
diff --git a/components/Layout.js b/components/Layout.js
@@ -0,0 +1,24 @@
+import Head from "next/head";
+import Navbar from "./Navbar";
+
+const Layout = props => (
+	<div>
+		<Head>
+			<title>DSC KIET</title>
+			<link
+				rel="stylesheet"
+				href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+				integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+				crossorigin="anonymous"
+			/>
+			<link
+				href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
+				rel="stylesheet"
+			></link>
+		</Head>
+		<Navbar />
+		<div className="container">{props.children}</div>
+	</div>
+);
+
+export default Layout;
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -0,0 +1,146 @@
+import React from "react";
+import { func, string } from "prop-types";
+import styled from "styled-components";
+import Link from "next/link";
+const Container = styled.nav`
+	color: ${({ theme }) => theme.text} !important;
+	background-color: ${({ theme }) => theme.body};
+	margin-bottom: 1.45rem;
+`;
+
+const Nav = styled.nav`
+	font-family: Sen;
+`;
+
+const Navbar = ({ theme, toggleTheme }) => {
+	return (
+		<Nav
+			className="navbar navbar-expand-lg navbar-light"
+			style={{ boxShadow: "0px 1px 2px rgba(0,0,0,0.2)" }}
+		>
+			<div className="container">
+				<a
+					href="/"
+					style={{ fontWeight: "600" }}
+					className="nav-link navbar-brand"
+				>
+					<img
+						className="img-fluid mb-1"
+						src="static/images/logo.png"
+						alt="logo"
+						width="45"
+					/>{" "}
+					DSC KIET
+				</a>
+
+				<button
+					className="navbar-toggler"
+					type="button"
+					data-toggle="collapse"
+					data-target="#navbarSupportedContent"
+					aria-controls="navbarSupportedContent"
+					aria-expanded="false"
+					aria-label="Toggle navigation"
+				>
+					<span className="navbar-toggler-icon"></span>
+				</button>
+
+				<div
+					className="collapse navbar-collapse"
+					id="navbarSupportedContent"
+				>
+					<ul
+						className="navbar-nav mr-auto nav justify-content-end"
+						style={{ width: "100%" }}
+					>
+						<li
+							className="nav-item m-1 "
+							style={{ fontWeight: "600" }}
+						>
+							<Link href="/">
+								<a
+									to="/"
+									style={{ fontWeight: "600" }}
+									className="nav-link"
+									exact
+									activeClassName="active"
+								>
+									Home
+								</a>
+							</Link>
+						</li>
+						<li
+							className="nav-item m-1"
+							style={{ fontWeight: "600" }}
+						>
+							<Link href="/events">
+								<a
+									to="/events"
+									style={{ fontWeight: "600" }}
+									className="nav-link"
+									activeClassName="active"
+								>
+									Events
+								</a>
+							</Link>
+						</li>
+
+						<li
+							className="nav-item m-1"
+							style={{ fontWeight: "600" }}
+						>
+							<Link href="/about">
+								<a
+									to="/about"
+									style={{ fontWeight: "600" }}
+									className="nav-link"
+									activeClassName="active"
+								>
+									About
+								</a>
+							</Link>
+						</li>
+
+						<li
+							className="nav-item m-1"
+							style={{ fontWeight: "600" }}
+						>
+							<Link href="/team">
+								<a
+									to="/team"
+									style={{ fontWeight: "600" }}
+									className="nav-link"
+									activeClassName="active"
+								>
+									Team
+								</a>
+							</Link>
+						</li>
+						<li
+							className="nav-item m-1"
+							style={{ fontWeight: "600" }}
+						>
+							<Link href="/contact">
+								<a
+									to="/contact"
+									style={{ fontWeight: "600" }}
+									className="nav-link"
+									activeClassName="active"
+								>
+									Contact
+								</a>
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</Nav>
+	);
+};
+
+// Navbar.propTypes = {
+//   theme: string.isRequired,
+//   toggleTheme: func.isRequired,
+// };
+
+export default Navbar;
diff --git a/components/Prices.js b/components/Prices.js
@@ -0,0 +1,58 @@
+class Prices extends React.Component {
+	state = {
+		currency: "USD"
+	};
+
+	render() {
+		let list = "";
+
+		if (this.state.currency === "USD") {
+			list = (
+				<li className="list-group-item">
+					Bitcoin rate for {this.props.bpi.USD.description} :{" "}
+					<span className="badge badge-primary">
+						{this.props.bpi.USD.code}
+					</span>{" "}
+					+ <strong>{this.props.bpi.USD.rate}</strong>
+				</li>
+			);
+		} else if (this.state.currency === "GBP") {
+			list = (
+				<li className="list-group-item">
+					Bitcoin rate for {this.props.bpi.GBP.description} :{" "}
+					<span className="badge badge-primary">
+						{this.props.bpi.GBP.code}
+					</span>{" "}
+					<strong>{this.props.bpi.GBP.rate}</strong>
+				</li>
+			);
+		} else if (this.state.currency === "EUR") {
+			list = (
+				<li className="list-group-item">
+					Bitcoin rate for {this.props.bpi.EUR.description} :{" "}
+					<span className="badge badge-primary">
+						{this.props.bpi.EUR.code}
+					</span>{" "}
+					<strong>{this.props.bpi.EUR.rate}</strong>
+				</li>
+			);
+		}
+
+		return (
+			<div>
+				<ul className="list-group">{list}</ul>
+				<br />
+				<select
+					onChange={e => this.setState({ currency: e.target.value })}
+					className="form-control"
+				>
+					<option value="USD">USD</option>
+					<option value="GBP">GBP</option>
+					<option value="EUR">EUR</option>
+				</select>
+			</div>
+		);
+	}
+}
+
+export default Prices;
diff --git a/components/navbar.module.css b/components/navbar.module.css
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "dsckiet-website",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "next": "^9.4.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-lottie": "^1.2.3",
+    "styled-components": "^5.1.0"
+  }
+}
diff --git a/pages/1_app.js b/pages/1_app.js
@@ -0,0 +1,5 @@
+// import "bootstrap/dist/css/bootstrap.min.css";
+
+// export default function MyApp({ Component, pageProps }) {
+// 	return <Component {...pageProps} />;
+// }
diff --git a/pages/about.js b/pages/about.js
@@ -0,0 +1,17 @@
+import Layout from "../components/Layout";
+
+const About = () => (
+	<Layout>
+		<div>
+			<h1>About us</h1>
+			<p>
+				Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi
+				alias saepe voluptatibus officiis corporis nihil ipsa fuga,
+				soluta, nesciunt expedita et fugiat! Rerum reiciendis at magnam,
+				molestiae earum hic fuga.
+			</p>
+		</div>
+	</Layout>
+);
+
+export default About;
diff --git a/pages/index.js b/pages/index.js
@@ -0,0 +1,23 @@
+import Layout from "../components/Layout";
+import Header from "../components/Header";
+
+const Index = props => (
+	<Layout>
+		<div>
+			<Header />
+			{/* <Prices bpi={props.bpi} /> */}
+		</div>
+	</Layout>
+);
+
+// Index.getInitialProps = async function () {
+// 	const res = await Fetch(
+// 		"https://api.coindesk.com/v1/bpi/currentprice.json"
+// 	);
+// 	const data = await res.json();
+// 	return {
+// 		bpi: data.bpi
+// 	};
+// };
+
+export default Index;
diff --git a/public/static/images/favicon.ico b/public/static/images/favicon.ico
diff --git a/public/static/images/lf30_editor_qQ1FOd.json b/public/static/images/lf30_editor_qQ1FOd.json
diff --git a/public/static/images/logo.png b/public/static/images/logo.png
diff --git a/public/static/images/side.gif b/public/static/images/side.gif
diff --git a/public/static/images/sideimg.jpeg b/public/static/images/sideimg.jpeg
diff --git a/public/static/images/slack-2.svg b/public/static/images/slack-2.svg