hero and social complete
This commit is contained in:
jhpin2
parent
c2cf49ac3a
commit
bd929f12bd
44 changed files with 1747 additions and 243 deletions
21
components.json
Normal file
21
components.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "src/app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
423
package-lock.json
generated
423
package-lock.json
generated
File diff suppressed because it is too large
Load diff
20
package.json
20
package.json
|
|
@ -9,19 +9,29 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@radix-ui/react-switch": "^1.1.3",
|
||||
"aos": "^2.3.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.476.0",
|
||||
"next": "15.1.7",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"next": "15.1.7"
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@types/aos": "^3.0.7",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.1.7",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
public/assets/images/AdLibrary-min.png
Normal file
BIN
public/assets/images/AdLibrary-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/assets/images/adCreative-min.png
Normal file
BIN
public/assets/images/adCreative-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/assets/images/bulk-gen.png
Normal file
BIN
public/assets/images/bulk-gen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
BIN
public/assets/images/competetor-analysis-min.png
Normal file
BIN
public/assets/images/competetor-analysis-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/assets/images/design-tool.gif
Normal file
BIN
public/assets/images/design-tool.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
public/assets/images/hero-temp-slider.png
Normal file
BIN
public/assets/images/hero-temp-slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
public/assets/images/logo.webp
Normal file
BIN
public/assets/images/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
public/assets/images/onclick-shedule-min.png
Normal file
BIN
public/assets/images/onclick-shedule-min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/sam-avatar.jpg
Normal file
BIN
public/assets/images/sam-avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 936 KiB |
BIN
public/assets/images/smartchat.png
Normal file
BIN
public/assets/images/smartchat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/social-icons.png
Normal file
BIN
public/assets/images/social-icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
public/assets/images/temp-example.png
Normal file
BIN
public/assets/images/temp-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
43
public/assets/svg/generate-icon.svg
Normal file
43
public/assets/svg/generate-icon.svg
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="Frame" clip-path="url(#clip0_1_1992)">
|
||||
<path
|
||||
id="Vector"
|
||||
d="M5.64254 20.6464C5.8378 20.8417 6.15438 20.8417 6.34965 20.6464L20.6425 6.35355C20.8378 6.15829 20.8378 5.84171 20.6425 5.64645L18.3496 3.35355C18.1544 3.15829 17.8378 3.15829 17.6425 3.35355L3.34965 17.6464C3.15439 17.8417 3.15438 18.1583 3.34965 18.3535L5.64254 20.6464Z"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
id="Vector_2"
|
||||
d="M14.9961 6L17.9961 9"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
id="Vector_3"
|
||||
d="M8.99219 3C8.99219 3.53043 9.2029 4.03914 9.57797 4.41421C9.95305 4.78929 10.4618 5 10.9922 5C10.4618 5 9.95305 5.21071 9.57797 5.58579C9.2029 5.96086 8.99219 6.46957 8.99219 7C8.99219 6.46957 8.78147 5.96086 8.4064 5.58579C8.03133 5.21071 7.52262 5 6.99219 5C7.52262 5 8.03133 4.78929 8.4064 4.41421C8.78147 4.03914 8.99219 3.53043 8.99219 3Z"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
id="Vector_4"
|
||||
d="M18.9961 12.998C18.9961 13.5285 19.2068 14.0372 19.5819 14.4123C19.957 14.7873 20.4657 14.998 20.9961 14.998C20.4657 14.998 19.957 15.2088 19.5819 15.5838C19.2068 15.9589 18.9961 16.4676 18.9961 16.998C18.9961 16.4676 18.7854 15.9589 18.4103 15.5838C18.0352 15.2088 17.5265 14.998 16.9961 14.998C17.5265 14.998 18.0352 14.7873 18.4103 14.4123C18.7854 14.0372 18.9961 13.5285 18.9961 12.998Z"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_1992">
|
||||
<rect width="24" height="24" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
8
public/assets/svg/tick-square.svg
Normal file
8
public/assets/svg/tick-square.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="vuesax/linear/tick-square">
|
||||
<g id="tick-square">
|
||||
<path id="Vector" d="M7.50002 18.3334H12.5C16.6667 18.3334 18.3334 16.6667 18.3334 12.5001V7.50008C18.3334 3.33341 16.6667 1.66675 12.5 1.66675H7.50002C3.33335 1.66675 1.66669 3.33341 1.66669 7.50008V12.5001C1.66669 16.6667 3.33335 18.3334 7.50002 18.3334Z" stroke="#D9D9D9" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M6.45831 9.99994L8.81665 12.3583L13.5416 7.6416" stroke="#252525" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 631 B |
12
public/assets/svg/yellow-star.svg
Normal file
12
public/assets/svg/yellow-star.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.17562 0.878115C5.26543 0.601722 5.65645 0.601722 5.74625 0.878115L6.74067 3.9386C6.78083 4.06221 6.89602 4.1459 7.02598 4.1459H10.244C10.5346 4.1459 10.6554 4.51778 10.4203 4.6886L7.8169 6.58009C7.71175 6.65648 7.66776 6.79189 7.70792 6.9155L8.70233 9.97599C8.79214 10.2524 8.47579 10.4822 8.24068 10.3114L5.63727 8.41991C5.53213 8.34352 5.38975 8.34352 5.2846 8.41991L2.6812 10.3114C2.44608 10.4822 2.12974 10.2524 2.21954 9.97599L3.21396 6.9155C3.25412 6.79189 3.21012 6.65648 3.10497 6.58009L0.501568 4.6886C0.266454 4.51778 0.387287 4.1459 0.677904 4.1459H3.89589C4.02586 4.1459 4.14105 4.06221 4.18121 3.9386L5.17562 0.878115Z"
|
||||
fill="#FFC400"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 986 B |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
BIN
public/fonts/GendyRegular.woff
Normal file
BIN
public/fonts/GendyRegular.woff
Normal file
Binary file not shown.
BIN
public/fonts/Neometric.woff
Normal file
BIN
public/fonts/Neometric.woff
Normal file
Binary file not shown.
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -1,21 +1,69 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@layer base {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem
|
||||
}
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
|
|
@ -27,7 +28,9 @@ export default function RootLayout({
|
|||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
236
src/app/page.tsx
236
src/app/page.tsx
|
|
@ -1,101 +1,143 @@
|
|||
import Image from "next/image";
|
||||
import FAQSection from "@/components/FaqSection";
|
||||
import FeatureCardSection from "@/components/FeatureCardSection";
|
||||
import FeatureSection from "@/components/FeatureSection";
|
||||
import HeroSection from "@/components/HeroSection";
|
||||
import PricingSection from "@/components/PricingSection";
|
||||
import SocialSection from "@/components/SocialSection";
|
||||
import React from "react";
|
||||
|
||||
export default function Home() {
|
||||
const Home = () => {
|
||||
const designToolData = {
|
||||
titleColoredText: "Free Online Graphic",
|
||||
titleBoldText: "Design Tool",
|
||||
description:
|
||||
"Unleash your creativity with our free-to-use online graphic design tool. Featuring an intuitive drag-and-drop interface like Canva, it's customized for business needs. Tailor colors, fonts, and layouts to craft stunning designs that bring your vision to life effortlessly.",
|
||||
|
||||
imageUrl: "/assets/images/design-tool.gif",
|
||||
imageAlt: "Design tool demonstration",
|
||||
imagePosition: "left",
|
||||
backgroundColor: "#ede8ff",
|
||||
|
||||
headingText: "Take Full Control in AI Generated post:",
|
||||
coloredHeading: "Design Your Way",
|
||||
paragraphText:
|
||||
"Love adding your personal touch? With PlanPost AI, you're not just limited to AI-generated content. Our customizable design editor empowers you to:",
|
||||
highlightedBrandName: "PlanPost AI,",
|
||||
highlightedFeature: "customizable design editor",
|
||||
|
||||
features: [
|
||||
"Design Like a Pro",
|
||||
"Start with Templates or from Scratch",
|
||||
"Full Creative Control",
|
||||
"Collaboration-Friendly",
|
||||
],
|
||||
|
||||
ctaText: "Start Designing for Free!",
|
||||
ctaBackgroundColor: "#ff2b85",
|
||||
ctaTextColor: "white",
|
||||
};
|
||||
|
||||
// For a different section, you could create another data object with different values
|
||||
const marketingToolData = {
|
||||
titleColoredText: "AI-Powered",
|
||||
titleBoldText: "Marketing Suite",
|
||||
description:
|
||||
"Transform your marketing strategy with our comprehensive AI-powered tools. Perfect for businesses of all sizes, our platform helps you create engaging campaigns that convert prospects into loyal customers.",
|
||||
|
||||
imageUrl: "/assets/gif/marketing-tool.gif",
|
||||
imageAlt: "Marketing tool interface",
|
||||
imagePosition: "right",
|
||||
backgroundColor: "#e8f4ff",
|
||||
|
||||
headingText: "Supercharge Your Marketing:",
|
||||
coloredHeading: "Smart Automation",
|
||||
paragraphText:
|
||||
"Tired of repetitive marketing tasks? With MarketBoost Pro, you can automate your entire campaign workflow. Our intelligent assistant helps you create, schedule, and analyze all in one place.",
|
||||
highlightedBrandName: "MarketBoost Pro,",
|
||||
highlightedFeature: "intelligent assistant",
|
||||
|
||||
features: [
|
||||
"Content Generation",
|
||||
"Campaign Scheduling",
|
||||
"Performance Analytics",
|
||||
"Multi-channel Publishing",
|
||||
],
|
||||
|
||||
ctaText: "Get Started Today",
|
||||
ctaBackgroundColor: "#3482F6",
|
||||
ctaTextColor: "white",
|
||||
};
|
||||
const marketingToolsData = {
|
||||
titleColoredText: "AI Tools for",
|
||||
titleBoldText: "Marketing Success",
|
||||
description:
|
||||
"Streamline your Content Creation with top AI tools for marketing. Create content, design visuals, and engage customers in seconds while saving time and staying on brand.",
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: "/assets/svg/smartchat-card.svg",
|
||||
imageAlt: "Smart Chatbot illustration",
|
||||
title: "Smart Chatbot",
|
||||
description:
|
||||
"Empower your social media with an AI-powered chatbot that enhances customer engagement and automates responses across platforms.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: "/assets/svg/content-generator-card.svg",
|
||||
imageAlt: "Content Generator illustration",
|
||||
title: "Content Generator",
|
||||
description:
|
||||
"Create high-quality, SEO-optimized content for your blog, social media, and marketing campaigns with our AI-powered content generator.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: "/assets/svg/analytics-card.svg",
|
||||
imageAlt: "Analytics Dashboard illustration",
|
||||
title: "Analytics Dashboard",
|
||||
description:
|
||||
"Gain valuable insights into your marketing performance with our comprehensive analytics dashboard powered by artificial intelligence.",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Example of another feature card section with different content and 2 columns
|
||||
const automationToolsData = {
|
||||
titleColoredText: "Automation",
|
||||
titleBoldText: "Solutions",
|
||||
description:
|
||||
"Discover powerful automation tools that streamline your workflow and boost productivity across your organization.",
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: "/assets/svg/workflow-automation.svg",
|
||||
imageAlt: "Workflow automation illustration",
|
||||
title: "Workflow Automation",
|
||||
description:
|
||||
"Automate repetitive tasks and streamline complex business processes with our intuitive workflow automation tools.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: "/assets/svg/email-marketing.svg",
|
||||
imageAlt: "Email marketing automation illustration",
|
||||
title: "Email Marketing",
|
||||
description:
|
||||
"Create, schedule, and analyze email campaigns automatically with our powerful email marketing automation platform.",
|
||||
},
|
||||
],
|
||||
gridColumns: 2 as const, // 2 columns for this section
|
||||
};
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
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] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
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 text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
<div className="bg-[#EBEAF3]">
|
||||
<HeroSection />
|
||||
<SocialSection />
|
||||
<FeatureSection {...designToolData} />
|
||||
{/* <FeatureSection {...marketingToolData} />
|
||||
<FeatureCardSection {...marketingToolsData} />
|
||||
<FeatureCardSection {...automationToolsData} /> */}
|
||||
<PricingSection />
|
||||
<FAQSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
86
src/components/FaqSection.tsx
Normal file
86
src/components/FaqSection.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
"use client";
|
||||
import { X, Plus } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
interface FAQItem {
|
||||
id: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
const faqs: FAQItem[] = [
|
||||
{
|
||||
id: "item-1",
|
||||
question: "How does Planpost AI work?",
|
||||
answer:
|
||||
"Planpost AI uses artificial intelligence to generate engaging social media content, schedule posts, monitor performance, and analyze competitors to improve your social media strategy.",
|
||||
},
|
||||
{
|
||||
id: "item-2",
|
||||
question: "What features does Planpost AI offer?",
|
||||
answer:
|
||||
"Planpost AI offers a comprehensive suite of features including content generation, post scheduling, analytics tracking, competitor analysis, AI-powered image creation, hashtag suggestions, and automated posting across multiple social media platforms.",
|
||||
},
|
||||
{
|
||||
id: "item-3",
|
||||
question: "Is Planpost AI suitable for my business?",
|
||||
answer:
|
||||
"Yes! Planpost AI is designed to serve businesses of all sizes, from individual creators to large enterprises. Our flexible plans allow you to choose the features that best match your needs and scale as your business grows.",
|
||||
},
|
||||
{
|
||||
id: "item-4",
|
||||
question: "How secure is my data with Planpost AI?",
|
||||
answer:
|
||||
"We take data security seriously. Planpost AI employs industry-standard encryption, regular security audits, and strict access controls to ensure your data remains protected. We are fully compliant with GDPR and other privacy regulations.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FAQSection() {
|
||||
const [openItems, setOpenItems] = useState<Set<string>>(new Set());
|
||||
|
||||
const handleItemClick = (itemId: string) => {
|
||||
const newOpenItems = new Set(openItems);
|
||||
if (newOpenItems.has(itemId)) {
|
||||
newOpenItems.delete(itemId);
|
||||
} else {
|
||||
newOpenItems.add(itemId);
|
||||
}
|
||||
setOpenItems(newOpenItems);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="py-12 px-4 md:px-6 lg:px-8 bg-[#f5f1ff]">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
|
||||
Frequently asked <span className="text-[#7c3aed]">Question</span>
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq) => (
|
||||
<div key={faq.id} className="bg-white rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => handleItemClick(faq.id)}
|
||||
className="w-full text-left p-6 flex items-center justify-between hover:bg-gray-50"
|
||||
>
|
||||
<span className="text-lg text-[#7c3aed] font-medium">
|
||||
{faq.question}
|
||||
</span>
|
||||
{openItems.has(faq.id) ? (
|
||||
<X className="h-5 w-5 text-[#7c3aed]" />
|
||||
) : (
|
||||
<Plus className="h-5 w-5 text-[#7c3aed]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{openItems.has(faq.id) && (
|
||||
<div className="px-6 pb-6">
|
||||
<p className="text-gray-600">{faq.answer}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
src/components/FeatureCardSection.tsx
Normal file
85
src/components/FeatureCardSection.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
// Interface for individual feature card
|
||||
interface FeatureCard {
|
||||
id: string | number;
|
||||
imageUrl: string;
|
||||
imageAlt: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Interface for the whole section
|
||||
interface FeatureCardSectionProps {
|
||||
titleColoredText: string;
|
||||
titleBoldText: string;
|
||||
description: string;
|
||||
cards: FeatureCard[];
|
||||
gridColumns?: 1 | 2 | 3 | 4; // Number of columns in the grid
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
|
||||
titleColoredText,
|
||||
titleBoldText,
|
||||
description,
|
||||
cards,
|
||||
gridColumns = 3,
|
||||
className,
|
||||
}) => {
|
||||
// Determine grid columns class
|
||||
const gridClass = {
|
||||
1: "grid-cols-1",
|
||||
2: "grid-cols-1 md:grid-cols-2",
|
||||
3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
||||
4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
||||
}[gridColumns];
|
||||
|
||||
return (
|
||||
<section className={`feature-card-section ${className || ""}`}>
|
||||
<div className="w-10/12 mx-auto py-16">
|
||||
<div className="max-w-[750px] mx-auto mb-10">
|
||||
<div className="text-center">
|
||||
<span className="text-[#6a47ed] text-center text-5xl font-light font-['Inter'] leading-[48px]">
|
||||
{titleColoredText}
|
||||
</span>
|
||||
<span className="text-[#434343] text-center text-5xl font-bold font-['Inter'] leading-[48px]">
|
||||
{" " + titleBoldText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="max-w-[750px] mt-4 text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`grid ${gridClass} gap-6 justify-center`}>
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="marketing-card w-full max-w-[404px] h-[490px] bg-white rounded-[20px] border border-[#ebebeb] mx-auto"
|
||||
>
|
||||
<div className="shadow-md rounded-3xl flex justify-center m-2 h-48 overflow-hidden">
|
||||
<Image
|
||||
src={card.imageUrl}
|
||||
alt={card.imageAlt}
|
||||
width={360}
|
||||
height={180}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
|
||||
{card.title}
|
||||
</div>
|
||||
<div className="w-[90%] h-[93px] mx-auto my-5 text-[#aaaaaa] text-sm font-normal font-['Inter'] leading-[21px]">
|
||||
{card.description}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureCardSection;
|
||||
197
src/components/FeatureSection.tsx
Normal file
197
src/components/FeatureSection.tsx
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
interface DesignToolProps {
|
||||
// Section title
|
||||
titleColoredText: string;
|
||||
titleBoldText: string;
|
||||
description: string;
|
||||
|
||||
// Main card content
|
||||
imageUrl: string;
|
||||
imageAlt: string;
|
||||
backgroundColor: string;
|
||||
imagePosition: string; // New prop to control image position
|
||||
|
||||
// Right side content
|
||||
headingText: string;
|
||||
coloredHeading: string;
|
||||
paragraphText: string;
|
||||
highlightedBrandName: string;
|
||||
highlightedFeature: string;
|
||||
|
||||
// Feature list
|
||||
features: string[];
|
||||
|
||||
// CTA button
|
||||
ctaText: string;
|
||||
ctaBackgroundColor: string;
|
||||
ctaTextColor: string;
|
||||
|
||||
// Optional className for additional styling
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const FeatureSection: React.FC<DesignToolProps> = ({
|
||||
titleColoredText,
|
||||
titleBoldText,
|
||||
description,
|
||||
imageUrl,
|
||||
imageAlt,
|
||||
backgroundColor,
|
||||
imagePosition = "left",
|
||||
headingText,
|
||||
coloredHeading,
|
||||
paragraphText,
|
||||
highlightedBrandName,
|
||||
highlightedFeature,
|
||||
features,
|
||||
ctaText,
|
||||
ctaBackgroundColor,
|
||||
ctaTextColor,
|
||||
className,
|
||||
}) => {
|
||||
// Determine border radius based on image position
|
||||
const imageContainerClasses =
|
||||
imagePosition === "left"
|
||||
? "rounded-tl-[40px] rounded-bl-[40px]"
|
||||
: "rounded-tr-[40px] rounded-br-[40px]";
|
||||
|
||||
// Create the image container and content container
|
||||
const imageContainer = (
|
||||
<div
|
||||
className={`w-full max-w-[684px] h-[491px] relative rotate-180 ${imageContainerClasses}`}
|
||||
style={{ backgroundColor }}
|
||||
>
|
||||
<div className="rotate-180 absolute top-[50px] right-0">
|
||||
<Image
|
||||
className="clip-path"
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
width={684}
|
||||
height={491}
|
||||
style={{ clipPath: "inset(0 3px 0 0)" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const contentContainer = (
|
||||
<div className="details-box-content p-[50px]">
|
||||
<div className="max-w-[424px]">
|
||||
<span className="text-[#252525] text-2xl font-bold font-['Inter'] leading-normal">
|
||||
{headingText}
|
||||
</span>
|
||||
<span className="text-[#6a47ed] text-[56px] font-bold font-['Inter'] leading-[56px] block">
|
||||
{coloredHeading}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[433px] my-4">
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
{paragraphText.split(highlightedBrandName)[0]}
|
||||
</span>
|
||||
<span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
|
||||
{highlightedBrandName}
|
||||
</span>
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
{
|
||||
paragraphText
|
||||
.split(highlightedBrandName)[1]
|
||||
.split(highlightedFeature)[0]
|
||||
}
|
||||
</span>
|
||||
<span className="text-[#ff2b85] text-base font-bold font-['Inter'] leading-normal">
|
||||
{highlightedFeature}
|
||||
</span>
|
||||
<span className="text-[#505050] text-base font-normal font-['Inter'] leading-normal">
|
||||
{paragraphText.split(highlightedFeature)[1]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="h-36 flex-col justify-start items-start gap-4 inline-flex">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-2.5 justify-center items-center gap-2.5 inline-flex"
|
||||
>
|
||||
<div className="w-5 h-5 justify-center items-center flex">
|
||||
<div className="w-5 h-5 relative">
|
||||
<Image
|
||||
src="/assets/svg/tick-square.svg"
|
||||
alt="checkmark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#252525] text-base font-normal font-['Inter'] leading-normal">
|
||||
{feature}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-[245px] my-10">
|
||||
<div
|
||||
className="h-[75px] py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]"
|
||||
style={{ backgroundColor: `${ctaBackgroundColor}30` }}
|
||||
>
|
||||
<div
|
||||
className="py-[5px] px-[7px] flex justify-center items-center bg-[#ff2b85]/30 rounded-[14px]"
|
||||
style={{ backgroundColor: `${ctaBackgroundColor}30` }}
|
||||
>
|
||||
<div
|
||||
className="py-[14px] px-[22px] rounded-lg justify-center items-center gap-2.5 inline-flex"
|
||||
style={{ backgroundColor: ctaBackgroundColor }}
|
||||
>
|
||||
<p
|
||||
className="text-base font-semibold font-['Inter'] leading-normal"
|
||||
style={{ color: ctaTextColor }}
|
||||
>
|
||||
{ctaText}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section className={`design-tool my-20 ${className || ""}`}>
|
||||
<div className="section-title text-center my-5">
|
||||
<div>
|
||||
<span className="text-[#6a47ed] text-5xl font-light font-['Inter'] leading-[48px]">
|
||||
{titleColoredText}
|
||||
</span>
|
||||
<span className="text-[#252525] text-5xl font-bold font-['Inter'] leading-[48px]">
|
||||
{" " + titleBoldText}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full max-w-[1008px] mx-auto text-center text-[#9b97bb] text-base font-normal font-['Inter'] leading-normal">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="details-card">
|
||||
<div className="h-[540px] max-w-[1320px] w-full flex items-center mx-auto bg-white rounded-[40px] overflow-hidden">
|
||||
{/* Render components based on image position */}
|
||||
{imagePosition === "left" ? (
|
||||
<>
|
||||
{imageContainer}
|
||||
{contentContainer}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{contentContainer}
|
||||
{imageContainer}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureSection;
|
||||
125
src/components/Footer.tsx
Normal file
125
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Facebook, Twitter, Youtube } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gradient-to-r from-[#7c3aed] to-[#6d31d9] text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 py-12 md:py-16">
|
||||
{/* Top Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{/* Brand Section */}
|
||||
<div className="space-y-6 lg:col-span-1">
|
||||
<h2 className="text-3xl font-bold tracking-tight">PLANPOST AI</h2>
|
||||
<p className="text-xl font-semibold max-w-sm">
|
||||
With a single prompt, create all your social media content.
|
||||
</p>
|
||||
<p className="text-sm text-white/80 max-w-sm">
|
||||
With a single prompt, create all your social media content.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 max-w-sm">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="bg-white/10 border-white/20 text-white placeholder:text-white/60"
|
||||
/>
|
||||
<Button variant="secondary" size="icon">
|
||||
→
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Free Tools */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Free Tools</h3>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Planpost Canvas",
|
||||
"Color Pallet Generator",
|
||||
"Background Remover",
|
||||
"Image to Color",
|
||||
"Color Combinator",
|
||||
"Color Wheel",
|
||||
].map((item) => (
|
||||
<li key={item}>
|
||||
<Link href="#" className="text-sm hover:text-white/80">
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Resources</h3>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Home",
|
||||
"Blog",
|
||||
"Media",
|
||||
"Generations",
|
||||
"Pricing",
|
||||
"Features",
|
||||
].map((item) => (
|
||||
<li key={item}>
|
||||
<Link href="#" className="text-sm hover:text-white/80">
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Planpost AI */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Planpost Ai</h3>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"About Us",
|
||||
"Contact",
|
||||
"Faq",
|
||||
"Cookies Policy",
|
||||
"Privacy Policy",
|
||||
"Terms & Condition",
|
||||
].map((item) => (
|
||||
<li key={item}>
|
||||
<Link href="#" className="text-sm hover:text-white/80">
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="mt-16 pt-8 border-t border-white/20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-semibold">Need help?</h3>
|
||||
<p className="text-sm">Reach us at: contact@planpostai.com</p>
|
||||
</div>
|
||||
<div className="flex gap-4 md:justify-end">
|
||||
<Link href="#" className="hover:text-white/80">
|
||||
<Facebook className="w-6 h-6" />
|
||||
<span className="sr-only">Facebook</span>
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-white/80">
|
||||
<Twitter className="w-6 h-6" />
|
||||
<span className="sr-only">Twitter</span>
|
||||
</Link>
|
||||
<Link href="#" className="hover:text-white/80">
|
||||
<Youtube className="w-6 h-6" />
|
||||
<span className="sr-only">YouTube</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
120
src/components/Header.tsx
Normal file
120
src/components/Header.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Header() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className="flex items-center justify-between pr-8 absolute z-50 w-full">
|
||||
<div className="flex items-center bg-white py-3 pr-6 pl-12 shadow-sm rounded-r-2xl">
|
||||
<img src="assets/images/logo.webp" alt="Logo" className="h-6 w-6" />
|
||||
<span className="ml-1 text-2xl font-bold text-[#ff256d]">
|
||||
PlanPost AI
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<ul className="hidden md:flex space-x-16 px-8 pt-8 pb-4 rounded-b-3xl text-gray-800 font-medium bg-white shadow-sm">
|
||||
<li>
|
||||
<Link href="#" className="hover:text-purple-600">
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-purple-600">
|
||||
Feature
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-purple-600">
|
||||
Pricing
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="hover:text-purple-600">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Login & Sign Up Buttons */}
|
||||
<div className="hidden md:flex space-x-4">
|
||||
<button className="font-bold px-5 py-2 border-[1px] border-[#6A47ED] text-[#6A47ED] rounded-xl hover:bg-purple-100">
|
||||
Log in
|
||||
</button>
|
||||
<button className="font-bold px-5 py-2 bg-[#6A47ED] text-white rounded-xl hover:bg-purple-700">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="text-gray-800 focus:outline-none"
|
||||
>
|
||||
<svg
|
||||
className="w-8 h-8"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16m-7 6h7"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="absolute top-16 left-0 w-full bg-white shadow-lg p-6 md:hidden">
|
||||
<ul className="flex flex-col space-y-4 text-gray-800 font-medium">
|
||||
<li>
|
||||
<Link
|
||||
href="#"
|
||||
className="hover:text-purple-600"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="#"
|
||||
className="hover:text-purple-600"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Feature
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="#"
|
||||
className="hover:text-purple-600"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="#"
|
||||
className="hover:text-purple-600"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
34
src/components/HeroSection.module.css
Normal file
34
src/components/HeroSection.module.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@font-face {
|
||||
font-family: "Neometric";
|
||||
src: url("/fonts/Neometric.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gendy";
|
||||
src: url("/fonts/GendyRegular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.bgLeft {
|
||||
flex-shrink: 0;
|
||||
background: conic-gradient(
|
||||
from 11deg at 84.75% 50.83%,
|
||||
rgba(255, 255, 255, 0.5) 59.75991189479828deg,
|
||||
rgba(255, 255, 255, 0.5) 117.35991597175598deg,
|
||||
rgba(254, 253, 255, 0.5) 164.1599142551422deg,
|
||||
rgba(253, 251, 255, 0.5) 241.55105352401733deg,
|
||||
rgba(106, 71, 237, 0.5) 282.9599189758301deg,
|
||||
rgba(255, 255, 255, 0.5) 323.60235929489136deg
|
||||
);
|
||||
backdrop-filter: blur(32px);
|
||||
}
|
||||
.glass {
|
||||
flex-shrink: 0;
|
||||
border-radius: 0px 60px 60px 0px;
|
||||
border: 0.5px solid #e5cdf7b6;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
89
src/components/HeroSection.tsx
Normal file
89
src/components/HeroSection.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import React from "react";
|
||||
import styles from "./HeroSection.module.css";
|
||||
import Link from "next/link";
|
||||
const HeroSection: React.FC = () => {
|
||||
return (
|
||||
<section className="header">
|
||||
<div className="relative w-full h-[1075px] z-0">
|
||||
<div className="absolute w-full flex flex-col md:flex-row">
|
||||
{/* Left Background */}
|
||||
<div
|
||||
className={`${styles.bgLeft} w-full md:w-1/2 h-[500px] md:h-[1075px]`}
|
||||
></div>
|
||||
|
||||
{/* Right Background */}
|
||||
<div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
|
||||
<div
|
||||
className="absolute top-0 left-[-150px] mt-0 md:mt-40 ml-16 h-[542px] flex-col justify-start items-start gap-2.5 inline-flex z-50"
|
||||
data-aos="fade-left"
|
||||
data-aos-duration="2000"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/hero-temp-slider.png"
|
||||
alt="Hero Slider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`}
|
||||
>
|
||||
<div className="p-8 md:p-16">
|
||||
<div className="text-2xl md:text-6xl leading-5xl font-normal font-['Gendy'] ">
|
||||
<span className="text-[#ff256d] md:text-white ">R</span>
|
||||
<span className="text-[#252525] ">
|
||||
evolutionize Your Social Media Strategy with a Personalized
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-[#ff256d]"> AI Agent</span>
|
||||
</div>
|
||||
<p className="w-full md:w-10/12 text-xs md:text-[20px] mt-4 leading-relaxed md:leading-loose">
|
||||
Customize your social media content, automate posts, and grow
|
||||
your brand with a personalized AI assistant designed for
|
||||
businesses and marketers.
|
||||
</p>
|
||||
|
||||
<div className="flex">
|
||||
<div className="flex mt-5 items-center">
|
||||
<div>
|
||||
<p className="text-[#252525] text-[10px] md:text-xs font-normal">
|
||||
Customers Rating
|
||||
</p>
|
||||
<p className="text-[#ff256d] text-xs md:text-md font-semibold">
|
||||
⭐ 4.8
|
||||
</p>
|
||||
<p className="text-[#727272] text-[10px] md:text-xs">
|
||||
(8,279 reviews)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Link
|
||||
href="https://dashboard.planpostai.com/"
|
||||
className="ml-5 mt-5 px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
|
||||
>
|
||||
Generate
|
||||
<img
|
||||
src="/assets/svg/generate-icon.svg"
|
||||
alt="Generate Icon"
|
||||
className="w-6 h-6"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Customer Reviews */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
|
||||
<img src="/assets/images/social-icons.png" alt="Social Icons" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
192
src/components/PricingSection.tsx
Normal file
192
src/components/PricingSection.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Check, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface PricingFeature {
|
||||
name: string;
|
||||
included: boolean;
|
||||
}
|
||||
|
||||
interface PricingTier {
|
||||
name: string;
|
||||
users: string;
|
||||
monthlyPrice: string;
|
||||
yearlyPrice: string;
|
||||
description: string;
|
||||
features: PricingFeature[];
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
export default function PricingSection() {
|
||||
const [isYearly, setIsYearly] = useState(false);
|
||||
|
||||
const pricingTiers: PricingTier[] = [
|
||||
{
|
||||
name: "Free",
|
||||
users: "1 user",
|
||||
monthlyPrice: "$00",
|
||||
yearlyPrice: "$00",
|
||||
description:
|
||||
"Get started with essential features at no cost and try now.",
|
||||
features: [
|
||||
{ name: "Credit ⭐ 15", included: true },
|
||||
{ name: "Number of Brand 1", included: true },
|
||||
{ name: "Social Profiles 0", included: false },
|
||||
{ name: "Schedule Post", included: false },
|
||||
{ name: "Content Calendar", included: false },
|
||||
{ name: "Customized Brand Colours", included: true },
|
||||
{ name: "AI based Copy Writing", included: true },
|
||||
{ name: "AI based Image generation", included: true },
|
||||
{ name: "Hashtag Generation", included: true },
|
||||
{ name: "Manual Customization", included: true },
|
||||
{ name: "JPG/PNG Download", included: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Startup",
|
||||
users: "2 user",
|
||||
monthlyPrice: "$19",
|
||||
yearlyPrice: "$190",
|
||||
description:
|
||||
"Access core tools to launch and manage your business efficiently",
|
||||
features: [
|
||||
{ name: "Credit ⭐ 100", included: true },
|
||||
{ name: "Number of Brand 1", included: true },
|
||||
{ name: "Social Profiles 5", included: true },
|
||||
{ name: "Schedule Post", included: true },
|
||||
{ name: "Content Calendar", included: true },
|
||||
{ name: "Customized Brand Colours", included: true },
|
||||
{ name: "AI based Copy Writing", included: true },
|
||||
{ name: "AI based Image generation", included: true },
|
||||
{ name: "Hashtag Generation", included: true },
|
||||
{ name: "Manual Customization", included: true },
|
||||
{ name: "JPG/PNG Download", included: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Growth",
|
||||
users: "10 user",
|
||||
monthlyPrice: "$79",
|
||||
yearlyPrice: "$790",
|
||||
description:
|
||||
"Advanced features to boost productivity and expand your reach",
|
||||
highlight: true,
|
||||
features: [
|
||||
{ name: "Credit ⭐ 500", included: true },
|
||||
{ name: "Number of Brand 5", included: true },
|
||||
{ name: "Social Profiles 20", included: true },
|
||||
{ name: "Schedule Post", included: true },
|
||||
{ name: "Content Calendar", included: true },
|
||||
{ name: "Customized Brand Colours", included: true },
|
||||
{ name: "AI based Copy Writing", included: true },
|
||||
{ name: "AI based Image generation", included: true },
|
||||
{ name: "Hashtag Generation", included: true },
|
||||
{ name: "Manual Customization", included: true },
|
||||
{ name: "JPG/PNG Download", included: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Agency Pro",
|
||||
users: "50 user",
|
||||
monthlyPrice: "$300",
|
||||
yearlyPrice: "$3000",
|
||||
description:
|
||||
"Premium solutions for maximizing growth and efficiency for agency",
|
||||
features: [
|
||||
{ name: "Credit ⭐ 3750", included: true },
|
||||
{ name: "Number of Brand 50", included: true },
|
||||
{ name: "Social Profiles 100", included: true },
|
||||
{ name: "Schedule Post", included: true },
|
||||
{ name: "Content Calendar", included: true },
|
||||
{ name: "Customized Brand Colours", included: true },
|
||||
{ name: "AI based Copy Writing", included: true },
|
||||
{ name: "AI based Image generation", included: true },
|
||||
{ name: "Hashtag Generation", included: true },
|
||||
{ name: "Manual Customization", included: true },
|
||||
{ name: "JPG/PNG Download", included: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="py-12 px-4 md:px-6 lg:px-8 bg-[#f5f1ff]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#7c3aed] mb-8">
|
||||
Find a flexible plan that fits your business
|
||||
</h2>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Label
|
||||
htmlFor="billing-toggle"
|
||||
className={`${!isYearly ? "text-[#7c3aed]" : "text-gray-500"}`}
|
||||
>
|
||||
Monthly
|
||||
</Label>
|
||||
<Switch
|
||||
id="billing-toggle"
|
||||
checked={isYearly}
|
||||
onCheckedChange={setIsYearly}
|
||||
className="data-[state=checked]:bg-[#7c3aed]"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="billing-toggle"
|
||||
className={`${isYearly ? "text-[#7c3aed]" : "text-gray-500"}`}
|
||||
>
|
||||
Annually
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{pricingTiers.map((tier) => (
|
||||
<div
|
||||
key={tier.name}
|
||||
className={`rounded-2xl p-6 ${
|
||||
tier.highlight ? "bg-[#7c3aed] text-white" : "bg-white"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-semibold mb-1">{tier.name}</h3>
|
||||
<p className="text-sm opacity-80">{tier.users}</p>
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<p className="text-3xl font-bold">
|
||||
{isYearly ? tier.yearlyPrice : tier.monthlyPrice}
|
||||
<span className="text-sm font-normal opacity-80">
|
||||
{tier.name === "Free" ? "/1st Week" : "/Per Month"}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm mt-2 opacity-80">{tier.description}</p>
|
||||
</div>
|
||||
<div className="space-y-4 mb-8">
|
||||
{tier.features.map((feature) => (
|
||||
<div key={feature.name} className="flex items-center gap-2">
|
||||
{feature.included ? (
|
||||
<Check className="w-5 h-5 shrink-0" />
|
||||
) : (
|
||||
<X className="w-5 h-5 shrink-0 opacity-50" />
|
||||
)}
|
||||
<span className="text-sm">{feature.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
className={`w-full ${
|
||||
tier.highlight
|
||||
? "bg-white text-[#7c3aed] hover:bg-gray-100"
|
||||
: "bg-[#7c3aed] text-white hover:bg-[#6d31d9]"
|
||||
}`}
|
||||
>
|
||||
Choose Plan
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
src/components/SocialSection.tsx
Normal file
15
src/components/SocialSection.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
|
||||
const SocialSection: React.FC = () => {
|
||||
return (
|
||||
<section className="social" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="h-[507px] flex justify-center relative">
|
||||
<div className="absolute top-[-200px]">
|
||||
<img src="/assets/images/temp-example.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialSection;
|
||||
57
src/components/ui/button.tsx
Normal file
57
src/components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
22
src/components/ui/input.tsx
Normal file
22
src/components/ui/input.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
26
src/components/ui/label.tsx
Normal file
26
src/components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
29
src/components/ui/switch.tsx
Normal file
29
src/components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
|
|
@ -9,10 +10,53 @@ export default {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
plugins: [],
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
chart: {
|
||||
'1': 'hsl(var(--chart-1))',
|
||||
'2': 'hsl(var(--chart-2))',
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
} satisfies Config;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue