diff --git a/nextstep-frontend/assets/NextStep.png b/nextstep-frontend/assets/NextStep.png new file mode 100644 index 0000000..05e9f9f Binary files /dev/null and b/nextstep-frontend/assets/NextStep.png differ diff --git a/nextstep-frontend/assets/NextStepLogo.png b/nextstep-frontend/assets/NextStepLogo.png new file mode 100644 index 0000000..4e916a6 Binary files /dev/null and b/nextstep-frontend/assets/NextStepLogo.png differ diff --git a/nextstep-frontend/index.html b/nextstep-frontend/index.html index 551e409..73c3e7b 100644 --- a/nextstep-frontend/index.html +++ b/nextstep-frontend/index.html @@ -2,7 +2,7 @@ - + Next Step diff --git a/nextstep-frontend/package.json b/nextstep-frontend/package.json index 603e350..9cad348 100644 --- a/nextstep-frontend/package.json +++ b/nextstep-frontend/package.json @@ -22,6 +22,7 @@ "dotenv": "^16.4.7", "firebase": "^11.4.0", "font-awesome": "^4.7.0", + "framer-motion": "^12.15.0", "lucide-react": "^0.479.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/nextstep-frontend/public/NextStepLogo.png b/nextstep-frontend/public/NextStepLogo.png new file mode 100644 index 0000000..4e916a6 Binary files /dev/null and b/nextstep-frontend/public/NextStepLogo.png differ diff --git a/nextstep-frontend/public/assets/landing-hero.svg b/nextstep-frontend/public/assets/landing-hero.svg new file mode 100644 index 0000000..f6e1a9a --- /dev/null +++ b/nextstep-frontend/public/assets/landing-hero.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/nextstep-frontend/public/index.html b/nextstep-frontend/public/index.html new file mode 100644 index 0000000..e69de29 diff --git a/nextstep-frontend/src/App.css b/nextstep-frontend/src/App.css index 77db3ae..6e74376 100644 --- a/nextstep-frontend/src/App.css +++ b/nextstep-frontend/src/App.css @@ -1,22 +1,28 @@ :root { - --color-1: #1877f2; - --color-2: #f0f2f5; - --color-3: #606770; - --color-4: #ccd0d5; - --color-5: #165dbb; - --color-6: #052652; - --color-shadow-1: rgba(0, 0, 0, 0.1); + --color-primary: #2D3436; + --color-secondary: #0984E3; + --color-accent: #00B894; + --color-background: #FFFFFF; + --color-surface: #F8F9FA; + --color-text: #2D3436; + --color-text-secondary: #636E72; + --color-border: #DFE6E9; + --color-shadow: rgba(0, 0, 0, 0.08); + --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --transition-standard: all 0.3s ease; + --border-radius: 12px; + --spacing-unit: 8px; } #root { display: flex; flex-direction: column; - justify-content: space-between; - align-items: center; - height: 100vh; + min-height: 100vh; width: 100%; margin: 0 auto; - text-align: center; + font-family: var(--font-primary); + background-color: var(--color-background); + color: var(--color-text); } .logo { @@ -47,37 +53,114 @@ } } +/* Modern Card Styles */ .card { - padding: 2em; + background: var(--color-background); + border-radius: var(--border-radius); + box-shadow: 0 4px 6px var(--color-shadow); + transition: var(--transition-standard); + border: 1px solid var(--color-border); } -.read-the-docs { - color: #888; +.card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 12px var(--color-shadow); +} + +/* Modern Button Styles */ +.button { + background: var(--color-secondary); + color: white; + border: none; + padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); + border-radius: var(--border-radius); + font-weight: 500; + transition: var(--transition-standard); + cursor: pointer; +} + +.button:hover { + background: var(--color-accent); + transform: translateY(-1px); +} + +/* Modern Input Styles */ +.input { + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + padding: calc(var(--spacing-unit) * 1.5); + transition: var(--transition-standard); + background: var(--color-surface); +} + +.input:focus { + border-color: var(--color-secondary); + box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.1); + outline: none; } +/* Layout Components */ +.layout { + max-width: 1200px; + margin: 0 auto; + padding: calc(var(--spacing-unit) * 3); +} + +/* Navigation */ +.nav { + background: var(--color-background); + border-bottom: 1px solid var(--color-border); + padding: calc(var(--spacing-unit) * 2); +} + +/* Job Card Modernization */ .job-card { - padding: 16px; - border: 1px solid #ddd; - border-radius: 8px; - height: 200px; /* Fixed height for all cards */ - display: flex; - flex-direction: column; - justify-content: space-between; /* Align content and button */ - overflow-y: auto; /* Enable vertical scrolling for overflow */ + padding: calc(var(--spacing-unit) * 3); + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + background: var(--color-background); + transition: var(--transition-standard); + height: auto; + min-height: 200px; + display: flex; + flex-direction: column; + gap: calc(var(--spacing-unit) * 2); +} + +.job-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 12px var(--color-shadow); } .job-card img { - display: inline-block; - margin: 0; - max-width: 20px; - height: 20px; + width: 24px; + height: 24px; + object-fit: contain; } .job-card .company-name { - font-weight: bold; /* Make company name bold */ + font-weight: 600; + color: var(--color-text); + font-size: 1.1em; } .job-card .location { - margin-top: 8px; /* Add separation between company name and location */ - display: block; /* Ensure it appears on a new line */ + color: var(--color-text-secondary); + font-size: 0.9em; + margin-top: calc(var(--spacing-unit)); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .layout { + padding: calc(var(--spacing-unit) * 2); + } + + .job-card { + padding: calc(var(--spacing-unit) * 2); + } +} + +.read-the-docs { + color: #888; } diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx index 0aa4d26..f9f548c 100644 --- a/nextstep-frontend/src/App.tsx +++ b/nextstep-frontend/src/App.tsx @@ -3,7 +3,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d import Login from './pages/Login'; import Register from './pages/Register'; import Profile from './pages/Profile'; -import './App.css' +import './App.css'; import Feed from './pages/Feed'; import Footer from './components/Footer'; import RequireAuth from './hoc/RequireAuth'; @@ -11,32 +11,88 @@ import NewPost from './pages/NewPost'; import PostDetails from './pages/PostDetails'; import Chat from './pages/Chat'; import Resume from './pages/Resume'; -import TopBar from './components/TopBar'; +import LeftBar from './components/LeftBar'; import Layout from './components/Layout'; import MainDashboard from './pages/MainDashboard'; import Quiz from './pages/Quiz'; +import Landing from './pages/Landing'; +import { Box, CssBaseline } from '@mui/material'; +import { ThemeProvider } from './contexts/ThemeContext'; +import { AuthProvider } from './contexts/AuthContext'; const App: React.FC = () => { return ( - <> - - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - -