├── .eslintrc.json ├── app ├── favicon.ico ├── globals.css ├── page.tsx └── layout.tsx ├── public ├── assests │ ├── logo.png │ ├── tube.png │ ├── Visual.png │ ├── pyramid.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 │ ├── helix2 1.png │ ├── logo-acme.png │ ├── logo-apex.png │ ├── logo-echo.png │ ├── cube-helix 1.png │ ├── cube-helix.png │ ├── emojistar 1.png │ ├── half-torus.png │ ├── logo-pulse.png │ ├── logo-quantum.png │ ├── Product Image.png │ └── logo-celestial.png ├── vercel.svg └── next.svg ├── next.config.mjs ├── postcss.config.mjs ├── components ├── Button.tsx ├── Header.tsx ├── CTA.tsx ├── ProductCard.tsx ├── BrandSlide.tsx ├── Hero.tsx ├── Footer.tsx ├── ProductShowcase.tsx ├── Pricing.tsx └── Testimonials.tsx ├── .gitignore ├── tailwind.config.ts ├── tsconfig.json ├── package.json └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | -------------------------------------------------------------------------------- /public/assests/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo.png -------------------------------------------------------------------------------- /public/assests/tube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/tube.png -------------------------------------------------------------------------------- /public/assests/Visual.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/Visual.png -------------------------------------------------------------------------------- /public/assests/pyramid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/pyramid.png -------------------------------------------------------------------------------- /public/assests/avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-1.png -------------------------------------------------------------------------------- /public/assests/avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-2.png -------------------------------------------------------------------------------- /public/assests/avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-3.png -------------------------------------------------------------------------------- /public/assests/avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-4.png -------------------------------------------------------------------------------- /public/assests/avatar-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-5.png -------------------------------------------------------------------------------- /public/assests/avatar-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-6.png -------------------------------------------------------------------------------- /public/assests/avatar-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-7.png -------------------------------------------------------------------------------- /public/assests/avatar-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-8.png -------------------------------------------------------------------------------- /public/assests/avatar-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/avatar-9.png -------------------------------------------------------------------------------- /public/assests/cylinder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/cylinder.png -------------------------------------------------------------------------------- /public/assests/helix2 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/helix2 1.png -------------------------------------------------------------------------------- /public/assests/logo-acme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-acme.png -------------------------------------------------------------------------------- /public/assests/logo-apex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-apex.png -------------------------------------------------------------------------------- /public/assests/logo-echo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-echo.png -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /public/assests/cube-helix 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/cube-helix 1.png -------------------------------------------------------------------------------- /public/assests/cube-helix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/cube-helix.png -------------------------------------------------------------------------------- /public/assests/emojistar 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/emojistar 1.png -------------------------------------------------------------------------------- /public/assests/half-torus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/half-torus.png -------------------------------------------------------------------------------- /public/assests/logo-pulse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-pulse.png -------------------------------------------------------------------------------- /public/assests/logo-quantum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-quantum.png -------------------------------------------------------------------------------- /public/assests/Product Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/Product Image.png -------------------------------------------------------------------------------- /public/assests/logo-celestial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tanishkadeep/landing-page/HEAD/public/assests/logo-celestial.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 | -------------------------------------------------------------------------------- /components/Button.tsx: -------------------------------------------------------------------------------- 1 | const Button = ({ text }: { text: string }) => { 2 | return ; 3 | }; 4 | 5 | export default Button; 6 | -------------------------------------------------------------------------------- /.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 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "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.3.8", 13 | "next": "14.2.5", 14 | "react": "^18", 15 | "react-dom": "^18", 16 | "react-icons": "^5.2.1", 17 | "tailwind-merge": "^2.4.0" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^20", 21 | "@types/react": "^18", 22 | "@types/react-dom": "^18", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5", 25 | "postcss": "^8", 26 | "tailwindcss": "^3.4.6", 27 | "typescript": "^5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import BrandSlide from "@/components/BrandSlide"; 2 | import CTA from "@/components/CTA"; 3 | import Footer from "@/components/Footer"; 4 | import Header from "@/components/Header"; 5 | import Hero from "@/components/Hero"; 6 | import Pricing from "@/components/Pricing"; 7 | import ProductCard from "@/components/ProductCard"; 8 | import ProductShowcase from "@/components/ProductShowcase"; 9 | import Testimonials from "@/components/Testimonials"; 10 | 11 | export default function Home() { 12 | return ( 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { DM_Sans } from "next/font/google"; 3 | import "./globals.css"; 4 | import { FaArrowRight } from "react-icons/fa"; 5 | import { twMerge } from "tailwind-merge"; 6 | 7 | const dmSans = DM_Sans({ subsets: ["latin"] }); 8 | 9 | export const metadata: Metadata = { 10 | title: "Landing Page", 11 | description: "Landing Page", 12 | }; 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: Readonly<{ 17 | children: React.ReactNode; 18 | }>) { 19 | return ( 20 | 21 | 22 |
23 | 24 | Streamline your workflow and boost your productivity. 25 | 26 | 27 | Get started for free 28 | 29 |
30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /components/Header.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Logo from "@/public/assests/logo.png"; 3 | import { FaBars } from "react-icons/fa"; 4 | import Button from "./Button"; 5 | 6 | const Header = () => { 7 | return ( 8 |
9 | Logo 10 | 11 | 31 |
32 | ); 33 | }; 34 | 35 | export default Header; 36 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Modern SaaS Landing Page 2 | 3 | This is a modern SaaS landing page built using Tailwind CSS, TypeScript, Next.js, and Framer Motion. The project is designed to be highly responsive and interactive, providing a sleek and professional look for SaaS applications. 4 | 5 | ## 🌐 Demo 6 | 7 | Check out the live demo of the project [here](https://landing-page-rho-hazel.vercel.app/). 8 | 9 | ## ✨ Features 10 | 11 | - **Responsive Design**: Optimized for mobile, tablet, and desktop views. 12 | - **TypeScript**: Type-safe codebase for better development experience. 13 | - **Next.js**: Server-side rendering for fast performance and SEO benefits. 14 | - **Tailwind CSS**: Utility-first CSS framework for rapid UI development. 15 | - **Framer Motion**: Smooth and customizable animations and transitions. 16 | 17 | ## 📦 Installation 18 | 19 | To get started with the project, follow these steps: 20 | 21 | 1. **Clone the repository:** 22 | 23 | ```sh 24 | git clone https://github.com/tanishkadeep/landing-page.git 25 | cd modern-saas-landing-page 26 | ``` 27 | 28 | 2. **Install dependencies:** 29 | 30 | ```sh 31 | npm install 32 | ``` 33 | 34 | 3. **Run the development server:** 35 | 36 | ```sh 37 | npm run dev 38 | ``` 39 | 40 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 41 | 42 | 43 | 44 | --- 45 | 46 | 📬 If you have any questions or feedback, feel free to contact me at tanishkadeep09@gmail.com 47 | 48 | --- 49 | -------------------------------------------------------------------------------- /components/CTA.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { FaArrowRight } from "react-icons/fa"; 4 | import Button from "./Button"; 5 | import Star from "@/public/assests/emojistar 1.png"; 6 | import Helix from "@/public/assests/helix2 1.png"; 7 | import Image from "next/image"; 8 | import { useRef } from "react"; 9 | import { motion, useScroll, useTransform } from "framer-motion"; 10 | 11 | const CTA = () => { 12 | const sectionRef = useRef(null); 13 | 14 | const { scrollYProgress } = useScroll({ 15 | target: sectionRef, 16 | offset: ["start end", "end start"], 17 | }); 18 | 19 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 20 | 21 | return ( 22 |
26 |
27 | 35 | 43 |
44 | Sign up for free today 45 |
46 | 47 |
48 | Celebrate the joy of accomplishment with an app designed to track your 49 | progress and motivate your efforts. 50 |
51 | 52 |
53 |
59 |
60 |
61 | ); 62 | }; 63 | 64 | export default CTA; 65 | -------------------------------------------------------------------------------- /components/ProductCard.tsx: -------------------------------------------------------------------------------- 1 | import Helix from "@/public/assests/cube-helix 1.png"; 2 | import Cube from "@/public/assests/cube-helix.png"; 3 | import Image from "next/image"; 4 | 5 | const ProductCard = () => { 6 | return ( 7 |
8 |
9 |
10 | Everything you need 11 |
12 |
13 | Streamlined for easy management 14 |
15 | 16 |
17 | Enjoy customizable lists, team work tools, and smart tracking all in 18 | one place. Set tasks, get reminders, and see your progress simply and 19 | quickly. 20 |
21 |
22 | 23 |
24 |
25 | Helix 26 |
27 | Integration ecosystem 28 |
29 |
30 | Enhance your productivity by connecting with your favorite tools, 31 | keeping all your essentials in one place. 32 |
33 |
34 | 35 |
36 | Cube 37 |
38 | Goal setting and tracking 39 |
40 |
41 | Define and track your goals, breaking down objectives into 42 | achievable tasks to keep your targets in sight. 43 |
44 |
45 |
46 |
47 | ); 48 | }; 49 | 50 | export default ProductCard; 51 | -------------------------------------------------------------------------------- /components/BrandSlide.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import logo_acme from "@/public/assests/logo-acme.png"; 4 | import logo_apex from "@/public/assests/logo-apex.png"; 5 | import logo_celestial from "@/public/assests/logo-celestial.png"; 6 | import logo_echo from "@/public/assests/logo-echo.png"; 7 | import logo_pulse from "@/public/assests/logo-pulse.png"; 8 | import logo_quantum from "@/public/assests/logo-quantum.png"; 9 | import Image from "next/image"; 10 | import { motion } from "framer-motion"; 11 | 12 | const BrandSlide = () => { 13 | return ( 14 |
15 |
16 | 28 | logo_acme 29 | logo_apex 30 | logo_celestial 35 | logo_echo 36 | logo_pulse 37 | logo_quantum 38 | 39 | logo_acme 40 | logo_apex 41 | logo_celestial 46 | logo_echo 47 | logo_pulse 48 | logo_quantum 49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default BrandSlide; 56 | -------------------------------------------------------------------------------- /components/Hero.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { FaArrowRight } from "react-icons/fa"; 4 | import Button from "./Button"; 5 | import HeroImage from "@/public/assests/Visual.png"; 6 | import Cylinder from "@/public/assests/cylinder.png"; 7 | import HalfTorus from "@/public/assests/half-torus.png"; 8 | import { motion, useScroll, useTransform } from "framer-motion"; 9 | import { useRef } from "react"; 10 | 11 | const Hero = () => { 12 | const heroRef = useRef(null); 13 | 14 | const { scrollYProgress } = useScroll({ 15 | target: heroRef, 16 | offset: ["start end", "end start"], 17 | }); 18 | 19 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 20 | 21 | return ( 22 |
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 36 | your progress, motivate your efforts, and celebrate your successes. 37 |
38 | 39 |
40 |
46 |
47 | 48 |
49 | 57 | 71 | 79 |
80 |
81 |
82 | ); 83 | }; 84 | 85 | export default Hero; 86 | -------------------------------------------------------------------------------- /components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Logo from "@/public/assests/logo.png"; 3 | import { 4 | FaLinkedin, 5 | FaPinterest, 6 | FaTiktok, 7 | FaXTwitter, 8 | FaYoutube, 9 | } from "react-icons/fa6"; 10 | import { AiFillInstagram } from "react-icons/ai"; 11 | import { MdOutlineArrowOutward } from "react-icons/md"; 12 | 13 | const Footer = () => { 14 | return ( 15 |
16 |
17 | Logo 18 |
19 | This website is developed by{" "} 20 |
21 | 22 | Tanishka Deep 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 |
Product
37 |
Features
38 |
Integrations
39 |
Updates
40 |
FAQ
41 |
Pricing
42 |
43 |
44 |
Company
45 |
About
46 |
Blog
47 |
Careers
48 |
Manifesto
49 |
Press
50 |
Contact
51 |
52 |
53 |
Resources
54 |
Examples
55 |
Community
56 |
Guides
57 |
Docs
58 |
59 |
60 |
Legal
61 |
Privacy
62 |
Terms
63 |
Security
64 |
65 |
66 | ); 67 | }; 68 | 69 | export default Footer; 70 | -------------------------------------------------------------------------------- /components/ProductShowcase.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import ProductImage from "@/public/assests/Product Image.png"; 4 | import Pyramid from "@/public/assests/pyramid.png"; 5 | import Tube from "@/public/assests/tube.png"; 6 | import { motion, useScroll, useTransform } from "framer-motion"; 7 | import Image from "next/image"; 8 | import { useRef } from "react"; 9 | import { FaArrowRight } from "react-icons/fa"; 10 | import { GoBell, GoGoal } from "react-icons/go"; 11 | import { LuLeaf } from "react-icons/lu"; 12 | import { MdLockOutline } from "react-icons/md"; 13 | 14 | const ProductShowcase = () => { 15 | const sectionRef = useRef(null); 16 | 17 | const { scrollYProgress } = useScroll({ 18 | target: sectionRef, 19 | offset: ["start end", "end start"], 20 | }); 21 | 22 | const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]); 23 | 24 | return ( 25 |
29 |
30 |
31 | Boost your productivity 32 |
33 |
34 | A more effective way to track progress 35 |
36 | 37 |
38 | Effortlessly turn your ideas into a fully functional, responsive, 39 | no-code SaaS website in just minutes with the set of free components 40 | for Framer. 41 |
42 |
43 |
44 | 52 | Product Image 53 | 61 |
62 | 63 |
64 |
65 | 66 |
Integration ecosystem
67 |
68 | Track your progress and motivate your efforts everyday. 69 |
70 |
71 | Learn more 72 |
73 |
74 | 75 |
76 | 77 |
Goal setting and tracking
78 |
79 | Set and track goals with manageable task breakdowns. 80 |
81 |
82 | Learn more 83 |
84 |
85 | 86 |
87 | 88 |
Secure data encryption
89 |
90 | Ensure data safety with top-tier encryption. 91 |
92 |
93 | Learn more 94 |
95 |
96 | 97 |
98 | 99 |
Customizable notifications
100 |
101 | Get alerts on tasks and deadlines that matter most. 102 |
103 |
104 | Learn more 105 |
106 |
107 |
108 |
109 | ); 110 | }; 111 | 112 | export default ProductShowcase; 113 | -------------------------------------------------------------------------------- /components/Pricing.tsx: -------------------------------------------------------------------------------- 1 | import { FaCheck } from "react-icons/fa"; 2 | import Button from "./Button"; 3 | import { IoMdCheckmark } from "react-icons/io"; 4 | 5 | const Pricing = () => { 6 | return ( 7 |
8 |
9 |
10 | Boost your productivity 11 |
12 |
13 | A more effective way to track progress 14 |
15 | 16 |
17 | Effortlessly turn your ideas into a fully functional, responsive, 18 | no-code SaaS website in just minutes with the set of free components 19 | for Framer. 20 |
21 |
22 | 23 |
24 |
25 |
Free
26 |
27 | $0 28 | /month 29 |
30 | 33 |
34 |
35 | Up to 5 project members 36 |
37 |
38 | Unlimited tasks and 39 | projects 40 |
41 |
42 | 2GB storage 43 |
44 |
45 | Integrations 46 |
47 |
48 | Basic support 49 |
50 |
51 |
52 | 53 |
54 |
55 |
Pro
56 |
57 | Most Popular 58 |
59 |
60 |
61 | $9 62 | /month 63 |
64 | 67 |
68 |
69 | Up to 50 project members 70 |
71 |
72 | Unlimited tasks and 73 | projects 74 |
75 |
76 | 50GB storage 77 |
78 |
79 | Integrations 80 |
81 |
82 | Priority support 83 |
84 |
85 | Advanced support 86 |
87 |
88 | Expert support 89 |
90 |
91 |
92 |
93 |
Business
94 |
95 | $19 96 | /month 97 |
98 | 101 |
102 |
103 | Up to 50 project members 104 |
105 |
106 | Unlimited tasks and 107 | projects 108 |
109 |
110 | 200GB storage 111 |
112 |
113 | Integrations 114 |
115 |
116 | Dedicated account 117 | manager 118 |
119 |
120 | Custom fields 121 |
122 |
123 | 124 | Advanced analytics 125 |
126 |
127 | 128 | Export capabilities 129 |
130 |
131 | API access 132 |
133 |
134 | Advanced security 135 | features 136 |
137 |
138 |
139 |
140 |
141 | ); 142 | }; 143 | 144 | export default Pricing; 145 | -------------------------------------------------------------------------------- /components/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Image from "next/image"; 4 | import Avatar1 from "@/public/assests/avatar-1.png"; 5 | import Avatar2 from "@/public/assests/avatar-2.png"; 6 | import Avatar3 from "@/public/assests/avatar-3.png"; 7 | import Avatar4 from "@/public/assests/avatar-4.png"; 8 | import Avatar5 from "@/public/assests/avatar-5.png"; 9 | import Avatar6 from "@/public/assests/avatar-6.png"; 10 | import Avatar7 from "@/public/assests/avatar-7.png"; 11 | import Avatar8 from "@/public/assests/avatar-8.png"; 12 | import Avatar9 from "@/public/assests/avatar-9.png"; 13 | import { motion } from "framer-motion"; 14 | 15 | const Testimonials = () => { 16 | return ( 17 |
18 |
19 |
20 | Testimonials 21 |
22 |
23 | What our users say 24 |
25 |
26 |
27 | 38 |
39 |
40 |
41 |
42 | As a seasoned designer always on the lookout for innovative 43 | tools, Framer.com instantly grabbed my attention. 44 |
45 |
46 | Avatar 47 |
48 |
Alex Rivera
49 |
@jamietechguru00
50 |
51 |
52 |
53 | 54 |
55 |
56 | Our productivity has skyrocketed since we started using this 57 | tool. 58 |
59 |
60 | Avatar 61 |
62 |
Josh Smith
63 |
@jjsmith
64 |
65 |
66 |
67 | 68 |
69 |
70 | This app has completely transformed how I manage my projects 71 | and deadlines. 72 |
73 |
74 | Avatar 75 |
76 |
Morgan Lee
77 |
@morganleewhiz
78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 | I was amazed at how quickly we were able to integrate this app 87 | into our workflow. 88 |
89 |
90 | Avatar 91 |
92 |
Casey Jordan
93 |
@caseyj
94 |
95 |
96 |
97 | 98 |
99 |
100 | Planning and executing events has never been easier. This app 101 | helps me keep track of all the moving parts, ensuring nothing 102 | slips through the cracks. 103 |
104 |
105 | Avatar 106 |
107 |
Taylor Kim
108 |
@taylorkimm
109 |
110 |
111 |
112 | 113 |
114 |
115 | The customizability and integration capabilities of this app 116 | are top-notch. 117 |
118 |
119 | Avatar 120 |
121 |
Riley Smith
122 |
@rileysmith1
123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 |
131 | Adopting this app for our team has streamlined our project 132 | management and improved communication across the board. 133 |
134 |
135 | Avatar 136 |
137 |
Jordan Patels
138 |
@jpatelsdesign
139 |
140 |
141 |
142 | 143 |
144 |
145 | With this app, we can easily assign tasks, track progress, and 146 | manage documents all in one place. 147 |
148 |
149 | Avatar 150 |
151 |
Sam Dawson
152 |
@dawsontechtips
153 |
154 |
155 |
156 | 157 |
158 |
159 | Its user-friendly interface and robust features support our 160 | diverse needs. 161 |
162 |
163 | Avatar 164 |
165 |
Casey Harper
166 |
@casey09
167 |
168 |
169 |
170 |
171 |
172 | 173 |
174 |
175 |
176 |
177 | As a seasoned designer always on the lookout for innovative 178 | tools, Framer.com instantly grabbed my attention. 179 |
180 |
181 | Avatar 182 |
183 |
Alex Rivera
184 |
@jamietechguru00
185 |
186 |
187 |
188 | 189 |
190 |
191 | Our productivity has skyrocketed since we started using this 192 | tool. 193 |
194 |
195 | Avatar 196 |
197 |
Josh Smith
198 |
@jjsmith
199 |
200 |
201 |
202 | 203 |
204 |
205 | This app has completely transformed how I manage my projects 206 | and deadlines. 207 |
208 |
209 | Avatar 210 |
211 |
Morgan Lee
212 |
@morganleewhiz
213 |
214 |
215 |
216 |
217 | 218 |
219 |
220 |
221 | I was amazed at how quickly we were able to integrate this app 222 | into our workflow. 223 |
224 |
225 | Avatar 226 |
227 |
Casey Jordan
228 |
@caseyj
229 |
230 |
231 |
232 | 233 |
234 |
235 | Planning and executing events has never been easier. This app 236 | helps me keep track of all the moving parts, ensuring nothing 237 | slips through the cracks. 238 |
239 |
240 | Avatar 241 |
242 |
Taylor Kim
243 |
@taylorkimm
244 |
245 |
246 |
247 | 248 |
249 |
250 | The customizability and integration capabilities of this app 251 | are top-notch. 252 |
253 |
254 | Avatar 255 |
256 |
Riley Smith
257 |
@rileysmith1
258 |
259 |
260 |
261 |
262 | 263 |
264 |
265 |
266 | Adopting this app for our team has streamlined our project 267 | management and improved communication across the board. 268 |
269 |
270 | Avatar 271 |
272 |
Jordan Patels
273 |
@jpatelsdesign
274 |
275 |
276 |
277 | 278 |
279 |
280 | With this app, we can easily assign tasks, track progress, and 281 | manage documents all in one place. 282 |
283 |
284 | Avatar 285 |
286 |
Sam Dawson
287 |
@dawsontechtips
288 |
289 |
290 |
291 | 292 |
293 |
294 | Its user-friendly interface and robust features support our 295 | diverse needs. 296 |
297 |
298 | Avatar 299 |
300 |
Casey Harper
301 |
@casey09
302 |
303 |
304 |
305 |
306 |
307 | 308 |
309 |
310 | ); 311 | }; 312 | 313 | export default Testimonials; 314 | --------------------------------------------------------------------------------