talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

making things responsive on landing page

Browse Source
This commit is contained in:
talksik
2022-04-18 07:44:50 -05:00
parent 1fc82dbb04
commit 5221c4faab
4 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/components/logo/horizontal.tsx
+3 -3
View File
@@ -4,14 +4,14 @@ export default function HorizontalLogo({
className,
type,
}: {
className: string;
className?: string;
type?: LogoType;
}) {
if (type === LogoType.small) {
return (
<svg
width="333"
height="108"
width="150"
height="55"
viewBox="0 0 333 108"
fill="none"
xmlns="http://www.w3.org/2000/svg"
packages/web/components/footer/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import FullMottoLogo from "../../../components/logo/fullMotto";
export default function Footer() {
return (
<div className="container mx-auto flex justify-between mt-auto items-center">
<div className="container mx-auto flex md:flex-row flex-col justify-between mt-auto items-center">
<span className="ml-20">
<span className="text-zinc-400 text-sm">Wanna chat? </span>
<span className="font-bold text-white">arjunpatel@berkeley.edu</span>
packages/web/components/header/index.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import HorizontalLogo from "../../../components/logo/horizontal";
import { LogoType } from "@nirvana/components/logo/full";
export default function Header() {
return (
<div className="container mx-auto p-0 flex flex-row justify-start">
<HorizontalLogo className="scale-[0.5]" />
<div className="container mx-auto md:px-20 px-10 pt-5 flex flex-row justify-center md:justify-start">
<HorizontalLogo type={LogoType.small} />
</div>
);
}
packages/web/pages/index.tsx
+11 -11
View File
@@ -18,28 +18,28 @@ const Home: NextPage = () => {
{/* header */}
<Header />
<div className="container mx-auto px-20">
{/* above fold experience */}
<div className="flex flex-row items-center my-10">
{/* above fold experience */}
<div className="container mx-auto md:px-20 px-10">
<div className="flex md:flex-row flex-col items-center my-10">
<div className="flex flex-col items-start">
<span className="text-white text-6xl leading-[1.2] font-extrabold">
<span className="text-white text-5xl md:text-6xl leading-[1.2] font-extrabold text-center md:text-left">
The <span className="text-nirvanaTeal">walkie-talkie</span> <br />{" "}
for remote teams.
</span>
<span className="text-zinc-400 text-xl mt-5">
<span className="text-zinc-400 text-lg md:text-xl mt-5 text-center md:text-left">
The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
approach. Skip zoom scheduling, <br></br> slack notifications, and
email threads. <br /> Just talk to your team.
</span>
{/* download */}
<span className="flex flex-col justify-start mt-20">
<div className="flex flex-col justify-start mt-20 text-center md:text-left w-full items-center md:items-start">
<span className="text-white text-md mb-2">
Download the desktop app (coming soon)
Download the desktop app <br></br> (coming soon)
</span>
<span className="flex flex-row space-x-2">
<span className="flex flex-row space-x-2 justify-center">
<span className="p-2 rounded bg-zinc-500 cursor-pointer blur-[2px]">
<BsWindows className="text-white text-xl" />
</span>
@@ -48,18 +48,18 @@ const Home: NextPage = () => {
<BsApple className="text-white text-xl" />
</span>
</span>
</span>
</div>
</div>
<img
src="/illustrations/undraw_co-working_re_w93t.svg"
className="h-[30em] ml-auto"
className="h-[30em] ml-auto md:block hidden"
/>
</div>
</div>
{/* value points */}
<div className="flex flex-row w-full mx-auto px-20 py-10 bg-zinc-500 my-10 space-x-5 justify-center">
<div className="flex flex-col md:flex-row w-full mx-auto px-20 py-10 bg-zinc-500 my-10 gap-5 justify-center">
<span className="p-5 bg-zinc-600 max-w-md flex flex-col items-start flex-1 shadow">
<span className="flex flex-row items-center space-x-2">
<FaRunning className="text-white text-xl" />