Skip to content

Commit 70c09d3

Browse files
zzzzshawnapsinghdev
zzzzshawn
authored and
apsinghdev
committed
add pricing page
1 parent 3b4d163 commit 70c09d3

File tree

10 files changed

+443
-189
lines changed

10 files changed

+443
-189
lines changed

‎apps/web/public/assets/layer1.svg‎

Lines changed: 11 additions & 11 deletions
Loading

‎apps/web/src/app/(main)/(landing)/pricing/page.tsx‎

Lines changed: 376 additions & 71 deletions
Large diffs are not rendered by default.

‎apps/web/src/components/landing-sections/Bento.tsx‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
'use client'
22
import React from 'react'
3-
import { FlickeringGrid } from '../ui/flickering-grid'
43
import OrbitComponent from '../ui/orbit'
54
import CardStack from '../ui/card-stack'
65
import Image from 'next/image'
76
import { AnimatedList } from '../ui/animated-list'
87
import { cn } from '@/lib/utils'
98
import { Cap, Lucid, Mail0, SupMemory } from '../icons/icons'
109
import { motion } from 'framer-motion'
10+
import Header from '../ui/header'
1111

1212

1313
let notifications = [
@@ -42,31 +42,7 @@ notifications = Array.from({ length: 10 }, () => notifications).flat();
4242
const Bento = () => {
4343
return (
4444
<div id='features' className="flex flex-col w-full">
45-
<div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border-[#252525] ">
46-
<motion.h4
47-
initial={{ opacity: 0, y: 30, filter: 'blur(10px)' }}
48-
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
49-
transition={{ duration: 0.6, ease: 'easeOut', type: 'spring', delay: 0.3 }}
50-
className='font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center text-balance'>Supercharge Your Open Source Journey</motion.h4>
51-
<div
52-
style={{
53-
background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
54-
}}
55-
className=" h-full w-[100%] right-0 top-0 z-20 absolute"></div>
56-
{/* <div className="absolute h-[30%] w-full bg-gradient-to-b from-[#101010] via-transparent to-transparent top-0 left-1/2 -translate-x-1/2 z-20"></div> */}
57-
<div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
58-
<FlickeringGrid
59-
className="absolute -z-0 top-0 right-0"
60-
squareSize={3}
61-
gridGap={6}
62-
color="#3F1FBC"
63-
maxOpacity={1}
64-
flickerChance={0.1}
65-
height={200}
66-
width={2000}
67-
/>
68-
</div>
69-
</div>
45+
<Header title="Supercharge Your Open Source Journey"/>
7046
<div className="w-full border-b border-[#252525] flex flex-col lg:flex-row overflow-hidden">
7147
<div className="lg:w-1/3 border-b lg:border-b-0 lg:border-r border-[#252525] lg:aspect-square relative overflow-hidden p-2 flex-shrink-0 space-y-1 h-[400px] lg:h-full ">
7248
<div className="border border-dashed border-[#252525] w-full h-full relative overflow-hidden p-[30px] flex-shrink-0 flex flex-col gap-4 lg:gap-0 ">

‎apps/web/src/components/landing-sections/Brands.tsx‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,10 @@
11
import React from 'react'
2-
import { FlickeringGrid } from '../ui/flickering-grid'
2+
import Header from '../ui/header'
33

44
const Brands = () => {
55
return (
66
<div id='Stats' className="flex flex-col">
7-
<div className="px-[30px] py-10 h-[120px] lg:h-[180px] relative overflow-hidden border-b border-[#252525] ">
8-
<h4 className='font-medium text-3xl lg:text-5xl tracking-tight absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-30 text-center text-balance'>Statistics</h4>
9-
<div
10-
style={{
11-
background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
12-
}}
13-
className=" h-full w-[100%] right-0 top-0 z-20 absolute"></div>
14-
<div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
15-
<FlickeringGrid
16-
className="absolute -z-0 top-0 right-0"
17-
squareSize={3}
18-
gridGap={6}
19-
color="#3F1FBC"
20-
maxOpacity={1}
21-
flickerChance={0.1}
22-
height={200}
23-
width={2000}
24-
/>
25-
</div>
26-
</div>
7+
<Header title='Statistics'/>
278
<div className="border-b border-[#252525] flex items-center w-full">
289
<div className="relative [box-shadow:0_0_100px_-10px_#14111C_inset] flex items-center justify-center bg-[#101010] w-full border-r border-[#252525] flex-col p-10 md:text-5xl">
2910
<span style={{ "--text": 'Opensox' } as any} className=" md:text-7xl md:text-[76px] relative pointer-events-none text-center before:bg-gradient-to-b before:from-[#9159E2] before:to-[#341e7b] before:to-80% before:bg-clip-text before:text-transparent before:content-['19000+'] after:absolute after:inset-0 after:bg-purple-500 after:bg-clip-text after:text-transparent after:mix-blend-lighten after:content-['19000+'] after:[text-shadow:0_1px_0_black] text-[clamp(1rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"></span>

‎apps/web/src/components/landing-sections/footer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use client'
12
import React from 'react'
23
import { Twitter, Email, Discord } from '../icons/icons'
34
import Link from 'next/link'

‎apps/web/src/components/landing-sections/how-it-works.tsx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import { Sparkles, Upload, Zap } from "lucide-react";
33
import Features from "../ui/features";
4-
import { FlickeringGrid } from "../ui/flickering-grid";
4+
import Header from "../ui/header";
55

66
const data = [
77
{
@@ -33,30 +33,10 @@ const data = [
3333
export default function HowItWorks() {
3434
return (
3535
<div id="HIW" className="border-b border-[#252525]">
36-
<div className="px-[30px] py-10 h-[120px] lg:h-[180px] relative overflow-hidden border-b border-[#252525] ">
37-
<h4 className='font-medium w-full text-3xl lg:text-5xl tracking-tight absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-30 text-center text-balance'>How it Works</h4>
36+
<Header title="How it Works"/>
37+
<div className="w-full relative px-[30px] lg:px-[50px]">
3838
<div
3939
style={{
40-
background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
41-
}}
42-
className=" h-full w-[100%] right-0 top-0 z-20 absolute"></div>
43-
<div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
44-
<FlickeringGrid
45-
className="absolute -z-0 top-0 right-0"
46-
squareSize={3}
47-
gridGap={6}
48-
color="#3F1FBC"
49-
maxOpacity={1}
50-
flickerChance={0.1}
51-
height={200}
52-
width={2000}
53-
/>
54-
</div>
55-
</div>
56-
<div className="w-full relative px-[50px]">
57-
<div
58-
style={{
59-
width: "50px",
6040
height: "100%",
6141
"--pattern-fg": "#252525",
6242
borderRight: "1px solid #252525",
@@ -65,11 +45,10 @@ export default function HowItWorks() {
6545
backgroundSize: "10px 10px",
6646
backgroundAttachment: "fixed",
6747
} as React.CSSProperties}
68-
className='absolute left-0 top-0'
48+
className='w-[30px] lg:w-[50px] absolute left-0 top-0'
6949
/>
7050
<div
7151
style={{
72-
width: "50px",
7352
height: "100%",
7453
"--pattern-fg": "#252525",
7554
borderLeft: "1px solid #252525",
@@ -78,7 +57,7 @@ export default function HowItWorks() {
7857
backgroundSize: "10px 10px",
7958
backgroundAttachment: "fixed",
8059
} as React.CSSProperties}
81-
className='absolute right-0 top-0 '
60+
className='w-[30px] lg:w-[50px] absolute right-0 top-0 '
8261
/>
8362
<Features data={data} />
8463
</div>

‎apps/web/src/components/landing-sections/testimonials.tsx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import TweetGrid from '../ui/new-tweet-grid';
3-
import { FlickeringGrid } from '../ui/flickering-grid';
3+
import Header from '../ui/header';
44

55
const tweetsIDs = [
66
"1871154863889092799",
@@ -45,30 +45,10 @@ const tweetsIDs = [
4545
const Testimonials = () => {
4646
return (
4747
<div className="flex flex-col border-b border-[#252525]">
48-
<div className="px-[30px] py-10 h-[120px] lg:h-[180px] relative overflow-hidden border-b border-[#252525] ">
49-
<h4 className='font-medium text-3xl lg:text-5xl tracking-tight absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-30 text-center text-balance'>Testimonials</h4>
48+
<Header title="Testimonials"/>
49+
<div className="h-[500px] lg:h-[750px] px-[30px] lg:px-[50px] relative " >
5050
<div
5151
style={{
52-
background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
53-
}}
54-
className=" h-full w-[100%] right-0 top-0 z-20 absolute"></div>
55-
<div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
56-
<FlickeringGrid
57-
className="absolute -z-0 top-0 right-0"
58-
squareSize={3}
59-
gridGap={6}
60-
color="#3F1FBC"
61-
maxOpacity={1}
62-
flickerChance={0.1}
63-
height={200}
64-
width={2000}
65-
/>
66-
</div>
67-
</div>
68-
<div className="h-[500px] lg:h-[750px] px-[50px] relative " >
69-
<div
70-
style={{
71-
width: "50px",
7252
height: "100%",
7353
"--pattern-fg": "#252525",
7454
borderRight: "1px solid #252525",
@@ -77,11 +57,10 @@ const Testimonials = () => {
7757
backgroundSize: "10px 10px",
7858
backgroundAttachment: "fixed",
7959
} as React.CSSProperties}
80-
className='absolute left-0 top-0'
60+
className='w-[30px] lg:w-[50px] absolute left-0 top-0'
8161
/>
8262
<div
8363
style={{
84-
width: "50px",
8564
height: "100%",
8665
"--pattern-fg": "#252525",
8766
borderLeft: "1px solid #252525",
@@ -90,7 +69,7 @@ const Testimonials = () => {
9069
backgroundSize: "10px 10px",
9170
backgroundAttachment: "fixed",
9271
} as React.CSSProperties}
93-
className='absolute right-0 top-0'
72+
className='w-[30px] lg:w-[50px] absolute right-0 top-0'
9473
/>
9574
<TweetGrid
9675
tweets={tweetsIDs}

‎apps/web/src/components/landing-sections/video.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const Video = () => {
66
<div className="w-full border border-dashed border-[#252525] p-8 relative ">
77
<div
88
style={{
9-
width: "50px",
109
height: "100%",
1110
"--pattern-fg": "#252525",
1211
borderRight: "1px dashed #252525",
@@ -15,11 +14,10 @@ const Video = () => {
1514
backgroundSize: "10px 10px",
1615
backgroundAttachment: "fixed",
1716
} as React.CSSProperties}
18-
className='absolute left-0 top-0 hidden lg:block'
17+
className='w-[30px] lg:w-[50px] absolute left-0 top-0 hidden lg:block'
1918
/>
2019
<div
2120
style={{
22-
width: "50px",
2321
height: "100%",
2422
"--pattern-fg": "#252525",
2523
borderLeft: "1px dashed #252525",
@@ -28,7 +26,7 @@ const Video = () => {
2826
backgroundSize: "10px 10px",
2927
backgroundAttachment: "fixed",
3028
} as React.CSSProperties}
31-
className='absolute right-0 top-0 hidden lg:block'
29+
className='w-[30px] lg:w-[50px] absolute right-0 top-0 hidden lg:block'
3230
/>
3331
<video autoPlay muted className="lg:w-[70%] mx-auto rounded-2xl">
3432
<source src="/videos/os-demo.mp4" type="video/mp4" />

‎apps/web/src/components/ui/client-side-tweet.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { TweetProps, useTweet } from "react-tweet";
4-
import { MagicTweet, TweetNotFound } from "./Client-tweet";
4+
import { MagicTweet } from "./Client-tweet";
55

66

77

@@ -10,14 +10,13 @@ export const ClientTweetCard = ({
1010
apiUrl,
1111
components,
1212
fetchOptions,
13-
onError,
1413
...props
1514
}: TweetProps & { className?: string }) => {
1615
const { data, error, } = useTweet(id, apiUrl, fetchOptions);
1716

1817
if (error || !data) {
19-
const NotFound = components?.TweetNotFound || TweetNotFound;
20-
return <NotFound error={onError ? onError(error) : error} />;
18+
19+
return <></>
2120
}
2221

2322
return <MagicTweet tweet={data} components={components} {...props} />;

‎apps/web/src/components/ui/header.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client'
2+
import { motion } from 'framer-motion'
3+
import React from 'react'
4+
import { FlickeringGrid } from './flickering-grid'
5+
6+
const Header = ({title}: {title: string}) => {
7+
return (
8+
<div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border-[#252525] w-full">
9+
<motion.h4
10+
initial={{ opacity: 0, y: 30, filter: 'blur(10px)' }}
11+
animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
12+
transition={{ duration: 0.6, ease: 'easeOut', type: 'spring', delay: 0.3 }}
13+
className='font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center text-balance'>{title}</motion.h4>
14+
<div
15+
style={{
16+
background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
17+
}}
18+
className=" h-full w-[100%] right-0 top-0 z-20 absolute"></div>
19+
{/* <div className="absolute h-[30%] w-full bg-gradient-to-b from-[#101010] via-transparent to-transparent top-0 left-1/2 -translate-x-1/2 z-20"></div> */}
20+
<div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
21+
<FlickeringGrid
22+
className="absolute -z-0 top-0 right-0"
23+
squareSize={3}
24+
gridGap={6}
25+
color="#3F1FBC"
26+
maxOpacity={1}
27+
flickerChance={0.1}
28+
height={200}
29+
width={2000}
30+
/>
31+
</div>
32+
</div>
33+
)
34+
}
35+
36+
export default Header

0 commit comments

Comments
 (0)