diff --git a/package-lock.json b/package-lock.json
index 02aad00..9d063c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,11 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
+        "@fortawesome/free-regular-svg-icons": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,6 +20,7 @@
         "postcss": "^8.4.38",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
         "tailwindcss": "^3.4.3",
         "web-vitals": "^2.1.4"
@@ -2379,6 +2385,75 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3355,6 +3430,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15105,6 +15188,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 9d97c25..d4f02f1 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,6 +15,7 @@
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.4.3",
     "web-vitals": "^2.1.4"
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index 080d6c7..0000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc..0000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 46a0f5d..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import DemoComponent from "./DemoComponent";
-
-
-function App() {
-  return (
-    <div>
-   <DemoComponent />
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..d9f0a48
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from 'react-router-dom'
+
+import Home from "./Components/Home/home";
+import Articles from "./Components/Articles/Articles";
+import Firebase from "./Components/Firebase/Firebase";
+import Newsletter from "./Components/Newsletter/Newsletter";
+import Features from "./Components/Features/Features";
+import Case from "./Components/CaseStudy/Case";
+import Footer from "./Components/Footer/Footer";
+
+
+
+function App() {
+  return (
+   
+    <>
+       <Router>
+      <Routes>
+        <Route path="/"  element={<Home/>}>
+        </Route>
+        <Route path="/articles"  element={<Articles/>}>
+        </Route>
+        <Route path="/firebase"  element={<Firebase/>}>
+        </Route>
+        <Route path="/newsletter"  element={<Newsletter/>}>
+        </Route>
+        <Route path="/features"  element={<Features/>}>
+        </Route>
+        <Route path="/case"  element={<Case/>}>
+        </Route>
+        <Route path="/footer"  element={<Footer/>}>
+        </Route>
+
+       
+      </Routes>
+    </Router>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/Components/Articles/Articles.jsx b/src/Components/Articles/Articles.jsx
new file mode 100644
index 0000000..df86977
--- /dev/null
+++ b/src/Components/Articles/Articles.jsx
@@ -0,0 +1,201 @@
+import React from 'react'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faWifi } from '@fortawesome/free-solid-svg-icons'
+import { faPlay } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Company from '../../assets/comapny.jpg'
+import Growth from '../../assets/growth.jpg'
+import Engineering from '../../assets/engineering.jpg'
+import Computers from '../../assets/computers.jpg'
+import Google from '../../assets/google.jpg'
+import Gaming from '../../assets/gaming.jpg'
+import User from '../../assets/p1.jpg'
+
+const Articles = () => {
+  return (
+    <>
+        <div className='bg-white max-w-[1440px]  mx-auto mt-10'>
+                <div className='flex flex-col space-y-4 lg:space-y-0 lg:flex lg:flex-row justify-between items-center lg:mx-10'>
+                    <ul className='flex items-center space-x-6 md:space-x-16 lg:space-x-8 text-black text-sm lg:text-[16px] font-medium'>
+                        <li className='bg-[#f3ea71] whitespace-nowrap flex items-center justify-center rounded-full h-12 w-24'><a href="/">All articles</a></li>
+                        <li><a href="/">Comapny</a></li>
+                        <li><a href="/">Engineering</a></li>
+                        <li><a href="/">Growth</a></li>
+                    </ul>
+                    
+                        <ul className='text-black flex items-center space-x-8 lg:space-x-4'>
+                            <li className='text-[#84888a]'>Follow for updates:</li>
+                            <li><FontAwesomeIcon className='text-[#73818e]' icon={faTwitter} /></li>
+                            <li><FontAwesomeIcon className='text-[#73818e]' icon={faWifi} /></li>
+                        </ul>
+                   
+                </div>
+
+
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-5 mt-5 mx-5 md:mx-8 lg:mx-10'>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Company} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#e26160] border-2 border-[#e26160] text-center'>Company</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>Here at RevenueCat Employees are Customers Too</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Sharing app building ideas in our Employees App Club</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Will Taylor</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col md:space-y-8 lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Growth} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#60dba9] border-2 border-[#60dba9] text-center'>Growth</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>App Store Optimiztion Guide For Subscription Apps</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Learn how to boost your app's visibility and more</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover  rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Thomas Kreibernegg</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col md:space-y-20 lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Engineering} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#596ccb] border-2 border-[#596ccb] text-center'>Engineering</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black w-4/5'>Account deletion rules on the App Store</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Everything you need to know about the new rule</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Corey Rabazinski</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col md:space-y-[85px] lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Computers} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                <p className='rounded-full text-sm py-1 font-medium text-[#e26160] border-2 border-[#e26160] text-center'>Company</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black w-4/5'>How We Work Remotedly At RevenueCat</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>We are a little different than your average 9-5 job</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Rachel Wright</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col space-y-16 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Google} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                <p className='rounded-full text-sm py-1 font-medium text-[#596ccb] border-2 border-[#596ccb] text-center'>Engineering</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>Google I/O 2022 Announcements</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>How the new features and upadted Play Console will help grow your app business</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Thomas Petit</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8] bg-black  rounded-xl pb-4'>
+                        <div className='flex flex-col md:space-y-[88px] lg:space-y-[74px] justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Gaming} />
+                                </div>
+                               
+                                <div className='px-4 mt-2'>
+                                    <p className='text-3xl font-semibold text-white'>The Sub Club Podcast</p>
+                                </div>
+                                <div className='px-4 mt-4'>
+                                    <p className='text-[16px] w-[80%] text-white'>Interviews and deep dives with the experts behind the biggest apps in the world.</p>
+                                </div>
+                            </div>
+                            <div className='flex justify-center items-center w-1/2 md:w-[55%] xl:w-[35%] rounded-full space-x-2 py-2 mx-4 mt-8 lg:mt-0  bg-[#f3ea71]'>
+                                <div className='rounded-full w-8 h-8 bg-black flex items-center justify-center '>
+                                    <FontAwesomeIcon className='text-white ' icon={faPlay} />
+                                </div>
+                                <p className='text-sm text-black text-medium'>LISTEN NOW</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                
+        </div>
+    </>
+  )
+}
+
+export default Articles
\ No newline at end of file
diff --git a/src/Components/CaseStudy/Case.jsx b/src/Components/CaseStudy/Case.jsx
new file mode 100644
index 0000000..667391c
--- /dev/null
+++ b/src/Components/CaseStudy/Case.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import User from '../../assets/p1.jpg'
+const Case = () => {
+  return (
+   <>
+        <div className='bg-[#161a1d] max-w-[1440px] py-16 mx-auto mt-10'>
+            <div className='w-full flex flex-col space-y-16 lg:space-y-0 lg:flex lg:flex-row  lg:justify-evenly items-center'>
+                <div className='flex flex-col space-y-8 lg:mx-10 xl:mx-0'>
+                    <p className='text-2xl md:text-5xl text-white font-bold'>Ready to get started?</p>
+                    <div className='flex space-x-4 items-center'>
+                       <button className='text-xs text-white text-center py-3 px-6 bg-[#566cdb] rounded-full'>SIGN UP FOR FREE</button>
+                       <p className='text-white underline text-xs decoration-2 decoration-red-500 underline-offset-4'>TALK TO SALES</p>
+                    </div>
+                </div>
+                <div className='border border-gray-700 rounded-3xl lg:mx-10 xl:mx-0 w-[70%] lg:w-auto px-6 py-8 '>
+                    <div className='flex flex-col space-y-6'>
+                        <p className='text-white text-xl w-4/5'>"At any level og Scale RevenueCat just works"</p>
+                        <div className='flex items-center space-x-4'>
+                            <div className=''>
+                                <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                            </div>
+                            <p className='text-sm text-white'>David Smith, Widgetsmith</p>
+                        </div>
+                        <p className='text-white text-xs underline decoration-2 decoration-red-500 underline-offset-4'>READ CASE STUDY</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+   </>
+  )
+}
+
+export default Case
\ No newline at end of file
diff --git a/src/Components/Features/Features.jsx b/src/Components/Features/Features.jsx
new file mode 100644
index 0000000..e0e72e5
--- /dev/null
+++ b/src/Components/Features/Features.jsx
@@ -0,0 +1,128 @@
+import React from 'react'
+import Company from '../../assets/comapny.jpg'
+import Growth from '../../assets/growth.jpg'
+import Engineering from '../../assets/engineering.jpg'
+import User from '../../assets/p1.jpg'
+import  {FontAwesomeIcon}  from '@fortawesome/react-fontawesome'
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
+
+const Features = () => {
+  return (
+    <>
+        <div className='bg-white max-w-[1440px]  mx-auto mt-10 pb-24'>
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-5 mt-10 mx-5 md:mx-8 lg:mx-10'>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Company} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#e26160] border-2 border-[#e26160] text-center'>Company</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>Here at RevenueCat Employees are Customers Too</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Sharing app building ideas in our Employees App Club</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Will Taylor</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col md:space-y-8 lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Growth} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#60dba9] border-2 border-[#60dba9] text-center'>Growth</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>App Store Optimiztion Guide For Subscription Apps</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Learn how to boost your app's visibility and more</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover  rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Thomas Kreibernegg</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Engineering} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#596ccb] border-2 border-[#596ccb] text-center'>Engineering</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black w-4/5'>Account deletion rules on the App Store</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Everything you need to know about the new rule</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Corey Rabazinski</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                   
+                </div>
+
+                <div className='mx-auto hidden md:flex items-center justify-between mt-10 font-semibold'>
+                        <div className='flex md:ml-60 lg:ml-96 xl:ml-[600px] space-x-14 items-center justify-center text-black'>
+                            <p className='rounded-full flex items-center justify-center text-center bg-[#f1eb72] w-8 h-8'>1</p>
+                            <p>2</p>
+                            <p>...</p>
+                            <p>8</p>
+                        </div>
+                        <div className='flex mr-24  justify-end'>
+                        <div className='flex space-x-4 items-center  text-black'>
+                            <p>Next</p>
+                            <FontAwesomeIcon className='text-[#f06362]' icon={faArrowRight} />
+                        </div>
+                        </div>
+                </div>
+
+                <div className='mx-auto space-x-4 flex md:hidden items-center justify-center mt-10 font-semibold'>
+                    <div className='flex space-x-2 items-center justify-center'>
+                        <FontAwesomeIcon className='text-[#f06362]' icon={faArrowLeft} />
+                        <p>Previous</p>
+                    </div>
+                    <div className='flex space-x-2 items-center justify-center'>
+                        <p>Next</p>
+                        <FontAwesomeIcon className='text-[#f06362]' icon={faArrowRight} />
+                    </div>
+                </div>
+        </div>
+    </>
+  )
+}
+
+export default Features
\ No newline at end of file
diff --git a/src/Components/Firebase/Firebase.jsx b/src/Components/Firebase/Firebase.jsx
new file mode 100644
index 0000000..21e0b57
--- /dev/null
+++ b/src/Components/Firebase/Firebase.jsx
@@ -0,0 +1,127 @@
+import React from 'react'
+import ImageOne from '../../assets/img1.jpg'
+import User from '../../assets/p1.jpg'
+import Company from '../../assets/comapny.jpg'
+import Growth from '../../assets/growth.jpg'
+import Engineering from '../../assets/engineering.jpg'
+
+const Firebase = () => {
+  return (
+    <>
+        <div className='bg-white max-w-[1440px]  mx-auto mt-10'>
+            <div className='flex flex-col lg:flex lg:flex-row  gap-8 w-full  '>
+              <div className='mx-8 xl:mx-10 lg:mx-0 lg:ml-12  lg:w-[50%]'>
+                <img className='rounded-xl  w-auto h-auto lg:w-full lg:h-[380px] object-cover' alt="" src={ImageOne}/>
+              </div>
+              <div className='flex flex-col justify-between lg:w-[50%] '>
+                <div className='flex- flex-col'>
+                 <div className='w-full flex md:ml-8 lg:ml-0  md:flex md:justify-normal md:w-auto '>
+                 <p className='rounded-full text-sm py-1 font-medium text-[#596ccb] border-2 border-[#596ccb] w-1/4 whitespace-nowrap mx-10 md:mx-0 xl:w-[15%] text-center'>
+                        Engineering
+                  </p>
+                 </div>
+                  <p className='text-black text-xl lg:text-4xl font-semibold mx-8 lg:mx-0 lg:w-4/5 mt-4'>A Practicle Guide To Apple Search Ads</p>
+                  <p className='text-[#3c3e3f] mx-8 lg:mx-0 text-sm lg:text-[16px] mt-2'>Why it's a channel worth exploring to grow your app</p>
+                </div>
+                <div className='flex items-center space-x-2 mx-8 lg:mx-0 mt-10'>
+                    <div className=''>
+                      <img className='h-10 w-10  rounded-full' alt="" src={User} />
+                    </div>
+                    <div className='flex flex-col'>
+                      <p className='text-black font-bold text-sm'>Francie Fernandes</p>
+                      <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                    </div>
+                </div>
+              </div>
+            </div>
+
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-5 mt-10 mx-5 md:mx-8 lg:mx-10'>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Company} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#e26160] border-2 border-[#e26160] text-center'>Company</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>Here at RevenueCat Employees are Customers Too</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Sharing app building ideas in our Employees App Club</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Will Taylor</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col md:space-y-8 lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Growth} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#60dba9] border-2 border-[#60dba9] text-center'>Growth</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black'>App Store Optimiztion Guide For Subscription Apps</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Learn how to boost your app's visibility and more</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover  rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Thomas Kreibernegg</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className=' border border-[#d3dbd8]  rounded-xl'>
+                        <div className='flex flex-col lg:space-y-[58px] xl:space-y-8 justify-between'>
+                            <div>
+                                <div className=''>
+                                    <img className='object-cover rounded-t-xl w-full h-[350px]' alt="" src={Engineering} />
+                                </div>
+                                <div className='w-1/2 sm:w-[40%] lg:w-1/2 xl:w-1/3 mt-2 px-4'>
+                                    <p className='rounded-full text-sm py-1 font-medium text-[#596ccb] border-2 border-[#596ccb] text-center'>Engineering</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-lg font-semibold text-black w-4/5'>Account deletion rules on the App Store</p>
+                                </div>
+                                <div className='px-4 mt-2'>
+                                    <p className='text-[16px] w-[90%]'>Everything you need to know about the new rule</p>
+                                </div>
+                            </div>
+                            <div className='flex items-center space-x-2 py-4  px-4'>
+                                <div className=''>
+                                    <img className='h-10 w-10 object-cover rounded-full' alt="" src={User} />
+                                </div>
+                                <div className='flex flex-col'>
+                                <p className='text-black font-bold text-sm'>Corey Rabazinski</p>
+                                <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                   
+                </div>
+        </div>
+    </>
+  )
+}
+
+export default Firebase
\ No newline at end of file
diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
new file mode 100644
index 0000000..b679cdf
--- /dev/null
+++ b/src/Components/Footer/Footer.jsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import Logo from '../../assets/logo.png'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faSquareTwitter } from '@fortawesome/free-brands-svg-icons'
+
+
+const Footer = () => {
+  return (
+    <>
+        <div className='bg-white max-w-[1440px] py-16  mx-auto mt-10'>
+            <div className='flex flex-col lg:flex lg:flex-row justify-between mx-10 xl:mx-32 items-center'>
+                <div className='flex space-x-8 items-center lg:flex lg:flex-col lg:space-y-20 lg:items-start'>
+       
+                   <div className='lg:ml-3'>
+                    <img src={Logo} alt="" className='w-44 h-auto'   />
+                   </div>
+                
+                    <div className='flex flex-col  space-y-4'>
+                        <div className='flex items-center space-x-4'>
+                            <FontAwesomeIcon icon={faGithub} />
+                            <FontAwesomeIcon icon={faSquareTwitter} />
+                        </div>
+                        <p>&#169; 2024 RevenueCat</p>
+                    </div>
+                </div>
+                <div className='grid grid-cols-2 mt-8 md:mt-0 md:grid-cols-4 gap-10 md:gap-16 lg:gap-2'>
+                    <div>
+                        <ul className='flex flex-col space-y-4 text-black text-xs md:text-sm'>
+                            <li className='font-semibold'>Resources</li>
+                            <li>About Us</li>
+                            <li>Blog</li>
+                            <li>Careers</li>
+                            <li>Contact</li>
+                            <li>Customers</li>
+                            <li>Help Centers</li>
+                            <li>Podcast</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <ul className='flex flex-col space-y-4 text-black text-xs md:text-sm'>
+                            <li className='font-semibold'>Documentation</li>
+                            <li>Quickstart Guide</li>
+                            <li>System Status</li>
+                            <li>SDKs</li>
+                            <li>API Reference</li>
+                            <li>Sample Apps</li>
+                            <li>Migration Guides</li>
+                            <li>View All Docs</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <ul className='flex flex-col space-y-4 text-black text-xs md:text-sm'>
+                            <li className='font-semibold'>Product</li>
+                            <li>Why RevenueCat?</li>
+                            <li>Integrations</li>
+                            <li>For Engineering Teams</li>
+                            <li>For Marketing Teams</li>
+                            <li>For Product Teams</li>
+                            <li>Apple Receipt Checker</li>
+                            <li>Pricing</li>
+                        </ul>
+                    </div>
+                    <div> 
+                        <ul className='flex flex-col space-y-4 text-black text-xs md:text-sm '>
+                            <li className='font-semibold'>Legal</li>
+                            <li>Privacy Policy</li>
+                            <li>Terms and Conditions</li>
+                            <li>GDPR</li>
+                            <li>Fair Bill Policy</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/Components/Header/header.jsx b/src/Components/Header/header.jsx
new file mode 100644
index 0000000..f04d447
--- /dev/null
+++ b/src/Components/Header/header.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import Navbar from './navbar'
+import ImageOne from '../../assets/img1.jpg'
+import User from '../../assets/p1.jpg'
+
+const Header = () => {
+  return (
+    <>
+        <Navbar/>
+
+
+        <div className='max-w-[1440px] mx-auto bg-white md:mt-10 z-0'>
+            <div className='flex flex-col lg:flex lg:flex-row  gap-8 w-full  '>
+              <div className='mx-10 lg:mx-0 lg:ml-12  lg:w-[50%]'>
+                <img className='rounded-xl  w-auto h-auto lg:w-full lg:h-[380px] bg-cover' alt="" src={ImageOne}/>
+              </div>
+              <div className='flex flex-col justify-between lg:w-[50%] '>
+                <div className='flex- flex-col'>
+                 <div className='w-full flex md:ml-8 lg:ml-0  md:flex md:justify-normal md:w-auto '>
+                 <p className='rounded-full text-sm py-1 font-medium text-[#60dba9] border-2 border-[#60dba9] w-1/4 whitespace-nowrap  mx-10 md:mx-0  xl:w-[15%] text-center'>
+                        Latest Post
+                  </p>
+                 </div>
+                  <p className='text-black text-xl lg:text-4xl font-semibold mx-10 lg:mx-0 lg:w-4/5 mt-4'>A Practicle Guide To Apple Search Ads</p>
+                  <p className='text-[#3c3e3f] mx-10 lg:mx-0 text-sm lg:text-[16px] mt-2'>Why it's a channel worth exploring to grow your app</p>
+                </div>
+                <div className='flex items-center space-x-2 mx-10 lg:mx-0 mt-10'>
+                    <div className=''>
+                      <img className='h-10 w-10  rounded-full' alt="" src={User} />
+                    </div>
+                    <div className='flex flex-col'>
+                      <p className='text-black font-bold text-sm'>Thomas Petit</p>
+                      <p className='text-[#3c3e3f] text-sm'>June 07,2024</p>
+                    </div>
+                </div>
+              </div>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/Components/Header/navbar.jsx b/src/Components/Header/navbar.jsx
new file mode 100644
index 0000000..fb1afa8
--- /dev/null
+++ b/src/Components/Header/navbar.jsx
@@ -0,0 +1,79 @@
+import {React, useState} from 'react'
+import Logo from '../../assets/logo.png'
+import  {FontAwesomeIcon}  from '@fortawesome/react-fontawesome'
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons'
+
+
+const Navbar = () => {
+
+
+  const [openMenu, SetOpenMenu] = useState(false)
+
+
+  const menuClick = () => {
+      SetOpenMenu(!openMenu)
+  }
+
+
+  return (
+   <>
+     <div className='max-w-[1440px] hidden lg:flex justify-center items-center mx-auto bg-white '>
+            <div className='w-full flex justify-evenly items-center lg:space-x-20 xl:space-x-52'>
+                <div>
+                    <img src={Logo} className='w-24 h-auto' alt=""  />
+                </div>
+                <ul className='flex items-center lg:gap-8 xl:gap-16'>
+                    <li className='flex items-center lg:space-x-2 xl:space-x-3'>
+                      <a href="/">Products</a>
+                      <FontAwesomeIcon icon={faCaretDown} />
+                    </li>
+                    <li className='flex items-center space-x-3'>
+                      <a href="/">Docs</a>
+                      <FontAwesomeIcon icon={faCaretDown} />
+                    </li>
+                    <li><a href="/">Customer</a></li>
+                    <li><a href="/">Pricing</a></li>
+                    <li><a href="/">Blog</a></li>
+                </ul>
+                <div className='flex lg:gap-5 xl:gap-8 items-center' >
+                    <button className='text-sm font-bold text-black underline decoration-2 decoration-red-500 underline-offset-4'>LOGIN</button>
+                    <button className='bg-[#566cdb] text-sm font-bold text-white rounded-full py-2 px-5'>SIGN UP</button>
+                </div>
+
+            </div>
+    </div>
+
+    
+
+
+    <div>
+        <div className='flex justify-between items-center lg:hidden  relative '>
+                {openMenu === false?<div className="">
+                    <img onClick={menuClick} className='w-28 ' alt="" src={Logo}/>
+                   
+                </div>: null}
+
+            {openMenu ?<div className='flex flex-col bg-white space-y-3  inset-0 bottom-0 z-40 fixed top-0 text-sm '>
+
+                    <div className=" ">
+                    
+                    <img onClick={menuClick} className='w-28 ' alt="" src={Logo}/>
+                    </div>
+           
+                    <ul className=' flex flex-col space-y-4  text-lg text-black mt-8 pl-3'>
+                        
+                    <li><a href="/">Products</a></li>
+                    <li><a href="/">Docs</a></li>
+                    <li><a href="/">Customer</a></li>
+                    <li><a href="/">Pricing</a></li>
+                    <li><a href="/">Blog</a></li>
+                        
+                    </ul>
+            </div>:null }
+      </div>
+      </div>
+   </>
+  )
+}
+
+export default Navbar 
\ No newline at end of file
diff --git a/src/Components/Home/home.jsx b/src/Components/Home/home.jsx
new file mode 100644
index 0000000..5577777
--- /dev/null
+++ b/src/Components/Home/home.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import Header from '../Header/header'
+import Articles from '../Articles/Articles'
+import Firebase from '../Firebase/Firebase'
+import Newsletter from '../Newsletter/Newsletter'
+import Features from '../Features/Features'
+import Case from '../CaseStudy/Case'
+import Footer from '../Footer/Footer'
+
+const home = () => {
+  return (
+    <div className='overflow-x-hidden'>
+        <Header/>
+        <Articles/>
+        <Firebase/>
+        <Newsletter/>
+        <Features/>
+        <Case/>
+        <Footer/>
+    </div>
+  )
+}
+
+export default home
\ No newline at end of file
diff --git a/src/Components/Newsletter/Newsletter.jsx b/src/Components/Newsletter/Newsletter.jsx
new file mode 100644
index 0000000..7e4f8cb
--- /dev/null
+++ b/src/Components/Newsletter/Newsletter.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Newsletter = () => {
+  return (
+    <>
+        <div className='bg-gray-200 max-w-[1440px]  mx-auto mt-10 py-8'>
+                <div className='flex flex-col space-y-4 lg:space-y-0 lg:flex lg:flex-row justify-center items-center lg:space-x-16  mx-auto   '>
+                    <div className='text-center '>
+                        <p className='text-xl  lg:text-2xl xl:text-3xl text-black font-bold  mx-5 lg:mx-0'>Subscribe to our monthly newsletter</p>
+                    </div>
+                    <div className='bg-white shadow-xl flex justify-between  lg:gap-28 xl:gap-32 rounded-full  py-2'>
+                        <input className='pl-4 ml-5 text-black outline-none ' type="text" placeholder='Your email address...' />
+                        <button className='bg-[#566cdb] text-white font-medium text-sm rounded-full px-4 py-2 mr-4'>Subscribe</button>
+                    </div>
+                </div>
+        </div>
+    </>
+  )
+}
+
+export default Newsletter
\ No newline at end of file
diff --git a/src/DemoComponent.js b/src/DemoComponent.js
deleted file mode 100644
index 018e7b3..0000000
--- a/src/DemoComponent.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-const DemoComponent = () => {
-  return (
-    <div className=" flex flex-col justify-top items-center mt-16">
-      <div className="max-w-7xl w-full p-8 text-left">
-        <h1 className="text-5xl font-bold text-stone-700 mb-4">Hello <span className='text-stone-600'>World!</span></h1>
-        <p className="text-base text-gray-700">  Cheers,<br />Start your project 🚀</p>
-      </div>
-    </div>
-  );
-}
-
-export default DemoComponent;
diff --git a/src/assets/comapny.jpg b/src/assets/comapny.jpg
new file mode 100644
index 0000000..4c1d627
Binary files /dev/null and b/src/assets/comapny.jpg differ
diff --git a/src/assets/computers.jpg b/src/assets/computers.jpg
new file mode 100644
index 0000000..02b501c
Binary files /dev/null and b/src/assets/computers.jpg differ
diff --git a/src/assets/engineering.jpg b/src/assets/engineering.jpg
new file mode 100644
index 0000000..938068d
Binary files /dev/null and b/src/assets/engineering.jpg differ
diff --git a/src/assets/gaming.jpg b/src/assets/gaming.jpg
new file mode 100644
index 0000000..c05641a
Binary files /dev/null and b/src/assets/gaming.jpg differ
diff --git a/src/assets/google.jpg b/src/assets/google.jpg
new file mode 100644
index 0000000..c5cb366
Binary files /dev/null and b/src/assets/google.jpg differ
diff --git a/src/assets/growth.jpg b/src/assets/growth.jpg
new file mode 100644
index 0000000..58291c9
Binary files /dev/null and b/src/assets/growth.jpg differ
diff --git a/src/assets/img1.jpg b/src/assets/img1.jpg
new file mode 100644
index 0000000..ff31f6f
Binary files /dev/null and b/src/assets/img1.jpg differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..5dc005f
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/p1.jpg b/src/assets/p1.jpg
new file mode 100644
index 0000000..a07dadf
Binary files /dev/null and b/src/assets/p1.jpg differ
diff --git a/src/assets/podcast.jpg b/src/assets/podcast.jpg
new file mode 100644
index 0000000..f4d7939
Binary files /dev/null and b/src/assets/podcast.jpg differ
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/styles.css b/src/styles.css
index 01d5b72..866f09e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,3 +2,5 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+
diff --git a/tailwind.config.js b/tailwind.config.js
index a0cebb6..5a66654 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js}"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },