diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 28ebc71..30e16f0 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -5,4 +5,26 @@
html, body {
width: 100%;
height: 100%;
+ overflow-y: auto
}
+
+@layer base {
+ html {
+ @apply text-base font-quicksand;
+ }
+ h1 {
+ @apply text-4xl font-playfair-display font-bold;
+ }
+ h2 {
+ @apply text-3xl font-playfair-display;
+ }
+ h3 {
+ @apply text-2xl font-quicksand;
+ }
+ h4 {
+ @apply text-xl;
+ }
+ small {
+ @apply text-sm;
+ }
+}
\ No newline at end of file
diff --git a/frontend/app/layout.js b/frontend/app/layout.js
index 30c6d6d..476f8eb 100644
--- a/frontend/app/layout.js
+++ b/frontend/app/layout.js
@@ -1,6 +1,8 @@
import { Playfair_Display, Quicksand } from "next/font/google";
import "./globals.css";
+import Nav from "@/components/nav";
+import ContextProvider from "@/context/context";
const playfairDisplay = Playfair_Display({
subsets: ["latin-ext"],
@@ -20,11 +22,14 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
-
+
- {children}
+
+
+ {children}
+
);
diff --git a/frontend/app/page.js b/frontend/app/page.js
index 9cfa6e2..d702e99 100644
--- a/frontend/app/page.js
+++ b/frontend/app/page.js
@@ -1,11 +1,19 @@
-import Image from "next/image";
+"use client";
+import React from "react";
+
+import Searchbar from "@/components/searchbar";
export default function Home() {
return (
-
+
celebrating open source projects. discover projects that interest you!
-
+
+
+ making open source projects more discoverable. we set the standard for
+ collaboration, so you can focus on the projects you love
+
+
);
}
diff --git a/frontend/components/cards.js b/frontend/components/cards.js
new file mode 100644
index 0000000..6b15b05
--- /dev/null
+++ b/frontend/components/cards.js
@@ -0,0 +1,3 @@
+export default function Cards({ children }) {
+ return {children}
;
+}
diff --git a/frontend/components/nav.js b/frontend/components/nav.js
new file mode 100644
index 0000000..e552248
--- /dev/null
+++ b/frontend/components/nav.js
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function Nav() {
+ return (
+
+ );
+}
diff --git a/frontend/components/searchbar.js b/frontend/components/searchbar.js
new file mode 100644
index 0000000..df5ed37
--- /dev/null
+++ b/frontend/components/searchbar.js
@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import SearchbarContext from "@/context/searchbar";
+
+export default function Searchbar() {
+ const { searchTerm, setSearchTerm } = useContext(SearchbarContext);
+
+ function handleSearchbarChange(e) {
+ setSearchTerm(e.target.value);
+ }
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/frontend/context/context.js b/frontend/context/context.js
new file mode 100644
index 0000000..067ae92
--- /dev/null
+++ b/frontend/context/context.js
@@ -0,0 +1,14 @@
+"use client";
+
+import { SearchbarProvider } from "@/context/searchbar";
+
+const providers = [SearchbarProvider];
+
+/**
+ * This component is used to wrap the entire application with all the context providers.
+ */
+export default function ContextProvider({ children }) {
+ return providers.reduce((acc, Provider) => {
+ return {acc};
+ }, children);
+}
diff --git a/frontend/context/searchbar.js b/frontend/context/searchbar.js
new file mode 100644
index 0000000..f48f33b
--- /dev/null
+++ b/frontend/context/searchbar.js
@@ -0,0 +1,15 @@
+import React, { createContext, useState } from "react";
+
+const SearchbarContext = createContext();
+
+export function SearchbarProvider({ children }) {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default SearchbarContext;
diff --git a/frontend/package.json b/frontend/package.json
index 9a9afae..22a2f22 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,15 +9,15 @@
"lint": "next lint"
},
"dependencies": {
+ "next": "13.5.4",
"react": "^18",
- "react-dom": "^18",
- "next": "13.5.4"
+ "react-dom": "^18"
},
"devDependencies": {
"autoprefixer": "^10",
- "postcss": "^8",
- "tailwindcss": "^3",
"eslint": "^8",
- "eslint-config-next": "13.5.4"
+ "eslint-config-next": "13.5.4",
+ "postcss": "^8",
+ "tailwindcss": "^3"
}
}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index edd4fcd..2b7efc8 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,6 +12,15 @@ module.exports = {
quicksand: ["var(--font-quicksand)"],
},
},
+ fontSize: {
+ sm: "0.750rem",
+ base: " 1rem",
+ xl: "1.333rem",
+ "2xl": "1.777rem",
+ "3xl": "2.369rem",
+ "4xl": "3.158rem",
+ "5xl": "4.210rem",
+ },
colors: {
"mage-silver": "#E4DFE6",
"just-black": "#000000",