Technigo · cholpoun · Nov 4, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/index.html b/index.html
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>GRM Jul</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Schoolbell&display=swap" rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap"
+    rel="stylesheet">
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+    rel="stylesheet">
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,19 @@
+import { Footer } from "./components/Footer";
+import { Navigation } from "./components/Navigation";
+import { Header } from "./components/Header";
+import { TopInfo } from "./components/TopInfo";
+import AnimatedTextComponent from "./components/Animation";
+import CardComponent from "./components/Card";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <Navigation />
+      <Header />
+      <TopInfo />
+      <CardComponent />
+      <AnimatedTextComponent />
+      <Footer />
+    </>
+  );
 };
diff --git a/src/assets/HeaderImage.jpeg b/src/assets/HeaderImage.jpeg
diff --git a/src/assets/HeaderImage.svg b/src/assets/HeaderImage.svg
diff --git a/src/assets/Swishicon.svg b/src/assets/Swishicon.svg