Skip to content

Commit

Permalink
feat: added newsletter
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akshaybagai52
Akshaybagai52 committed Jun 4, 2024
1 parent 0e0f06d commit 6fe44ef
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 48 deletions.
100 changes: 54 additions & 46 deletions components/Newsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
return (
<section
className={classnames(
'w-[100vw] mx-auto flex items-center justify-center ',
'w-[100vw] mx-auto flex items-center justify-center ',
background === 'white'
? 'bg-white dark:bg-transparent text-black'
: 'bg-transparent text-white',
Expand All @@ -29,61 +29,69 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
>
<div
className={classnames(
'w-full max-w-[900px] text-center px-5 py-9 relative',
'w-full max-w-[1000px] text-center py-9 px-5 relative md:flex block',
background === 'white'
? 'bg-white dark:bg-transparent'
: 'bg-transparent',
className,
'justify-between',
)}
>
<h3 className=' font-bold tracking-heading mb-4 text-h4 md:text-h3 px-5 dark:text-slate-50'>
Subscribe to our newsletter to receive news about Json Schema.
</h3>
<p className='text-lg mb-8 dark:text-slate-50'>
We respect your inbox. No spam, promise ✌️
</p>
<form
action={formAction}
method='post'
className='flex flex-col md:flex-row gap-4'
>
<input
type='text'
name='FNAME'
placeholder='Your Name'
className={classnames(
'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px] sm:text-lg sm:leading-5 border-2 md:flex-1 rounded px-5 bg-gray-200 text-black',
background == 'black' ? 'bg-white' : '',
)}
value={username}
onChange={(e: any) => setUsername(e.target.value)}
/>
<input
type='emails'
name='EMAIL'
placeholder='Your Email'
className={classnames(
'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5 h-[38px] sm:h-[45px] md:flex-1 rounded px-5 bg-gray-200 text-black',
background == 'black' ? 'bg-white' : '',
)}
value={email}
onChange={(e: any) => setEmail(e.target.value)}
/>
<button
type='submit'
className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 md:flex-1 text-white'
// className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
<div className='md:w-[48%] w-full'>
<p className='font-bold text-left tracking-heading mb-4 text-h4 dark:text-slate-50'>
Subscribe to our newsletter to receive news about Json Schema.
</p>
<p className='text-lg text-left mb-8 dark:text-slate-50'>
We respect your inbox. No spam, promise ✌️
</p>
</div>
<aside className='px-5 py-10 md:w-[48%] w-full border-2 rounded'>
<p className='uppercase font-bold dark:text-slate-50 text-left mb-5'>
Join the JSON Schema Weekly mailing list
</p>
<form
action={formAction}
method='post'
className='flex flex-col gap-4'
>
<span className='inline-block'>Subscribe</span>
</button>
<div className='display: hidden'>
<input
type='text'
name='b_ef8789d5789a6aff8113a701d_11103c248b'
value=''
name='FNAME'
placeholder='Name'
className={classnames(
'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px] dark:bg-transparent sm:text-lg sm:leading-5 border-2 rounded px-5 text-black dark:text-white',
background == 'black' ? 'bg-white' : '',
)}
value={username}
onChange={(e: any) => setUsername(e.target.value)}
/>
</div>
</form>
<input
type='email'
name='EMAIL'
placeholder='Email'
className={classnames(
'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5 h-[38px] dark:bg-transparent sm:h-[45px] rounded px-5 text-black dark:text-white',
background == 'black' ? 'bg-white' : '',
)}
value={email}
onChange={(e: any) => setEmail(e.target.value)}
/>
<button
type='submit'
className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 text-white'
// className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
>
<span className='inline-block'>Subscribe</span>
</button>
<div className='display: hidden'>
<input
type='text'
name='b_ef8789d5789a6aff8113a701d_11103c248b'
value=''
/>
</div>
</form>
</aside>
</div>
</section>
);
Expand Down
40 changes: 40 additions & 0 deletions components/NewsletterCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Link from 'next/link';
import React from 'react';

type NewsletterProps = {
url: string;
title: string;
date: string;
};

const NewsletterCard = ({
newsletterData,
}: {
newsletterData: NewsletterProps[];
}) => {
const sortedNewsletterData = [...newsletterData].sort((a, b) => {
return new Date(b.date).getTime() - new Date(a.date).getTime();
});

return (
<div className='grid grid-cols-1 p-4 sm:grid-cols-2 md:grid-cols-3 gap-4'>
{sortedNewsletterData.map((newsletter, index) => (
<div
key={index}
className='p-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:shadow-lg'
>
<Link href={newsletter.url} className='block'>
<h3 className='text-lg font-semibold mb-2 truncate'>
{newsletter.title}
</h3>
</Link>
<p className='text-gray-600 dark:text-white mb-2'>
{newsletter.date}
</p>
</div>
))}
</div>
);
};

export default NewsletterCard;
87 changes: 87 additions & 0 deletions data/newsletter.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
[
{
"url": "https://example.com/newsletter-123",
"title": "JSON Schema Newsletter #123",
"date": "2024-01-01"
},
{
"url": "https://example.com/newsletter-124",
"title": "JSON Schema Newsletter #124",
"date": "2024-01-08"
},
{
"url": "https://example.com/newsletter-125",
"title": "JSON Schema Newsletter #125",
"date": "2024-01-15"
},
{
"url": "https://example.com/newsletter-126",
"title": "JSON Schema Newsletter #126",
"date": "2024-01-22"
},
{
"url": "https://example.com/newsletter-127",
"title": "JSON Schema Newsletter #127",
"date": "2024-01-29"
},
{
"url": "https://example.com/newsletter-128",
"title": "JSON Schema Newsletter #128",
"date": "2024-02-05"
},
{
"url": "https://example.com/newsletter-129",
"title": "JSON Schema Newsletter #129",
"date": "2024-02-12"
},
{
"url": "https://example.com/newsletter-130",
"title": "JSON Schema Newsletter #130",
"date": "2024-02-19"
},
{
"url": "https://example.com/newsletter-131",
"title": "JSON Schema Newsletter #131",
"date": "2024-02-26"
},
{
"url": "https://example.com/newsletter-132",
"title": "JSON Schema Newsletter #132",
"date": "2024-03-04"
},
{
"url": "https://example.com/newsletter-133",
"title": "JSON Schema Newsletter #133",
"date": "2024-03-11"
},
{
"url": "https://example.com/newsletter-134",
"title": "JSON Schema Newsletter #134",
"date": "2024-03-18"
},
{
"url": "https://example.com/newsletter-135",
"title": "JSON Schema Newsletter #135",
"date": "2024-03-25"
},
{
"url": "https://example.com/newsletter-136",
"title": "JSON Schema Newsletter #136",
"date": "2024-04-01"
},
{
"url": "https://example.com/newsletter-137",
"title": "JSON Schema Newsletter #137",
"date": "2024-04-08"
},
{
"url": "https://example.com/newsletter-138",
"title": "JSON Schema Newsletter #138",
"date": "2024-04-15"
},
{
"url": "https://example.com/newsletter-139",
"title": "JSON Schema Newsletter #139",
"date": "2024-04-22"
}
]
12 changes: 10 additions & 2 deletions pages/newsletter/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Head from 'next/head';
import { getLayout } from '~/components/SiteLayout';
import NewsletterForm from '~/components/Newsletter';
import { SectionContext } from '~/context';
import data from '../../data/newsletter.json';
import NewsletterCard from '~/components/NewsletterCard';

export default function StaticMarkdownPage() {
const newTitle = 'JSON Schema Newsletter';
Expand All @@ -14,9 +16,15 @@ export default function StaticMarkdownPage() {
<div className='flex flex-col items-center justify-center'>
<div className='max-w-[1400px] mx-auto'>
<NewsletterForm
className='pt-[100px] text-black'
wrapperClassName='h-full sm:h-[calc(100vh-312px)] py-[50px] sm:py-0 px-5 sm:px-10 lg:w-full'
className='pt-[150px] text-black'
wrapperClassName='h-full sm:py-0 lg:w-full'
/>
<div className='mt-10'>
<h2 className='text-xl font-bold p-4 bg-gray-200 dark:bg-transparent'>
Grouping by 2024
</h2>
<NewsletterCard newsletterData={data} />
</div>
</div>
</div>
</SectionContext.Provider>
Expand Down

0 comments on commit 6fe44ef

Please sign in to comment.