Skip to content

Commit e01ba4b

Browse files
technoph1letechnoph1le
committed
Add Hero, Features & update Header
1 parent 3cdd34c commit e01ba4b

File tree

17 files changed

+1612
-148
lines changed

17 files changed

+1612
-148
lines changed

‎package-lock.json‎

Lines changed: 733 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,18 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-accordion": "^1.2.11",
13+
"@radix-ui/react-dialog": "^1.1.14",
14+
"@radix-ui/react-label": "^2.1.7",
15+
"@radix-ui/react-navigation-menu": "^1.2.13",
1216
"@radix-ui/react-slot": "^1.2.3",
17+
"@radix-ui/react-switch": "^1.2.5",
1318
"class-variance-authority": "^0.7.1",
1419
"clsx": "^2.1.1",
20+
"framer-motion": "^12.23.12",
1521
"lucide-react": "^0.535.0",
1622
"next": "15.4.5",
17-
"react": "19.1.0",
23+
"react": "^19.1.0",
1824
"react-dom": "19.1.0",
1925
"tailwind-merge": "^3.3.1"
2026
},

‎src/app/globals.css‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -45,20 +45,20 @@
4545

4646
:root {
4747
--radius: 0.625rem;
48-
--background: oklch(1 0 0);
49-
--foreground: oklch(0.145 0 0);
50-
--card: oklch(1 0 0);
51-
--card-foreground: oklch(0.145 0 0);
52-
--popover: oklch(1 0 0);
53-
--popover-foreground: oklch(0.145 0 0);
54-
--primary: oklch(0.205 0 0);
55-
--primary-foreground: oklch(0.985 0 0);
56-
--secondary: oklch(0.97 0 0);
57-
--secondary-foreground: oklch(0.205 0 0);
58-
--muted: oklch(0.97 0 0);
59-
--muted-foreground: oklch(0.556 0 0);
60-
--accent: oklch(0.97 0 0);
61-
--accent-foreground: oklch(0.205 0 0);
48+
--background: hsl(0, 0%, 95%);
49+
--foreground: hsl(0, 0%, 16%);
50+
--card: hsl(0, 0%, 90%);
51+
--card-foreground: hsl(0, 0%, 24%);
52+
--popover: hsl(0, 0%, 90%);
53+
--popover-foreground: hsl(0, 0%, 24%);
54+
--primary: hsl(0, 0%, 95%);
55+
--primary-foreground: hsl(0, 0%, 11%);
56+
--secondary: hsl(0, 0%, 90%);
57+
--secondary-foreground: hsl(0, 0%, 16%);
58+
--muted: hsl(0, 0%, 80%);
59+
--muted-foreground: hsl(0, 0%, 24%);
60+
--accent: hsl(181, 100%, 22%);
61+
--accent-foreground: hsl(0, 0%, 11%);
6262
--destructive: oklch(0.577 0.245 27.325);
6363
--border: oklch(0.922 0 0);
6464
--input: oklch(0.922 0 0);
@@ -79,20 +79,20 @@
7979
}
8080

