Initial commit

2026-02-28 14:20:57 +01:00
commit 2cb93b86a3
12 changed files with 3839 additions and 0 deletions
@@ -0,0 +1,108 @@
+// src/App.jsx
+
+import { useState } from 'react';
+import profilePic from "./assets/Henrikmattsson.jpg";
+import favIcon from "./assets/favicon.svg";
+
+export default function App() {
+
+  const [reviews, setReviews] = useState({ score: "4.9", count: "600" });
+
+  return (
+    <div className="min-h-screen relative bg-[#5F6D78] font-semibold flex flex-col">
+
+      <header className="sticky top-0 w-full h-17.5 bg-[#7F8386] flex justify-center z-50">
+        <div className="w-full h-full flex items-center justify-center">
+          <a href="#" className="h-full flex items-center justify-center py-2.5">
+            <img src={favIcon} alt="lirkab.se" className="h-full" />
+          </a>
+        </div>
+      </header>
+
+      <main className="grow flex flex-col lg:flex-row items-center justify-center gap-2.5 lg:gap-12.5 px-[5%] py-[5%] pb-12.5 lg:pb-17.5">
+        <div className="flex justify-center items-center">
+          <img
+            src={profilePic}
+            alt="Henrik Mattsson"
+            className="w-full min-w-full max-w-100 lg:min-w-125 lg:max-w-162.5 p-3.75 object-cover object-center rounded-[50px]"
+          />
+        </div>
+        <div className="text-white tracking-[1px] font-thin text-center lg:text-left">
+          <h1 className="font-bahn font-extrabold text-[40px] leading-12.5 tracking-[2px] mb-4">
+            Lerbergets idrotts & rehabklinik AB
+          </h1>
+
+          <div className="font-bahn py-2.5 leading-tight">
+            <p>
+              Jag erbjuder professionell massagebehandling för bl.a. idrottsskador och arbetsrelaterade skador i axlar, nacke och rygg.
+            </p>
+            <p>
+              Många kommer också till mig och vill ha råd när de har problem med löparknä, benhinneinflammation, tennisarmbåge m.m.
+            </p>
+            <a
+              href="https://www.timecenter.se/lirkab/#reviews"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex flex-wrap items-end justify-center lg:justify-start gap-3 pt-2 font-bahn transition-opacity hover:opacity-80 cursor-pointer"
+            >
+              <div className="text-[24px] font-black text-white leading-[0.9]">{reviews.score}</div>
+
+              <div className="flex items-center">
+                <svg width="120" height="24" viewBox="0 0 250 50">
+                  <defs>
+                    <linearGradient id="half">
+                      <stop offset="50%" stopColor="#f46c5f"></stop>
+                      <stop offset="50%" stopColor="#ccc"></stop>
+                    </linearGradient>
+                    <g id="nostar">
+                      <g width="50px" height="50px">
+                        <polygon points="49.189,19.418 31.39,18.48 25,2.273 18.61,18.48 0.811,19.418 14.648,30.413 10.07,47.223 25,37.772 39.929,47.223 35.352,30.413 "></polygon>
+                      </g>
+                    </g>
+                    <g id="halfstar">
+                      <use xlinkHref="#nostar" fill="url(#half)"></use>
+                    </g>
+                    <g id="star">
+                      <use xlinkHref="#nostar" fill="#f46c5f"></use>
+                    </g>
+                  </defs>
+                  <g fill="#ddd">
+                    <use x="0" y="0" xlinkHref="#star"></use>
+                    <use x="50" y="0" xlinkHref="#star"></use>
+                    <use x="100" y="0" xlinkHref="#star"></use>
+                    <use x="150" y="0" xlinkHref="#star"></use>
+                    <use x="200" y="0" xlinkHref="#star"></use>
+                  </g>
+                </svg>
+              </div>
+
+              <div className="text-[16px] text-gray-200 tracking-[1px] font-light">
+                ({reviews.count} omdömen)
+              </div>
+            </a>
+          </div>
+
+          <div className="my-6.25">
+            <a
+              href="https://www.timecenter.se/lirkab/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bahn bg-black text-white py-4 px-16 text-center inline-block text-[20px] tracking-[2px] transition-opacity hover:opacity-80"
+            >
+              Boka tid
+            </a>
+          </div>
+        </div>
+      </main>
+
+      <footer className="mt-auto w-full h-10 bg-[#7F8386] flex justify-center items-center">
+        <div className="w-full h-full flex items-center justify-center">
+          <p className="font-bahn text-white text-[13px] leading-5 tracking-[1px] px-2.5">
+            &copy; {new Date().getFullYear()} - Lerbergets idrotts & rehabklinik AB
+          </p>
+        </div>
+      </footer>
+
+    </div>
+  );
+}