├── app ├── favicon.ico ├── globals.css ├── utils │ └── analytics.ts ├── layout.tsx ├── thank-you │ └── page.tsx ├── pricing │ └── page.tsx └── page.tsx ├── public ├── Ellipse 1.png ├── Ellipse 2.png ├── Ellipse 3.png ├── Mask Group 8.png ├── Mask Group 9.png ├── Group 29504@2x.png ├── Rectangle 2865.png ├── Rectangle 2866.png ├── Rectangle 2867.png ├── hero-phone-old.png ├── Rectangle 2868@2x.png ├── Rectangle 2869@2x.png ├── Rectangle 2870@2x.png ├── Rectangle 2871@2x.png ├── Screenshot 2025-12-07 075142.png └── Path 21881.svg ├── postcss.config.mjs ├── next.config.ts ├── package.json ├── .gitignore ├── tsconfig.json ├── LICENSE └── README.md /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/Ellipse 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Ellipse 1.png -------------------------------------------------------------------------------- /public/Ellipse 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Ellipse 2.png -------------------------------------------------------------------------------- /public/Ellipse 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Ellipse 3.png -------------------------------------------------------------------------------- /public/Mask Group 8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Mask Group 8.png -------------------------------------------------------------------------------- /public/Mask Group 9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Mask Group 9.png -------------------------------------------------------------------------------- /public/Group 29504@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Group 29504@2x.png -------------------------------------------------------------------------------- /public/Rectangle 2865.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2865.png -------------------------------------------------------------------------------- /public/Rectangle 2866.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2866.png -------------------------------------------------------------------------------- /public/Rectangle 2867.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2867.png -------------------------------------------------------------------------------- /public/hero-phone-old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/hero-phone-old.png -------------------------------------------------------------------------------- /public/Rectangle 2868@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2868@2x.png -------------------------------------------------------------------------------- /public/Rectangle 2869@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2869@2x.png -------------------------------------------------------------------------------- /public/Rectangle 2870@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2870@2x.png -------------------------------------------------------------------------------- /public/Rectangle 2871@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Rectangle 2871@2x.png -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/Screenshot 2025-12-07 075142.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peev/linkhouse/HEAD/public/Screenshot 2025-12-07 075142.png -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /public/Path 21881.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "high-conversion-landing-page", 3 | "version": "1.0.0", 4 | "private": false, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build --turbopack", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@vercel/analytics": "^1.5.0", 12 | "next": "15.5.2", 13 | "react": "19.1.0", 14 | "react-dom": "19.1.0" 15 | }, 16 | "devDependencies": { 17 | "@tailwindcss/postcss": "^4", 18 | "@types/node": "^20", 19 | "@types/react": "^19", 20 | "@types/react-dom": "^19", 21 | "tailwindcss": "^4", 22 | "typescript": "^5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | !.env.example 36 | 37 | # vercel 38 | .vercel 39 | 40 | # typescript 41 | *.tsbuildinfo 42 | next-env.d.ts 43 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | --background: #ffffff; 5 | --foreground: #171717; 6 | } 7 | 8 | @theme inline { 9 | --color-background: var(--background); 10 | --color-foreground: var(--foreground); 11 | --font-sans: var(--font-geist-sans); 12 | --font-mono: var(--font-geist-mono); 13 | } 14 | 15 | @media (prefers-color-scheme: dark) { 16 | :root { 17 | --background: #0a0a0a; 18 | --foreground: #ededed; 19 | } 20 | } 21 | 22 | body { 23 | background: var(--background); 24 | color: var(--foreground); 25 | font-family: var(--font-poppins), Arial, Helvetica, sans-serif; 26 | } 27 | 28 | button { 29 | -webkit-appearance: button; 30 | -moz-appearance: button; 31 | appearance: button; 32 | cursor: pointer; 33 | } 34 | 35 | /* Email input styling to match the design */ 36 | .email-input { 37 | background-color: #ffffff; 38 | border: none; 39 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 40 | } 41 | 42 | .email-input::placeholder { 43 | color: #8A6AFB; 44 | font-weight: 500; 45 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/utils/analytics.ts: -------------------------------------------------------------------------------- 1 | // Analytics utility functions for click tracking 2 | import { track as vercelTrack } from '@vercel/analytics'; 3 | 4 | declare global { 5 | interface Window { 6 | gtag: (...args: any[]) => void; 7 | } 8 | } 9 | 10 | export const trackClick = (eventName: string, parameters?: Record) => { 11 | // Google Analytics tracking 12 | if (typeof window !== 'undefined' && window.gtag) { 13 | window.gtag('event', eventName, { 14 | event_category: 'click', 15 | event_label: parameters?.label || eventName, 16 | value: parameters?.value, 17 | ...parameters, 18 | }); 19 | } 20 | 21 | // Vercel Analytics tracking 22 | vercelTrack(eventName, parameters); 23 | }; 24 | 25 | export const trackButtonClick = (buttonName: string, location?: string) => { 26 | const eventData = { 27 | button_name: buttonName, 28 | location: location || 'unknown', 29 | }; 30 | 31 | trackClick('button_click', eventData); 32 | }; 33 | 34 | export const trackLinkClick = (linkText: string, destination: string) => { 35 | const eventData = { 36 | link_text: linkText, 37 | destination: destination, 38 | }; 39 | 40 | trackClick('link_click', eventData); 41 | }; 42 | 43 | export const trackFormSubmit = (formName: string) => { 44 | const eventData = { 45 | form_name: formName, 46 | }; 47 | 48 | trackClick('form_submit', eventData); 49 | }; 50 | 51 | export const trackPageView = (pageName: string) => { 52 | const eventData = { 53 | page_name: pageName, 54 | }; 55 | 56 | trackClick('page_view', eventData); 57 | }; 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LinkHouse 2 | 3 | A modern Next.js landing page template optimized for conversions. 4 | 5 | ![Screenshot](./public/Screenshot%202025-12-07%20075142.png) 6 | 7 | **Live Demo:** [https://www.linkhouse.store/](https://www.linkhouse.store/) 8 | 9 | ## Tech Stack 10 | 11 | - Next.js 15 12 | - React 19 13 | - TypeScript 14 | - Tailwind CSS v4 15 | 16 | ## Quick Start 17 | 18 | 1. **Install dependencies** 19 | ```bash 20 | npm install 21 | ``` 22 | 23 | 2. **Run development server** 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | 3. **Open** [http://localhost:3000](http://localhost:3000) 29 | 30 | ## Configuration 31 | 32 | ### Google Analytics Setup 33 | 34 | 1. **Create a Google Tag Manager account** 35 | - Go to [Google Tag Manager](https://tagmanager.google.com) 36 | - Create a new account and container 37 | - Copy your GTM Container ID (format: `GTM-XXXXXXX`) 38 | 39 | 2. **Add environment variable** 40 | - Create a `.env.local` file in the root directory 41 | - Add your GTM ID: 42 | ```env 43 | NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX 44 | ``` 45 | 46 | 3. **Restart your development server** 47 | - The Google Tag Manager script will automatically load on all pages 48 | 49 | ### Web3Forms Setup 50 | 51 | 1. **Get your access key** 52 | - Go to [Web3Forms](https://web3forms.com) 53 | - Sign up for a free account 54 | - Generate an access key from your dashboard 55 | 56 | 2. **Add environment variable** 57 | - Add to your `.env.local` file: 58 | ```env 59 | NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY=your-access-key-here 60 | ``` 61 | 62 | 3. **Restart your development server** 63 | - The email form on the thank-you page will now work 64 | 65 | **Note:** Make sure `.env.local` is in your `.gitignore` file (it should be by default) to keep your keys secure. 66 | 67 | ## Deployment 68 | 69 | Deploy to Vercel: 70 | 71 | 1. Push to GitHub 72 | 2. Import repository in [Vercel](https://vercel.com) 73 | 3. Deploy 74 | 75 | Or build manually: 76 | ```bash 77 | npm run build 78 | npm start 79 | ``` 80 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono, Poppins } from "next/font/google"; 3 | import { Analytics } from '@vercel/analytics/react'; 4 | import "./globals.css"; 5 | 6 | const geistSans = Geist({ 7 | variable: "--font-geist-sans", 8 | subsets: ["latin"], 9 | }); 10 | 11 | const geistMono = Geist_Mono({ 12 | variable: "--font-geist-mono", 13 | subsets: ["latin"], 14 | }); 15 | 16 | const poppins = Poppins({ 17 | variable: "--font-poppins", 18 | subsets: ["latin"], 19 | weight: ["300", "400", "500", "600", "700"], 20 | }); 21 | 22 | export const metadata: Metadata = { 23 | title: "LinkHaus - Turn your link-in-bio into a shop and ad channel", 24 | description: "Sell your content, courses, and sessions — and earn from curated brand placements you control. One link. Two revenue streams. Zero code.", 25 | }; 26 | 27 | export default function RootLayout({ 28 | children, 29 | }: Readonly<{ 30 | children: React.ReactNode; 31 | }>) { 32 | return ( 33 | 34 | 35 | {/* Google Tag Manager */} 36 | {process.env.NEXT_PUBLIC_GTM_ID && ( 37 |