Skip to content

Commit 1dcfc86

Browse files
MeschacirungMeschacirung
authored
Merge pull request #8 from Meschacirung/feat/features
Feat/features
2 parents d7f0693 + a75549d commit 1dcfc86

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1241
-60
lines changed

‎app/globals.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,27 @@
4545
--radius-lg: var(--radius);
4646
--radius-md: calc(var(--radius) - 2px);
4747
--radius-sm: calc(var(--radius) - 4px);
48+
49+
--animate-accordion-down: accordion-down 0.2s ease-out;
50+
--animate-accordion-up: accordion-up 0.2s ease-out;
51+
52+
@keyframes accordion-down {
53+
from {
54+
height: 0;
55+
}
56+
to {
57+
height: var(--radix-accordion-content-height);
58+
}
59+
}
60+
61+
@keyframes accordion-up {
62+
from {
63+
height: var(--radix-accordion-content-height);
64+
}
65+
to {
66+
height: 0;
67+
}
68+
}
4869
}
4970

5071
/*

‎app/layout.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from 'next/font/google'
33
import './globals.css'
44
import { ThemeProvider } from '@/components/theme-provider'
55
import { GoogleAnalytics } from '@next/third-parties/google'
6+
import ServiceWorkerInit from '@/components/ServiceWorkerInit'
67

78
const geistSans = Geist({
89
variable: '--font-geist-sans',
@@ -15,7 +16,7 @@ const geistMono = Geist_Mono({
1516
})
1617

1718
export const metadata: Metadata = {
18-
title: 'Shadcn Blocks',
19+
title: 'Shadcn Marketing Blocks',
1920
description: 'Speed up your workflow with responsive, pre-built UI blocks designed for marketing websites.',
2021
}
2122

@@ -27,9 +28,14 @@ export default function RootLayout({
2728
return (
2829
<html lang="en">
2930
<body className={`${geistSans.variable} ${geistMono.variable} overflow-x-hidden antialiased`}>
30-
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
31+
<ThemeProvider
32+
attribute="class"
33+
defaultTheme="system"
34+
enableSystem
35+
disableTransitionOnChange>
3136
{children}
3237
</ThemeProvider>
38+
<ServiceWorkerInit />
3339
</body>
3440
<GoogleAnalytics gaId="G-6KY6TLKXKY" />
3541
</html>

‎app/preview/features/eleven/page.tsx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { Card, CardContent, CardHeader } from '@/components/ui/card'
2+
import { Globe } from 'lucide-react'
3+
import Image from 'next/image'
4+
5+
export default function Features() {
6+
return (
7+
<section className="dark:bg-muted/25 bg-zinc-50 py-16 md:py-32">
8+
<div className="mx-auto max-w-5xl px-6">
9+
<div className="mx-auto grid gap-2 sm:grid-cols-5">
10+
<Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-tl-xl">
11+
<CardHeader>
12+
<div className="md:p-6">
13+
<p className="font-medium">Advanced tracking system</p>
14+
<p className="text-muted-foreground mt-3 max-w-sm text-sm">Quick AI lives a single hotkey away - ready to quickly appear as a floating window above your other apps..</p>
15+
</div>
16+
</CardHeader>
17+
18+
<div className="relative h-fit pl-6 md:pl-12">
19+
<div className="absolute -inset-6 [background:radial-gradient(75%_95%_at_50%_0%,transparent,var(--color-background)_100%)]"></div>
20+
21+
<div className="bg-background overflow-hidden rounded-tl-lg border-l border-t pl-2 pt-2 dark:bg-zinc-950">
22+
<Image
23+
src="/mail2.png"
24+
className="hidden dark:block"
25+
alt="payments illustration dark"
26+
width={1207}
27+
height={929}
28+
/>
29+
<Image
30+
src="/mail2-light.png"
31+
className="shadow dark:hidden"
32+
alt="payments illustration light"
33+
width={1207}
34+
height={929}
35+
/>
36+
</div>
37+
</div>
38+
</Card>
39+
40+
<Card className="group overflow-hidden shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-tr-xl">
41+
<p className="mx-auto my-6 max-w-md text-balance px-6 text-center text-lg font-semibold sm:text-2xl md:p-6">Advanced UX, Instantly locate all your assets.</p>
42+
43+
<CardContent className="mt-auto h-fit">
44+
<div className="relative mb-6 sm:mb-0">
45+
<div className="absolute -inset-6 [background:radial-gradient(50%_75%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
46+
<div className="aspect-76/59 overflow-hidden rounded-r-lg border">
47+
<Image
48+
src="/origin-cal-dark.png"
49+
className="hidden dark:block"
50+
alt="payments illustration dark"
51+
width={1207}
52+
height={929}
53+
/>
54+
<Image
55+
src="/origin-cal.png"
56+
className="shadow dark:hidden"
57+
alt="payments illustration light"
58+
width={1207}
59+
height={929}
60+
/>
61+
</div>
62+
</div>
63+
</CardContent>
64+
</Card>
65+
<Card className="group p-6 shadow-zinc-950/5 sm:col-span-2 sm:rounded-none sm:rounded-bl-xl md:p-12">
66+
<p className="mx-auto mb-12 max-w-md text-balance text-center text-lg font-semibold sm:text-2xl">Advanced UX, Instantly locate all your assets.</p>
67+
68+
<div className="flex justify-center gap-6">
69+
<div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 relative flex aspect-square size-16 items-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
70+
<span className="absolute right-2 top-1 block text-sm">fn</span>
71+
<Globe className="mt-auto size-4" />
72+
</div>
73+
<div className="inset-shadow-sm dark:inset-shadow-white/5 bg-muted/35 flex aspect-square size-16 items-center justify-center rounded-[7px] border p-3 shadow-lg ring dark:shadow-white/5 dark:ring-black">
74+
<span>K</span>
75+
</div>
76+
</div>
77+
</Card>
78+
<Card className="group relative shadow-zinc-950/5 sm:col-span-3 sm:rounded-none sm:rounded-br-xl">
79+
<CardHeader className="p-6 md:p-12">
80+
<p className="font-medium">Advanced tracking system</p>
81+
<p className="text-muted-foreground mt-2 max-w-sm text-sm">Quick AI lives a single hotkey away apps..</p>
82+
</CardHeader>
83+
<CardContent className="relative h-fit px-6 pb-6 md:px-12 md:pb-12">
84+
<div className="grid grid-cols-4 gap-2 md:grid-cols-6">
85+
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
86+
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
87+
<img
88+
className="m-auto size-8 invert dark:invert-0"
89+
src="https://oxymor-ns.tailus.io/logos/linear.svg"
90+
alt="Linear logo"
91+
width="32"
92+
height="32"
93+
/>
94+
</div>
95+
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
96+
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
97+
<img
98+
className="m-auto size-8 invert dark:invert-0"
99+
src="https://oxymor-ns.tailus.io/logos/netlify.svg"
100+
alt="Netlify logo"
101+
width="32"
102+
height="32"
103+
/>
104+
</div>
105+
<div className="rounded-(--radius) aspect-square border border-dashed"></div>
106+
<div className="rounded-(--radius) bg-muted/50 flex aspect-square items-center justify-center border p-4">
107+
<img
108+
className="m-auto size-8 invert dark:invert-0"
109+
src="https://oxymor-ns.tailus.io/logos/github.svg"
110+
alt="github logo"
111+
width="32"
112+
height="32"
113+
/>
114+
</div>
115+
</div>
116+
</CardContent>
117+
</Card>
118+
</div>
119+
</div>
120+
</section>
121+
)
122+
}

‎app/preview/features/ten/page.tsx

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import { Card, CardContent, CardHeader } from '@/components/ui/card'
2+
import { cn } from '@/lib/utils'
3+
import { Calendar, LucideIcon, MapIcon } from 'lucide-react'
4+
import Image from 'next/image'
5+
import { ReactNode } from 'react'
6+
7+
export default function Features() {
8+
return (
9+
<section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
10+
<div className="mx-auto max-w-2xl px-6 lg:max-w-5xl">
11+
<div className="mx-auto grid gap-4 lg:grid-cols-2">
12+
<FeatureCard>
13+
<CardHeader className="pb-3">
14+
<CardHeading
15+
icon={MapIcon}
16+
title="Real time location tracking"
17+
description="Advanced tracking system, Instantly locate all your assets."
18+
/>
19+
</CardHeader>
20+
21+
<div className="relative mb-6 border-t border-dashed sm:mb-0">
22+
<div className="absolute inset-0 [background:radial-gradient(125%_125%_at_50%_0%,transparent_40%,var(--color-blue-600),var(--color-white)_100%)]"></div>
23+
<div className="aspect-76/59 p-1 px-6">
24+
<DualModeImage
25+
darkSrc="/payments.png"
26+
lightSrc="/payments-light.png"
27+
alt="payments illustration"
28+
width={1207}
29+
height={929}
30+
/>
31+
</div>
32+
</div>
33+
</FeatureCard>
34+
35+
<FeatureCard>
36+
<CardHeader className="pb-3">
37+
<CardHeading
38+
icon={Calendar}
39+
title="Advanced Scheduling"
40+
description="Scheduling system, Instantly locate all your assets."
41+
/>
42+
</CardHeader>
43+
44+
<CardContent>
45+
<div className="relative mb-6 sm:mb-0">
46+
<div className="absolute -inset-6 [background:radial-gradient(50%_50%_at_75%_50%,transparent,var(--color-background)_100%)]"></div>
47+
<div className="aspect-76/59 border">
48+
<DualModeImage
49+
darkSrc="/origin-cal-dark.png"
50+
lightSrc="/origin-cal.png"
51+
alt="calendar illustration"
52+
width={1207}
53+
height={929}
54+
/>
55+
</div>
56+
</div>
57+
</CardContent>
58+
</FeatureCard>
59+
60+
<FeatureCard className="p-6 lg:col-span-2">
61+
<p className="mx-auto my-6 max-w-md text-balance text-center text-2xl font-semibold">Smart scheduling with automated reminders for maintenance.</p>
62+
63+
<div className="flex justify-center gap-6 overflow-hidden">
64+
<CircularUI
65+
label="Inclusion"
66+
circles={[{ pattern: 'border' }, { pattern: 'border' }]}
67+
/>
68+
69+
<CircularUI
70+
label="Inclusion"
71+
circles={[{ pattern: 'none' }, { pattern: 'primary' }]}
72+
/>
73+
74+
<CircularUI
75+
label="Join"
76+
circles={[{ pattern: 'blue' }, { pattern: 'none' }]}
77+
/>
78+
79+
<CircularUI
80+
label="Exclusion"
81+
circles={[{ pattern: 'primary' }, { pattern: 'none' }]}
82+
className="hidden sm:block"
83+
/>
84+
</div>
85+
</FeatureCard>
86+
</div>
87+
</div>
88+
</section>
89+
)
90+
}
91+
92+
interface FeatureCardProps {
93+
children: ReactNode
94+
className?: string
95+
}
96+
97+
const FeatureCard = ({ children, className }: FeatureCardProps) => (
98+
<Card className={cn('group relative rounded-none shadow-zinc-950/5', className)}>
99+
<CardDecorator />
100+
{children}
101+
</Card>
102+
)
103+
104+
const CardDecorator = () => (
105+
<>
106+
<span className="border-primary absolute -left-px -top-px block size-2 border-l-2 border-t-2"></span>
107+
<span className="border-primary absolute -right-px -top-px block size-2 border-r-2 border-t-2"></span>
108+
<span className="border-primary absolute -bottom-px -left-px block size-2 border-b-2 border-l-2"></span>
109+
<span className="border-primary absolute -bottom-px -right-px block size-2 border-b-2 border-r-2"></span>
110+
</>
111+
)
112+
113+
interface CardHeadingProps {
114+
icon: LucideIcon
115+
title: string
116+
description: string
117+
}
118+
119+
const CardHeading = ({ icon: Icon, title, description }: CardHeadingProps) => (
120+
<div className="p-6">
121+
<span className="text-muted-foreground flex items-center gap-2">
122+
<Icon className="size-4" />
123+
{title}
124+
</span>
125+
<p className="mt-8 text-2xl font-semibold">{description}</p>
126+
</div>
127+
)
128+
129+
interface DualModeImageProps {
130+
darkSrc: string
131+
lightSrc: string
132+
alt: string
133+
width: number
134+
height: number
135+
className?: string
136+
}
137+
138+
const DualModeImage = ({ darkSrc, lightSrc, alt, width, height, className }: DualModeImageProps) => (
139+
<>
140+
<Image
141+
src={darkSrc}
142+
className={cn('hidden dark:block', className)}
143+
alt={`${alt} dark`}
144+
width={width}
145+
height={height}
146+
/>
147+
<Image
148+
src={lightSrc}
149+
className={cn('shadow dark:hidden', className)}
150+
alt={`${alt} light`}
151+
width={width}
152+
height={height}
153+
/>
154+
</>
155+
)
156+
157+
interface CircleConfig {
158+
pattern: 'none' | 'border' | 'primary' | 'blue'
159+
}
160+
161+
interface CircularUIProps {
162+
label: string
163+
circles: CircleConfig[]
164+
className?: string
165+
}
166+
167+
const CircularUI = ({ label, circles, className }: CircularUIProps) => (
168+
<div className={className}>
169+
<div className="bg-linear-to-b from-border size-fit rounded-2xl to-transparent p-px">
170+
<div className="bg-linear-to-b from-background to-muted/25 relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4">
171+
{circles.map((circle, i) => (
172+
<div
173+
key={i}
174+
className={cn('size-7 rounded-full border sm:size-8', {
175+
'border-primary': circle.pattern === 'none',
176+
'border-primary bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'border',
177+
'border-primary bg-background bg-[repeating-linear-gradient(-45deg,var(--color-primary),var(--color-primary)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'primary',
178+
'bg-background z-1 border-blue-500 bg-[repeating-linear-gradient(-45deg,var(--color-blue-500),var(--color-blue-500)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'blue',
179+
})}></div>
180+
))}
181+
</div>
182+
</div>
183+
<span className="text-muted-foreground mt-1.5 block text-center text-sm">{label}</span>
184+
</div>
185+
)

0 commit comments

Comments
 (0)