diff --git a/.env b/.env
new file mode 100644
index 000000000..af519dbf4
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_aGVscGluZy1lbXUtMzMuY2xlcmsuYWNjb3VudHMuZGV2JA
\ No newline at end of file
diff --git a/index.html b/index.html
index 8bcc74021..915d9f13b 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,10 @@
Lama Dev Blog App
+ Skill Swap
+
Hello World
- )
+
+
+
+
+ );
}
-export default App
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/src/components/BasicInfoBox.jsx b/src/components/BasicInfoBox.jsx
new file mode 100644
index 000000000..3e66bb977
--- /dev/null
+++ b/src/components/BasicInfoBox.jsx
@@ -0,0 +1,24 @@
+const BasicInfoBox = () => {
+ return (
+
+ );
+};
+
+export default BasicInfoBox;
\ No newline at end of file
diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 000000000..5faebd1a1
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,58 @@
+.card-container {
+ margin-top: 10px;
+ width: 15rem;
+ border-radius: 1rem;
+ box-shadow: 0px 10px 8px #999;
+ display: flex;
+ flex-direction: column;
+ margin: 0.5rem;
+ background-color: white;
+ height: fit-content;
+}
+
+.card-img {
+ width: 100%;
+ border-radius: 1rem 1rem 0 0;
+}
+
+.card-title {
+ margin: 0.5rem 5%;
+}
+
+.card-description {
+ margin: 0.5rem 5%;
+ font-size: 1rem;
+ color: #333;
+ font-weight: normal;
+ margin-bottom: 5px;
+}
+.card-teach-skill {
+ margin: 0.5rem 5%;
+ font-size: 1rem;
+ color: #333;
+ font-weight: normal;
+ margin-bottom: 10px;
+
+}
+.card-btn {
+ text-align: center;
+ width: 90%;
+ border-radius: 5px;
+ padding: 0.5rem 1rem;
+ background-color: #2563eb;
+ color: white;
+ text-decoration: none;
+ margin: 0.5rem 0.5rem;
+}
+.App {
+ display: flex;
+ justify-content: center;
+ gap: 20px; /* Space between columns */
+ flex-wrap: wrap; /* Ensure columns wrap on smaller screens */
+}
+
+.col {
+ display: flex;
+ flex-direction: column;
+ gap: 20px; /* Space between cards in a column */
+}
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
new file mode 100644
index 000000000..c2633729d
--- /dev/null
+++ b/src/components/Card.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import "./Card.css";
+
+export const Card = ({
+ imgSrc,
+ imgAlt,
+ title,
+ description,
+ canTeach,
+ buttonText,
+ link,
+}) => {
+ return (
+
+ {imgSrc && imgAlt && (
+
+ )}
+ {title &&
{title} }
+ {description &&
{description}
}
+ {canTeach &&
{canTeach}
}
+ {buttonText && link && (
+
+ {buttonText}
+
+ )}
+
+ {/*Main title*/}
+
+
The Skill Exchange Platform
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+ {/*Feature row 1*/}
+
+
+
Feature 1
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+
+
Feature 2
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+
+ {/*Feature row 2*/}
+
+
+
Feature 3
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+
+
Feature 4
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+
+
+
+
+ {/* Logo and Name */}
+
+
SkillSwap
+
Empowering skill exchange worldwide
+
+
+ {/* Copyright */}
+
+ © {new Date().getFullYear()} SkillSwap. All rights reserved.
+
+
+
+ {/* Hero Section */}
+
+
+ {/*--------------Add the Search icon---------------------------------------------*/}
+ Start Swap
+
+
+ {/*Title*/}
+
+
SkillSwap
+
+
+ {/*This div contains the two main tabs.
+ flex is used to make them align in a row
+ gap of 5 px betweent the elements within the div
+ --------CAN REMOVE LATER --------------
+ padding on right and left sides of 5 px*/}
+
+
+
+
+ {/*Mobile menu
+
+
+
+
+
+ */}
+
+ {/* Main Profile Section */}
+
+
+
+
{/* Profile Image */}
+
Name: {profileData.name}
+
Location: {profileData.location}
+
Learn: {profileData.learn}
+
Can Teach: {profileData.canTeach}
+
+
+
+
+
+
+ {/* Profile Right Section */}
+
+ {/* Bio Section */}
+
+
Bio
+
{profileData.bio}
+
+
+ {/* Reviews Section */}
+
+
+
Review 1
+
"John simplifies complex topics, making them easy to understand. His enthusiasm and patience make learning enjoyable."
+
+
+
Review 2
+
"John ensures everyone understands the material. His practical examples helped me grasp web technologies better."
+
+
+
Review 3
+
"John is approachable and always willing to help. His teaching style creates a supportive environment for learning."
+
+
+
+
+
+
+ ★
+ ★
+ ★
+ ★
+ ★
+
+
John D
+
Review
+
+
+ );
+};
diff --git a/src/components/SkillInfoBox.jsx b/src/components/SkillInfoBox.jsx
new file mode 100644
index 000000000..29904c1a7
--- /dev/null
+++ b/src/components/SkillInfoBox.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SkillInfoBox = () => {
+ return (
+
+ );
+};
+
+export default SkillInfoBox;
diff --git a/src/index.css b/src/index.css
index bd6213e1d..656d8e7ba 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,11 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+body{
+ background-color: #ffffff;
+ width: 100%;
+ padding: 2%;
+ font-family: "Montserrat", sans-serif;
+}
+
diff --git a/src/layouts/MainLayout.jsx b/src/layouts/MainLayout.jsx
new file mode 100644
index 000000000..3a6f90c5b
--- /dev/null
+++ b/src/layouts/MainLayout.jsx
@@ -0,0 +1,16 @@
+import { Outlet } from "react-router-dom"
+import Navbar from "../components/Navbar"
+import Footer from "../components/Footer"
+const MainLayout = () => {
+ return(
+
+
+
+
+
+ )
+}
+
+export default MainLayout
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6dea..b475843b0 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,65 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
-import App from './App.jsx'
+import Homepage from './routes/Homepage.jsx';
+import Search from './routes/Search.jsx';
+import ProfileSetUp from './routes/ProfileSetUp.jsx';
+import Login from './routes/Login.jsx';
+import Register from './routes/Register.jsx';
+import {
+ createBrowserRouter,
+ RouterProvider,
+} from "react-router-dom";
+import MainLayout from './layouts/MainLayout.jsx';
+import { ClerkProvider } from '@clerk/clerk-react';
+import ViewProfile from './routes/ViewProfile.jsx';
+
+// Import your Publishable Key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+if (!PUBLISHABLE_KEY) {
+ throw new Error("Missing Publishable Key")
+}
+
+
+const router = createBrowserRouter([
+ {
+ element:
-
+
+
,
)
diff --git a/src/routes/Homepage.jsx b/src/routes/Homepage.jsx
new file mode 100644
index 000000000..5cafef85a
--- /dev/null
+++ b/src/routes/Homepage.jsx
@@ -0,0 +1,32 @@
+import HeroSection from "../components/HeroSection"
+import Categories from "../components/Categories"
+import Features from "../components/Features"
+import Review from "../components/Review"
+
+
+const Homepage = () => {
+ return(
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Login
\ No newline at end of file
diff --git a/src/routes/ProfileSetUp.jsx b/src/routes/ProfileSetUp.jsx
new file mode 100644
index 000000000..a0235b881
--- /dev/null
+++ b/src/routes/ProfileSetUp.jsx
@@ -0,0 +1,32 @@
+
+import BasicInfoBox from "../components/BasicInfoBox.jsx"
+import ProfileInfoBox from "../components/ProfileInfoBox.jsx"
+import SkillInfoBox from "../components/SkillInfoBox.jsx"
+
+
+const ProfileSetUp = ({onSubmit,onPreview}) => {
+ return(
+
+
+
+
+
+
+ Submit
+
+
+ Preview
+
+
+
+
+
+ );
+};
+
+export default Register;
diff --git a/src/routes/Search.jsx b/src/routes/Search.jsx
new file mode 100644
index 000000000..8260644f1
--- /dev/null
+++ b/src/routes/Search.jsx
@@ -0,0 +1,112 @@
+
+import { SearchBar } from '../components/SearchBar.jsx';
+import { Card } from '../components/Card.jsx';
+
+
+const Search = () => {
+ return(
+
+
+
+
+
+ {/* Profile Page Route */}
+
+
+
+
+
+
+
+
+
+
+