Skip to content

Commit

Permalink
Merge pull request #156 from BrunoAseff/staging
Browse files Browse the repository at this point in the history 
style: make footer responsive
  • Loading branch information
@BrunoAseff
BrunoAseff authored Feb 2, 2025
2 parents c175752 + fe637ee commit 3b70fec
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 57 deletions.
6 changes: 3 additions & 3 deletions src/components/landing-page/Cards/AppearanceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default function AppearanceCard() {
};

return (
<div className="mb-3 w-full items-center justify-center rounded-2xl border-accent bg-accent-foreground">
<div className="w-full items-center justify-center rounded-2xl border-accent bg-accent-foreground">
<RadioGroup
className="flex w-full items-center justify-center gap-4"
value={selectedTheme}
Expand Down Expand Up @@ -149,7 +149,7 @@ export default function AppearanceCard() {
))}
</RadioGroup>
<RadioGroup
className="mx-auto mt-4 grid w-fit scale-75 grid-cols-3 items-center justify-center gap-6 md:scale-90"
className="mx-auto mt-4 grid w-fit origin-left scale-75 grid-cols-3 items-center justify-center gap-x-24 md:scale-90 md:gap-6"
value={selectedCustomTheme}
onValueChange={handleCustomThemeChange}
>
Expand All @@ -160,7 +160,7 @@ export default function AppearanceCard() {
value={item.id}
className="peer sr-only after:absolute after:inset-0"
/>
<div className="relative cursor-pointer overflow-hidden rounded-2xl border-2 border-input fill-foreground px-2 py-1 outline-offset-1 transition-colors peer-[:focus-visible]:outline peer-[:focus-visible]:outline-2 peer-[:focus-visible]:outline-ring/70 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-secondary peer-data-[state=checked]:bg-secondary-smooth-700/10 peer-data-[state=checked]:fill-secondary peer-data-[disabled]:opacity-50">
<div className="md:min-w-none relative min-w-28 cursor-pointer overflow-hidden rounded-2xl border-2 border-input fill-foreground px-2 py-1 outline-offset-1 transition-colors peer-[:focus-visible]:outline peer-[:focus-visible]:outline-2 peer-[:focus-visible]:outline-ring/70 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-secondary peer-data-[state=checked]:bg-secondary-smooth-700/10 peer-data-[state=checked]:fill-secondary peer-data-[disabled]:opacity-50">
{item.icon}
</div>
<span className="group mt-2 flex items-center gap-1 text-secondary peer-data-[state=unchecked]:text-muted-foreground/70">
Expand Down
24 changes: 23 additions & 1 deletion src/components/landing-page/Cards/BackgroundCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Image from "next/image";
import { useEffect, useState } from "react";

const FEATURED_BACKGROUNDS = [
{
Expand Down Expand Up @@ -40,11 +41,32 @@ const FEATURED_BACKGROUNDS = [
] as const;

export const BackgroundCard = () => {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};

// Initial check
checkMobile();

// Add resize listener
window.addEventListener("resize", checkMobile);

// Cleanup
return () => window.removeEventListener("resize", checkMobile);
}, []);

const displayedBackgrounds = isMobile
? FEATURED_BACKGROUNDS.slice(0, 6)
: FEATURED_BACKGROUNDS;

return (
<div className="mb-3 w-full min-w-[300px] items-center justify-center rounded-2xl border-accent bg-accent-foreground md:min-w-[640px]">
<div className="relative">
<div className="grid grid-cols-2 gap-6 pb-[1.5rem] md:grid-cols-3">
{FEATURED_BACKGROUNDS.map((background) => (
{displayedBackgrounds.map((background) => (
<div
key={background.url}
className="relative aspect-[5/3] overflow-hidden rounded-2xl"
Expand Down
2 changes: 1 addition & 1 deletion src/components/landing-page/Features.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function Features() {
index === selectedIndex ? "opacity-100" : "opacity-40"
} bg-accent-foreground`}
>
<div className="flex w-full flex-col gap-1">
<div className="flex max-w-none flex-col gap-1 md:max-w-[35vw]">
<h1 className="text-base font-medium md:text-xl">
{feature.title}
</h1>
Expand Down
12 changes: 6 additions & 6 deletions src/components/landing-page/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,23 @@ import Logo from "../nova/Logo";

export default function Footer() {
return (
<div className="flex w-full justify-between border-t-[1px] border-accent pb-32 pt-6">
<div className="flex w-full flex-col items-start px-10">
<div className="flex w-full max-w-[100vw] flex-col justify-between border-t-[1px] border-accent pb-32 pt-6 md:flex-row">
<div className="flex w-full flex-col items-start px-4 md:px-10">
<div className="w-full origin-left scale-50">
<Logo />
</div>

<p className="text-muted-foreground">© 2025, Nova Inc.</p>
<p className="mb-6 text-muted-foreground md:mb-0">© 2025, Nova Inc.</p>
</div>
<div className="flex flex-col items-end gap-4 px-10">
<div className="flex flex-col items-start gap-4 px-4 md:items-end md:px-10">
<LinkBtn className="cursor-pointer text-sm text-muted-foreground hover:text-secondary">
<Link href="/privacy-policy">Privacy Policy</Link>
</LinkBtn>
<LinkBtn className="cursor-pointer text-sm text-muted-foreground hover:text-secondary">
<Link href="/terms-of-service">Terms of Service</Link>
</LinkBtn>
<div className="flex flex-col items-end justify-end text-sm text-muted-foreground">
<p className="font-semibold">Email</p>{" "}
<div className="flex flex-col items-start justify-end text-sm text-muted-foreground md:items-end">
<p className="font-semibold">Get in touch</p>{" "}
<p>team.novaspaces@gmail.com</p>{" "}
</div>
</div>
Expand Down
87 changes: 46 additions & 41 deletions src/components/landing-page/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,52 +49,57 @@ export default function Nav() {

function MobileNav() {
return (
<nav className="fixed z-[98] flex w-full items-center justify-between border-b-[1px] border-secondary/10 bg-secondary/10 px-8 py-1 backdrop-blur-lg md:hidden">
<nav className="fixed z-[98] flex w-full items-center justify-between border-b-[1px] border-secondary/10 bg-secondary/10 px-2 py-1 backdrop-blur-lg md:hidden">
<div className="w-full origin-left scale-50">
<Logo />
</div>
<Sheet>
<SheetTrigger>
<List className="text-foreground" size={32} />
</SheetTrigger>
<SheetContent className="z-[99] flex flex-col gap-10">
<SheetTitle className="text-transparent">
<div className="w-full origin-left scale-50">
<Logo />
</div>
</SheetTitle>
<ul className="mt-6 flex flex-col gap-6 text-base text-foreground">
<li>
<LinkBtn className="cursor-pointer text-foreground">
<SheetClose asChild>
<Link href="#features">Features</Link>
</SheetClose>
</LinkBtn>
</li>
<li>
<LinkBtn className="cursor-pointer text-foreground">
<div className="flex items-center gap-3">
<Button className="block bg-secondary font-semibold md:hidden">
<Link href="/spaces">Try for free</Link>
</Button>
<Sheet>
<SheetTrigger>
<List className="text-foreground" size={32} />
</SheetTrigger>
<SheetContent className="z-[99] flex flex-col gap-10">
<SheetTitle className="text-transparent">
<div className="w-full origin-left scale-50">
<Logo />
</div>
</SheetTitle>
<ul className="mt-6 flex flex-col gap-6 text-base text-foreground">
<li>
<LinkBtn className="cursor-pointer text-foreground">
<SheetClose asChild>
<Link href="#features">Features</Link>
</SheetClose>
</LinkBtn>
</li>
<li>
<LinkBtn className="cursor-pointer text-foreground">
<SheetClose asChild>
<Link href="#pricing">Pricing</Link>
</SheetClose>
</LinkBtn>
</li>
<li>
<LinkBtn className="cursor-pointer text-foreground">
<SheetClose asChild>
<Link href="#footer">Contact</Link>
</SheetClose>
</LinkBtn>
</li>
</ul>
<div className="flex items-center gap-2">
<Button className="bg-secondary font-semibold" asChild>
<SheetClose asChild>
<Link href="#pricing">Pricing</Link>
<Link href="/spaces">Go to Nova</Link>
</SheetClose>
</LinkBtn>
</li>
<li>
<LinkBtn className="cursor-pointer text-foreground">
<SheetClose asChild>
<Link href="#footer">Contact</Link>
</SheetClose>
</LinkBtn>
</li>
</ul>
<div className="flex items-center gap-2">
<Button className="bg-secondary font-semibold" asChild>
<SheetClose asChild>
<Link href="/spaces">Go to Nova</Link>
</SheetClose>
</Button>
</div>
</SheetContent>
</Sheet>
</Button>
</div>
</SheetContent>
</Sheet>
</div>
</nav>
);
}
12 changes: 7 additions & 5 deletions src/components/landing-page/Pricing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,15 @@ export default function Pricing() {

return (
<div className="flex w-full flex-col items-center justify-center">
<h1 className="my-10 text-4xl font-[500] text-foreground">Pricing</h1>
<h1 className="mb-10 mt-0 text-4xl font-[500] text-foreground md:mt-10">
Pricing
</h1>

<div className="grid w-[90vw] grid-cols-1 items-stretch justify-center gap-4 md:grid-cols-2">
<div className="z-50 flex rounded-2xl border-[1px] border-foreground/10 bg-background">
<div className="flex w-full flex-col items-center justify-between p-10">
<div className="flex w-full flex-col items-center justify-between p-8 md:p-10">
<div className="w-full">
<Label className="flex w-full justify-between text-2xl font-[600]">
<Label className="flex w-full justify-between text-xl font-[600] md:text-2xl">
<p className="text-foreground">Nova</p>
<p>Free</p>
</Label>
Expand All @@ -59,9 +61,9 @@ export default function Pricing() {
</div>

<div className="z-40 flex rounded-2xl border-[1px] border-secondary/20 bg-background">
<div className="flex w-full flex-col items-center justify-between p-10">
<div className="flex w-full flex-col items-center justify-between p-8 md:p-10">
<div className="w-full">
<Label className="flex w-full justify-between bg-none text-2xl font-[600]">
<Label className="flex w-full justify-between bg-none text-xl font-[600] md:text-2xl">
<p className="bg-gradient-to-tl from-secondary via-secondary-smooth-500 to-secondary bg-clip-text text-transparent">
Supernova
</p>
Expand Down

0 comments on commit 3b70fec

Please sign in to comment.