feat: WIP, landing page

neove · Mar 29, 2023 · 01bf0eb · 01bf0eb
1 parent c64dd32
commit 01bf0eb
Show file tree

Hide file tree

Showing 14 changed files with 355 additions and 0 deletions.
diff --git a/docs/CDDR.md b/docs/CDDR.md
@@ -8967,3 +8967,182 @@ In the above code:
     
 
 These are just examples of ways you could use Tailwind CSS to enhance the design of this component. Feel free to customize the styles to fit your desired appearance!
+
+---
+
+You
+---
+
+ 
+
+now I want to modify my react app title and descript something like seo, how can I do?
+
+ChatGPT
+-------
+
+To modify the title and description of a React app for SEO purposes, you can use the "react-helmet" library.
+
+1.  Start by installing the library:
+
+```
+npm install --save react-helmet
+```
+
+2.  Next, import the library into your component where you want to modify the title and description:
+
+```jsx
+import { Helmet } from 'react-helmet';
+```
+
+3.  Then, inside the component's JSX, add the `<Helmet>` component like this:
+
+```jsx
+<Helmet>
+  <title>Your custom title</title>
+  <meta name="description" content="Your custom description"/>
+</Helmet>
+```
+
+4.  Replace "Your custom title" with the desired text for the title, and "Your custom description" with the desired text for the description.
+    
+5.  Save the changes and the title and description should be updated.
+    
+
+Here is an example using "react-helmet" to modify the title and description of a React app:
+
+```jsx
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+function App() {
+  return (
+    <div className="App">
+      {/* Use the Helmet component to modify the title and description */}
+      <Helmet>
+        <title>My React App</title>
+        <meta name="description" content="This is my React app"/>
+      </Helmet>
+
+      {/* Rest of the code here */}
+      <h1>Welcome to my React App</h1>
+      <p>This is a sample React app.</p>
+    </div>
+  );
+}
+
+export default App;
+```
+
+Note that search engines usually display only the first 60 characters of a title tag and 160 characters of a meta description tag, so make sure to keep them concise and relevant.
+
+You
+---
+
+ 
+
+but this is my App.js import React from "react"; import "./App.css"; import Header from "./components/Header"; import { BrowserRouter as Router } from "react-router-dom"; import Hero from "./components/Hero"; import Features from "./components/Features"; import Pricing from "./components/Pricing"; import Footer from "./components/Footer"; import FAQ from "./components/FAQ"; function App() { return ( <Router basename="/"> <Header /> <Hero /> <Features /> <Pricing /> <FAQ /> <Footer /> </Router> ); } export default App;
+
+ChatGPT
+-------
+
+To modify the title and description of your React app for SEO purposes, you should set the `title` and `description` meta tags in the HTML document. You can do that by adding `react-helmet` package to your project.
+
+Here are the steps to follow:
+
+1.  Install `react-helmet` library:
+    
+    ```
+    npm install --save react-helmet
+    ```
+    
+2.  Import `Helmet` component in your `App.js`:
+    
+    ```javascript
+    import { Helmet } from "react-helmet";
+    ```
+    
+3.  Add the `Helmet` component inside your App function, and set `title` and `description` props:
+    
+    ```javascript
+    function App() {
+      return (
+        <Router basename="/">
+          <Helmet>
+            <title>My App Title</title>
+            <meta name="description" content="My App Description" />
+          </Helmet>
+          <Header />
+          <Hero />
+          <Features />
+          <Pricing />
+          <FAQ />
+          <Footer />
+        </Router>
+      );
+    }
+    ```
+    
+4.  Replace "My App Title" and "My App Description" with your actual title and description.
+    
+5.  Save the file, and test it out in the browser. You should now see the updated title and description when viewing the page source or inspecting the meta tags using dev tools.
+    
+
+Note: The `react-helmet` package provides a convenient way to manage the `<head>` section of your document without having to manipulate the DOM directly. For more information on `react-helmet`, please refer to the official documentation: [https://github.com/nfl/react-helmet](https://github.com/nfl/react-helmet)
+
+You
+---
+
+ 
+
+Great, I also want to add the favion
+
+ChatGPT
+-------
+
+To modify your app's title and description, you can use the Helmet component from the react-helmet package. This component allows you to update various meta tags in the head of your HTML document, including the title and description.
+
+To add a favicon, you can simply place the favicon file in the public directory of your React app (e.g. `public/favicon.ico`). Then, you can add a link tag to the head of your HTML document using the Helmet component.
+
+Here is an updated version of your `App.js` file that includes changes to the title, description, and favicon:
+
+```jsx
+import React from "react";
+import { Helmet } from "react-helmet";
+import "./App.css";
+import Header from "./components/Header";
+import { BrowserRouter as Router } from "react-router-dom";
+import Hero from "./components/Hero";
+import Features from "./components/Features";
+import Pricing from "./components/Pricing";
+import Footer from "./components/Footer";
+import FAQ from "./components/FAQ";
+
+function App() {
+  return (
+    <Router basename="/">
+      <Helmet>
+        <title>My App - Home</title>
+        <meta name="description" content="A description of my app." />
+        <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png"/>
+      </Helmet>
+      <Header />
+      <Hero />
+      <Features />
+      <Pricing />
+      <FAQ />
+      <Footer />
+    </Router>
+  );
+}
+
+export default App;
+```
+
+Make sure to replace the values for the `title`, `description`, and `href` attributes with your own custom values.
+
+Note: For favicon.ico extension or image you can also use another extension, but you need to modify the href attribute according to that.
+
+I hope this helps!
+
+---
+
diff --git a/web/landing/www/package-lock.json b/web/landing/www/package-lock.json
diff --git a/web/landing/www/package.json b/web/landing/www/package.json
@@ -11,6 +11,7 @@
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",

diff --git a/web/landing/www/public/android-chrome-192x192.png b/web/landing/www/public/android-chrome-192x192.png
diff --git a/web/landing/www/public/android-chrome-384x384.png b/web/landing/www/public/android-chrome-384x384.png
diff --git a/web/landing/www/public/apple-touch-icon.png b/web/landing/www/public/apple-touch-icon.png
diff --git a/web/landing/www/public/browserconfig.xml b/web/landing/www/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/web/landing/www/public/favicon-16x16.png b/web/landing/www/public/favicon-16x16.png
diff --git a/web/landing/www/public/favicon-32x32.png b/web/landing/www/public/favicon-32x32.png
diff --git a/web/landing/www/public/favicon.ico b/web/landing/www/public/favicon.ico
diff --git a/web/landing/www/public/mstile-150x150.png b/web/landing/www/public/mstile-150x150.png
diff --git a/web/landing/www/public/safari-pinned-tab.svg b/web/landing/www/public/safari-pinned-tab.svg
diff --git a/web/landing/www/public/site.webmanifest b/web/landing/www/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}