Skip to content

Commit 1e69a71

Browse files
atharvadeosthaleatharvadeosthale
authored
Homepage designed, enhancements will be taken care later (#35)
feat: designed basic structure for home page
1 parent c43fc62 commit 1e69a71

File tree

17 files changed

+3517
-817
lines changed

17 files changed

+3517
-817
lines changed

‎web/components/Action.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Image from 'next/image'
2+
import React from 'react'
3+
import actionGif from '../public/action.gif'
4+
5+
export default function Action() {
6+
return (
7+
<div className="flex h-screen flex-col items-center justify-center p-7 text-center xl:p-0">
8+
<div className="z-10 text-5xl font-bold">
9+
Our extension in <span className="text-[#24D1DC]">action</span>
10+
</div>
11+
<div className="relative mt-16 rounded-xl border-4 border-[#24D1DC]">
12+
{/* Blur behind image */}
13+
<div className="absolute top-1/2 left-1/2 h-[25rem] w-[50rem] -translate-y-1/2 -translate-x-1/2 bg-[#2A468E] blur-[140px]"></div>
14+
{/* Image */}
15+
<div className="overflow-hidden rounded-xl">
16+
<Image src={actionGif} />
17+
</div>
18+
</div>
19+
</div>
20+
)
21+
}

‎web/components/Hero.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Link from 'next/link'
2+
import React from 'react'
3+
import Navbar from './Navbar'
4+
5+
export default function Hero() {
6+
return (
7+
<div className="relative flex h-screen flex-col">
8+
{/* Blur absolute div */}
9+
<div className="absolute top-0 left-1/2 h-48 w-[40rem] -translate-x-1/2 bg-[#2A468E] blur-[140px]"></div>
10+
{/* Main content */}
11+
<Navbar />
12+
<div className="z-10 flex flex-1 flex-col items-center justify-center p-10 text-center xl:p-0">
13+
<div className="max-w-5xl text-5xl font-black leading-normal lg:text-7xl lg:leading-[6rem]">
14+
Stop rewriting your <span className="text-[#24D1DC]">React</span> and{' '}
15+
<span className="text-[#24D1DC]">Next.js</span> code
16+
</div>
17+
<div className="mt-7 text-3xl leading-normal text-gray-400">
18+
Use our VSCode and Jetbrains snippets extension
19+
</div>
20+
<div className="mt-8 grid grid-cols-2 gap-5">
21+
<Link href="#">
22+
<a className="w-48 rounded-md bg-gradient-to-r from-[#000A67] to-[#004E92] py-3 text-xl">
23+
Get started
24+
</a>
25+
</Link>
26+
<Link href="#">
27+
<a className="w-48 rounded-md bg-gradient-to-r from-[#232526] to-[#313334] py-3 text-xl">
28+
View GitHub
29+
</a>
30+
</Link>
31+
</div>
32+
</div>
33+
</div>
34+
)
35+
}

‎web/components/InstallCard.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Image from 'next/image'
2+
import React from 'react'
3+
4+
interface PageProps {
5+
image: StaticImageData
6+
name: string
7+
enabled: boolean
8+
link: string
9+
}
10+
11+
export default function InstallCard({ image, name, enabled, link }: PageProps) {
12+
return (
13+
<div className="flex w-full flex-col justify-between rounded-lg bg-[#22222E] p-5 transition-all hover:border-2 hover:border-[#24D1DC] md:h-32 md:flex-row md:items-center md:px-10">
14+
{/* IDE details */}
15+
<div className="flex items-center">
16+
<Image src={image} height={80} width={80} />
17+
<div className="ml-8 text-2xl">{name}</div>
18+
</div>
19+
{/* Button links */}
20+
<div className="mt-5 flex items-center text-center md:mt-0">
21+
{enabled ? (
22+
<a
23+
href={link}
24+
className="w-full rounded-md bg-gradient-to-r from-[#000A67] to-[#004E92] py-3 text-xl md:w-48"
25+
>
26+
Get
27+
</a>
28+
) : (
29+
<a
30+
href="#"
31+
className="w-full rounded-md bg-gradient-to-r from-[#232526] to-[#313334] py-3 text-xl md:w-48"
32+
>
33+
Coming soon...
34+
</a>
35+
)}
36+
</div>
37+
</div>
38+
)
39+
}

‎web/components/Installation.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import vscodelogo from '../public/vscode.png'
3+
import jetbrainslogo from '../public/jetbrains.png'
4+
import InstallCard from './InstallCard'
5+
6+
export default function Installation() {
7+
return (
8+
<div className="mb-20 flex flex-col items-center justify-center p-5 lg:h-screen xl:p-0">
9+
<div className="relative text-5xl font-bold">
10+
{/* Blur */}
11+
<div className="absolute top-1/2 left-1/2 -z-10 h-[15rem] w-[40rem] -translate-y-1/2 -translate-x-1/2 bg-[#2A468E] blur-[140px]"></div>
12+
<div className="z-20">Installation</div>
13+
</div>
14+
<div className="mt-28 grid w-full max-w-4xl grid-cols-1 gap-10">
15+
<InstallCard
16+
image={vscodelogo}
17+
enabled={true}
18+
link="#"
19+
name="Visual Studio Code"
20+
/>
21+
<InstallCard
22+
image={jetbrainslogo}
23+
enabled={false}
24+
link="#"
25+
name="Jetbrains IDE"
26+
/>
27+
</div>
28+
</div>
29+
)
30+
}

‎web/components/Navbar.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Image from 'next/image'
2+
import React from 'react'
3+
import logo from '../public/logo.svg'
4+
import githubLogo from '../public/github.svg'
5+
6+
export default function Navbar() {
7+
return (
8+
<div className="absolute top-0 flex h-20 w-full items-center justify-between p-7 xl:p-0">
9+
<div className="flex items-center">
10+
<Image src={logo} height={48} width={48} className="rounded-md" />
11+
<span className="ml-5 text-lg font-medium">
12+
React &amp; Next.js Snippets
13+
</span>
14+
</div>
15+
<a
16+
href="https://github.com/avneesh0612/react-nextjs-snippets"
17+
target="_blank"
18+
>
19+
<Image src={githubLogo} height={30} width={30} />
20+
</a>
21+
</div>
22+
)
23+
}

‎web/components/Working.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import WorkingCard from './WorkingCard'
3+
4+
export default function Working() {
5+
return (
6+
<div className="flex flex-col items-center justify-center p-7 py-28 text-center lg:h-screen lg:py-0 xl:p-0">
7+
<div className="z-10 text-5xl font-bold">How does it work?</div>
8+
<div className="mt-20 grid grid-cols-1 gap-10 md:h-80 md:grid-cols-2">
9+
<WorkingCard
10+
id={1}
11+
title="Installation"
12+
message="You can install our extension through respective IDE's extension marketplace"
13+
/>
14+
<WorkingCard
15+
id={2}
16+
title="Usage"
17+
message="Once installed, reload the IDE and you can start using snippets as demonstrated above!"
18+
/>
19+
</div>
20+
</div>
21+
)
22+
}

‎web/components/WorkingCard.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { AppProps } from 'next/app'
2+
import React from 'react'
3+
4+
interface PageProps {
5+
id: number
6+
title: string
7+
message: string
8+
}
9+
10+
export default function WorkingCard({ id, title, message }: PageProps) {
11+
return (
12+
<div className="flex h-full w-72 cursor-pointer flex-col rounded-lg bg-[#22222E] p-7 text-left">
13+
<div className="flex h-12 w-12 flex-col items-center justify-center rounded-full bg-[#303030] text-2xl">
14+
{id}
15+
</div>
16+
<div className="mt-7 text-2xl">{title}</div>
17+
<div className="mt-5 text-xl text-gray-400">{message}</div>
18+
</div>
19+
)
20+
}

0 commit comments

Comments
 (0)