Skip to content

Commit fbb8f34

Browse files
author
brittneypostma
committed
working on membership page
1 parent be561b5 commit fbb8f34

5 files changed

Lines changed: 114 additions & 118 deletions

File tree

‎frontend/main/src/components/MembershipCards.tsx‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -67,85 +67,85 @@ export default function MembershipCards({
6767
</OutsideClick>
6868
</section>
6969
</div>
70-
<section className="mx-auto text-center">
71-
<div className="grid items-stretch justify-center gap-1 lg:grid-flow-col justify-items-stretch">
72-
{products.map((product) => (
73-
<div
74-
className="relative w-full h-full max-w-sm m-6 overflow-hidden rounded-lg shadow-lg cursor-pointer bg-primary- bg-primary-800"
75-
key={product.role}
76-
onClick={() => onSelectPlan(product)}
70+
<section className="flex flex-wrap justify-center gap-4 text-center">
71+
{/* <div className="grid items-stretch justify-center gap-1 lg:grid-flow-col justify-items-stretch"> */}
72+
{products.map((product) => (
73+
<div
74+
className="relative max-w-sm m-6 overflow-hidden rounded-lg shadow-lg cursor-pointer bg-primary-800 dark:bg-primary-800"
75+
key={product.role}
76+
onClick={() => onSelectPlan(product)}
77+
>
78+
<svg
79+
className={'svgTransform absolute bottom-0 left-0 mb-8'}
80+
viewBox="0 0 375 283"
81+
fill="none"
7782
>
78-
<svg
79-
className={'svgTransform absolute bottom-0 left-0 mb-8'}
80-
viewBox="0 0 375 283"
81-
fill="none"
82-
>
83-
<rect
84-
x="159.52"
85-
y="175"
86-
width="152"
87-
height="152"
88-
rx="8"
89-
transform="rotate(-45 159.52 175)"
90-
fill="white"
91-
/>
92-
<rect
93-
y="107.48"
94-
width="152"
95-
height="152"
96-
rx="8"
97-
transform="rotate(-45 0 107.48)"
98-
fill="white"
99-
/>
100-
</svg>
101-
<div className="grid w-full h-full grid-flow-row ">
102-
<div className="relative flex flex-col items-center justify-center px-10 pt-10">
103-
<div
104-
className={
105-
'radialGradiant block absolute w-48 h-48 bottom-0 left-0 mb-24 ml-3'
106-
}
107-
></div>
108-
<div className="w-full h-full">
109-
{product.images ? (
110-
<img
111-
src={product.images[0]}
112-
alt={product.name}
113-
width="480"
114-
height="270"
115-
/>
83+
<rect
84+
x="159.52"
85+
y="175"
86+
width="152"
87+
height="152"
88+
rx="8"
89+
transform="rotate(-45 159.52 175)"
90+
fill="white"
91+
/>
92+
<rect
93+
y="107.48"
94+
width="152"
95+
height="152"
96+
rx="8"
97+
transform="rotate(-45 0 107.48)"
98+
fill="white"
99+
/>
100+
</svg>
101+
<div className="grid w-full h-full">
102+
<div className="relative flex flex-col items-center justify-center px-10 pt-10">
103+
<div
104+
className={
105+
'radialGradiant block absolute w-48 h-48 bottom-0 left-0 mb-24 ml-3'
106+
}
107+
></div>
108+
<div className="w-full h-full">
109+
{product.images ? (
110+
<img
111+
src={product.images[0]}
112+
alt={product.name}
113+
width="480"
114+
height="270"
115+
/>
116+
) : (
117+
<AJPrimary className="w-64 h-64" />
118+
)}
119+
</div>
120+
</div>
121+
<div className="relative self-end px-6 pb-2 mt-6 text-basics-50 dark:text-basics-50">
122+
<span className="block pb-4 mb-1 opacity-75">
123+
{product?.description}
124+
</span>
125+
<div className="flex justify-between">
126+
<span className="block text-xl font-semibold">
127+
{product.name}
128+
</span>
129+
<span className="flex items-center px-3 py-2 font-bold leading-none bg-white rounded-full bg-secondary-400 text-md">
130+
{product.prices ? (
131+
<div>
132+
<span>
133+
{product.prices[0].currency === 'usd' ? '$' : ''}
134+
</span>
135+
{product.prices[0].unit_amount
136+
? product.prices[0].unit_amount / 100
137+
: 0}
138+
</div>
116139
) : (
117-
<AJPrimary className="w-64 h-64" />
140+
<></>
118141
)}
119-
</div>
120-
</div>
121-
<div className="relative self-end px-6 pb-2 mt-6 text-white">
122-
<span className="block pb-4 mb-1 opacity-75">
123-
{product?.description}
124142
</span>
125-
<div className="flex justify-between">
126-
<span className="block text-xl font-semibold">
127-
{product.name}
128-
</span>
129-
<span className="flex items-center px-3 py-2 font-bold leading-none bg-white rounded-full bg-secondary-400 text-md">
130-
{product.prices ? (
131-
<div>
132-
<span>
133-
{product.prices[0].currency === 'usd' ? '$' : ''}
134-
</span>
135-
{product.prices[0].unit_amount
136-
? product.prices[0].unit_amount / 100
137-
: 0}
138-
</div>
139-
) : (
140-
<></>
141-
)}
142-
</span>
143-
</div>
144143
</div>
145144
</div>
146145
</div>
147-
))}
148-
</div>
146+
</div>
147+
))}
148+
{/* </div> */}
149149
</section>
150150
<style jsx>{`
151151
.svgTransform {

‎frontend/main/src/pages/membership.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -68,30 +68,40 @@ export default function Membership({
6868
</div>
6969
</section>
7070
) : (
71-
<div>
72-
<div className="flex flex-wrap content-center w-full">
73-
<div className="max-w-6xl px-8 mx-auto my-12 antialiased rounded">
74-
<div className="relative items-center block md:flex">
75-
<div className="relative w-full overflow-hidden rounded shadow-lg md:w-1/2 z-1 bg-primary-100">
76-
<div className="flex flex-wrap w-full">
77-
<div className="w-full py-4 text-center bg-primary-900 lg:px-4">
78-
<div
79-
className="flex items-center p-2 leading-none text-white text-indigo-100 lg:rounded-full lg:inline-flex"
80-
role="alert"
81-
>
82-
<span className="flex px-2 py-1 mr-3 text-xs font-bold uppercase rounded-full bg-secondary-400">
83-
Pro Features
84-
</span>
85-
<span className="flex-auto mr-2 font-semibold text-left">
86-
Coming Soon
87-
</span>
88-
</div>
89-
</div>
90-
<div className="w-full p-8 text-2xl font-bold tracking-wide text-center uppercase border-b text-primary-900 border-primary-900">
91-
Why Go Pro?
92-
</div>
93-
</div>
94-
<div className="flex justify-center m-3">
71+
<>
72+
<section className="grid grid-cols-1 gap-4 p-4 text-center">
73+
<div className="max-w-2xl mx-auto">
74+
<h1 className="font-sans text-4xl font-semibold lg:text-6xl">
75+
Become a{' '}
76+
<span className="text-primary-900 dark:text-primary-200">
77+
Purrfect Peep
78+
</span>{' '}
79+
and join Coding Cat Dev.
80+
</h1>
81+
<h2 className="mt-4 font-sans text-lg font-light leading-tight text-basics-700">
82+
Get access to all of the exclusive content and up your coding
83+
skills.
84+
</h2>
85+
</div>
86+
<MembershipCards products={products} />
87+
</section>
88+
<div className="w-full py-4 text-center bg-primary-900 lg:px-4">
89+
<div
90+
className="flex items-center p-2 leading-none text-white text-indigo-100 lg:rounded-full lg:inline-flex"
91+
role="alert"
92+
>
93+
<span className="flex px-2 py-1 mr-3 text-xs font-bold uppercase rounded-full bg-secondary-400">
94+
Pro Features
95+
</span>
96+
<span className="flex-auto mr-2 font-semibold text-left">
97+
Coming Soon
98+
</span>
99+
</div>
100+
</div>
101+
<div className="w-full p-8 text-2xl font-bold tracking-wide text-center uppercase border-b text-primary-900 border-primary-900">
102+
Why Go Pro?
103+
</div>
104+
{/* <div className="flex justify-center m-3">
95105
<ul>
96106
<li className="flex items-center">
97107
<div className="p-3 rounded-full fill-current bg-primary-200 text-primary-900">
@@ -197,15 +207,14 @@ export default function Membership({
197207
</div>
198208
</li>
199209
</ul>
200-
</div>
201-
<div className="flex items-center justify-center p-6 mt-6 font-semibold text-white uppercase bg-primary-900 text-md">
210+
</div> */}
211+
{/* <div className="flex items-center justify-center p-6 mt-6 font-semibold text-white uppercase bg-primary-900 text-md">
202212
<span>Create account</span>
203213
<span className="ml-2 font-medium text-white">➔</span>
204-
</div>
205-
</div>
214+
</div> */}
206215

207-
{/* Valid User */}
208-
{user && user.uid ? (
216+
{/* Valid User */}
217+
{/* {user && user.uid ? (
209218
<div
210219
className={`${
211220
user.memberships ? 'w-full' : 'md:w-1/2'
@@ -275,13 +284,8 @@ export default function Membership({
275284
<FirebaseAuth />
276285
</div>
277286
</div>
278-
)}
279-
</div>
280-
</div>
281-
</div>
282-
283-
<MembershipCards products={products} />
284-
</div>
287+
)} */}
288+
</>
285289
)}
286290
</Layout>
287291
</>

‎frontend/main/src/pages/podcasts.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ export default function Blog({
2020
</Head>
2121

2222
<PostsCards posts={posts} />
23-
24-
<footer></footer>
2523
</Layout>
2624
);
2725
}

‎frontend/main/src/pages/tutorials.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ export default function Tutorials({
2020
</Head>
2121

2222
<PostsCards posts={posts} />
23-
24-
<footer></footer>
2523
</Layout>
2624
);
2725
}

‎frontend/main/tailwind.config.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,5 @@ module.exports = {
99
},
1010
},
1111

12-
plugins: [
13-
require('@tailwindcss/forms'),
14-
require('nightwind'),
15-
require('@tailwindcss/typography'),
16-
],
12+
plugins: [require('@tailwindcss/forms'), require('nightwind')],
1713
};

0 commit comments

Comments
 (0)