├── src ├── components │ └── .gitkeep ├── app │ ├── favicon.ico │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── assets │ ├── cog.png │ ├── star.png │ ├── tube.png │ ├── noodle.png │ ├── spring.png │ ├── avatar-1.png │ ├── avatar-2.png │ ├── avatar-3.png │ ├── avatar-4.png │ ├── avatar-5.png │ ├── avatar-6.png │ ├── avatar-7.png │ ├── avatar-8.png │ ├── avatar-9.png │ ├── cylinder.png │ ├── logo-acme.png │ ├── logo-apex.png │ ├── logo-echo.png │ ├── logosaas.png │ ├── pyramid.png │ ├── logo-pulse.png │ ├── logo-celestial.png │ ├── logo-quantum.png │ ├── product-image.png │ ├── social-x.svg │ ├── social-linkedin.svg │ ├── arrow-right.svg │ ├── check.svg │ ├── social-pin.svg │ ├── menu.svg │ ├── social-youtube.svg │ └── social-insta.svg └── sections │ ├── Footer.tsx │ ├── Header.tsx │ ├── CallToAction.tsx │ ├── LogoTicker.tsx │ ├── ProductShowcase.tsx │ ├── Hero.tsx │ ├── Pricing.tsx │ └── Testimonials.tsx ├── .eslintrc.json ├── postcss.config.mjs ├── .gitignore ├── tailwind.config.ts ├── tsconfig.json ├── package.json ├── next.config.mjs └── README.md /src/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /src/assets/cog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/cog.png -------------------------------------------------------------------------------- /src/assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/star.png -------------------------------------------------------------------------------- /src/assets/tube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/tube.png -------------------------------------------------------------------------------- /src/assets/noodle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/noodle.png -------------------------------------------------------------------------------- /src/assets/spring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/spring.png -------------------------------------------------------------------------------- /src/assets/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-1.png -------------------------------------------------------------------------------- /src/assets/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-2.png -------------------------------------------------------------------------------- /src/assets/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-3.png -------------------------------------------------------------------------------- /src/assets/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-4.png -------------------------------------------------------------------------------- /src/assets/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-5.png -------------------------------------------------------------------------------- /src/assets/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-6.png -------------------------------------------------------------------------------- /src/assets/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-7.png -------------------------------------------------------------------------------- /src/assets/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-8.png -------------------------------------------------------------------------------- /src/assets/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/avatar-9.png -------------------------------------------------------------------------------- /src/assets/cylinder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/cylinder.png -------------------------------------------------------------------------------- /src/assets/logo-acme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-acme.png -------------------------------------------------------------------------------- /src/assets/logo-apex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-apex.png -------------------------------------------------------------------------------- /src/assets/logo-echo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-echo.png -------------------------------------------------------------------------------- /src/assets/logosaas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logosaas.png -------------------------------------------------------------------------------- /src/assets/pyramid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/pyramid.png -------------------------------------------------------------------------------- /src/assets/logo-pulse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-pulse.png -------------------------------------------------------------------------------- /src/assets/logo-celestial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-celestial.png -------------------------------------------------------------------------------- /src/assets/logo-quantum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/logo-quantum.png -------------------------------------------------------------------------------- /src/assets/product-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshxraj/saas-landing-nextjs/HEAD/src/assets/product-image.png -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/assets/social-x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/sections/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 9 | ], 10 | theme: { 11 | screens: { 12 | sm: "375px", 13 | md: "768px", 14 | lg: "1200px", 15 | }, 16 | extend: { 17 | container: { 18 | center: true, 19 | padding: { 20 | DEFAULT: "20px", 21 | lg: "80px", 22 | }, 23 | }, 24 | }, 25 | }, 26 | plugins: [], 27 | }; 28 | 29 | export default config; 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { DM_Sans } from "next/font/google"; 3 | import "./globals.css"; 4 | import { twMerge } from "tailwind-merge"; 5 | 6 | const dmSans = DM_Sans({ subsets: ["latin"] }); 7 | 8 | export const metadata: Metadata = { 9 | title: "Saas Landing Page", 10 | description: "SaaS Landing Page with React, Next.js, TailwindCSS & Framer Motion", 11 | }; 12 | 13 | export default function RootLayout({ 14 | children, 15 | }: Readonly<{ 16 | children: React.ReactNode; 17 | }>) { 18 | return ( 19 | 20 | {children} 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { CallToAction } from "@/sections/CallToAction"; 2 | import { Footer } from "@/sections/Footer"; 3 | import { Header } from "@/sections/Header"; 4 | import { Hero } from "@/sections/Hero"; 5 | import { LogoTicker } from "@/sections/LogoTicker"; 6 | import { Pricing } from "@/sections/Pricing"; 7 | import { ProductShowcase } from "@/sections/ProductShowcase"; 8 | import { Testimonials } from "@/sections/Testimonials"; 9 | 10 | export default function Home() { 11 | return ( 12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "light-saas-landing-page", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "framer-motion": "^11.2.14", 13 | "next": "14.2.4", 14 | "react": "^18", 15 | "react-dom": "^18" 16 | }, 17 | "devDependencies": { 18 | "@svgr/webpack": "^8.1.0", 19 | "@types/node": "^20", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "eslint": "^8", 23 | "eslint-config-next": "14.2.4", 24 | "postcss": "^8", 25 | "tailwind-merge": "^2.4.0", 26 | "tailwindcss": "^3.4.1", 27 | "typescript": "^5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/social-linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | webpack(config) { 4 | // Grab the existing rule that handles SVG imports 5 | const fileLoaderRule = config.module.rules.find((rule) => 6 | rule.test?.test?.(".svg") 7 | ); 8 | 9 | config.module.rules.push( 10 | // Reapply the existing rule, but only for svg imports ending in ?url 11 | { 12 | ...fileLoaderRule, 13 | test: /\.svg$/i, 14 | resourceQuery: /url/, // *.svg?url 15 | }, 16 | // Convert all other *.svg imports to React components 17 | { 18 | test: /\.svg$/i, 19 | issuer: fileLoaderRule.issuer, 20 | resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url 21 | use: ["@svgr/webpack"], 22 | } 23 | ); 24 | 25 | // Modify the file loader rule to ignore *.svg, since we have it handled now. 26 | fileLoaderRule.exclude = /\.svg$/i; 27 | 28 | return config; 29 | }, 30 | 31 | // ...other config 32 | }; 33 | 34 | export default nextConfig; 35 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .btn { 7 | @apply px-4 py-2 rounded-lg font-medium inline-flex items-center justify-center tracking-tight; 8 | } 9 | 10 | .btn-primary { 11 | @apply bg-black text-white; 12 | } 13 | 14 | .btn-text { 15 | @apply text-black bg-transparent; 16 | } 17 | 18 | .logo-ticker-image { 19 | @apply h-8 w-auto; 20 | } 21 | 22 | .tag { 23 | @apply text-sm inline-flex border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight; 24 | } 25 | 26 | .section-title { 27 | @apply text-center text-3xl md:text-[54px] md:leading-[60px] font-bold tracking-tighter bg-gradient-to-b from-black to-[#001E80] text-transparent bg-clip-text; 28 | } 29 | 30 | .section-des { 31 | @apply text-center text-[22px] leading-[30px] tracking-tight text-[#010D3E]; 32 | } 33 | 34 | .section-heading { 35 | @apply max-w-[540px] mx-auto; 36 | } 37 | 38 | .card { 39 | @apply p-10 rounded-3xl border border-[#F1F1F1] shadow-[0_7px_14px_#EAEAEA] max-w-xs w-full; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/social-pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/social-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/sections/Footer.tsx: -------------------------------------------------------------------------------- 1 | import logo from "@/assets/logosaas.png"; 2 | import SocialX from "@/assets/social-x.svg"; 3 | import SocialInsta from "@/assets/social-insta.svg"; 4 | import SocialLinkedin from "@/assets/social-linkedin.svg"; 5 | import SocialPin from "@/assets/social-pin.svg"; 6 | import SocialYoutube from "@/assets/social-youtube.svg"; 7 | import Image from "next/image"; 8 | 9 | export const Footer = () => { 10 | return ( 11 | 35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /src/sections/Header.tsx: -------------------------------------------------------------------------------- 1 | import ArrowRight from "@/assets/arrow-right.svg"; 2 | import Logo from "@/assets/logosaas.png"; 3 | import Image from "next/image"; 4 | import MenuIcon from "@/assets/menu.svg"; 5 | 6 | export const Header = () => { 7 | return ( 8 |
9 |
10 |

Streamline your workflow and boost your productvity

11 |
12 |

Get started for free

13 | 14 |
15 |
16 | 17 |
18 |
19 |
20 | Saas logo 21 | 22 | 32 |
33 |
34 |
35 |
36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SaaS Landing Page 2 | 3 | Welcome to the Stunning SaaS Landing Page project! This project is built with React, Next.js, TailwindCSS, and Framer Motion. It aims to provide a visually appealing and highly performant landing page for SaaS products. 4 | 5 | ## Table of Contents 6 | 7 | - [Demo](#demo) 8 | - [Features](#features) 9 | - [Technologies Used](#technologies-used) 10 | - [Installation](#installation) 11 | - [Usage](#usage) 12 | - [Preview](#preview) 13 | 14 | ## Demo 15 | Check out the live demo of the project [here](https://saas-landing-nextjs.vercel.app/). 16 | 17 | ## Features 18 | - Responsive design 19 | - Smooth animations with Framer Motion 20 | - Modern UI with TailwindCSS 21 | - Server-side rendering with Next.js 22 | - Easy to customize 23 | 24 | ## Technologies Used 25 | - **React**: A JavaScript library for building user interfaces 26 | - **Next.js**: A React framework with server-side rendering capabilities 27 | - **TailwindCSS**: A utility-first CSS framework for rapid UI development 28 | - **Framer Motion**: A library for creating animations in React 29 | 30 | ## Installation 31 | To get started with this project, clone the repository and install the dependencies: 32 | 33 | ```bash 34 | git clone https://github.com/harshxraj/saas-landing-nextjs.git 35 | cd saas-landing-nextjs 36 | npm install 37 | ``` 38 | 39 | ## Usage 40 | To start the development server, run: 41 | 42 | ```bash 43 | npm run dev 44 | ``` 45 | 46 | Open [http://localhost:3000](http://localhost:3000) in your browser to see the project. 47 | 48 | ## Preview 49 | ![image](https://github.com/user-attachments/assets/85e0357d-65a3-45a5-94fb-ead789a718e2) 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/assets/social-insta.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/sections/CallToAction.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import ArrowRight from "@/assets/arrow-right.svg"; 3 | import starImage from "@/assets/star.png"; 4 | import springImage from "@/assets/spring.png"; 5 | import { motion, useScroll, useTransform } from "framer-motion"; 6 | import { useRef } from "react"; 7 | 8 | export const CallToAction = () => { 9 | const sectionRef = useRef(null); 10 | const { scrollYProgress } = useScroll({ 11 | target: sectionRef, 12 | offset: ["start end", "end start"], 13 | }); 14 | 15 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 16 | 17 | return ( 18 |
19 |
20 |
21 |

Sign up for free today

22 |

23 | Celebrate the joy of accomplishment with an app designed to track your progress and motivate your 24 | efforts. 25 |

26 | 27 | 36 | 45 |
46 | 47 |
48 | 49 | 53 |
54 |
55 |
56 | ); 57 | }; 58 | -------------------------------------------------------------------------------- /src/sections/LogoTicker.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import acmeLogo from "@/assets/logo-acme.png"; 3 | import quantamLogo from "@/assets/logo-quantum.png"; 4 | import echoLogo from "@/assets/logo-echo.png"; 5 | import celestialLogo from "@/assets/logo-celestial.png"; 6 | import pulseLogo from "@/assets/logo-pulse.png"; 7 | import apexLogo from "@/assets/logo-apex.png"; 8 | import { motion } from "framer-motion"; 9 | import Image from "next/image"; 10 | 11 | export const LogoTicker = () => { 12 | return ( 13 |
14 |
15 |
19 | 31 | Acme logo 32 | quantam logo 33 | Echo logo 34 | celestial logo 35 | Pulse logo 36 | Apex logo 37 | 38 | Acme logo 39 | quantam logo 40 | Echo logo 41 | celestial logo 42 | Pulse logo 43 | Apex logo 44 | 45 |
46 |
47 |
48 | ); 49 | }; 50 | -------------------------------------------------------------------------------- /src/sections/ProductShowcase.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import productImage from "@/assets/product-image.png"; 3 | import pyramidImage from "@/assets/pyramid.png"; 4 | import tubeImage from "@/assets/tube.png"; 5 | import Image from "next/image"; 6 | import { motion, useScroll, useTransform } from "framer-motion"; 7 | import { useRef } from "react"; 8 | 9 | export const ProductShowcase = () => { 10 | const sectionRef = useRef(null); 11 | const { scrollYProgress } = useScroll({ 12 | target: sectionRef, 13 | offset: ["start end", "end start"], 14 | }); 15 | 16 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 17 | 18 | return ( 19 |
20 |
21 |
22 |
23 |
Boost your productivity
24 |
25 | 26 |

27 | A more effective way to track progress 28 |

29 |

30 | Effortlessly turn your ideas into a fully functional, responsive, SaaS website in just minutes 31 | with this template. 32 |

33 |
34 | 35 |
36 | Product image 37 | 47 | 57 |
58 |
59 |
60 | ); 61 | }; 62 | -------------------------------------------------------------------------------- /src/sections/Hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import ArrowIcon from "@/assets/arrow-right.svg"; 3 | import cogImage from "@/assets/cog.png"; 4 | import cylinderImage from "@/assets/cylinder.png"; 5 | import noodleImage from "@/assets/noodle.png"; 6 | import { motion, useScroll, useTransform, useMotionValueEvent } from "framer-motion"; 7 | import Image from "next/image"; 8 | import { useRef } from "react"; 9 | 10 | export const Hero = () => { 11 | const heroRef = useRef(null); 12 | const { scrollYProgress } = useScroll({ 13 | target: heroRef, 14 | offset: ["start end", "end start"], 15 | }); 16 | 17 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 18 | 19 | return ( 20 |
25 |
26 |
27 |
28 |
29 | Version 2.0 is here 30 |
31 |

32 | Pathway to productivity 33 |

34 |

35 | Celebrate the joy of accomplishment with an app designed to track your progress, motivate your 36 | efforts, and celebrate your success. 37 |

38 |
39 | 40 | 44 |
45 |
46 |
47 | 61 | 71 | 81 |
82 |
83 |
84 |
85 | ); 86 | }; 87 | -------------------------------------------------------------------------------- /src/sections/Pricing.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import CheckIcon from "@/assets/check.svg"; 3 | import { twMerge } from "tailwind-merge"; 4 | import { motion } from "framer-motion"; 5 | 6 | const pricingTiers = [ 7 | { 8 | title: "Free", 9 | monthlyPrice: 0, 10 | buttonText: "Get started for free", 11 | popular: false, 12 | inverse: false, 13 | features: [ 14 | "Up to 5 project members", 15 | "Unlimited tasks and projects", 16 | "2GB storage", 17 | "Integrations", 18 | "Basic support", 19 | ], 20 | }, 21 | { 22 | title: "Pro", 23 | monthlyPrice: 9, 24 | buttonText: "Sign up now", 25 | popular: true, 26 | inverse: true, 27 | features: [ 28 | "Up to 50 project members", 29 | "Unlimited tasks and projects", 30 | "50GB storage", 31 | "Integrations", 32 | "Priority support", 33 | "Advanced support", 34 | "Export support", 35 | ], 36 | }, 37 | { 38 | title: "Business", 39 | monthlyPrice: 19, 40 | buttonText: "Sign up now", 41 | popular: false, 42 | inverse: false, 43 | features: [ 44 | "Up to 5 project members", 45 | "Unlimited tasks and projects", 46 | "200GB storage", 47 | "Integrations", 48 | "Dedicated account manager", 49 | "Custom fields", 50 | "Advanced analytics", 51 | "Export capabilities", 52 | "API access", 53 | "Advanced security features", 54 | ], 55 | }, 56 | ]; 57 | 58 | export const Pricing = () => { 59 | return ( 60 |
61 |
62 |
63 |

Pricing

64 |

65 | Free forever. Upgrade for unlimited tasks, better security, and exclusive features. 66 |

67 |
68 | 69 |
70 | {pricingTiers.map(({ title, monthlyPrice, buttonText, popular, features, inverse }) => ( 71 |
78 |
79 |

80 | {title} 81 |

82 | {popular && ( 83 |
84 | 96 | Popular 97 | 98 |
99 | )} 100 |
101 |
102 | ${monthlyPrice} 103 | /month 104 |
105 | 110 |
    111 | {features.map((feature) => ( 112 |
  • 113 | 114 | {feature} 115 |
    • 116 | ))} 117 |
118 |
119 | ))} 120 |
121 |
122 |
123 | ); 124 | }; 125 | -------------------------------------------------------------------------------- /src/sections/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import avatar1 from "@/assets/avatar-1.png"; 3 | import avatar2 from "@/assets/avatar-2.png"; 4 | import avatar3 from "@/assets/avatar-3.png"; 5 | import avatar4 from "@/assets/avatar-4.png"; 6 | import avatar5 from "@/assets/avatar-5.png"; 7 | import avatar6 from "@/assets/avatar-6.png"; 8 | import avatar7 from "@/assets/avatar-7.png"; 9 | import avatar8 from "@/assets/avatar-8.png"; 10 | import avatar9 from "@/assets/avatar-9.png"; 11 | import Image from "next/image"; 12 | import React, { use } from "react"; 13 | import { twMerge } from "tailwind-merge"; 14 | import { motion } from "framer-motion"; 15 | 16 | const testimonials = [ 17 | { 18 | text: "As a seasoned designer always on the lookout for innovative tools, Framer.com instantly grabbed my attention.", 19 | imageSrc: avatar1.src, 20 | name: "Jamie Rivera", 21 | username: "@jamietechguru00", 22 | }, 23 | { 24 | text: "Our team's productivity has skyrocketed since we started using this tool. ", 25 | imageSrc: avatar2.src, 26 | name: "Josh Smith", 27 | username: "@jjsmith", 28 | }, 29 | { 30 | text: "This app has completely transformed how I manage my projects and deadlines.", 31 | imageSrc: avatar3.src, 32 | name: "Morgan Lee", 33 | username: "@morganleewhiz", 34 | }, 35 | { 36 | text: "I was amazed at how quickly we were able to integrate this app into our workflow.", 37 | imageSrc: avatar4.src, 38 | name: "Casey Jordan", 39 | username: "@caseyj", 40 | }, 41 | { 42 | text: "Planning and executing events has never been easier. This app helps me keep track of all the moving parts, ensuring nothing slips through the cracks.", 43 | imageSrc: avatar5.src, 44 | name: "Taylor Kim", 45 | username: "@taylorkimm", 46 | }, 47 | { 48 | text: "The customizability and integration capabilities of this app are top-notch.", 49 | imageSrc: avatar6.src, 50 | name: "Riley Smith", 51 | username: "@rileysmith1", 52 | }, 53 | { 54 | text: "Adopting this app for our team has streamlined our project management and improved communication across the board.", 55 | imageSrc: avatar7.src, 56 | name: "Jordan Patels", 57 | username: "@jpatelsdesign", 58 | }, 59 | { 60 | text: "With this app, we can easily assign tasks, track progress, and manage documents all in one place.", 61 | imageSrc: avatar8.src, 62 | name: "Sam Dawson", 63 | username: "@dawsontechtips", 64 | }, 65 | { 66 | text: "Its user-friendly interface and robust features support our diverse needs.", 67 | imageSrc: avatar9.src, 68 | name: "Casey Harper", 69 | username: "@casey09", 70 | }, 71 | ]; 72 | 73 | const firstColumn = testimonials.slice(0, 3); 74 | const secondColumn = testimonials.slice(3, 6); 75 | const thirdColumn = testimonials.slice(6, 9); 76 | 77 | const TestimonialsColumn = (props: { 78 | className?: string; 79 | testimonials: typeof testimonials; 80 | duration?: number; 81 | }) => { 82 | return ( 83 |
84 | 96 | {[ 97 | ...new Array(2).fill(0).map((_, index) => ( 98 | 99 | {props.testimonials.map(({ text, imageSrc, name, username }) => ( 100 |
101 |
{text}
102 |
103 | {name} 110 |
111 |
{name}
112 |
{username}
113 |
114 |
115 |
116 | ))} 117 | 118 | )), 119 | ]} 120 | 121 |
122 | ); 123 | }; 124 | 125 | export const Testimonials = () => { 126 | return ( 127 |
128 |
129 |
130 |
131 |
Testimonials
132 |
133 | 134 |

What our users say

135 |

136 | From intuitive design to powerful features, out app has become an essential tool for users around 137 | the world. 138 |

139 |
140 | 141 |
142 | 143 | 144 | 145 |
146 |
147 |
148 | ); 149 | }; 150 | --------------------------------------------------------------------------------