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>© 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: {}, },