Skip to content

Commit 85eb738

Browse files
danmindrudanmindru
committed
🔄 Sync Landing Page components
1 parent ab8a51e commit 85eb738

18 files changed

+841
-9
lines changed

‎components/landing/LandingFaq.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const LandingFaqSection = ({
4343
withBackground && variant === 'secondary'
4444
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
4545
: '',
46-
withBackgroundGlow ? 'overflow-hidden' : '',
46+
withBackgroundGlow ? 'relative overflow-hidden' : '',
4747
className,
4848
)}
4949
>

‎components/landing/LandingFaqCollapsible.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const LandingFaqCollapsibleSection = ({
4949
withBackground && variant === 'secondary'
5050
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
5151
: '',
52-
withBackgroundGlow ? 'overflow-hidden' : '',
52+
withBackgroundGlow ? 'relative overflow-hidden' : '',
5353
className,
5454
)}
5555
>

‎components/landing/LandingProductTour.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const LandingProductTourSection = React.forwardRef<
4848
withBackground && variant === 'secondary'
4949
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
5050
: '',
51-
withBackgroundGlow ? 'overflow-hidden' : '',
51+
withBackgroundGlow ? 'relative overflow-hidden' : '',
5252
className,
5353
)}
5454
>

‎components/landing/LandingProductVideoFeature.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const LandingProductVideoFeature = ({
6666
withBackground && variant === 'secondary'
6767
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
6868
: '',
69-
withBackgroundGlow ? 'overflow-hidden' : '',
69+
withBackgroundGlow ? 'relative overflow-hidden' : '',
7070
className,
7171
)}
7272
>

‎components/landing/cta/LandingSaleCta.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const LandingSaleCtaSection = ({
5050
withBackground && variant === 'secondary'
5151
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
5252
: '',
53-
withBackgroundGlow ? 'overflow-hidden' : '',
53+
withBackgroundGlow ? 'relative overflow-hidden' : '',
5454
className,
5555
)}
5656
>

‎components/landing/feature/LandingFeatureList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const LandingFeatureList = ({
4747
withBackground && variant === 'secondary'
4848
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
4949
: '',
50-
withBackgroundGlow ? 'overflow-hidden' : '',
50+
withBackgroundGlow ? 'relative overflow-hidden' : '',
5151
className,
5252
)}
5353
>

‎components/landing/footer/LandingFooter.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from 'next/link';
4+
import { OrbitIcon } from 'lucide-react';
5+
import { GlowBg } from '@/components/shared/ui/glow-bg';
6+
7+
/**
8+
* A footer component meant to be used in the landing page.
9+
* It shows a footer with a title, description, and can render columns of links etc.
10+
*/
11+
export const LandingFooter = ({
12+
className,
13+
children,
14+
title,
15+
description,
16+
footnote,
17+
logoComponent,
18+
withBackground = false,
19+
withBackgroundGlow = false,
20+
variant = 'primary',
21+
backgroundGlowVariant = 'primary',
22+
}: {
23+
className?: string;
24+
children?: React.ReactNode;
25+
title?: string;
26+
description?: string;
27+
footnote?: string | React.ReactNode;
28+
logoComponent?: React.ReactNode;
29+
withBackground?: boolean;
30+
withBackgroundGlow?: boolean;
31+
variant?: 'primary' | 'secondary';
32+
backgroundGlowVariant?: 'primary' | 'secondary';
33+
}) => {
34+
const columnNumber = React.Children.count(children);
35+
36+
return (
37+
<footer
38+
className={clsx(
39+
'mt-auto w-full bg-gradient-to-r from-white/5 via-white/60 to-white/5 backdrop-blur-sm dark:from-slate-700/5 dark:via-slate-700/60 dark:to-slate-700/5',
40+
withBackground && variant === 'primary'
41+
? 'bg-primary-100/20 dark:bg-primary-900/10'
42+
: '',
43+
withBackground && variant === 'secondary'
44+
? 'bg-secondary-100/20 dark:bg-secondary-900/10'
45+
: '',
46+
withBackgroundGlow ? 'relative overflow-hidden' : '',
47+
className,
48+
)}
49+
>
50+
{withBackgroundGlow ? (
51+
<div className="hidden lg:flex justify-center w-full h-full absolute -bottom-1/2 pointer-events-none">
52+
<GlowBg
53+
className={clsx('w-full h-auto z-0 dark:opacity-50 opacity-100')}
54+
variant={backgroundGlowVariant}
55+
/>
56+
</div>
57+
) : null}
58+
59+
<div
60+
className={clsx(
61+
'flex flex-col gap-4 justify-between items-center w-full p-6',
62+
)}
63+
>
64+
<div className="w-full flex flex-col md:flex-row justify-between gap-6 mt-12 p-6 max-w-full container-wide">
65+
<div className="w-full flex flex-col gap-4 md:max-w-xs lg:max-w-sm">
66+
<Link href="/">
67+
{logoComponent || (
68+
<div className="flex items-center gap-3 justify-start">
69+
<OrbitIcon className="h-8 w-8 text-primary-900 dark:text-primary-100" />
70+
71+
<div className="hidden text-2xl font-semibold font-display sm:flex gap-2 h-full">
72+
Page <span className="font-bold">UI</span>
73+
</div>
74+
</div>
75+
)}
76+
</Link>
77+
78+
{title ? (
79+
<div className="text-lg font-semibold h-full">{title}</div>
80+
) : null}
81+
82+
{description ? (
83+
<p className="text-sm opacity-70">{description}</p>
84+
) : null}
85+
</div>
86+
87+
<div
88+
className={clsx(
89+
'grid md:grid-cols-2 gap-12 items-start mt-6 md:mt-0',
90+
columnNumber === 3 ? 'md:grid-cols-3' : '',
91+
columnNumber === 4 ? 'lg:grid-cols-4' : '',
92+
)}
93+
>
94+
{children}
95+
</div>
96+
</div>
97+
</div>
98+
99+
{footnote ? (
100+
<div>
101+
<hr
102+
className="w-full my-4 border-0 bg-gradient-to-r from-white/5 via-black/10 to-white/5 dark:from-black/5 dark:via-white/30 darK:to-black/5"
103+
style={{ height: '1px' }}
104+
/>
105+
106+
<div className="py-8 px-2 flex flex-col items-center">
107+
<div className="w-full text-center lg:flex lg:justify-center p-4 mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
108+
{footnote}
109+
</div>
110+
</div>
111+
</div>
112+
) : null}
113+
</footer>
114+
);
115+
};

