├── .gitignore
├── LICENSE
├── README.md
├── integrations.png
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── prisma
└── schema.prisma
├── public
├── images
│ ├── blog
│ │ ├── blog-1.png
│ │ ├── blog-2.png
│ │ ├── blog-3.png
│ │ ├── blog-4.png
│ │ ├── blog-5.png
│ │ ├── blog-6.png
│ │ ├── blog-author.png
│ │ ├── blog-details-01.jpg
│ │ ├── blog-details-02.jpg
│ │ ├── blog-shape-01.svg
│ │ └── blog-shape-02.svg
│ ├── cta
│ │ ├── cta-grid-01.svg
│ │ ├── cta-grid-02.svg
│ │ ├── cta-shape-01.svg
│ │ └── cta-shape-02.svg
│ ├── dashboard
│ │ ├── profile-avatar.png
│ │ └── sidebar
│ │ │ ├── icon-01.svg
│ │ │ ├── icon-02.svg
│ │ │ └── icon-03.svg
│ ├── favicon.ico
│ ├── features
│ │ ├── features-01.svg
│ │ ├── features-02.svg
│ │ ├── features-icon-01.svg
│ │ ├── features-icon-02.svg
│ │ ├── features-icon-03.svg
│ │ ├── features-icon-04.svg
│ │ ├── features-icon-05.svg
│ │ ├── features-icon-06.svg
│ │ ├── features-shape-01.svg
│ │ └── features-shape-02.svg
│ ├── footer
│ │ ├── footer-grid-01.svg
│ │ └── footer-grid-02.svg
│ ├── hero
│ │ ├── hero-shape-01.svg
│ │ └── hero-shape-02.svg
│ ├── icon
│ │ └── arrow.svg
│ ├── logo
│ │ ├── logo-light.svg
│ │ └── logo.svg
│ ├── pricing
│ │ ├── pricing-icon-01.svg
│ │ ├── pricing-icon-02-2.svg
│ │ ├── pricing-icon-02.svg
│ │ └── pricing-icon-03.svg
│ ├── signin
│ │ ├── signin-grid-01.svg
│ │ ├── signin-grid-02.svg
│ │ ├── signin-shape-01.svg
│ │ ├── signin-shape-02.svg
│ │ ├── signin-shape-03.svg
│ │ └── signin-shape-04.svg
│ ├── support
│ │ ├── grid-404.svg
│ │ ├── support-grid-01.svg
│ │ ├── support-grid-02.svg
│ │ ├── support-shape-01.svg
│ │ └── support-shape-02.svg
│ └── testimonial
│ │ ├── author-01.png
│ │ ├── author-02.png
│ │ ├── author-03.png
│ │ ├── author-04.png
│ │ ├── author-05.png
│ │ └── author-06.png
├── next.svg
└── vercel.svg
├── src
├── app
│ ├── (site)
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── providers.tsx
│ ├── favicon.ico
│ ├── layout.tsx
│ └── not-found.tsx
├── components
│ ├── 404
│ │ └── index.tsx
│ ├── Blog
│ │ └── BlogItem.tsx
│ ├── Common
│ │ ├── Breadcrumb.tsx
│ │ ├── Breadcrumbs.tsx
│ │ ├── PreLoader.tsx
│ │ ├── SectionHeader.tsx
│ │ └── SectionTitleH2.tsx
│ ├── Footer
│ │ └── index.tsx
│ ├── Header
│ │ ├── Dropdown.tsx
│ │ ├── ThemeSwitcher.tsx
│ │ ├── index.tsx
│ │ └── menuData.ts
│ └── Home
│ │ ├── Blog
│ │ └── index.tsx
│ │ ├── CallToAction
│ │ └── index.tsx
│ │ ├── Counter
│ │ ├── CountUp.tsx
│ │ └── index.tsx
│ │ ├── FAQ
│ │ ├── FaqItem.tsx
│ │ ├── faqData.ts
│ │ └── index.tsx
│ │ ├── Features
│ │ ├── FeatureItem.tsx
│ │ ├── featuresData.ts
│ │ └── index.tsx
│ │ ├── FeaturesWithImage
│ │ ├── FeatureItem.tsx
│ │ ├── featuresData.ts
│ │ └── index.tsx
│ │ ├── Hero
│ │ ├── Brand.tsx
│ │ ├── brandData.tsx
│ │ └── index.tsx
│ │ ├── Newsletter
│ │ ├── Graphics.tsx
│ │ └── index.tsx
│ │ ├── Pricing
│ │ ├── PriceItem.tsx
│ │ └── index.tsx
│ │ ├── Testimonials
│ │ ├── TestimonialItem.tsx
│ │ ├── index.tsx
│ │ └── testmonialsData.ts
│ │ └── index.tsx
├── fonts
│ ├── Satoshi-Black.eot
│ ├── Satoshi-Black.ttf
│ ├── Satoshi-Black.woff
│ ├── Satoshi-Black.woff2
│ ├── Satoshi-BlackItalic.eot
│ ├── Satoshi-BlackItalic.ttf
│ ├── Satoshi-BlackItalic.woff
│ ├── Satoshi-BlackItalic.woff2
│ ├── Satoshi-Bold.eot
│ ├── Satoshi-Bold.ttf
│ ├── Satoshi-Bold.woff
│ ├── Satoshi-Bold.woff2
│ ├── Satoshi-BoldItalic.eot
│ ├── Satoshi-BoldItalic.ttf
│ ├── Satoshi-BoldItalic.woff
│ ├── Satoshi-BoldItalic.woff2
│ ├── Satoshi-Italic.eot
│ ├── Satoshi-Italic.ttf
│ ├── Satoshi-Italic.woff
│ ├── Satoshi-Italic.woff2
│ ├── Satoshi-Light.eot
│ ├── Satoshi-Light.ttf
│ ├── Satoshi-Light.woff
│ ├── Satoshi-Light.woff2
│ ├── Satoshi-LightItalic.eot
│ ├── Satoshi-LightItalic.ttf
│ ├── Satoshi-LightItalic.woff
│ ├── Satoshi-LightItalic.woff2
│ ├── Satoshi-Medium.eot
│ ├── Satoshi-Medium.ttf
│ ├── Satoshi-Medium.woff
│ ├── Satoshi-Medium.woff2
│ ├── Satoshi-MediumItalic.eot
│ ├── Satoshi-MediumItalic.ttf
│ ├── Satoshi-MediumItalic.woff
│ ├── Satoshi-MediumItalic.woff2
│ ├── Satoshi-Regular.eot
│ ├── Satoshi-Regular.ttf
│ ├── Satoshi-Regular.woff
│ ├── Satoshi-Regular.woff2
│ ├── Satoshi-Variable.eot
│ ├── Satoshi-Variable.ttf
│ ├── Satoshi-Variable.woff
│ ├── Satoshi-Variable.woff2
│ ├── Satoshi-VariableItalic.eot
│ ├── Satoshi-VariableItalic.ttf
│ ├── Satoshi-VariableItalic.woff
│ └── Satoshi-VariableItalic.woff2
├── libs
│ └── scrollActive.js
├── pricing
│ └── pricingData.ts
├── styles
│ ├── globals.css
│ └── satoshi.css
└── types
│ ├── blog.ts
│ ├── faq.ts
│ ├── featureItem.ts
│ ├── featureWithImg.ts
│ ├── menu.ts
│ ├── priceItem.ts
│ └── testimonial.ts
├── tailwind.config.ts
└── tsconfig.json
/.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 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 | .env
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SaaSBold Lite
2 |
3 | SaaSBold is a **full-stack SaaS boilerplate** for Next.js - crafted with great attention to both front-end and back-end functionality. Developer experience has been a key focus, comes with all the essential integrations features with a one-click deployment option on Vercel.
4 |
5 | 
6 |
7 | - [🚀 Live Demo](https://demo.saasbold.com/)
8 | - [📘 Documentation](https://saasbold.com/docs)
9 | - [☕ Website](https://saasbold.com/)
10 | - [🔥 Pricing and FAQ](https://saasbold.com/#pricing)
11 |
12 |
13 | ## Installation
14 |
15 | ### Prerequisites
16 | To get started with SaaSBold, ensure you have the following prerequisites installed and set up:
17 |
18 | - Node.js 18.x or later (recommended to use Node.js 20.x or later)
19 |
20 | ### Cloning the Repository
21 | Clone the repository using the following command:
22 |
23 | ```bash
24 | git clone https://github.com/SaaSBold/saasbold-lite.git
25 | ```
26 |
27 | > Windows Users: If you face issues while cloning, place the repository near the root of your drive.
28 |
29 | 1. Install dependencies:
30 | ```bash
31 | npm install
32 | # or
33 | yarn install
34 | ```
35 | > Some included packages may cause peer-deps issue with React 19 while installing.
36 | >
37 | > On npm use the `--legacy-peer-deps` flag as a workaround for that at the moment.
38 |
39 | 2. Start the development server:
40 | ```bash
41 | npm run dev
42 | # or
43 | yarn dev
44 | ```
45 |
46 |
47 | ## SaaSBold Features and Integrations ⚡
48 | 
49 |
50 | ### 💳 Payments and Subscriptions
51 | - Stripe integration for billing users
52 | - Paddle and LemonSqueezy support coming soon
53 |
54 | ### 🔒 Authentication
55 | - Magic Link, Social Login/Auth, Email/Pass Authentication
56 | - Automatic sync of user data in PostgreSQL
57 | - Private/protected pages & API Calls
58 |
59 | ### 📧 Emails
60 | - Seamless transactional email solution
61 | - Built-in Email Templates for various purposes
62 |
63 | ### 🛠️ Database
64 | - Ready-to-use PostgreSQL database with Prisma integration
65 | - Easily switch to other databases like MySQL or MongoDB
66 | - Efficient performance and database management
67 |
68 | ### 👩💼 Admin Dashboard
69 | - Manage user roles, permissions, and access controls
70 | - UI Components for Admin Dashboard
71 |
72 | ### 👤 User Dashboard
73 | - Control account settings and preferences
74 | - Intuitive interface with smooth API integrations
75 |
76 | ### 📰 Marketing / Newsletter
77 | - Automatically add new users to MailChimp list
78 | - Send newsletters to your SaaS user base
79 |
80 | ### ✨ AI Integration
81 | - Ready-to-use AI integration with Open AI
82 |
83 | ### 🔍 Algolia Integration
84 | - Ready-to-use Algolia integration for site search
85 |
86 | ### 🙌 Detailed comparison between the free, starter, and professional versions of SaaSBold
87 |
88 | | Feature | Lite | Starter | Professional |
89 | |---------------------|------------|----------|--------------|
90 | | Next.js Landing Page | ✅ Yes | ✅ Yes | ✅ Yes |
91 | | All The Integrations | ❌ No | ✅ Yes | ✅ Yes |
92 | | Functional Blog with Sanity | ❌ No | ✅ Yes | ✅ Yes |
93 | | Functional Admin Dashboard | ❌ No | ❌ No | ✅ Yes |
94 | | Functional User Dashboard | ❌ No | ❌ No | ✅ Yes |
95 | | Figma Design Source File | ❌ No | ❌ No | ✅ Yes | ✅ Yes |
96 | | Use with Commercial Projects | ✅ Yes | ✅ Yes | ✅ Yes |
97 | | Lifetime Free Updates | ✅ Yes | ✅ Yes | ✅ Yes |
98 | | Email Support | ❌ No | ✅ Yes | ✅ Yes |
99 | | Community Support | ✅ Yes | ✅ Yes | ✅ Yes |
100 |
--------------------------------------------------------------------------------
/integrations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/integrations.png
--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 |
3 | const nextConfig = {
4 | images: {
5 | remotePatterns: [
6 | {
7 | protocol: "https",
8 | hostname: "cdn.sanity.io",
9 | port: "",
10 | },
11 | {
12 | protocol: "https",
13 | hostname: "lh3.googleusercontent.com",
14 | port: "",
15 | },
16 | {
17 | protocol: "https",
18 | hostname: "avatars.githubusercontent.com",
19 | port: "",
20 | },
21 | {
22 | protocol: "https",
23 | hostname: "pub-b7fd9c30cdbf439183b75041f5f71b92.r2.dev",
24 | port: "",
25 | },
26 | ],
27 | },
28 | };
29 |
30 | module.exports = nextConfig;
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "saasbold-lite",
3 | "version": "1.2.0",
4 | "private": true,
5 | "engines": {
6 | "node": ">=14.0.0"
7 | },
8 | "scripts": {
9 | "dev": "next dev",
10 | "build": "next build",
11 | "start": "next start",
12 | "stripe:listen": "stripe listen --forward-to http://localhost:3000/api/stripe/webhook",
13 | "check-format": "prettier --check .",
14 | "check-lint": "eslint . --ext ts --ext tsx --ext js",
15 | "check-style": "npm run check-format && npm run check-lint",
16 | "fix-format": "prettier --write .",
17 | "fix-lint": "eslint --fix .",
18 | "fix-style": "npm run fix-format && npm run fix-lint",
19 | "test-build": "npm run check-style && npm run build"
20 | },
21 | "dependencies": {
22 | "next": "^15.2.4",
23 | "next-themes": "^0.2.1",
24 | "nextjs-toploader": "^1.6.6",
25 | "react": "19.0.0",
26 | "react-dom": "19.0.0"
27 | },
28 | "devDependencies": {
29 | "@types/node": "^20",
30 | "@types/react": "19.0.10",
31 | "@types/react-dom": "19.0.4",
32 | "@typescript-eslint/eslint-plugin": "^6.18.0",
33 | "@typescript-eslint/parser": "^6.18.0",
34 | "autoprefixer": "^10.0.1",
35 | "eslint": "^8.56.0",
36 | "eslint-config-next": "15.2.0",
37 | "eslint-config-prettier": "^9.1.0",
38 | "eslint-plugin-prettier": "^5.1.2",
39 | "eslint-plugin-react": "^7.33.2",
40 | "eslint-plugin-react-hooks": "^4.6.0",
41 | "postcss": "^8",
42 | "prettier": "^3.1.1",
43 | "prettier-plugin-tailwindcss": "^0.5.11",
44 | "tailwindcss": "^3.3.0",
45 | "typescript": "^5.3.3"
46 | }
47 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | datasource db {
5 | provider = "postgresql"
6 | url = env("DATABASE_URL")
7 | shadowDatabaseUrl = env("SHADOW_DATABASE_URL") // Only needed when using a cloud provider that doesn't support the creation of new databases, like Heroku. Learn more: https://pris.ly/d/migrate-shadow
8 | }
9 |
10 | generator client {
11 | provider = "prisma-client-js"
12 | }
13 |
14 | // model Test {
15 | // id Int @id @default(autoincrement())
16 | // }
17 |
18 | model Account {
19 | id String @id @default(cuid())
20 | userId String
21 | type String
22 | provider String
23 | providerAccountId String
24 | refresh_token String? @db.Text
25 | access_token String? @db.Text
26 | expires_at Int?
27 | token_type String?
28 | scope String?
29 | id_token String? @db.Text
30 | session_state String?
31 |
32 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
33 |
34 | @@unique([provider, providerAccountId])
35 | }
36 |
37 | model Session {
38 | id String @id @default(cuid())
39 | sessionToken String @unique
40 | userId String
41 | expires DateTime
42 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
43 | }
44 |
45 | model ApiKey {
46 | id String @id @default(cuid())
47 | key String
48 | name String @unique
49 | userId String
50 | createdAt DateTime @default(now())
51 | user User @relation(fields: [userId], references: [id], onDelete: Cascade)
52 | }
53 |
54 | model User {
55 | id String @id @default(cuid())
56 | name String?
57 | email String? @unique
58 | emailVerified DateTime?
59 | image String?
60 | password String?
61 | passwordResetToken String? @unique
62 | passwordResetTokenExp DateTime?
63 | role String? @default("USER")
64 | stripeCustomerId String? @unique @map(name: "stripe_customer_id")
65 | stripeSubscriptionId String? @unique @map(name: "stripe_subscription_id")
66 | stripePriceId String? @map(name: "stripe_price_id")
67 | stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
68 | createdAt DateTime @default(now())
69 | accounts Account[]
70 | sessions Session[]
71 | apiKeys ApiKey[]
72 | }
73 |
74 | model VerificationToken {
75 | id String @id @default(cuid())
76 | identifier String
77 | token String @unique
78 | expires DateTime
79 |
80 | @@unique([identifier, token])
81 | }
82 |
--------------------------------------------------------------------------------
/public/images/blog/blog-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-1.png
--------------------------------------------------------------------------------
/public/images/blog/blog-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-2.png
--------------------------------------------------------------------------------
/public/images/blog/blog-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-3.png
--------------------------------------------------------------------------------
/public/images/blog/blog-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-4.png
--------------------------------------------------------------------------------
/public/images/blog/blog-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-5.png
--------------------------------------------------------------------------------
/public/images/blog/blog-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-6.png
--------------------------------------------------------------------------------
/public/images/blog/blog-author.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-author.png
--------------------------------------------------------------------------------
/public/images/blog/blog-details-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-details-01.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-details-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/blog/blog-details-02.jpg
--------------------------------------------------------------------------------
/public/images/blog/blog-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/blog/blog-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/cta/cta-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/cta/cta-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/dashboard/profile-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/dashboard/profile-avatar.png
--------------------------------------------------------------------------------
/public/images/dashboard/sidebar/icon-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/public/images/dashboard/sidebar/icon-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/images/dashboard/sidebar/icon-03.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/favicon.ico
--------------------------------------------------------------------------------
/public/images/features/features-icon-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/images/features/features-icon-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/public/images/features/features-icon-03.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/images/features/features-icon-04.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/public/images/features/features-icon-05.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/public/images/features/features-icon-06.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/public/images/features/features-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/features/features-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/hero/hero-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/hero/hero-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/icon/arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/images/logo/logo-light.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/public/images/logo/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/public/images/pricing/pricing-icon-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/images/pricing/pricing-icon-02-2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/public/images/pricing/pricing-icon-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/public/images/pricing/pricing-icon-03.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/public/images/signin/signin-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/images/signin/signin-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/images/signin/signin-shape-03.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/signin/signin-shape-04.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/support/grid-404.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/public/images/support/support-shape-01.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/support/support-shape-02.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/images/testimonial/author-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-01.png
--------------------------------------------------------------------------------
/public/images/testimonial/author-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-02.png
--------------------------------------------------------------------------------
/public/images/testimonial/author-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-03.png
--------------------------------------------------------------------------------
/public/images/testimonial/author-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-04.png
--------------------------------------------------------------------------------
/public/images/testimonial/author-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-05.png
--------------------------------------------------------------------------------
/public/images/testimonial/author-06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/public/images/testimonial/author-06.png
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/(site)/layout.tsx:
--------------------------------------------------------------------------------
1 | import "../../styles/globals.css";
2 | import "../../styles/satoshi.css";
3 | import "../../styles/globals.css";
4 | import Header from "@/components/Header";
5 | import Footer from "@/components/Footer";
6 | import { Providers } from "./providers";
7 | import NextTopLoader from "nextjs-toploader";
8 | import Loader from "@/components/Common/PreLoader";
9 |
10 | export default function RootLayout({
11 | children,
12 | }: {
13 | children: React.ReactNode;
14 | }) {
15 | return (
16 | <>
17 |
18 |
19 |
20 |
26 |
27 | {children}
28 |
29 |
30 | >
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/(site)/page.tsx:
--------------------------------------------------------------------------------
1 | import Home from "@/components/Home";
2 | import { Metadata } from "next";
3 |
4 | export const metadata: Metadata = {
5 | title: `Full-Stack SaaS Boilerplate for Next.js - SaaSBold Demo`,
6 | description: `A full-stack SaaS boilerplate and starter kit comes with all essential integrations, pages, components, user/admin dashboards, landing page, design source and everything you need to turn your feature-rich SaaS startup idea into reality in a day!`,
7 | openGraph: {
8 | type: "website",
9 | title: `Full-Stack SaaS Boilerplate for Next.js - SaaSBold Demo`,
10 | description: `A full-stack SaaS boilerplate and starter kit comes with all essential integrations, pages, components, user/admin dashboards, landing page, design source and everything you need to turn your feature-rich SaaS startup idea into reality in a day!`,
11 | images:
12 | "https://ucarecdn.com/4b0ffd0e-90b0-4a59-b63c-f5ecee0ae575/saasbold.jpg",
13 | },
14 | twitter: {
15 | card: "summary_large_image",
16 | title: `Full-Stack SaaS Boilerplate for Next.js - SaaSBold Demo`,
17 | description: `A full-stack SaaS boilerplate and starter kit comes with all essential integrations, pages, components, user/admin dashboards, landing page, design source and everything you need to turn your feature-rich SaaS startup idea into reality in a day!`,
18 | images:
19 | "https://ucarecdn.com/4b0ffd0e-90b0-4a59-b63c-f5ecee0ae575/saasbold.jpg",
20 | },
21 | };
22 |
23 | export default function HomePage() {
24 | return (
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/(site)/providers.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ThemeProvider } from "next-themes";
4 |
5 | export function Providers({ children }: { children: React.ReactNode }) {
6 | return (
7 |
8 | {children}
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "../styles/globals.css";
2 | import "../styles/satoshi.css";
3 | import { Inter } from "next/font/google";
4 | const inter = Inter({ subsets: ["latin"] });
5 |
6 | const layout = ({ children }: { children: React.ReactNode }) => {
7 | return (
8 |
9 |
12 | {children}
13 |
14 |
15 | );
16 | };
17 |
18 | export default layout;
19 |
--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | import NotFound from "@/components/404";
2 |
3 | export default function NotFoundPage() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/404/index.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | import React from "react";
4 |
5 | const NotFound = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 |
22 |
29 |
35 |
39 |
43 |
44 |
45 |
46 |
47 | Page not found
48 |
49 |
50 |
51 | The page you are looking for doesn’t exist. Here are some helpful
52 | links:
53 |
54 |
55 |
56 |
60 |
68 |
73 |
74 | Go back
75 |
76 |
77 |
81 | Take me home
82 |
83 |
84 |
85 |
86 |
87 |
88 | );
89 | };
90 |
91 | export default NotFound;
92 |
--------------------------------------------------------------------------------
/src/components/Blog/BlogItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Blog } from "@/types/blog";
3 | import Image from "next/image";
4 | import Link from "next/link";
5 |
6 | const BlogItem = ({ blog }: { blog: Blog }) => {
7 | return (
8 |
9 |
13 |
20 |
21 |
22 |
23 |
81 |
82 |
83 |
84 | {blog?.title.substring(0, 40)}...
85 |
86 |
87 |
88 | {blog?.metadata.substring(0, 60)}
89 |
90 |
91 |
92 | );
93 | };
94 |
95 | export default BlogItem;
96 |
--------------------------------------------------------------------------------
/src/components/Common/Breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | export default function Breadcrumb({ pageTitle }: { pageTitle: string }) {
4 | return (
5 |
6 |
7 |
8 |
9 | {pageTitle}
10 |
11 |
12 |
13 |
14 | Home
15 |
16 |
17 |
18 | {pageTitle}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/Common/Breadcrumbs.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 |
4 | const Breadcrumbs = ({ title, pages }: { title: string; pages: string[] }) => {
5 | return (
6 |
7 |
8 | {title}
9 |
10 |
11 |
12 |
13 |
14 | {pages[0]}
15 |
16 |
17 | {pages?.slice(1).map((page, index) => (
18 |
19 | / {page}
20 |
21 | ))}
22 |
23 |
24 | );
25 | };
26 |
27 | export default Breadcrumbs;
28 |
--------------------------------------------------------------------------------
/src/components/Common/PreLoader.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useEffect, useState } from "react";
3 |
4 | const Loader = () => {
5 | const [loading, setLoading] = useState(true);
6 |
7 | useEffect(() => {
8 | setTimeout(() => setLoading(false), 1000);
9 | }, []);
10 |
11 | return (
12 | <>
13 | {loading && (
14 |
17 | )}
18 | >
19 | );
20 | };
21 |
22 | export default Loader;
23 |
--------------------------------------------------------------------------------
/src/components/Common/SectionHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SectionHeader = ({
4 | title,
5 | description,
6 | }: {
7 | title: string;
8 | description: string;
9 | }) => {
10 | return (
11 |
12 |
13 | {title}
14 |
15 |
16 |
17 | {description}
18 |
19 |
20 | );
21 | };
22 |
23 | export default SectionHeader;
24 |
--------------------------------------------------------------------------------
/src/components/Common/SectionTitleH2.tsx:
--------------------------------------------------------------------------------
1 | type PropsType = {
2 | title: string;
3 | center?: boolean;
4 | largePara?: boolean;
5 | paragraph: string;
6 | width?: string;
7 | paraWidth?: string;
8 | titleWidth?: string;
9 | marginBottom?: string;
10 | };
11 |
12 | export default function SectionTitleH2(props: PropsType) {
13 | const {
14 | title,
15 | center,
16 | largePara,
17 | paragraph,
18 | width,
19 | paraWidth,
20 | titleWidth,
21 | marginBottom = "70px",
22 | } = props;
23 | return (
24 |
28 |
32 | {title}
33 |
34 |
40 | {paragraph}
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 |
4 | const Footer = () => {
5 | return (
6 |
7 |
8 | {/* */}
9 |
10 |
11 |
12 |
18 |
19 |
20 | © Your SaaS - Demo SaaS website created using SaaSBold
21 |
22 |
23 |
81 |
82 |
83 |
84 |
85 |
86 | Products
87 |
88 |
89 |
123 |
124 |
125 |
126 |
127 | Resources
128 |
129 |
130 |
164 |
165 |
166 |
167 |
168 | Products
169 |
170 |
171 |
205 |
206 |
207 |
208 |
209 | Company
210 |
211 |
212 |
238 |
239 |
240 |
241 | {/* */}
242 |
243 |
244 | {/* */}
245 |
246 |
247 |
253 |
254 |
255 |
261 |
262 |
263 |
264 | );
265 | };
266 |
267 | export default Footer;
268 |
--------------------------------------------------------------------------------
/src/components/Header/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import { Menu } from "@/types/menu";
2 | import Link from "next/link";
3 | import { useState } from "react";
4 | import { usePathname } from "next/navigation";
5 |
6 | const Dropdown = ({
7 | stickyMenu,
8 | item,
9 | }: {
10 | stickyMenu: boolean;
11 | item: Menu;
12 | }) => {
13 | const [dropdown, setDropdown] = useState(false);
14 | const pathname = usePathname();
15 |
16 | return (
17 |
18 |
setDropdown(!dropdown)}
20 | className='flex w-full items-center justify-between gap-1.5 rounded-full px-[14px] py-[3px] font-satoshi font-medium text-dark group-hover:bg-primary/5 group-hover:text-primary dark:text-gray-5 dark:group-hover:bg-white/5 dark:group-hover:text-white'
21 | >
22 | Pages
23 |
31 |
37 |
38 |
39 |
40 | {/* */}
41 |
46 | {item?.submenu &&
47 | item?.submenu.map((item, i) => (
48 |
49 |
57 | {item?.title}
58 |
59 |
60 | ))}
61 |
62 | {/* // */}
63 |
64 | );
65 | };
66 |
67 | export default Dropdown;
68 |
--------------------------------------------------------------------------------
/src/components/Header/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from "next-themes";
2 |
3 | export default function ThemeSwitcher() {
4 | const { theme, setTheme } = useTheme();
5 |
6 | return (
7 | setTheme(theme === "dark" ? "light" : "dark")}
9 | className='relative z-10 h-9 w-[36px] cursor-pointer items-center justify-between rounded-lg dark:bg-white/5'
10 | >
11 |
12 |
19 |
25 |
26 |
27 |
28 |
29 |
36 |
42 |
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import logoLight from "@/../public/images/logo/logo-light.svg";
3 | import logo from "@/../public/images/logo/logo.svg";
4 | import { Menu } from "@/types/menu";
5 | import Image from "next/image";
6 | import Link from "next/link";
7 | import { useEffect, useState } from "react";
8 | import Dropdown from "./Dropdown";
9 | import ThemeSwitcher from "./ThemeSwitcher";
10 | import { menuData } from "./menuData";
11 | import { onScroll } from "@/libs/scrollActive";
12 | import { usePathname } from "next/navigation";
13 |
14 | const Header = () => {
15 | const [stickyMenu, setStickyMenu] = useState(false);
16 | const [searchModalOpen, setSearchModalOpen] = useState(false);
17 |
18 | const pathUrl = usePathname();
19 |
20 | const handleStickyMenu = () => {
21 | if (window.scrollY > 0) {
22 | setStickyMenu(true);
23 | } else {
24 | setStickyMenu(false);
25 | }
26 | };
27 |
28 | // Navbar toggle
29 | const [navbarOpen, setNavbarOpen] = useState(false);
30 | const navbarToggleHandler = () => {
31 | setNavbarOpen(!navbarOpen);
32 | };
33 |
34 | useEffect(() => {
35 | if (window.location.pathname === "/") {
36 | window.addEventListener("scroll", onScroll);
37 | }
38 |
39 | return () => {
40 | window.removeEventListener("scroll", onScroll);
41 | };
42 | }, []);
43 |
44 | useEffect(() => {
45 | window.addEventListener("scroll", handleStickyMenu);
46 | });
47 |
48 | return (
49 | <>
50 |
170 | >
171 | );
172 | };
173 |
174 | export default Header;
175 |
--------------------------------------------------------------------------------
/src/components/Header/menuData.ts:
--------------------------------------------------------------------------------
1 | import { Menu } from "@/types/menu";
2 |
3 | export const menuData: Menu[] = [
4 | {
5 | id: 1,
6 | title: "Features",
7 | newTab: false,
8 | path: "#features",
9 | },
10 | {
11 | id: 2,
12 | title: "Pricing",
13 | newTab: false,
14 | path: "#pricing",
15 | },
16 | {
17 | id: 2,
18 | title: "Blog",
19 | newTab: false,
20 | path: "#blog",
21 | },
22 | {
23 | id: 4,
24 | title: "Buy Now ↗",
25 | newTab: true,
26 | path: "https://saasbold.com/#pricing",
27 | },
28 | ];
29 |
--------------------------------------------------------------------------------
/src/components/Home/Blog/index.tsx:
--------------------------------------------------------------------------------
1 | import BlogItem from '@/components/Blog/BlogItem';
2 | import SectionHeader from '@/components/Common/SectionHeader';
3 | import type { Blog } from '@/types/blog';
4 |
5 | const posts: Blog[] = [
6 | {
7 | _id: 1,
8 | title:
9 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod',
10 | metadata:
11 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam.',
12 | mainImage: '/images/blog/blog-1.png',
13 | author: 'John Doe',
14 | publishedAt: '2022-01-01',
15 | },
16 | {
17 | _id: 2,
18 | title:
19 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod',
20 | metadata:
21 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam.',
22 | mainImage: '/images/blog/blog-2.png',
23 | author: 'John Doe',
24 | publishedAt: '2022-01-01',
25 | },
26 | {
27 | _id: 3,
28 | title:
29 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod',
30 | metadata:
31 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam.',
32 | mainImage: '/images/blog/blog-3.png',
33 | author: 'John Doe',
34 | publishedAt: '2022-01-01',
35 | },
36 | ];
37 |
38 | const Blog = async () => {
39 | return (
40 |
44 | {/* */}
45 |
49 |
50 |
51 |
52 | {/* */}
53 | {posts?.length > 0 ? (
54 | posts
55 | ?.slice(0, 3)
56 | .map((item, key: number) =>
)
57 | ) : (
58 |
No posts found
59 | )}
60 |
61 |
62 |
63 | );
64 | };
65 |
66 | export default Blog;
67 |
--------------------------------------------------------------------------------
/src/components/Home/CallToAction/index.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | const CallToAction = () => {
4 | return (
5 |
6 |
7 |
8 | Check Out The Demo
9 |
10 |
11 |
12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
13 | condimentum dictum euismod malesuada lacus, non consequat quam.
14 |
15 |
16 |
20 | Try Live Demo
21 |
22 |
23 |
24 | {/* */}
25 |
26 |
27 |
33 |
34 |
35 |
41 |
42 |
43 |
49 |
50 |
51 |
57 |
58 |
59 |
60 | );
61 | };
62 |
63 | export default CallToAction;
64 |
--------------------------------------------------------------------------------
/src/components/Home/Counter/CountUp.tsx:
--------------------------------------------------------------------------------
1 | // CountUp.tsx
2 | import React, { useEffect, useState, useRef } from "react";
3 |
4 | interface CountUpProps {
5 | targetNumber: number;
6 | }
7 |
8 | const CountUp: React.FC = ({ targetNumber }) => {
9 | const [count, setCount] = useState(0);
10 | const countRef = useRef(null);
11 |
12 | const handleIntersection: IntersectionObserverCallback = (entries) => {
13 | const entry = entries[0];
14 | if (entry.isIntersecting) {
15 | startCount();
16 | }
17 | };
18 |
19 | const startCount = () => {
20 | let startTime: number | undefined;
21 | const duration = 1000; // You can adjust the duration
22 |
23 | const animate = (time: number) => {
24 | if (!startTime) startTime = time;
25 | const progress = (time - startTime) / duration;
26 | const currentCount = Math.ceil(progress * targetNumber);
27 |
28 | // Ensure the currentCount does not exceed the targetNumber
29 | setCount(currentCount > targetNumber ? targetNumber : currentCount);
30 |
31 | if (progress < 1 && count < targetNumber) {
32 | requestAnimationFrame(animate);
33 | }
34 | };
35 |
36 | requestAnimationFrame(animate);
37 | };
38 |
39 | useEffect(() => {
40 | const observer = new IntersectionObserver(handleIntersection);
41 | if (countRef.current) {
42 | observer.observe(countRef.current);
43 | }
44 |
45 | return () => {
46 | observer.disconnect();
47 | };
48 | // eslint-disable-next-line react-hooks/exhaustive-deps
49 | }, []);
50 |
51 | return (
52 |
53 | {count}
54 |
55 | );
56 | };
57 |
58 | export default CountUp;
59 |
--------------------------------------------------------------------------------
/src/components/Home/Counter/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import CountUp from "./CountUp";
4 |
5 | const Counter = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | Numbers speaking for themselves
13 |
14 |
15 |
16 |
17 |
18 |
19 | +
20 |
21 |
22 | Integrations
23 |
24 |
25 |
26 | {/* */}
27 |
28 |
29 |
30 |
31 |
32 | +
33 |
34 |
35 | UI Components and Pages
36 |
37 |
38 |
39 | {/* */}
40 |
41 |
42 |
43 |
44 |
45 |
46 | +
47 |
48 |
USD Saved
49 |
50 |
51 |
52 |
53 | );
54 | };
55 |
56 | export default Counter;
57 |
--------------------------------------------------------------------------------
/src/components/Home/FAQ/FaqItem.tsx:
--------------------------------------------------------------------------------
1 | // "use client";
2 | // import { Faq } from "@/types/faq";
3 | // import React, { useState, useEffect, useRef } from "react";
4 |
5 | // const FaqItem = ({ faq }: { faq: Faq }) => {
6 | // const [open, setOpen] = useState(false);
7 | // const faqRef = useRef(null);
8 |
9 | // const handleClickOutside = (event: MouseEvent) => {
10 | // const target = event.target as HTMLElement;
11 |
12 | // if (faqRef.current && !target.closest(".content")) {
13 | // setOpen(false);
14 | // }
15 | // };
16 |
17 | // useEffect(() => {
18 | // document.addEventListener("click", handleClickOutside);
19 | // return () => {
20 | // document.removeEventListener("click", handleClickOutside);
21 | // };
22 | // }, []);
23 |
24 | // return (
25 | //
29 | //
setOpen(!open)}
31 | // className='flex w-full items-center justify-between gap-2 px-6 py-4'
32 | // >
33 | //
34 | //
35 | // {faq?.question}
36 | //
37 | //
38 | //
39 | //
47 | //
53 | //
54 | //
55 | //
56 |
57 | //
62 | //
{faq?.answer}
63 | //
64 | //
65 | // );
66 | // };
67 |
68 | // export default FaqItem;
69 |
70 | type PropsType = {
71 | faq: {
72 | id: number | string;
73 | question: string;
74 | answer: string;
75 | };
76 | handleFaqToggle: (id: number | string) => void;
77 | activeFaq: number | string;
78 | };
79 |
80 | export default function FaqItem({
81 | faq,
82 | handleFaqToggle,
83 | activeFaq,
84 | }: PropsType) {
85 | const { id, question, answer } = faq;
86 |
87 | return (
88 | <>
89 |
90 |
{
92 | handleFaqToggle(id);
93 | }}
94 | className={`text-medium flex w-full items-center justify-between px-6 py-4 text-left text-lg text-dark dark:text-white md:text-xl`}
95 | >
96 | {question}
97 |
98 |
101 |
108 |
114 |
115 |
116 |
117 |
124 |
125 |
128 | {answer}
129 |
130 |
131 |
132 |
133 | >
134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/src/components/Home/FAQ/faqData.ts:
--------------------------------------------------------------------------------
1 | import { Faq } from "@/types/faq";
2 |
3 | const faqData: Faq[] = [
4 | {
5 | id: 1,
6 | question: "Does this app offer a free trial period?",
7 | answer:
8 | "All individual Framer subscriptions have been grandfathered into a Pro plan at your existing rate. If you were on a Small Team plan, then all 5 seats have been converted over to Pro seats at your existing rate.",
9 | },
10 | {
11 | id: 2,
12 | question: "How much does the app cost?",
13 | answer:
14 | "All individual Framer subscriptions have been grandfathered into a Pro plan at your existing rate. If you were on a Small Team plan, then all 5 seats have been converted over to Pro seats at your existing rate.",
15 | },
16 | {
17 | id: 3,
18 | question: "What's the refund policy?",
19 | answer:
20 | "All individual Framer subscriptions have been grandfathered into a Pro plan at your existing rate. If you were on a Small Team plan, then all 5 seats have been converted over to Pro seats at your existing rate.",
21 | },
22 | ];
23 |
24 | export default faqData;
25 |
--------------------------------------------------------------------------------
/src/components/Home/FAQ/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useState } from "react";
3 | import faqData from "./faqData";
4 | import FaqItem from "./FaqItem";
5 | import SectionHeader from "@/components/Common/SectionHeader";
6 |
7 | const FAQ = () => {
8 | const [activeFaq, setActiveFaq] = useState(1);
9 |
10 | const handleFaqToggle = (id: number | string) => {
11 | activeFaq === id ? setActiveFaq(0) : setActiveFaq(id);
12 | };
13 |
14 | return (
15 |
16 | {/* */}
17 |
18 |
22 |
23 |
24 |
25 | {/* */}
26 | {faqData?.map((faq, key) => (
27 |
33 | ))}
34 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default FAQ;
41 |
--------------------------------------------------------------------------------
/src/components/Home/Features/FeatureItem.tsx:
--------------------------------------------------------------------------------
1 | import type { FeatureItem } from '@/types/featureItem';
2 | import Image from 'next/image';
3 |
4 | const FeatureItem = ({ data }: { data: FeatureItem }) => {
5 | return (
6 |
7 |
8 |
9 | {data.title}
10 |
11 |
{data.description}
12 |
13 | );
14 | };
15 |
16 | export default FeatureItem;
17 |
--------------------------------------------------------------------------------
/src/components/Home/Features/featuresData.ts:
--------------------------------------------------------------------------------
1 | // import { FeatureItem } from "@/types/featureItem";
2 |
3 | // const featuresData: FeatureItem[] = [
4 | // {
5 | // title: "Intuitive",
6 | // description:
7 | // "Our landing page template works on all devices, so you only have to add your content and images. It's easy to preview.",
8 | // icon: "/images/features/features-icon-01.svg",
9 | // id: 0,
10 | // },
11 | // {
12 | // title: "Intuitive",
13 | // description:
14 | // "Our landing page template works on all devices, so you only have to add your content and images. It's easy to preview.",
15 | // icon: "/images/features/features-icon-01.svg",
16 | // id: 0,
17 | // },
18 | // {
19 | // title: "Intuitive",
20 | // description:
21 | // "Our landing page template works on all devices, so you only have to add your content and images. It's easy to preview.",
22 | // icon: "/images/features/features-icon-01.svg",
23 | // id: 0,
24 | // },
25 | // {
26 | // title: "Intuitive",
27 | // description:
28 | // "Our landing page template works on all devices, so you only have to add your content and images. It's easy to preview.",
29 | // icon: "/images/features/features-icon-01.svg",
30 | // id: 0,
31 | // },
32 | // {
33 | // title: "Intuitive",
34 | // description:
35 | // "Our landing page template works on all devices, so you only have to add your content and images. It's easy to preview.",
36 | // id: 0,
37 | // },
38 | // ];
39 | // icon: "/images/features/features-icon-01.svg",
40 |
41 | // export default featuresData;
42 |
43 | import { FeatureItem } from "@/types/featureItem";
44 |
45 | const featuresData: FeatureItem[] = [
46 | {
47 | id: 1,
48 | title: "Ready-to-Use Integrations",
49 | description:
50 | "Database (Postgres with Prisma ORM), Auth (NextAuth), Payments (Stripe), Sanity (Blog), MailChimp (Newsletter), OpenAI, Email, and Many More",
51 | icon: "/images/features/features-icon-01.svg",
52 | },
53 | {
54 | id: 2,
55 | title: "Cutting-edge Technologies",
56 | description:
57 | "Built-with cutting-edge technologies to provide a robust foundation for your SaaS product, giving you a competitive edge in the digital market.",
58 | icon: "/images/features/features-icon-02.svg",
59 | },
60 | {
61 | id: 3,
62 | title: "High-quality Design",
63 | description:
64 | "Every single component and page is designed with attention to detail on Figma and styled with Tailwind CSS for the Next.js front-end.",
65 | icon: "/images/features/features-icon-03.svg",
66 | },
67 | {
68 | id: 4,
69 | title: "Admin and User Dashboard",
70 | description:
71 | "Allows you to easily manage your SaaS operations and enables end-users to easily manage and modify their account settings with ease.",
72 | icon: "/images/features/features-icon-04.svg",
73 | },
74 | {
75 | id: 5,
76 | title: "Fully Customizable",
77 | description:
78 | "SaaSBold provides the flexibility to customize your software's design and functionality to meet your specific business requirements and branding. Everything is highly customizable and modular.",
79 | icon: "/images/features/features-icon-05.svg",
80 | },
81 | {
82 | id: 6,
83 | title: "Rich Docs and Email Support",
84 | description:
85 | "Docs includes detailed, step-by-step guide for every part of SaaSBold. If you need further assistance, simply open a support ticket and we will respond promptly.",
86 | icon: "/images/features/features-icon-06.svg",
87 | },
88 | ];
89 |
90 | export default featuresData;
91 |
--------------------------------------------------------------------------------
/src/components/Home/Features/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import featuresData from "./featuresData";
3 | import FeatureItem from "./FeatureItem";
4 | import SectionHeader from "@/components/Common/SectionHeader";
5 | import Image from "next/image";
6 | const Features = () => {
7 | return (
8 |
12 | {/* */}
13 |
17 |
18 |
19 |
20 | {/* */}
21 | {featuresData?.map((item: FeatureItem, key: number) => (
22 |
23 | ))}
24 |
25 |
26 | {/* */}
27 |
28 |
29 |
35 |
36 |
37 |
43 |
44 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default Features;
51 |
--------------------------------------------------------------------------------
/src/components/Home/FeaturesWithImage/FeatureItem.tsx:
--------------------------------------------------------------------------------
1 | import { FeatureWithImg } from "@/types/featureWithImg";
2 | import Image from "next/image";
3 | import React from "react";
4 |
5 | const FeatureItem = ({ data }: { data: FeatureWithImg }) => {
6 | return (
7 |
14 |
15 |
16 | {data?.title}
17 |
18 |
{data?.description}
19 |
20 |
21 | {data?.checklist?.map((list, key) => (
22 |
23 |
24 |
31 |
37 |
38 |
39 | {list}
40 |
41 | ))}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | );
50 | };
51 |
52 | export default FeatureItem;
53 |
--------------------------------------------------------------------------------
/src/components/Home/FeaturesWithImage/featuresData.ts:
--------------------------------------------------------------------------------
1 | import { FeatureWithImg } from "@/types/featureWithImg";
2 |
3 | const featureItemData: FeatureWithImg[] = [
4 | {
5 | title: "Build, Launch, Scale with SaaSBold",
6 | description:
7 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit praesent condimentum malesuada consequat quam.",
8 | checklist: [
9 | "Lorem ipsum dolor sit amet, consectetur.",
10 | "malesuada consequat quam.",
11 | "Nam posuere enim nec ante venenatis, et ullam",
12 | ],
13 | image: "/images/features/features-01.svg",
14 | id: 1,
15 | },
16 | {
17 | title: "The Best SaaS Boilerplate Available on The Web",
18 | description:
19 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit praesent condimentum malesuada consequat quam.",
20 | checklist: [
21 | "Lorem ipsum dolor sit amet, consectetur.",
22 | "malesuada consequat quam.",
23 | "Nam posuere enim nec ante venenatis, et ullam",
24 | ],
25 | image: "/images/features/features-02.svg",
26 | id: 2,
27 | },
28 | ];
29 |
30 | export default featureItemData;
31 |
--------------------------------------------------------------------------------
/src/components/Home/FeaturesWithImage/index.tsx:
--------------------------------------------------------------------------------
1 | import { FeatureWithImg } from "@/types/featureWithImg";
2 | import featureItemData from "./featuresData";
3 | import FeatureItem from "./FeatureItem";
4 | import SectionHeader from "@/components/Common/SectionHeader";
5 |
6 | const FeaturesWithImage = () => {
7 | return (
8 |
9 | {/* */}
10 |
14 |
15 |
16 | {featureItemData?.map((item: FeatureWithImg, key: number) => (
17 |
18 | ))}
19 |
20 |
21 | );
22 | };
23 |
24 | export default FeaturesWithImage;
25 |
--------------------------------------------------------------------------------
/src/components/Home/Hero/Brand.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/components/Home/Hero/Brand.tsx
--------------------------------------------------------------------------------
/src/components/Home/Hero/index.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import React from "react";
3 | import brandData from "./brandData";
4 | import Link from "next/link";
5 |
6 | const Hero = () => {
7 | return (
8 |
9 |
10 |
11 | Full-Stack{" "}
12 |
13 | SaaS Boilerplate
14 |
15 |
23 |
28 |
29 |
30 | {" "}
31 | Built on Next.js
32 |
33 |
34 |
35 | A full-stack SaaS boilerplate and starter kit comes with all essential
36 | integrations, pages, components, user/admin dashboards, landing page,
37 | design source and everything you need to turn your feature-rich SaaS
38 | startup idea into reality in a day!
39 |
40 |
41 |
45 |
Try Demo
46 |
47 |
55 |
60 |
61 |
62 |
63 |
64 |
65 | {/* */}
66 |
67 |
68 | Built by the same team behind numerous successful SaaS and digital
69 | products
70 |
71 |
72 |
73 | {/* */}
74 | {brandData?.map((brand, key) => (
75 |
81 | {brand.image}
82 |
83 | ))}
84 |
85 |
86 |
87 | {/* */}
88 |
89 |
90 |
96 |
97 |
98 |
104 |
105 |
106 |
107 | );
108 | };
109 |
110 | export default Hero;
111 |
--------------------------------------------------------------------------------
/src/components/Home/Newsletter/index.tsx:
--------------------------------------------------------------------------------
1 | import Graphics from "./Graphics";
2 |
3 | export default function Newsletter() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 | Subscribe Newsletter
11 |
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
14 | condimentum dictum euismod malesuada lacus, non consequat quam.
15 |
16 |
17 |
18 |
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/Home/Pricing/PriceItem.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { Price } from "@/types/priceItem";
3 | import Image from "next/image";
4 |
5 | type Props = {
6 | plan: Price;
7 | isBilling?: boolean;
8 | subscriptionPlan?: any;
9 | };
10 |
11 | const PriceItem = ({ plan }: Props) => {
12 | const active = plan?.active;
13 | const activeStyle = active
14 | ? "bg-white text-black"
15 | : "bg-primary text-white hover:bg-primary-dark";
16 |
17 | return (
18 |
23 | {active && (
24 |
27 | Popular
28 |
29 | )}
30 |
31 |
32 |
37 |
38 |
39 |
40 |
45 | {plan?.subtitle}
46 |
47 |
52 | {plan.nickname}
53 |
54 |
55 |
56 |
57 |
58 | {plan?.description}
59 |
60 |
61 | {/* */}
62 |
67 |
68 |
73 | ${plan?.unit_amount / 100}
74 |
79 | /monthly
80 |
81 |
82 |
83 |
88 | What's included
89 |
90 |
91 |
92 | {plan?.includes.map((feature, key) => (
93 |
94 |
95 |
105 |
111 |
112 |
113 |
116 | {feature}
117 |
118 |
119 | ))}
120 |
121 |
122 |
125 | Get Started
126 |
127 |
128 | );
129 | };
130 |
131 | export default PriceItem;
132 |
--------------------------------------------------------------------------------
/src/components/Home/Pricing/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useEffect, useState, useRef } from "react";
3 | import SectionHeader from "@/components/Common/SectionHeader";
4 | import { pricingData } from "@/pricing/pricingData";
5 | import PriceItem from "./PriceItem";
6 |
7 |
8 | const Pricing = () => {
9 |
10 | return (
11 |
15 | {/* */}
16 |
20 |
21 |
22 |
23 | {pricingData &&
24 | pricingData.map((price, key) => (
25 |
29 | ))}
30 |
31 |
32 |
33 | );
34 | };
35 |
36 | export default Pricing;
37 |
--------------------------------------------------------------------------------
/src/components/Home/Testimonials/TestimonialItem.tsx:
--------------------------------------------------------------------------------
1 | import { Testimonial } from "@/types/testimonial";
2 | import Image from "next/image";
3 |
4 | const TestimonialItem = ({ data }: { data: Testimonial }) => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {data?.name}
14 |
15 |
{data?.role}
16 |
17 |
18 |
19 | {/* */}
20 |
21 |
22 |
“{data?.text},,
23 |
24 | );
25 | };
26 |
27 | export default TestimonialItem;
28 |
--------------------------------------------------------------------------------
/src/components/Home/Testimonials/index.tsx:
--------------------------------------------------------------------------------
1 | import SectionHeader from "@/components/Common/SectionHeader";
2 | import TestimonialItem from "./TestimonialItem";
3 | import testimonialData from "./testmonialsData";
4 | const Testimonials = () => {
5 | return (
6 |
7 | {/* */}
8 |
12 |
13 |
14 |
15 | {/* */}
16 | {testimonialData?.map((group, key) => {
17 | return (
18 |
19 | {group?.map((item, key) => (
20 |
21 | ))}
22 |
23 | );
24 | })}
25 | {/*
*/}
26 |
27 |
28 |
29 | );
30 | };
31 |
32 | export default Testimonials;
33 |
--------------------------------------------------------------------------------
/src/components/Home/Testimonials/testmonialsData.ts:
--------------------------------------------------------------------------------
1 | import { Testimonial } from "@/types/testimonial";
2 |
3 | const testimonialData: Testimonial[][] = [
4 | [
5 | {
6 | id: 1,
7 | name: "Devid warner",
8 | role: "Founer @xyz company",
9 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam",
10 | image: "/images/testimonial/author-01.png",
11 | },
12 | {
13 | id: 2,
14 | name: "Devid warner",
15 | role: "Founer @xyz company",
16 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam pulvinar eu mauris sit amet, pretium scelerisque eros",
17 | image: "/images/testimonial/author-02.png",
18 | },
19 | ],
20 | [
21 | {
22 | id: 1,
23 | name: "Devid warner",
24 | role: "Founer @xyz company",
25 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam pulvinar eu mauris sit amet, pretium scelerisque eros",
26 | image: "/images/testimonial/author-03.png",
27 | },
28 | {
29 | id: 2,
30 | name: "Devid warner",
31 | role: "Founer @xyz company",
32 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus",
33 | image: "/images/testimonial/author-04.png",
34 | },
35 | ],
36 | [
37 | {
38 | id: 1,
39 | name: "Devid warner",
40 | role: "Founer @xyz company",
41 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam.",
42 | image: "/images/testimonial/author-05.png",
43 | },
44 | {
45 | id: 2,
46 | name: "Devid warner",
47 | role: "Founer @xyz company",
48 | text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum dictum euismod malesuada lacus, non consequat quam pulvinar eu mauris sit amet, pretium scelerisque eros",
49 | image: "/images/testimonial/author-06.png",
50 | },
51 | ],
52 | ];
53 |
54 | export default testimonialData;
55 |
--------------------------------------------------------------------------------
/src/components/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import Hero from "./Hero";
2 | import Features from "./Features";
3 | import FeaturesWithImage from "./FeaturesWithImage";
4 | import Counter from "./Counter";
5 | import CallToAction from "./CallToAction";
6 | import Testimonials from "./Testimonials";
7 | import Pricing from "./Pricing";
8 | import FAQ from "./FAQ";
9 | import Blog from "./Blog";
10 | import Newsletter from "./Newsletter";
11 | const Home = () => {
12 | return (
13 | <>
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | >
25 | );
26 | };
27 |
28 | export default Home;
29 |
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Black.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Black.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Black.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Black.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Black.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Black.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Black.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BlackItalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BlackItalic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BlackItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BlackItalic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BlackItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BlackItalic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BlackItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BlackItalic.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Bold.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Bold.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Bold.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Bold.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Bold.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BoldItalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BoldItalic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BoldItalic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BoldItalic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-BoldItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-BoldItalic.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Italic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Italic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Italic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Italic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Italic.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Light.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Light.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Light.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Light.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Light.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-LightItalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-LightItalic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-LightItalic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-LightItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-LightItalic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-LightItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-LightItalic.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Medium.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Medium.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Medium.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Medium.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Medium.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-MediumItalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-MediumItalic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-MediumItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-MediumItalic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-MediumItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-MediumItalic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-MediumItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-MediumItalic.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Regular.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Regular.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Regular.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Regular.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Variable.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Variable.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Variable.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Variable.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Variable.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Variable.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-Variable.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-Variable.woff2
--------------------------------------------------------------------------------
/src/fonts/Satoshi-VariableItalic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-VariableItalic.eot
--------------------------------------------------------------------------------
/src/fonts/Satoshi-VariableItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-VariableItalic.ttf
--------------------------------------------------------------------------------
/src/fonts/Satoshi-VariableItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-VariableItalic.woff
--------------------------------------------------------------------------------
/src/fonts/Satoshi-VariableItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SaaSBold/saasbold-lite/3d931051ee4347777397cd81aae4ceaeba74455b/src/fonts/Satoshi-VariableItalic.woff2
--------------------------------------------------------------------------------
/src/libs/scrollActive.js:
--------------------------------------------------------------------------------
1 | // export function onScroll() {
2 | // if (typeof window === "undefined") {
3 | // return;
4 | // }
5 |
6 | // const sections = document.querySelectorAll(".menu-scroll");
7 | // const scrollPos =
8 | // window.pageYOffset ||
9 | // document.documentElement.scrollTop ||
10 | // document.body.scrollTop;
11 |
12 | // for (let i = 0; i < sections.length; i++) {
13 | // const currLink = sections[i];
14 | // const val = currLink.getAttribute("href");
15 | // const newVal = val.replace("/", "");
16 | // const refElement = newVal && document.querySelector(newVal);
17 | // const scrollTopMinus = scrollPos + 73;
18 | // // console.log(newVal);
19 | // if (
20 | // refElement &&
21 | // refElement.offsetTop <= scrollTopMinus &&
22 | // refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
23 | // ) {
24 | // document.querySelector(".menu-scroll").classList.remove("active");
25 | // currLink.classList.add("active");
26 | // } else {
27 | // currLink.classList.remove("active");
28 | // }
29 | // }
30 | // }
31 |
32 | export function onScroll() {
33 | if (typeof window === "undefined") {
34 | return;
35 | }
36 |
37 | const sections = document.querySelectorAll(".menu-scroll");
38 | const scrollPos =
39 | window.pageYOffset ||
40 | document.documentElement.scrollTop ||
41 | document.body.scrollTop;
42 |
43 | for (let i = 0; i < sections.length; i++) {
44 | const currLink = sections[i];
45 | const val = currLink.getAttribute("href");
46 | const newVal = val.replace(/\//g, "");
47 | const refElement = newVal && document.querySelector(newVal);
48 | const scrollTopMinus = scrollPos + 73;
49 | if (
50 | refElement &&
51 | refElement.offsetTop <= scrollTopMinus &&
52 | refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
53 | ) {
54 | document.querySelector(".menu-scroll").classList.remove("active");
55 | currLink.classList.add("active");
56 | } else {
57 | currLink.classList.remove("active");
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/pricing/pricingData.ts:
--------------------------------------------------------------------------------
1 | import { Price } from "@/types/priceItem";
2 |
3 | export const pricingData: Price[] = [
4 | {
5 | stripePriceId: "stripe_ID",
6 | unit_amount: 99 * 100,
7 | nickname: "Basic",
8 | description:
9 | "Lorem ipsum dolor sit amet dolorol met conse ctetur adipiscing elit.",
10 | subtitle: "For individuals",
11 | includes: [
12 | "All basic features",
13 | "Up to 1,000,000 tracked visits",
14 | "Premium email support",
15 | "Up to 03 team members",
16 | ],
17 | icon: `/images/pricing/pricing-icon-01.svg`,
18 | },
19 | {
20 | stripePriceId: "stripe_ID",
21 | unit_amount: 199 * 100,
22 | nickname: "Pro",
23 | description:
24 | "Lorem ipsum dolor sit amet dolorol met conse ctetur adipiscing elit.",
25 | subtitle: "For startups",
26 | includes: [
27 | "All basic features",
28 | "Up to 1,000,000 tracked visits",
29 | "Premium email support",
30 | "Up to 10 team members",
31 | ],
32 | icon: `/images/pricing/pricing-icon-02.svg`,
33 | icon2: `/images/pricing/pricing-icon-02-2.svg`,
34 | active: true,
35 | },
36 | {
37 | stripePriceId: "stripe_ID",
38 | unit_amount: 399 * 100,
39 | nickname: "Enterprise",
40 | description:
41 | "Lorem ipsum dolor sit amet dolorol met conse ctetur adipiscing elit.",
42 | subtitle: "For big companies",
43 | includes: [
44 | "All basic features",
45 | "Up to 1,000,000 tracked visits",
46 | "Premium email support",
47 | "Up to 50 team members",
48 | ],
49 | icon: `/images/pricing/pricing-icon-03.svg`,
50 | },
51 | ];
52 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | @layer base {
8 | html {
9 | @apply scroll-smooth;
10 | }
11 |
12 | body {
13 | @apply relative z-1 font-inter text-base font-normal -tracking-[0.16px] text-body;
14 | }
15 | }
16 |
17 | @layer components {
18 | .dropdown {
19 | @apply left-0 hidden min-w-max flex-col gap-0 rounded-lg bg-white p-2.5 shadow-dropdown duration-200 ease-in dark:bg-gray-dark xl:invisible
20 | xl:absolute xl:flex xl:w-[220px] xl:translate-y-10 xl:opacity-0
21 | xl:group-hover:visible xl:group-hover:translate-y-7 xl:group-hover:opacity-100;
22 | }
23 |
24 | .account-dropdown {
25 | @apply left-0 hidden min-w-max flex-col gap-0 rounded-lg bg-white p-2.5 shadow-dropdown duration-200 ease-in dark:bg-gray-dark lg:invisible
26 | lg:absolute lg:flex lg:translate-y-4 lg:opacity-0 lg:group-hover:visible
27 | lg:group-hover:translate-y-2 lg:group-hover:opacity-100 xl:w-[220px];
28 | }
29 | }
30 |
31 | @layer utilities {
32 | /* Chrome, Safari and Opera */
33 | .no-scrollbar::-webkit-scrollbar {
34 | display: none;
35 | }
36 |
37 | .no-scrollbar {
38 | -ms-overflow-style: none; /* IE and Edge */
39 | scrollbar-width: none; /* Firefox */
40 | }
41 | }
42 |
43 | .active {
44 | @apply bg-primary/5 text-primary dark:bg-white/5 dark:text-white;
45 | }
46 |
--------------------------------------------------------------------------------
/src/styles/satoshi.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | *
4 | * Font Family: Satoshi
5 | * Designed by: Deni Anggara
6 | * URL: https://www.fontshare.com/fonts/satoshi
7 | * © 2023 Indian Type Foundry
8 | *
9 | * Font Styles:
10 | * Satoshi Light
11 | * Satoshi Light Italic
12 | * Satoshi Regular
13 | * Satoshi Italic
14 | * Satoshi Medium
15 | * Satoshi Medium Italic
16 | * Satoshi Bold
17 | * Satoshi Bold Italic
18 | * Satoshi Black
19 | * Satoshi Black Italic
20 | *
21 | */
22 |
23 | @font-face {
24 | font-family: "Satoshi";
25 | src:
26 | url("../fonts/Satoshi-Light.woff2") format("woff2"),
27 | url("../fonts/Satoshi-Light.woff") format("woff"),
28 | url("../fonts/Satoshi-Light.ttf") format("truetype");
29 | font-weight: 300;
30 | font-display: swap;
31 | font-style: normal;
32 | }
33 |
34 | @font-face {
35 | font-family: "Satoshi";
36 | src:
37 | url("../fonts/Satoshi-LightItalic.woff2") format("woff2"),
38 | url("../fonts/Satoshi-LightItalic.woff") format("woff"),
39 | url("../fonts/Satoshi-LightItalic.ttf") format("truetype");
40 | font-weight: 300;
41 | font-display: swap;
42 | font-style: italic;
43 | }
44 |
45 | @font-face {
46 | font-family: "Satoshi";
47 | src:
48 | url("../fonts/Satoshi-Regular.woff2") format("woff2"),
49 | url("../fonts/Satoshi-Regular.woff") format("woff"),
50 | url("../fonts/Satoshi-Regular.ttf") format("truetype");
51 | font-weight: 400;
52 | font-display: swap;
53 | font-style: normal;
54 | }
55 |
56 | @font-face {
57 | font-family: "Satoshi";
58 | src:
59 | url("../fonts/Satoshi-Italic.woff2") format("woff2"),
60 | url("../fonts/Satoshi-Italic.woff") format("woff"),
61 | url("../fonts/Satoshi-Italic.ttf") format("truetype");
62 | font-weight: 400;
63 | font-display: swap;
64 | font-style: italic;
65 | }
66 |
67 | @font-face {
68 | font-family: "Satoshi";
69 | src:
70 | url("../fonts/Satoshi-Medium.woff2") format("woff2"),
71 | url("../fonts/Satoshi-Medium.woff") format("woff"),
72 | url("../fonts/Satoshi-Medium.ttf") format("truetype");
73 | font-weight: 500;
74 | font-display: swap;
75 | font-style: normal;
76 | }
77 |
78 | @font-face {
79 | font-family: "Satoshi";
80 | src:
81 | url("../fonts/Satoshi-MediumItalic.woff2") format("woff2"),
82 | url("../fonts/Satoshi-MediumItalic.woff") format("woff"),
83 | url("../fonts/Satoshi-MediumItalic.ttf") format("truetype");
84 | font-weight: 500;
85 | font-display: swap;
86 | font-style: italic;
87 | }
88 |
89 | @font-face {
90 | font-family: "Satoshi";
91 | src:
92 | url("../fonts/Satoshi-Bold.woff2") format("woff2"),
93 | url("../fonts/Satoshi-Bold.woff") format("woff"),
94 | url("../fonts/Satoshi-Bold.ttf") format("truetype");
95 | font-weight: 700;
96 | font-display: swap;
97 | font-style: normal;
98 | }
99 |
100 | @font-face {
101 | font-family: "Satoshi";
102 | src:
103 | url("../fonts/Satoshi-BoldItalic.woff2") format("woff2"),
104 | url("../fonts/Satoshi-BoldItalic.woff") format("woff"),
105 | url("../fonts/Satoshi-BoldItalic.ttf") format("truetype");
106 | font-weight: 700;
107 | font-display: swap;
108 | font-style: italic;
109 | }
110 |
111 | @font-face {
112 | font-family: "Satoshi";
113 | src:
114 | url("../fonts/Satoshi-Black.woff2") format("woff2"),
115 | url("../fonts/Satoshi-Black.woff") format("woff"),
116 | url("../fonts/Satoshi-Black.ttf") format("truetype");
117 | font-weight: 900;
118 | font-display: swap;
119 | font-style: normal;
120 | }
121 |
122 | @font-face {
123 | font-family: "Satoshi";
124 | src:
125 | url("../fonts/Satoshi-BlackItalic.woff2") format("woff2"),
126 | url("../fonts/Satoshi-BlackItalic.woff") format("woff"),
127 | url("../fonts/Satoshi-BlackItalic.ttf") format("truetype");
128 | font-weight: 900;
129 | font-display: swap;
130 | font-style: italic;
131 | }
132 |
--------------------------------------------------------------------------------
/src/types/blog.ts:
--------------------------------------------------------------------------------
1 | export type Blog = {
2 | _id: number;
3 | title: string;
4 | slug?: any;
5 | metadata: string;
6 | mainImage: any;
7 | author: string;
8 | tags?: string[];
9 | publishedAt: string;
10 | };
11 |
--------------------------------------------------------------------------------
/src/types/faq.ts:
--------------------------------------------------------------------------------
1 | export type Faq = {
2 | id: number;
3 | question: string;
4 | answer: string;
5 | };
6 |
--------------------------------------------------------------------------------
/src/types/featureItem.ts:
--------------------------------------------------------------------------------
1 | export type FeatureItem = {
2 | id: number;
3 | title: string;
4 | description: string;
5 | icon: string;
6 | };
7 |
--------------------------------------------------------------------------------
/src/types/featureWithImg.ts:
--------------------------------------------------------------------------------
1 | export type FeatureWithImg = {
2 | id: number;
3 | title: string;
4 | description: string;
5 | checklist: string[];
6 | image: string;
7 | };
8 |
--------------------------------------------------------------------------------
/src/types/menu.ts:
--------------------------------------------------------------------------------
1 | export type Menu = {
2 | id: number;
3 | title: string;
4 | newTab?: boolean;
5 | path?: string;
6 | submenu?: Submenu[];
7 | };
8 |
9 | export type Submenu = {
10 | id: number;
11 | title: string;
12 | newTab?: boolean;
13 | path: string;
14 | };
15 |
--------------------------------------------------------------------------------
/src/types/priceItem.ts:
--------------------------------------------------------------------------------
1 | export type Price = {
2 | stripePriceId?: string;
3 | stripeSubscriptionId?: string;
4 | stripeCurrentPeriodEnd?: Date;
5 | stripeCustomerId?: string;
6 | isSubscribed?: boolean;
7 | isCanceled?: boolean;
8 | unit_amount: number;
9 | nickname: string;
10 | description: string;
11 | subtitle: string;
12 | includes: string[];
13 | icon: string;
14 | icon2?: string;
15 | active?: boolean;
16 | };
17 |
--------------------------------------------------------------------------------
/src/types/testimonial.ts:
--------------------------------------------------------------------------------
1 | export type Testimonial = {
2 | id: number;
3 | name: string;
4 | role: string;
5 | image: string;
6 | text: string;
7 | };
8 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 | import colors from "tailwindcss/colors";
3 | const defaultTheme = require("tailwindcss/defaultTheme");
4 |
5 | const config: Config = {
6 | content: [
7 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
8 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
9 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
10 | ],
11 | darkMode: "class",
12 | theme: {
13 | fontFamily: {
14 | satoshi: ["Satoshi", "sans-serif"],
15 | inter: ["Inter", "sans-serif"],
16 | },
17 | container: {
18 | center: true,
19 | padding: {
20 | DEFAULT: "1rem",
21 | sm: "2rem",
22 | xl: "0",
23 | },
24 | },
25 | screens: {
26 | xsm: "375px",
27 | lsm: "425px",
28 | "3xl": "2000px",
29 | ...defaultTheme.screens,
30 | },
31 | extend: {
32 | // colors: {
33 | // current: "currentColor",
34 | // transparent: "transparent",
35 | // white: "#FFFFFF",
36 | // black: "#0E172B",
37 | // body: "#64748B",
38 | // stroke: "#E8E8E8",
39 | // primary: {
40 | // DEFAULT: "#573CFF",
41 | // dark: "#3E22E9",
42 | // },
43 | // dark: {
44 | // DEFAULT: "#1C274C",
45 | // 2: "#495270",
46 | // 3: "#606882",
47 | // 4: "#8D93A5",
48 | // 5: "#BBBEC9",
49 | // },
50 | // gray: {
51 | // DEFAULT: "#F3F5F6",
52 | // 1: "#F9FAFB",
53 | // 2: "#F3F4F6",
54 | // 3: "#E5E7EB",
55 | // 4: "#D1D5DB",
56 | // 5: "#9CA3AF",
57 | // 6: "#6B7280",
58 | // 7: "#374151",
59 | // },
60 | // },
61 |
62 | colors: {
63 | current: "currentColor",
64 | transparent: "transparent",
65 | white: "#FFFFFF",
66 | black: "#0E172B",
67 | body: "#64748B",
68 | stroke: {
69 | DEFAULT: "#E8E8E8",
70 | dark: "#394152",
71 | },
72 | primary: {
73 | DEFAULT: "#635BFF",
74 | dark: "#3E22E9",
75 | },
76 | dark: {
77 | DEFAULT: "#1C274C",
78 | 2: "#495270",
79 | 3: "#606882",
80 | 4: "#8D93A5",
81 | 5: "#BBBEC9",
82 | },
83 | gray: {
84 | DEFAULT: "#F3F5F6",
85 | 1: "#F9FAFB",
86 | 2: "#F3F4F6",
87 | 3: "#E5E7EB",
88 | 4: "#D1D5DB",
89 | 5: "#9CA3AF",
90 | 6: "#6B7280",
91 | 7: "#374151",
92 | dark: "#272E40",
93 | },
94 | red: {
95 | ...colors.red,
96 | DEFAULT: "#F23030",
97 | light: "#F56060",
98 | "light-5": "#FEEBEB",
99 | "light-6": "#FEF3F3",
100 | },
101 | green: {
102 | ...colors.green,
103 | DEFAULT: "#00BC55",
104 | },
105 | },
106 | fontSize: {
107 | "heading-1": ["60px", "72px"],
108 | "heading-2": ["48px", "58px"],
109 | "heading-3": ["40px", "48px"],
110 | "heading-4": ["35px", "45px"],
111 | "heading-5": ["28px", "40px"],
112 | "heading-6": ["24px", "30px"],
113 | "custom-2xl": ["22px", "30px"],
114 | "custom-3xl": ["32px", "40px"],
115 | },
116 | spacing: {
117 | 4.5: "1.125rem",
118 | 5.5: "1.375rem",
119 | 6.5: "1.625rem",
120 | 7.5: "1.875rem",
121 | 8.5: "2.125rem",
122 | 9.5: "2.375rem",
123 | 10: "2.5rem",
124 | 10.5: "2.625rem",
125 | 11: "2.75rem",
126 | 11.5: "2.875rem",
127 | 12.5: "3.125rem",
128 | 13: "3.25rem",
129 | 13.5: "3.375rem",
130 | 14: "3.5rem",
131 | 14.5: "3.625rem",
132 | 15: "3.75rem",
133 | 15.5: "3.875rem",
134 | 16: "4rem",
135 | 16.5: "4.125rem",
136 | 17: "4.25rem",
137 | 17.5: "4.375rem",
138 | 18: "4.5rem",
139 | 18.5: "4.625rem",
140 | 19: "4.75rem",
141 | 19.5: "4.875rem",
142 | 21: "5.25rem",
143 | 21.5: "5.375rem",
144 | 22: "5.5rem",
145 | 22.5: "5.625rem",
146 | 24.5: "6.125rem",
147 | 25: "6.25rem",
148 | 25.5: "6.375rem",
149 | 26: "6.5rem",
150 | 27: "6.75rem",
151 | 27.5: "6.875rem",
152 | 29: "7.25rem",
153 | 29.5: "7.375rem",
154 | 30: "7.5rem",
155 | 31: "7.75rem",
156 | 31.5: "7.875rem",
157 | 32.5: "8.125rem",
158 | 33: "8.25rem",
159 | 34: "8.5rem",
160 | 34.5: "8.625rem",
161 | 35: "8.75rem",
162 | 36.5: "9.125rem",
163 | 37: "9.25rem",
164 | 37.5: "9.375rem",
165 | 39: "9.75rem",
166 | 39.5: "9.875rem",
167 | 40: "10rem",
168 | 42.5: "10.625rem",
169 | 45: "11.25rem",
170 | 46: "11.5rem",
171 | 47.5: "11.875rem",
172 | 49: "12.25rem",
173 | 50: "12.5rem",
174 | 51: "12.75rem",
175 | 51.5: "12.875rem",
176 | 52: "13rem",
177 | 52.5: "13.125rem",
178 | 54: "13.5rem",
179 | 54.5: "13.625rem",
180 | 55: "13.75rem",
181 | 55.5: "13.875rem",
182 | 57.5: "14.375rem",
183 | 59: "14.75rem",
184 | 60: "15rem",
185 | 62.5: "15.625rem",
186 | 65: "16.25rem",
187 | 67: "16.75rem",
188 | 67.5: "16.875rem",
189 | 70: "17.5rem",
190 | 72.5: "18.125rem",
191 | 75: "18.75rem",
192 | 90: "22.5rem",
193 | 92.5: "23.125rem",
194 | 94: "23.5rem",
195 | 100: "25rem",
196 | 110: "27.5rem",
197 | 115: "28.75rem",
198 | 122.5: "30.625rem",
199 | 125: "31.25rem",
200 | 127.5: "31.875rem",
201 | 132.5: "33.125rem",
202 | 142.5: "35.625rem",
203 | 150: "37.5rem",
204 | 166.5: "41.625rem",
205 | 171.5: "42.875rem",
206 | 180: "45rem",
207 | 187.5: "46.875rem",
208 | 192.5: "48.125rem",
209 | 203: "50.75rem",
210 | 230: "57.5rem",
211 | },
212 | maxWidth: {
213 | 30: "7.5rem",
214 | 40: "10rem",
215 | 50: "12.5rem",
216 | },
217 | borderRadius: {
218 | 10: "10px",
219 | },
220 | zIndex: {
221 | 999999: "999999",
222 | 99999: "99999",
223 | 9999: "9999",
224 | 999: "999",
225 | 99: "99",
226 | 1: "1",
227 | },
228 | boxShadow: {
229 | 1: "0px 1px 2px 0px rgba(84, 87, 118, 0.10)",
230 | error: "0px 12px 34px 0px rgba(13, 10, 44, 0.05)",
231 | input: "inset 0 0 0 2px #573CFF",
232 | dropdown: "0px 4px 12px 0px rgba(15, 23, 42, 0.10)",
233 | darkdropdown: "0px 4px 12px 0px rgba(255, 255, 255, 0.05)",
234 | features: "0px 8px 20px 0px rgba(113, 116, 152, 0.05)",
235 | testimonial: "0px 8px 10px -6px rgba(15, 23, 42, 0.06)",
236 | "testimonial-2": "0px 15px 50px -6px rgba(15, 23, 42, 0.08)",
237 | },
238 | },
239 | },
240 | plugins: [],
241 | };
242 | export default config;
243 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
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 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | ".next/types/**/*.ts, middleware.ts",
30 | ".next/types/**/*.ts"
31 | ],
32 | "exclude": ["node_modules"]
33 | }
34 |
--------------------------------------------------------------------------------