108 lines
4.5 KiB
React
108 lines
4.5 KiB
React
// 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">
|
|
© {new Date().getFullYear()} - Lerbergets idrotts & rehabklinik AB
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
);
|
|
} |