sort of responsive, good enough

This commit is contained in:
talksik
2022-01-20 04:05:58 -08:00
parent 3598e17a2a
commit fe2d0ccbc5
+12 -9
View File
@@ -34,7 +34,7 @@ export default function Home() {
return ( return (
<div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat"> <div className="landing-page-bg bg-left-bottom bg-fixed bg-cover bg-no-repeat">
<div className="container mx-auto pb-10"> <div className="container mx-auto md:pb-10 px-5">
{/* header */} {/* header */}
<div className="flex flex-row py-5 px-5 items-center justify-start mx-auto"> <div className="flex flex-row py-5 px-5 items-center justify-start mx-auto">
<MainLogo className="mr-auto text-3xl" /> <MainLogo className="mr-auto text-3xl" />
@@ -50,9 +50,12 @@ export default function Home() {
</div> </div>
<div className="flex flex-col justify-start items-baseline max-w-screen-sm md:mt-20 backdrop-blur-xl rounded-lg"> <div className="flex flex-col justify-start items-baseline max-w-screen-sm md:mt-20 backdrop-blur-xl rounded-lg">
<span className="flex flex-row text-left text-6xl space-x-5 h-[5rem] overflow-hidden"> <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5 h-[5rem] overflow-hidden">
<span className="font-semibold text-black py-4">Less</span> <span className="font-semibold text-black py-4">Less</span>
<span className="flippingWords flex flex-col space-y-5 text-red-600 "> <span className="md:hidden flex flex-row space-x-2 py-4 text-red-600">
<FaSlackHash /> <span>slacking</span>
</span>
<span className="md:flippingWords hidden md:flex flex-col space-y-5 text-red-600 ">
<span className="flex flex-row space-x-2"> <span className="flex flex-row space-x-2">
<FaRocketchat /> <span>threads</span> <FaRocketchat /> <span>threads</span>
</span> </span>
@@ -71,12 +74,12 @@ export default function Home() {
</span> </span>
</span> </span>
<span className="flex flex-row text-left text-6xl space-x-5"> <span className="flex flex-row text-left md:text-6xl text-3xl space-x-5">
<span className="font-semibold text-black">More</span> <span className="font-semibold text-black">More</span>
<span className="text-sky-600 font-bold">work.</span> <span className="text-sky-600 font-bold">work.</span>
</span> </span>
<span className="my-10 text-xl max-w-xl text-gray-600"> <span className="my-10 text-md md:text-xl max-w-xl text-gray-600">
Minimal collaboration tool for scrum/agile teams. Wasting 80% of Minimal collaboration tool for scrum/agile teams. Wasting 80% of
your work day on slack, teams, gmail, calendars, chats, emojis, your work day on slack, teams, gmail, calendars, chats, emojis,
notifications? notifications?
@@ -94,7 +97,7 @@ export default function Home() {
</div> </div>
{/* main mission */} {/* main mission */}
<div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl md:mt-[15rem] p-10"> <div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl md:mt-[15rem] mt-[5rem] p-10">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"> <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
Philosophy Philosophy
</span> </span>
@@ -114,7 +117,7 @@ export default function Home() {
</div> </div>
{/* voice line concept */} {/* voice line concept */}
<div className="mx-auto flex flex-row items-start justify-between mt-[15rem] pb-20"> <div className="mx-auto flex flex-row md:flex-wrap overflow-x-scroll items-start justify-between md:mt-[15rem] mt-[5rem] pb-20">
<span className="flex flex-col grow max-w-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10"> <span className="flex flex-col grow max-w-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"> <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
Voice Line Voice Line
@@ -141,8 +144,8 @@ export default function Home() {
<Announcements /> <Announcements />
</div> </div>
{/* explaining rooms */} {/* rooms concept */}
<div className="mx-auto flex flex-row flex-wrap items-start justify-between mt-[15rem]"> <div className="mx-auto flex flex-row flex-wrap items-start justify-between md:mt-[15rem] mt-[5rem]">
<Rooms /> <Rooms />
<span className="flex flex-col grow max-w-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10"> <span className="flex flex-col grow max-w-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10">