Perfect (#153)

* Perfect * Alexify alignment :D
Kodeworks · Aug 22, 2024 · 524bba2 · 524bba2
1 parent bc2ae8d
commit 524bba2
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 18 deletions.
diff --git a/web/public/index.html b/web/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="theme-color" content="#B6FF9E" />
     <meta
       name="description"

diff --git a/web/src/components/HomePage/ContactSection/CampaignContact.tsx b/web/src/components/HomePage/ContactSection/CampaignContact.tsx
@@ -43,6 +43,13 @@ const CampaignContact = ({ subject }: Props) => {
     });
   }
 
+  const handleFocus = (event) => {
+    const element = event.target;
+    setTimeout(() => {
+      element.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'nearest' });
+    }, 50);
+  };
+
   useEffect(() => {
     if (!hasMountedForm) {
       mountFormDispatcher();
@@ -55,14 +62,15 @@ const CampaignContact = ({ subject }: Props) => {
         className={dispatchSuccess ? 'hidden' : 'flex lg:flex-row flex-col items-center justify-center gap-10 w-full'}
       >
         <form className="w-full flex flex-col items-center" id="form">
-          <input type="hidden" name="access_key" value="462247df-28ef-4e87-a5c8-8f4fc7263636" />
-          <input type="hidden" name="subject" value={subject} />
-          <input type="hidden" name="from_name" value="kodeworks.no" />
+          <input type="hidden" name="access_key" value="462247df-28ef-4e87-a5c8-8f4fc7263636" style={{ fontSize: '16px' }}  />
+          <input type="hidden" name="subject" value={subject} style={{ fontSize: '16px' }}  />
+          <input type="hidden" name="from_name" value="kodeworks.no" style={{ fontSize: '16px' }}  />
           <div className="flex flex-col items-center gap-4 w-full">
             <div className="flex flex-col lg:w-1/3 w-4/5 gap-4 ">
               <div className="flex flex-col gap-2">
                 <label htmlFor="name">Navn</label>
                 <input
+                  onFocus={handleFocus}
                   type="text"
                   required
                   id="name"
@@ -76,6 +84,7 @@ const CampaignContact = ({ subject }: Props) => {
               <div className="flex flex-col gap-2">
                 <label htmlFor="email">Epost</label>
                 <input
+                  onFocus={handleFocus}
                   type="email"
                   required
                   id="email"
@@ -89,6 +98,7 @@ const CampaignContact = ({ subject }: Props) => {
               <div className="flex flex-col gap-2">
                 <label htmlFor="telephone">Telefon</label>
                 <input
+                  onFocus={handleFocus}
                   type="tel"
                   required
                   id="telephone"

diff --git a/web/src/components/HomePage/ContactSection/styles.css b/web/src/components/HomePage/ContactSection/styles.css
@@ -1,3 +1,4 @@
 .contact-input {
     @apply py-4 px-3 border-black border-[1.25px] text-lg;
+    font-size: 1.25rem;
 }
diff --git a/web/src/pages/_app.tsx b/web/src/pages/_app.tsx
@@ -102,7 +102,7 @@ function Main(): JSX.Element {
   return (
     <>
       <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <title>KodeWorks</title>
       </Head>
 
@@ -116,7 +116,7 @@ function Main(): JSX.Element {
         <Link href="/" className="xl:pl-16 pl-8">
           <div id="menu-bar-logo" />
         </Link>
-        <div className="flex xl:gap-x-12 lg:gap-x-6 gap-x-4 xl:pr-16 pr-8 lg:visible invisible ">
+        <div className="flex xl:gap-x-12 lg:gap-x-6 gap-x-4 xl:pr-16 pr-8 lg:visible invisible items-center">
           <Link
             href="/eksperter"
             className={`no-underline leading-none nav-link ${

diff --git a/web/src/pages/kampanjer/selskap/index.tsx b/web/src/pages/kampanjer/selskap/index.tsx
@@ -39,9 +39,9 @@ const CompanyPage: NextPageWithLayout = () => {
   };
 
   return (
-    <main className="main">
+    <main className="main mt-[100px]">
 
-      <section className="flex flex-col w-full h-[100vh] mt-20">
+      <section className="flex flex-col w-full h-[calc(var(--vh, 1vh) * 100)]">
         <div className="flex flex-col lg:flex-row w-full">
           <div className="max-h-xl max-w-lg flex lg:items-start items-center justify-center">
             <img src="/images/workshop.png" className="rounded-3xl max-w-full max-h-full" />
@@ -54,8 +54,6 @@ const CompanyPage: NextPageWithLayout = () => {
             </div>
 
             <p className="lg:text-4xl text-xl font-semibold">
-              {/* Vi hjelper deg med å finne ut hvordan du kan <span className="green-text">realisere ditt prosjekt.</span> */}
-
               Vi ser ofte at selskaper står ovenfor utfordringer med å realisere sine prosjekter <span className="green-text">raskt </span>
               og <span className="green-text">kostnadseffektivt.</span>
             </p>
@@ -77,7 +75,7 @@ const CompanyPage: NextPageWithLayout = () => {
         </div>
       </section>
 
-      <section ref={section2Ref} className="flex flex-col w-full h-[100vh] items-center mt-20">
+      <section ref={section2Ref} className="flex flex-col w-full h-[calc(var(--vh, 1vh) * 100)] items-center mt-20 mb-20">
         <h1 className="text-4xl font-black text-center mb-12 lg:mb-20">
           Selskaper som bruker Kodeworks
         </h1>
@@ -89,7 +87,7 @@ const CompanyPage: NextPageWithLayout = () => {
           <img src="/logos/dnb.png" className="max-w-full max-h-10" />
           <img src="/logos/obos.png" className="max-w-full max-h-10" />
         </div>
-        <h1 className="text-4xl font-black text-center mt-20 relative">
+        <h1 className="text-4xl font-black text-center lg:mt-20 mt-12 relative">
           Hva får du?
           <span
             className="absolute w-1/2 h-[2px] bg-current"
@@ -100,7 +98,7 @@ const CompanyPage: NextPageWithLayout = () => {
             }}
           />
         </h1>
-        <div className="space-y-4 mt-12 mb-20">
+        <div className="space-y-4 lg:mt-12 mt-6 mb-10">
           <div className="flex items-center">
             <div className="relative">
               <input

diff --git a/web/src/pages/kampanjer/startup/index.tsx b/web/src/pages/kampanjer/startup/index.tsx
@@ -38,9 +38,9 @@ const StartupPage: NextPageWithLayout = () => {
   };
 
   return (
-    <main className="main">
+    <main className="main mt-[100px]">
 
-      <section className="flex flex-col w-full h-[100vh] mt-20">
+      <section className="flex flex-col w-full h-[calc(var(--vh, 1vh) * 100)]">
         <div className="flex flex-col lg:flex-row w-full">
           <div className="max-h-xl max-w-lg flex lg:items-start items-center justify-center">
             <img src="/images/workshop.png" className="rounded-3xl max-w-full max-h-full" />
@@ -73,7 +73,7 @@ const StartupPage: NextPageWithLayout = () => {
         </div>
       </section>
 
-      <section ref={section2Ref} className="flex flex-col w-full h-[100vh] items-center mt-20">
+      <section ref={section2Ref} className="flex flex-col w-full h-[calc(var(--vh, 1vh) * 100)] items-center mt-20 mb-20">
         <h1 className="text-4xl font-black text-center mb-12 lg:mb-20">
           Selskaper som bruker Kodeworks
         </h1>
@@ -97,7 +97,7 @@ const StartupPage: NextPageWithLayout = () => {
             <img src="/logos/obos.png" className="max-w-full max-h-6" />
           </div>
         </div>
-        <h1 className="text-4xl font-black text-center mt-20 relative">
+        <h1 className="text-4xl font-black text-center lg:mt-20 mt-12 relative">
           Hva får du?
           <span
             className="absolute w-1/2 h-[2px] bg-current"
@@ -108,7 +108,7 @@ const StartupPage: NextPageWithLayout = () => {
             }}
           />
         </h1>
-        <div className="space-y-4 mt-12 mb-20">
+        <div className="space-y-4 lg:mt-12 mt-6 mb-10">
           <div className="flex items-center">
             <div className="relative">
               <input