8181
.dark {
82-
--background: oklch(0.145 0 0);
83-
--foreground: oklch(0.985 0 0);
84-
--card: oklch(0.205 0 0);
85-
--card-foreground: oklch(0.985 0 0);
86-
--popover: oklch(0.205 0 0);
87-
--popover-foreground: oklch(0.985 0 0);
88-
--primary: oklch(0.922 0 0);
89-
--primary-foreground: oklch(0.205 0 0);
90-
--secondary: oklch(0.269 0 0);
91-
--secondary-foreground: oklch(0.985 0 0);
92-
--muted: oklch(0.269 0 0);
93-
--muted-foreground: oklch(0.708 0 0);
94-
--accent: oklch(0.269 0 0);
95-
--accent-foreground: oklch(0.985 0 0);
82+
--background: hsl(0, 0%, 11%);
83+
--foreground: hsl(0, 0%, 90%);
84+
--card: hsl(0, 0%, 16%);
85+
--card-foreground: hsl(0, 0%, 80%);
86+
--popover: hsl(0, 0%, 16%);
87+
--popover-foreground: hsl(0, 0%, 80%);
88+
--primary: hsl(0, 0%, 11%);
89+
--primary-foreground: hsl(0, 0%, 90%);
90+
--secondary: hsl(0, 0%, 16%);
91+
--secondary-foreground: hsl(0, 0%, 80%);
92+
--muted: hsl(0, 0%, 24%);
93+
--muted-foreground: hsl(0, 0%, 70%);
94+
--accent: hsl(181, 100%, 36%);
95+
--accent-foreground: hsl(0, 0%, 11%);
9696
--destructive: oklch(0.704 0.191 22.216);
9797
--border: oklch(1 0 0 / 10%);
9898
--input: oklch(1 0 0 / 15%);
@@ -120,3 +120,9 @@
120120
@apply bg-background text-foreground;
121121
}
122122
}
123+
124+
@layer utilities {
125+
.container {
126+
@apply max-w-7xl mx-auto px-4;
127+
}
128+
}

‎src/app/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
1313
});
1414

1515
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
16+
title: "QuickSnip",
17+
description: "Find code snippets in seconds.",
1818
};
1919

2020
export default function RootLayout({
@@ -25,7 +25,7 @@ export default function RootLayout({
2525
return (
2626
<html lang="en">
2727
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
28+
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground dark`}
2929
>
3030
{children}
3131
</body>

‎src/app/page.tsx‎

Lines changed: 8 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,13 @@
1-
import Image from "next/image";
1+
import Features from "@/components/layouts/Features";
2+
import Header from "@/components/layouts/Header";
3+
import Hero from "@/components/layouts/Hero";
24

35
export default function Home() {
46
return (
5-
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
6-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
16-
<li className="mb-2 tracking-[-.01em]">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
19-
src/app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li className="tracking-[-.01em]">
24-
Save and see your changes instantly.
25-
</li>
26-
</ol>
27-
28-
<div className="flex gap-4 items-center flex-col sm:flex-row">
29-
<a
30-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
31-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
32-
target="_blank"
33-
rel="noopener noreferrer"
34-
>
35-
<Image
36-
className="dark:invert"
37-
src="/vercel.svg"
38-
alt="Vercel logomark"
39-
width={20}
40-
height={20}
41-
/>
42-
Deploy now
43-
</a>
44-
<a
45-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
46-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
>
50-
Read our docs
51-
</a>
52-
</div>
53-
</main>
54-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
55-
<a
56-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
57-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<Image
62-
aria-hidden
63-
src="/file.svg"
64-
alt="File icon"
65-
width={16}
66-
height={16}
67-
/>
68-
Learn
69-
</a>
70-
<a
71-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
72-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
>
76-
<Image
77-
aria-hidden
78-
src="/window.svg"
79-
alt="Window icon"
80-
width={16}
81-
height={16}
82-
/>
83-
Examples
84-
</a>
85-
<a
86-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
87-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
>
91-
<Image
92-
aria-hidden
93-
src="/globe.svg"
94-
alt="Globe icon"
95-
width={16}
96-
height={16}
97-
/>
98-
Go to nextjs.org →
99-
</a>
100-
</footer>
101-
</div>
7+
<>
8+
<Header />
9+
<Hero />
10+
<Features />
11+
</>
10212
);
10313
}

‎src/components/DarkModeSwitch.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Label } from "./ui/label";
2+
import { Switch } from "./ui/switch";
3+
4+
const DarkModeSwitch = () => {
5+
return (
6+
<div className="flex items-center space-x-2">
7+
<Switch id="dark-mode" />
8+
{/* <Label htmlFor="dark-mode">"Blind me" mode</Label> */}
9+
</div>
10+
);
11+
};
12+
13+
export default DarkModeSwitch;

‎src/components/Logo.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Link from "next/link";
2+
3+
export const LogoIcon = () => (
4+
<svg
5+
width="43"
6+
height="30"
7+
viewBox="0 0 43 30"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
role="img"
11+
aria-labelledby="qs-logo-title qs-logo-description"
12+
>
13+
<title id="qs-logo-title">QuickSnip Logo</title>
14+
<desc id="qs-logo-description">
15+
A light blue logo with a thunderbolt in brackets
16+
</desc>
17+
<path
18+
d="M11.0123 3.81725C8.81785 3.81725 7.7866 4.47726 7.9186 5.79726L8.4136 10.871C8.4301 11.0195 8.43835 11.234 8.43835 11.5145C8.43835 12.3065 8.2486 12.917 7.8691 13.346C7.4896 13.7585 6.90385 14.039 6.11185 14.1875C6.92035 14.336 7.5061 14.6165 7.8691 15.029C8.2486 15.425 8.43835 16.0273 8.43835 16.8358C8.43835 17.1163 8.4301 17.339 8.4136 17.504L7.9186 22.5778C7.8526 23.3038 8.1001 23.8153 8.6611 24.1123C9.2221 24.4093 10.0058 24.5578 11.0123 24.5578V26.216C9.52735 26.216 8.3146 25.9603 7.3741 25.4488C6.4336 24.9373 5.96335 24.071 5.96335 22.85C5.96335 22.6355 5.9716 22.4705 5.9881 22.355L6.50785 17.6525C6.52435 17.537 6.5326 17.372 6.5326 17.1575C6.5326 16.4315 6.26035 15.8953 5.71585 15.5488C5.17135 15.2023 4.18135 15.029 2.74585 15.029V13.346C4.18135 13.346 5.17135 13.181 5.71585 12.851C6.26035 12.5045 6.5326 11.9683 6.5326 11.2423C6.5326 11.0443 6.52435 10.8875 6.50785 10.772L5.9881 6.02001C5.9716 5.90451 5.96335 5.73951 5.96335 5.525C5.96335 4.304 6.4336 3.43775 7.3741 2.92625C8.3146 2.41476 9.52735 2.15901 11.0123 2.15901V3.81725Z"
19+
fill="#00b5b8"
20+
/>
21+
<path
22+
d="M30.6782 13.2235L18.41 25.8383C18.0691 26.1878 17.5037 25.7829 17.7253 25.3482L22.0922 16.7309C22.1252 16.6659 22.1411 16.5935 22.1381 16.5206C22.1352 16.4477 22.1136 16.3767 22.0754 16.3146C22.0372 16.2524 21.9836 16.2011 21.9199 16.1656C21.8562 16.13 21.7844 16.1114 21.7114 16.1116H12.5259C12.442 16.1115 12.36 16.0867 12.2902 16.0402C12.2203 15.9937 12.1658 15.9277 12.1333 15.8503C12.1008 15.7729 12.0919 15.6877 12.1077 15.6053C12.1235 15.5229 12.1632 15.447 12.2219 15.3871L23.6008 3.85901C23.9304 3.52517 24.4787 3.89169 24.2955 4.32496L21.0324 12.0174C21.0048 12.0827 20.9938 12.1537 21.0006 12.2242C21.0073 12.2947 21.0315 12.3625 21.071 12.4213C21.1105 12.4801 21.164 12.5281 21.2267 12.561C21.2894 12.5939 21.3593 12.6107 21.4302 12.6098L30.3671 12.499C30.4514 12.4977 30.5343 12.5214 30.6051 12.5671C30.676 12.6129 30.7317 12.6786 30.7651 12.7561C30.7986 12.8335 30.8083 12.9191 30.7931 13.0021C30.7779 13.085 30.7384 13.1616 30.6796 13.2221L30.6782 13.2235Z"
23+
stroke="#00b5b8"
24+
strokeWidth="1.65"
25+
/>
26+
<path
27+
d="M31.7378 2.15901C33.2228 2.15901 34.4355 2.41476 35.376 2.92625C36.3165 3.43775 36.7868 4.304 36.7868 5.525C36.7868 5.73951 36.7785 5.90451 36.762 6.02001L36.2423 10.772C36.2258 10.8545 36.2175 10.9783 36.2175 11.1433C36.2175 11.8858 36.5063 12.4385 37.0838 12.8015C37.6778 13.1645 38.6513 13.346 40.0043 13.346V15.029C38.6348 15.029 37.6613 15.2105 37.0838 15.5735C36.5063 15.9365 36.2175 16.4975 36.2175 17.2565C36.2175 17.4215 36.2258 17.5535 36.2423 17.6525L36.762 22.355C36.7785 22.4705 36.7868 22.6355 36.7868 22.85C36.7868 24.071 36.3165 24.9373 35.376 25.4488C34.4355 25.9603 33.2228 26.216 31.7378 26.216V24.5578C32.7443 24.5578 33.528 24.4093 34.089 24.1123C34.65 23.8153 34.8975 23.3038 34.8315 22.5778L34.3365 17.504C34.3035 17.174 34.287 16.9513 34.287 16.8358C34.287 16.0108 34.4933 15.4003 34.9058 15.0043C35.3183 14.6083 35.9865 14.3443 36.9105 14.2123C36.0195 14.0473 35.3595 13.7585 34.9305 13.346C34.518 12.917 34.3118 12.2983 34.3118 11.4898C34.3118 11.2258 34.32 11.0195 34.3365 10.871L34.8315 5.79726C34.9635 4.47726 33.9323 3.81725 31.7378 3.81725V2.15901Z"
28+
fill="#00b5b8"
29+
/>
30+
</svg>
31+
);
32+
33+
const Logo = () => {
34+
return (
35+
<Link href="/" className="flex items-center gap-2">
36+
<LogoIcon />
37+
<span className="font-bold text-lg">QuickSnip</span>
38+
</Link>
39+
);
40+
};
41+
42+
export default Logo;

‎src/components/layouts/Features.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
Code,
3+
Terminal,
4+
Paintbrush,
5+
Rocket,
6+
Book,
7+
PlusCircle,
8+
} from "lucide-react";
9+
10+
const features = [
11+
{
12+
icon: <Code className="h-6 w-6" />,
13+
title: "Developer-Friendly",
14+
desc: "Tailored for developers to create and iterate fast, with minimal overhead and maximum flexibility.",
15+
},
16+
{
17+
icon: <Terminal className="h-6 w-6" />,
18+
title: "CLI Support",
19+
desc: "Command-line interface support for seamless development and workflow integration.",
20+
},
21+
{
22+
icon: <Paintbrush className="h-6 w-6" />,
23+
title: "Easily Customizable",
24+
desc: "Every block is built to be editable. From layout to logic, style to structure—make it your own.",
25+
},
26+
{
27+
icon: <Rocket className="h-6 w-6" />,
28+
title: "v0 Support",
29+
desc: "Launch fast with confidence. Perfect for MVPs, prototypes, and weekend projects.",
30+
},
31+
{
32+
icon: <Book className="h-6 w-6" />,
33+
title: "Full Documentation",
34+
desc: "Comprehensive documentation to understand every feature and maximize your development experience.",
35+
},
36+
{
37+
icon: <PlusCircle className="h-6 w-6" />,
38+
title: "Contribute Yours",
39+
desc: "Add your own blocks to the library and become part of the MVPBlocks community.",
40+
},
41+
];
42+
export default function Features() {
43+
return (
44+
<section className="relative py-4 my-6">
45+
<div className="container">
46+
<ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
47+
{features.map((item, idx) => (
48+
<li key={idx} className="space-y-3 rounded-xl bg-card p-6">
49+
<div className="text-accent w-fit transform-gpu rounded-full bg-background p-4">
50+
{item.icon}
51+
</div>
52+
<h4 className="text-lg font-bold">{item.title}</h4>
53+
<p className="text-muted-foreground">{item.desc}</p>
54+
</li>
55+
))}
56+
</ul>
57+
</div>
58+
</section>
59+
);
60+
}

0 commit comments

Comments
 (0)