- optimize CSS

- Add axios to Preisliste - Fix NavBar
AndreasKarz · Aug 24, 2023 · fa6ac73 · fa6ac73
1 parent 7e9116e
commit fa6ac73
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 19 deletions.
diff --git a/public/data/plans.de.json b/public/data/plans.de.json
@@ -0,0 +1,47 @@
+[
+	{
+		"name": "Basis Plan",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 12,
+		"isMostPop": false,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	},
+	{
+		"name": "Startup",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 35,
+		"isMostPop": true,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	},
+	{
+		"name": "Enterprise",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 60,
+		"isMostPop": false,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	}
+]
diff --git a/public/data/plans.en.json b/public/data/plans.en.json
@@ -0,0 +1,47 @@
+[
+	{
+		"name": "Basic plan",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 12,
+		"isMostPop": false,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	},
+	{
+		"name": "Startup",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 35,
+		"isMostPop": true,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	},
+	{
+		"name": "Enterprise",
+		"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		"price": 60,
+		"isMostPop": false,
+		"features": [
+			"Curabitur faucibus",
+			"massa ut pretium maximus",
+			"Sed posuere nisi",
+			"Pellentesque eu nibh et neque",
+			"Suspendisse a leo",
+			"Praesent quis venenatis ipsum",
+			"Duis non diam vel tortor"
+		]
+	}
+]
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -6,6 +6,13 @@
 			"keywords": "Kontakt, Testen, Software, Test, Automatisiert, Playwright, Selenium, Specflow"
 		}
 	},
+	"pricing": {
+		"seo": {
+			"title": "Unsere Preise lassen sich sehen",
+			"description": "Wählen sie aus unseren Paketen das passende aus",
+			"keywords": "Kontakt, Testen, Software, Test, Automatisiert, Playwright, Selenium, Specflow"
+		}
+	},
 	"hero1": "Konzentrieren Sie sich auf Ihre Softwareentwicklung.",
 	"hero2": "Wir schreiben Ihre Tests!",
 	"intro": "Erleichtern Sie Ihre agile Software-Entwicklung mit unserer Unterstützung beim automatisierten Testen. Unser Team setzt Playwright, Selenium und Specflow ein, um effiziente und zuverlässige Test-Suites zu schreiben. Überlassen Sie uns Ihre Tests, damit Sie sich auf Ihre App-Entwicklung konzentrieren können.",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -6,6 +6,13 @@
 			"keywords": "Kontakt, Testen, Software, Test, Automatisiert, Playwright, Selenium, Specflow"
 		}
 	},
+	"pricing": {
+		"seo": {
+			"title": "We have fantastic prices!",
+			"description": "Wählen sie aus unseren Paketen das passende aus",
+			"keywords": "Kontakt, Testen, Software, Test, Automatisiert, Playwright, Selenium, Specflow"
+		}
+	},
 	"hero1": "Be focused on your software development.",
 	"hero2": "We write your tests!",
 	"intro": "Facilitate your agile software development with our automated testing support. Our team uses Playwright, Selenium and Specflow to write efficient and reliable test suites. Let us take care of your testing so you can focus on your app development.",

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -18,10 +18,10 @@ export default function NavBar() {
 	];
 
 	return (
-		<nav className='bg-white/90 backdrop-blur-md shadow-lg w-full border-2 border-black-100 z-50'>
-			<div className='items-center px-1 max-w-screen-xl mx-auto md:flex md:px-1'>
+		<nav className='bg-white/90 backdrop-blur-md shadow-lg fixed left-0 right-0 top-0 z-50'>
+			<div className='items-center px-4 max-w-screen-xl mx-auto md:flex md:px-1 md:pr-4'>
 				<div className='flex items-center justify-between py-1 md:py-3 md:block '>
-					<a href='javascript:void(0)'>
+					<a href='/'>
 						<img
 							src='https://www.floatui.com/logo.svg'
 							width={120}
@@ -77,6 +77,7 @@ export default function NavBar() {
 								<li
 									key={idx}
 									className='mx-4'
+									onClick={() => setState(!state)}
 								>
 									<NavBarLink
 										to={item.path}

diff --git a/src/index.css b/src/index.css
@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+/* https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd */
+section {
+	content-visibility: auto;
+	contain-intrinsic-size: 1px 5000px;
+}
+
+/* Find a better solution with tailwind? */
 nav a.active,
 footer a.active {
 	color: #67e8f9;
@@ -13,15 +20,3 @@ footer {
 	right: 0;
 	left: 0;
 }
-
-nav {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-}
-
-body {
-	padding: 80px 0 80px 0;
-	overflow: scroll;
-}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -17,7 +17,7 @@ export default function Home() {
 					content="{t('home.seo.keywords')}"
 				></meta>
 			</Helmet>
-			<div className='px-3 max-w-screen-xl mx-auto mt-4 md:px-0 md:mt-9'>
+			<div className='px-3 max-w-screen-xl mx-auto md:px-0 mt-0 md:mt-14'>
 				<section>
 					<div className='py-28 gap-12 overflow-hidden md:flex'>
 						<div className='flex-1 space-y-5'>

diff --git a/src/pages/Pricing.tsx b/src/pages/Pricing.tsx
@@ -1,7 +1,106 @@
-import useSetDocumentTitle from '../hooks/useSetDocumentTitle';
+import { Helmet } from 'react-helmet-async';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
 
 export default function Pricing() {
-	useSetDocumentTitle({ separator: '-', reverse: true });
+	const { t, i18n } = useTranslation();
+	const [plans, setPlans] = useState([]);
 
-	return <div className='px-1 max-w-screen-xl mx-auto mt-4 md:px-1 md:mt-9'>Pricing</div>;
+	useEffect(() => {
+		axios
+			.get(`/data/plans.${i18n.language}.json`)
+			.then((res) => {
+				setPlans(res.data);
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+	}, [i18n.language]);
+
+	return (
+		<>
+			<Helmet>
+				<title>{t('pricing.seo.title')}</title>
+				<meta
+					name='description'
+					content="{t('pricing.seo.description')}"
+				></meta>
+				<meta
+					name='keywords'
+					content="{t('pricing.seo.keywords')}"
+				></meta>
+			</Helmet>
+			<div className='px-3 max-w-screen-xl mx-auto md:px-0 mt-5 md:mt-16'>
+				<section className='py-14'>
+					<div className='max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8'>
+						<div className='relative max-w-xl mx-auto sm:text-center'>
+							<h3 className='text-gray-800 text-3xl font-semibold sm:text-4xl'>
+								Pricing for all sizes
+							</h3>
+							<div className='mt-3 max-w-xl'>
+								<p>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur
+									consequat nunc.
+								</p>
+							</div>
+						</div>
+						<div className='mt-16 justify-center gap-6 sm:grid sm:grid-cols-2 sm:space-y-0 lg:grid-cols-3'>
+							{plans.map((item, idx) => (
+								<div
+									key={idx}
+									className={`relative flex-1 flex items-stretch flex-col rounded-xl border-2 mt-6 sm:mt-0 ${
+										item.isMostPop ? 'mt-10' : ''
+									}`}
+								>
+									{item.isMostPop ? (
+										<span className='w-32 absolute -top-5 left-0 right-0 mx-auto px-3 py-2 rounded-full border shadow-md bg-white text-center text-gray-700 text-sm font-semibold'>
+											Most popular
+										</span>
+									) : (
+										''
+									)}
+									<div className='p-8 space-y-4 border-b'>
+										<span className='text-indigo-600 font-medium'>{item.name}</span>
+										<div className='text-gray-800 text-3xl font-semibold'>
+											${item.price} <span className='text-xl text-gray-600 font-normal'>/mo</span>
+										</div>
+										<p>{item.desc}</p>
+										<button className='px-3 py-3 rounded-lg w-full font-semibold text-sm duration-150 text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700'>
+											Get Started
+										</button>
+									</div>
+									<ul className='p-8 space-y-3'>
+										<li className='pb-2 text-gray-800 font-medium'>
+											<p>Features</p>
+										</li>
+										{item.features.map((featureItem, idx) => (
+											<li
+												key={idx}
+												className='flex items-center gap-5'
+											>
+												<svg
+													xmlns='http://www.w3.org/2000/svg'
+													className='h-5 w-5 text-indigo-600'
+													viewBox='0 0 20 20'
+													fill='currentColor'
+												>
+													<path
+														fillRule='evenodd'
+														d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+														clipRule='evenodd'
+													></path>
+												</svg>
+												{featureItem}
+											</li>
+										))}
+									</ul>
+								</div>
+							))}
+						</div>
+					</div>
+				</section>
+			</div>
+		</>
+	);
 }