‎components/landing/footer/LandingFooterColumn.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { clsx } from 'clsx';
2+
3+
/**
4+
* A component meant to be used with LandingFooter.
5+
* It shows a title and a column of links or other content.
6+
*/
7+
export const LandingFooterColumn = ({
8+
className,
9+
children,
10+
title,
11+
}: {
12+
className?: string;
13+
children: React.ReactNode;
14+
title?: string;
15+
}) => {
16+
return (
17+
<div
18+
className={clsx(
19+
'flex flex-col gap-4 justify-center w-full text-xs',
20+
className,
21+
)}
22+
>
23+
<p className="text-slate-900 dark:text-slate-100 font-light text-base">
24+
{title}
25+
</p>
26+
27+
<div className="flex flex-col flex-wrap gap-4 justify-center w-full">
28+
{children}
29+
</div>
30+
</div>
31+
);
32+
};

‎components/landing/footer/LandingFooterLink.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import clsx from 'clsx';
2+
import Link from 'next/link';
3+
4+
/**
5+
* A component meant to be used with LandingFooter / LandingFooterColumn.
6+
* It shows a title and a column of links or other content.
7+
*/
8+
export const LandingFooterLink = ({
9+
href,
10+
children,
11+
variant = 'primary',
12+
className,
13+
}: {
14+
href: string;
15+
children: string | React.ReactNode;
16+
variant?: 'primary' | 'secondary';
17+
className?: string;
18+
}) => {
19+
return (
20+
<Link
21+
href={href}
22+
className={clsx(
23+
'transition-colors text-xs',
24+
variant === 'primary' ? 'text-primary hover:text-primary-500' : null,
25+
variant === 'secondary'
26+
? 'text-secondary hover:text-secondary-500'
27+
: null,
28+
className,
29+
)}
30+
>
31+
{children}
32+
</Link>
33+
);
34+
};

‎components/landing/navigation/LandingHeader.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import Link from 'next/link';
5+
import { MenuIcon, OrbitIcon } from 'lucide-react';
6+
import { Button } from '@/components/shared/ui/button';
7+
import {
8+
Sheet,
9+
SheetContent,
10+
SheetTrigger,
11+
} from '@/components/shared/ui/sheet';
12+
import clsx from 'clsx';
13+
14+
/**
15+
* A component that renders the navigation bar for the landing page.
16+
* It includes a logo and a list of navigation items. On mobile, it collapses into a burger + side sheet.
17+
*/
18+
export const LandingHeader = ({
19+
logoComponent,
20+
children,
21+
withBackground = false,
22+
variant = 'primary',
23+
fixed = false,
24+
}: {
25+
logoComponent?: React.ReactElement;
26+
children: React.ReactElement;
27+
withBackground?: boolean;
28+
variant?: 'primary' | 'secondary';
29+
fixed?: boolean;
30+
}) => {
31+
const [isOpen, setIsOpen] = useState(false);
32+
33+
return (
34+
<nav
35+
className={clsx(
36+
'flex items-center justify-between gap-6 mb-20 lg:mb-32 p-4 w-full max-w-full container-narrow',
37+
fixed ? 'fixed top-0 left-auto right-auto z-50 backdrop-blur-xl' : '',
38+
withBackground ? 'lg:m-4 lg:rounded-lg justify-self-center' : '',
39+
withBackground && variant === 'primary'
40+
? 'bg-primary-100/20 dark:bg-primary-900/10 border border-primary-100/30 dark:border-primary-900/30'
41+
: '',
42+
withBackground && variant === 'secondary'
43+
? 'bg-secondary-100/20 dark:bg-secondary-900/10 border border-secondary-100/30 dark:border-secondary-900/30'
44+
: '',
45+
)}
46+
>
47+
<div className="flex items-center">
48+
<Link href="/" className="text-2xl font-bold">
49+
<div className="flex items-center gap-3 justify-between">
50+
{logoComponent || (
51+
<>
52+
<OrbitIcon className="h-8 w-8 text-primary-900 dark:text-primary-100" />
53+
54+
<div className="hidden text-2xl font-semibold font-display sm:flex gap-2 h-full">
55+
Page <span className="font-bold">UI</span>
56+
</div>
57+
</>
58+
)}
59+
</div>
60+
</Link>
61+
</div>
62+
63+
<div className="hidden md:flex items-center gap-6">{children}</div>
64+
65+
<div className="md:hidden">
66+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
67+
<SheetTrigger asChild>
68+
<Button variant="outline" className="px-3">
69+
<MenuIcon className="h-6 w-6 mr-2" />
70+
Menu
71+
</Button>
72+
</SheetTrigger>
73+
<SheetContent side="right">
74+
<nav className="flex flex-col gap-4 mt-8">{children}</nav>
75+
</SheetContent>
76+
</Sheet>
77+
</div>
78+
</nav>
79+
);
80+
};

0 commit comments

Comments
 (0)