├── .env.example ├── .eslintrc.json ├── .gitignore ├── README.md ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public └── images │ ├── hero-chart.webp │ ├── hero-mockup.webp │ ├── hero-transactions.webp │ ├── mockup-1.webp │ ├── mockup-2.webp │ ├── testimonial-1.webp │ ├── testimonial-2.webp │ └── testimonial-3.webp ├── src ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── components │ ├── AppStoreButton.tsx │ ├── Benefits │ │ ├── BenefitBullet.tsx │ │ ├── BenefitSection.tsx │ │ └── Benefits.tsx │ ├── CTA.tsx │ ├── Container.tsx │ ├── FAQ.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── Hero.tsx │ ├── Logos.tsx │ ├── PlayStoreButton.tsx │ ├── Pricing │ │ ├── Pricing.tsx │ │ └── PricingColumn.tsx │ ├── Section.tsx │ ├── SectionTitle.tsx │ ├── Stats.tsx │ └── Testimonials.tsx ├── data │ ├── benefits.tsx │ ├── cta.ts │ ├── faq.ts │ ├── footer.ts │ ├── hero.ts │ ├── menuItems.ts │ ├── pricing.ts │ ├── siteDetails.ts │ ├── stats.tsx │ └── testimonials.ts ├── types.ts └── utils.tsx ├── tailwind.config.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | # Retrieve your GA ID from your GA dashboard 2 | GOOGLE_ANALYTICS_ID=G-XXXXXXX -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.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.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnexi-launch%2Ffinwise-landing-page) 2 | 3 | # Finwise - Next.js + Tailwind Landing Page Template 4 | 5 | Finwise is a lightweight, easily configurable, and customizable **Next.js** and **Tailwind CSS** landing page template. It’s built to be adaptable, performant, and perfect for any product launch, portfolio, or promotional site. 6 | 7 | Try out the demo here: [https://finwise-omega.vercel.app](https://finwise-omega.vercel.app). 8 | 9 | Please check out the documentation below to get started. 10 | 11 | --- 12 | 13 | ## Features 14 | 15 | - **Next.js** app router with **TypeScript** 16 | - **Tailwind CSS** v3 for flexible styling customization 17 | - Smooth transitions powered by **Framer Motion** 18 | - Built-in **font optimization** with [next/font](https://nextjs.org/docs/app/api-reference/components/font) 19 | - Automatic **image optimization** via [next/image](https://nextjs.org/docs/app/building-your-application/optimizing/images) 20 | - Access to **31+ icon packs** via [React Icons](https://react-icons.github.io/react-icons/) 21 | - Near-perfect **Lighthouse score** 22 | - Modular, responsive, and **scalable components** 23 | - **Free lifetime updates** 24 | 25 | --- 26 | 27 | ## Sections 28 | 29 | - Hero 30 | - Partners or Clients Logos 31 | - Features 32 | - Pricing 33 | - Testimonials 34 | - FAQ 35 | - Statistics 36 | - CTA 37 | - Footer 38 | 39 | --- 40 | 41 | ## Getting Started 42 | 43 | ### Prerequisites 44 | 45 | Before starting, make sure you have the following installed: 46 | 47 | - **Node.js**: Version 18 or later 48 | - **npm**: Version 8 or later (bundled with Node.js) 49 | - **Code editor**: [VS Code](https://code.visualstudio.com/) is recommended. 50 | 51 | ### Steps 52 | 53 | 1. **Install dependencies**: Run `npm install` 54 | 2. **Run the development server**: `npm run dev` 55 | 3. **View your project**: Open [localhost:3000](http://localhost:3000) 56 | 57 | --- 58 | 59 | ## Customization 60 | 61 | 1. **Edit colors**: Update `globals.css` for primary, secondary, background, and accent colors. 62 | 2. **Update site details**: Customize `siteDetails.ts` in `/src/data` to reflect your brand and site info. 63 | 3. **Modify content**: Files in `/src/data` handle data for navigation, features, pricing, testimonials, and more. 64 | 4. **Replace favicon**: Add your icon to `/src/app/favicon.ico`. 65 | 5. **Add images**: Update `public/images` for Open Graph metadata (e.g., `og-image.jpg`, `twitter-image.jpg`). 66 | 67 | --- 68 | 69 | ## Deploying on Vercel 70 | 71 | The fastest way to deploy Finwise is on [Vercel](https://vercel.com/). Simply click the "Deploy with Vercel" button at the top of this README, or check the [Next.js deployment docs](https://vercel.com/docs/deployments/deployment-methods) for other deployment options. 72 | 73 | --- 74 | 75 | ## Contributing 76 | 77 | Finwise is an open-source project, and we welcome contributions from the community! If you have ideas for new components, designs, layouts, or optimizations, please join us in making Finwise even better. 78 | 79 | ### How to Contribute 80 | 81 | 1. **Fork the Repository**: Clone it locally. 82 | 2. **Create a New Branch**: For example, `feature/new-section` or `fix/style-issue`. 83 | 3. **Develop and Test**: Make sure your changes work and don't break existing functionality. 84 | 4. **Submit a Pull Request**: Open a pull request with a clear description of your changes, and we'll review it. 85 | 86 | ### Ideas for Contributions 87 | 88 | - New component sections (team introductions, comparison table, case studies, etc.) 89 | - Additional page variants (e.g., agency, eCommerce, portfolio layouts) 90 | - Additional themes 91 | - Documentation updates, tutorials, or guides 92 | 93 | --- 94 | 95 | ## Community and Support 96 | 97 | Join our community discussions on GitHub to share ideas, ask questions, or suggest improvements. Let’s build something amazing together! 98 | 99 | 100 | --- 101 | 102 | ## License 103 | 104 | This project is open-source and available under the MIT License. Feel free to use, modify, and distribute it for personal or commercial projects. 105 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "finwise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@headlessui/react": "^2.1.8", 13 | "@next/third-parties": "^14.2.13", 14 | "clsx": "^2.1.1", 15 | "framer-motion": "^11.11.9", 16 | "next": "^14.2.13", 17 | "react": "^18", 18 | "react-dom": "^18", 19 | "react-icons": "^5.3.0" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "^20", 23 | "@types/react": "^18", 24 | "@types/react-dom": "^18", 25 | "eslint": "^8", 26 | "eslint-config-next": "14.2.13", 27 | "postcss": "^8", 28 | "tailwindcss": "^3.4.1", 29 | "typescript": "^5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /public/images/hero-chart.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/hero-chart.webp -------------------------------------------------------------------------------- /public/images/hero-mockup.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/hero-mockup.webp -------------------------------------------------------------------------------- /public/images/hero-transactions.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/hero-transactions.webp -------------------------------------------------------------------------------- /public/images/mockup-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/mockup-1.webp -------------------------------------------------------------------------------- /public/images/mockup-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/mockup-2.webp -------------------------------------------------------------------------------- /public/images/testimonial-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/testimonial-1.webp -------------------------------------------------------------------------------- /public/images/testimonial-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/testimonial-2.webp -------------------------------------------------------------------------------- /public/images/testimonial-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/public/images/testimonial-3.webp -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexi-launch/finwise-landing-page/dbe5dd5375db1f64628cd9ced9c325687a42fafa/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #ffffff; 7 | --foreground: #171717; 8 | --primary: #FED835; 9 | --secondary: #304fff; 10 | 11 | --primary-accent: #e5c230; 12 | --foreground-accent: #454545; 13 | --hero-background: #F3F3F5; 14 | } 15 | 16 | html { 17 | @apply scroll-smooth; 18 | } 19 | 20 | body { 21 | @apply text-lg; 22 | 23 | color: var(--foreground); 24 | background: var(--background); 25 | font-family: "Source Sans 3", sans-serif; 26 | font-optical-sizing: auto; 27 | font-style: normal; 28 | } 29 | 30 | @layer utilities { 31 | .text-balance { 32 | text-wrap: balance; 33 | } 34 | } 35 | 36 | .manrope { 37 | font-family: "Manrope", sans-serif; 38 | font-optical-sizing: auto; 39 | font-style: normal; 40 | } 41 | 42 | h1, h2, h3, h4, h5, h6 { 43 | font-family: "Manrope", sans-serif; 44 | font-optical-sizing: auto; 45 | font-style: normal; 46 | } 47 | 48 | #logos svg { 49 | @apply w-fit h-10 sm:h-12; 50 | } 51 | 52 | .benefit-section:last-of-type > div { 53 | @apply mb-10; 54 | } -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { GoogleAnalytics } from '@next/third-parties/google'; 3 | import { Source_Sans_3, Manrope } from "next/font/google"; 4 | 5 | import Header from "@/components/Header"; 6 | import Footer from "@/components/Footer"; 7 | import { siteDetails } from '@/data/siteDetails'; 8 | 9 | import "./globals.css"; 10 | 11 | const manrope = Manrope({ subsets: ['latin'] }); 12 | const sourceSans = Source_Sans_3({ subsets: ['latin'] }); 13 | 14 | export const metadata: Metadata = { 15 | title: siteDetails.metadata.title, 16 | description: siteDetails.metadata.description, 17 | openGraph: { 18 | title: siteDetails.metadata.title, 19 | description: siteDetails.metadata.description, 20 | url: siteDetails.siteUrl, 21 | type: 'website', 22 | images: [ 23 | { 24 | url: '/images/og-image.jpg', 25 | width: 1200, 26 | height: 675, 27 | alt: siteDetails.siteName, 28 | }, 29 | ], 30 | }, 31 | twitter: { 32 | card: 'summary_large_image', 33 | title: siteDetails.metadata.title, 34 | description: siteDetails.metadata.description, 35 | images: ['/images/twitter-image.jpg'], 36 | }, 37 | }; 38 | 39 | export default function RootLayout({ 40 | children, 41 | }: Readonly<{ 42 | children: React.ReactNode; 43 | }>) { 44 | return ( 45 | 46 | 49 | {siteDetails.googleAnalyticsId && } 50 |
51 |
52 | {children} 53 |
54 |