Add navbar

src/App.js

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Editor from "./pages/editor";
 import LandingPage from "./pages/landing_page";
+import Survey from "./pages/survey";
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route path="/editor" element={<Editor name="Untitled" />} />
+          <Route path="/survey" element={<Survey />} />
         </Routes>
       </Router>
     </>

src/pages/landing_page.jsx

@@ -1,12 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { IconCrossStroked } from "@douyinfe/semi-icons";
+import logo from "../assets/logo_light_46.png";
 
 export default function LandingPage() {
+  const [showSurvey, setShowSurvey] = useState(true);
+
   return (
     <div>
-      <Link to="/editor">editor</Link>
+      {showSurvey && (
-      <br />
+        <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-slate-700 from-10% via-slate-500 via-30% to-90% to-slate-700">
-      LandingPage  
+          <Link to="/survey" className="hover:underline">
+            Help us improve! Share your feedback.
+          </Link>
+          <div className="float-right">
+            <button onClick={() => setShowSurvey(false)}>
+              <IconCrossStroked size="small" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div>
+        <div className="md:py-5 px-6 flex justify-between">
+          <div className="md:flex md:items-center md:justify-start">
+            <Link to="/">
+              <img src={logo} alt="logo" className="me-2" />
+            </Link>
+            <Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
+              Features
+            </Link>
+            <Link
+              to="/editor"
+              className="ms-4 text-lg font-semibold hover:text-indigo-700"
+            >
+              Editor
+            </Link>
+            <Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
+              Templates
+            </Link>
+            <Link className="ms-4 text-lg font-semibold hover:text-indigo-700">
+              Download
+            </Link>
+          </div>
+          <button className="px-6 py-2 bg-[#386b8f] text-white font-semibold rounded">
+            Log in
+          </button>
+        </div>
+        <hr />
+      </div>
     </div>
   );
 }

src/pages/survey.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Survey() {
+  return <div>Survey</div>;
+}