19 |
33 | {children}
34 |
35 |
36 | );
37 | };
--------------------------------------------------------------------------------
/src/pages/Error404/ErrorActionButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 |
4 | interface ErrorActionButtonProps {
5 | icon: React.ReactNode;
6 | label: string;
7 | onClick: () => void;
8 | primary?: boolean;
9 | }
10 |
11 | export const ErrorActionButton = ({ icon, label, onClick, primary }: ErrorActionButtonProps) => {
12 | return (
13 |
14 | {socialLinks.map(({ icon: Icon, href, label }) => (
15 |
24 |
26 | ))}
27 |
28 | );
29 | };
--------------------------------------------------------------------------------
/src/components/MarqueeSlider2.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 |
4 | interface MarqueeSlider2Props {
5 | items: React.ReactNode[];
6 | direction?: 'left' | 'right';
7 | speed?: number;
8 | }
9 |
10 | export const MarqueeSlider2: React.FC
31 |
36 | {[...items, ...items].map((item, index) => (
37 |
42 |
43 | );
44 | };
--------------------------------------------------------------------------------
/src/components/ScrollToTop.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { ArrowUp } from "lucide-react";
3 |
4 | export const ScrollToTop = () => {
5 | const [isVisible, setIsVisible] = useState(false);
6 |
7 | useEffect(() => {
8 | const toggleVisibility = () => {
9 | if (window.pageYOffset > 300) {
10 | setIsVisible(true);
11 | } else {
12 | setIsVisible(false);
13 | }
14 | };
15 |
16 | window.addEventListener("scroll", toggleVisibility);
17 | return () => window.removeEventListener("scroll", toggleVisibility);
18 | }, []);
19 |
20 | const scrollToTop = () => {
21 | window.scrollTo({
22 | top: 0,
23 | behavior: "smooth",
24 | });
25 | };
26 |
27 | return (
28 | <>
29 | {isVisible && (
30 |
37 | )}
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/Footer/SocialLinks.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Github, Twitter, Linkedin } from 'lucide-react';
3 | import { SocialLink } from '../../types';
4 |
5 | const socialLinks: SocialLink[] = [
6 | {
7 | platform: 'GitHub',
8 | href: 'https://github.com/buildeasy/components',
9 | icon: Github,
10 | },
11 | {
12 | platform: 'Twitter',
13 | href: 'https://twitter.com/buildeasy',
14 | icon: Twitter,
15 | },
16 | {
17 | platform: 'LinkedIn',
18 | href: 'https://linkedin.com/company/buildeasy',
19 | icon: Linkedin,
20 | },
21 | ];
22 |
23 | export const SocialLinks = () => {
24 | return (
25 |
38 | {item}
39 |
40 | ))}
41 |
26 |
27 | {socialLinks.map(({ platform, href, icon: Icon }) => ( 28 | 36 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/pages/Error404/ErrorAnimation.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'framer-motion';
2 | import Lottie from 'lottie-react';
3 | // Import Lottie JSON
4 | import lottieAnimation from '../../assets/lwlERW6itQ.json';
5 | export const ErrorAnimation = () => {
6 | return (
7 | 27 | {socialLinks.map(({ platform, href, icon: Icon }) => ( 28 | 36 |
14 |
15 |
30 |
16 |
29 |
10 |
38 | 11 | Marquee Examples ✨ 12 |
13 | 14 | {/* Text Marquee */} 15 |
16 |
21 |
22 | {/* Logo Marquee */}
23 | 17 | Text Marquee 📝 18 |
19 |
24 |
29 |
30 | {/* Image Marquee */}
31 | 25 | Logo Marquee 🎯 26 |
27 |
32 |
37 | 33 | Image Marquee 🖼️ 34 |
35 |
18 |
44 | );
45 | }
--------------------------------------------------------------------------------
/src/context/ThemeContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useEffect, useState } from 'react';
2 |
3 | interface ThemeContextType {
4 | theme: 'light' | 'dark';
5 | toggleTheme: () => void;
6 | }
7 |
8 | const ThemeContext = createContext
19 |
33 | {[...texts, ...texts].map((text, index) => (
34 |
42 |
43 |
38 | {text}
39 |
40 | ))}
41 |
29 |
44 | );
45 | }
46 |
47 | return this.props.children;
48 | }
49 | }
--------------------------------------------------------------------------------
/src/components/ComponentSections.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Code2 } from "lucide-react";
3 | import { motion, AnimatePresence } from "framer-motion";
4 | import { CodeBlock } from "./CodeBlock";
5 |
6 | interface ComponentSectionProps {
7 | title: string;
8 | children: React.ReactNode;
9 | code: string;
10 | }
11 |
12 | export const ComponentSection = ({
13 | title,
14 | children,
15 | code,
16 | }: ComponentSectionProps) => {
17 | const [showCode, setShowCode] = useState(false);
18 |
19 | return (
20 |
30 |
43 | 31 | Oops! Something went wrong 32 |
33 |34 | {this.state.error?.message || 'An unexpected error occurred'} 35 |
36 | 42 |
21 |
35 | {showCode ? (
36 |
42 |
44 | ) : null}
45 |
46 |
47 | {children}
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/styles/darkMode.css:
--------------------------------------------------------------------------------
1 | @layer utilities {
2 | .dark {
3 | color-scheme: dark;
4 | }
5 |
6 | .dark .dark-card {
7 | @apply bg-gray-800 text-white border-gray-700;
8 | }
9 |
10 | .dark .text-gray-900 {
11 | @apply text-white;
12 | }
13 |
14 | .dark .text-gray-800 {
15 | @apply text-gray-100;
16 | }
17 |
18 | .dark .text-gray-700 {
19 | @apply text-gray-200;
20 | }
21 |
22 | .dark .text-gray-600 {
23 | @apply text-gray-300;
24 | }
25 |
26 | .dark .bg-white {
27 | @apply bg-gray-900;
28 | }
29 |
30 | .dark .border-gray-200 {
31 | @apply border-gray-700;
32 | }
33 | }
34 |
35 | /* Mouse gradient effect */
36 | :root {
37 | --mouse-x: 50vw;
38 | --mouse-y: 50vh;
39 | }
40 |
41 | .mouse-gradient {
42 | background: radial-gradient(
43 | 800px circle at var(--mouse-x) var(--mouse-y),
44 | rgba(129, 140, 248, 0.15),
45 | transparent 40%
46 | );
47 | }
48 |
49 | .dark .mouse-gradient {
50 | background: radial-gradient(
51 | 800px circle at var(--mouse-x) var(--mouse-y),
52 | rgba(129, 140, 248, 0.1),
53 | transparent 40%
54 | );
55 | }
56 |
57 | /* Gradient text effect */
58 | .gradient-text {
59 | @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500;
60 | }
61 |
62 | /* Button effects */
63 | .fancy-button {
64 | @apply relative overflow-hidden transition-all duration-300
65 | bg-gradient-to-r from-primary-500 to-secondary-500
66 | hover:from-primary-600 hover:to-secondary-600
67 | text-white font-semibold rounded-lg
68 | transform hover:scale-105 hover:shadow-lg
69 | active:scale-95;
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/Header/MobileMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Menu, X } from 'lucide-react';
3 | import { NavLink } from 'react-router-dom';
4 | import { NavItem } from '../../types';
5 |
6 | const navItems: NavItem[] = [
7 | { title: 'Home', href: '/' },
8 | { title: 'Components', href: '/components' },
9 | { title: 'Documentation', href: '/docs' },
10 | { title: 'GitHub', href: 'https://github.com/buildeasy/components' },
11 | ];
12 |
13 | export const MobileMenu = () => {
14 | const [isOpen, setIsOpen] = useState(false);
15 |
16 | return (
17 |
22 |
33 |
34 | 23 | {title} 24 |
25 | 32 |
18 |
25 |
26 | {isOpen && (
27 |
46 | );
47 | };
--------------------------------------------------------------------------------
/src/components/Footer/FooterLinks.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { FooterLink } from '../../types';
4 |
5 | const footerLinks: FooterLink[] = [
6 | {
7 | title: 'Product',
8 | items: [
9 | { title: 'Components', href: '/components' },
10 | { title: 'Documentation', href: '/docs' },
11 | { title: 'Changelog', href: '/changelog' },
12 | ],
13 | },
14 | {
15 | title: 'Resources',
16 | items: [
17 | { title: 'GitHub', href: 'https://github.com/buildeasy/components' },
18 | { title: 'Examples', href: '/examples' },
19 | { title: 'Templates', href: '/templates' },
20 | ],
21 | },
22 | {
23 | title: 'Company',
24 | items: [
25 | { title: 'About', href: '/about' },
26 | { title: 'Blog', href: '/blog' },
27 | { title: 'Contact', href: '/contact' },
28 | ],
29 | },
30 | ];
31 |
32 | export const FooterLinks = () => {
33 | return (
34 |
28 |
43 |
44 | )}
45 |
35 | {footerLinks.map((section) => (
36 |
55 | );
56 | };
--------------------------------------------------------------------------------
/src/components/ui/button-variants.ts:
--------------------------------------------------------------------------------
1 | import { cva } from "class-variance-authority";
2 |
3 | export const buttonVariants = cva(
4 | "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
5 | {
6 | variants: {
7 | variant: {
8 | default:
9 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
10 | destructive:
11 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
12 | outline:
13 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
14 | secondary:
15 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
16 | ghost: "hover:bg-accent hover:text-accent-foreground",
17 | link: "text-primary underline-offset-4 hover:underline",
18 | success: "bg-green-500 text-white shadow-sm hover:bg-green-600",
19 | warning: "bg-yellow-500 text-black shadow-sm hover:bg-yellow-600",
20 | info: "bg-blue-500 text-white shadow-sm hover:bg-blue-600",
21 | subtle: "bg-muted text-muted-foreground hover:bg-muted/80",
22 | transparent: "bg-transparent text-primary hover:bg-primary/10",
23 | whiteOutline:
24 | "bg-transparent border border-white text-white hover:bg-white/10", // New variant
25 | },
26 | size: {
27 | default: "h-9 px-4 py-2",
28 | sm: "h-8 rounded-md px-3 text-xs",
29 | lg: "h-10 rounded-md px-8",
30 | xl: "h-12 rounded-lg px-10 text-lg",
31 | xs: "h-7 rounded px-2 text-xs",
32 | icon: "h-9 w-9",
33 | wide: "h-9 px-6 py-2",
34 | },
35 | },
36 | defaultVariants: {
37 | variant: "default",
38 | size: "default",
39 | },
40 | }
41 | );
42 |
--------------------------------------------------------------------------------
/src/components/sections/SparklesText.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { motion } from "framer-motion";
3 |
4 | const Sparkles = ({ children }: { children: React.ReactNode }) => {
5 | const [sparkles, setSparkles] = useState<
6 | Array<{ id: number; x: number; y: number }>
7 | >([]);
8 |
9 | useEffect(() => {
10 | const interval = setInterval(() => {
11 | const sparkle = {
12 | id: Date.now(),
13 | x: Math.random() * 100,
14 | y: Math.random() * 100,
15 | };
16 | setSparkles((prev) => [...prev, sparkle]);
17 | }, 500);
18 |
19 | return () => clearInterval(interval);
20 | }, []);
21 |
22 | useEffect(() => {
23 | const timeout = setTimeout(() => {
24 | setSparkles((prev) => prev.slice(1));
25 | }, 1000);
26 |
27 | return () => clearTimeout(timeout);
28 | }, [sparkles]);
29 |
30 | return (
31 |
32 | {sparkles.map((sparkle) => (
33 |
37 |
53 | ))}
54 | 38 | {section.title} 39 |
40 |-
41 | {section.items.map((item) => (
42 |
- 43 | 47 | {item.title} 48 | 49 | 50 | ))} 51 |
54 |
55 |
61 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "buildeasy",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@headlessui/react": "^2.2.0",
14 | "@heroicons/react": "^2.2.0",
15 | "@lottiefiles/react-lottie-player": "^3.5.3",
16 | "@radix-ui/react-slot": "^1.1.1",
17 | "@react-three/drei": "^9.99.5",
18 | "@react-three/fiber": "^8.15.16",
19 | "@react-three/postprocessing": "^2.15.1",
20 | "@vercel/analytics": "^1.4.1",
21 | "class-variance-authority": "^0.7.1",
22 | "framer-motion": "^11.18.1",
23 | "lottie-react": "^2.4.0",
24 | "lottie-web": "^5.12.2",
25 | "lucide-react": "^0.473.0",
26 | "ogl": "^1.0.11",
27 | "react": "^18.3.1",
28 | "react-dom": "^18.3.1",
29 | "react-router-dom": "^6.22.3",
30 | "react-scroll": "^1.9.0",
31 | "react-syntax-highlighter": "^15.6.1",
32 | "shadcn-ui": "^0.9.4",
33 | "three": "^0.161.0"
34 | },
35 | "optionalDependencies": {
36 | "@rollup/rollup-darwin-arm64": "^4.28.1"
37 | },
38 | "devDependencies": {
39 | "@eslint/js": "^9.9.1",
40 | "@shadcn/ui": "^0.0.4",
41 | "@types/node": "^22.10.7",
42 | "@types/react": "^18.3.5",
43 | "@types/react-dom": "^18.3.0",
44 | "@types/react-scroll": "^1.8.10",
45 | "@types/react-syntax-highlighter": "^15.5.13",
46 | "@vitejs/plugin-react": "^4.3.1",
47 | "autoprefixer": "^10.4.20",
48 | "clsx": "^2.1.1",
49 | "eslint": "^9.9.1",
50 | "eslint-plugin-react-hooks": "^5.1.0-rc.0",
51 | "eslint-plugin-react-refresh": "^0.4.11",
52 | "globals": "^15.9.0",
53 | "postcss": "^8.5.1",
54 | "postcss-import": "^16.1.0",
55 | "tailwind-merge": "^2.6.0",
56 | "tailwindcss": "^3.4.1",
57 | "tailwindcss-animate": "^1.0.7",
58 | "typescript": "^5.5.3",
59 | "typescript-eslint": "^8.3.0",
60 | "vite": "^5.4.2"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/Footer/FooterSimple.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { Heart, Github, Twitter, Linkedin } from 'lucide-react';
4 | import { Logo } from '../Header/Logo';
5 |
6 | export const FooterSimple = () => {
7 | return (
8 |
46 | );
47 | };
--------------------------------------------------------------------------------
/src/components/sections/DemoSection.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 |
3 | export const DemoSection = () => {
4 | return (
5 |
55 |
56 |
57 | Magical Text ✨
58 |
59 |
60 |
61 |
7 |
14 |
21 |
22 |
29 |
56 |
57 | 15 | See ReactWind in Action 16 |
17 |18 | Watch how easy it is to build beautiful interfaces with our components 19 |
20 |
39 |
54 |
55 |
73 |
74 |
84 | );
85 | };
--------------------------------------------------------------------------------
/src/components/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Check, Copy } from "lucide-react";
3 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
4 | import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
5 |
6 | interface CodeBlockProps {
7 | code: string;
8 | }
9 |
10 | export const CodeBlock = ({ code }: CodeBlockProps) => {
11 | const [copied, setCopied] = useState(false);
12 | const files = code.split(/\/\/ [a-zA-Z-]+\.tsx/).filter(Boolean);
13 | const fileNames = code.match(/\/\/ [a-zA-Z-]+\.tsx/g) || [];
14 | const [activeTab, setActiveTab] = useState(0);
15 |
16 | const copyToClipboard = () => {
17 | navigator.clipboard.writeText(files[activeTab]);
18 | setCopied(true);
19 | setTimeout(() => setCopied(false), 2000);
20 | };
21 |
22 | return (
23 |
75 |
83 |
76 |
82 |
24 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/src/components/sections/FooterMinimal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { Github, Instagram, Linkedin, Heart } from 'lucide-react';
4 | import { Logo } from '../Header/Logo';
5 |
6 | export const FooterMinimal = () => {
7 | return (
8 |
49 | );
50 | };
--------------------------------------------------------------------------------
/src/components/Footer/FooterMinimal.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'framer-motion';
2 | import { Github, Instagram, Linkedin, Heart } from 'lucide-react';
3 | import { Logo } from '../Header/Logo';
4 |
5 | export const FooterMinimal = () => {
6 | return (
7 |
56 | );
57 | };
--------------------------------------------------------------------------------
/src/components/Header/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import { NavLink, useNavigate } from "react-router-dom";
2 | import { NavItem } from "../../types";
3 |
4 | const navItems: NavItem[] = [
5 | { title: "Components", href: "/components" },
6 | { title: "Templates", href: "/templates" },
7 | { title: "Documentation", href: "/docs" },
8 | { title: "GitHub", href: "https://github.com/GaneshVarma1" },
9 | ];
10 |
11 | export const Navigation = () => {
12 | const navigate = useNavigate();
13 |
14 | const handleClick = (e: React.MouseEvent
25 | {fileNames.map((fileName, index) => (
26 |
37 | ))}
38 |
39 |
40 |
50 |
58 | {files[activeTab].trim()}
59 |
60 |
61 |
7 | {/* Content */}
8 |
55 | );
56 | }
57 |
58 | export { HeroImages };
59 |
--------------------------------------------------------------------------------
/src/components/ui/background-gradient.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "../../lib/utils";
2 | import React from "react";
3 | import { motion } from "framer-motion";
4 |
5 | export const BackgroundGradient = ({
6 | children,
7 | className,
8 | containerClassName,
9 | animate = true,
10 | }: {
11 | children?: React.ReactNode;
12 | className?: string;
13 | containerClassName?: string;
14 | animate?: boolean;
15 | }) => {
16 | const variants = {
17 | initial: {
18 | backgroundPosition: "0 50%",
19 | },
20 | animate: {
21 | backgroundPosition: ["0, 50%", "100% 50%", "0 50%"],
22 | },
23 | };
24 | return (
25 |
9 |
54 |
10 |
53 |
11 |
29 | 12 | Start your celebration with us! 13 |
14 |15 | Running a chocolate business is a labor of love. Skip the hassle 16 | of traditional wholesale methods and focus on what matters - 17 | creating delicious confections. We make it easier for artisan 18 | chocolatiers to connect, sell, and grow their sweet business. 19 |
20 |
21 |
24 |
27 |
28 |
30 |
52 |
31 | 
36 |
37 |
36 |
38 | 
43 |
44 |
43 |
45 | 
50 |
51 |
50 |
26 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/src/components/Hero/index.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from "react-router-dom";
2 | import { motion } from "framer-motion";
3 | import { Player } from "@lottiefiles/react-lottie-player";
4 |
5 | export const Hero = () => {
6 | const navigate = useNavigate();
7 |
8 | return (
9 | {children}
70 |
13 |
14 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/src/components/sections/Ecommerce1.tsx:
--------------------------------------------------------------------------------
1 | const products = [
2 | {
3 | id: 1,
4 | name: "Milk Chocolate Bar",
5 | href: "",
6 | imageSrc:
7 | "https://plus.unsplash.com/premium_photo-1675283825474-390ea83c0703?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
8 | imageAlt: "Delicious milk chocolate bar.",
9 | price: "$5",
10 | color: "Milk Chocolate",
11 | },
12 | {
13 | id: 2,
14 | name: "Dark Chocolate Truffles",
15 | href: "",
16 | imageSrc:
17 | "https://www.happyfoodstube.com/wp-content/uploads/2016/12/dark-chocolate-truffles-6.jpg",
18 | imageAlt: "Gourmet dark chocolate truffles.",
19 | price: "$12",
20 | color: "Dark Chocolate",
21 | },
22 | {
23 | id: 3,
24 | name: "White Chocolate Bark",
25 | href: "",
26 | imageSrc:
27 | "https://milkhousechocolates.net/cdn/shop/files/WhiteChocolatePeppermintBarkforweb4_1200x1200.jpg?v=1695243013",
28 | imageAlt: "White chocolate bark with nuts and fruits.",
29 | price: "$8",
30 | color: "White Chocolate",
31 | },
32 | {
33 | id: 4,
34 | name: "Assorted Chocolate Box",
35 | href: "",
36 | imageSrc:
37 | "https://www.li-lacchocolates.com/cdn/shop/files/ThanksgivingBox20_2000x1500_8a31c1a6-8b5b-4f4b-91d1-891dfb183e45.jpg?v=1695077708",
38 | imageAlt: "Premium assorted chocolate box.",
39 | price: "$25",
40 | color: "Assorted",
41 | },
42 | ];
43 |
44 | export default function Ecommerce1() {
45 | return (
46 |
15 |
62 |
16 |
21 | navigate("/components")}
33 | className="fancy-button px-8 py-4 shadow-lg"
34 | >
35 | Get Free Components 🎁
36 |
37 |
38 |
44 |
45 |
60 |
61 | 22 | Beautiful React Components 23 | Made Easy ✨ 24 |
25 |26 | Production-ready components for your next React project. Free, 27 | open-source, and fully customizable. 🚀 28 |
29 |
46 |
59 |
47 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2 | import { Analytics } from "@vercel/analytics/react";
3 | import { Header } from "./components/Header";
4 | import { FooterMinimal } from "./components/Footer/FooterMinimal";
5 | import { Error404 } from "./pages/Error404";
6 | import { useEffect, useCallback } from "react";
7 | import { ScrollToTop } from "./components/ScrollToTop";
8 | import { ErrorBoundary } from "./components/ErrorBoundary";
9 | import { ThemeProvider } from "./context/ThemeContext";
10 | import { Suspense, lazy } from "react";
11 | // import CustomCursor from './components/CustomCursor'; // if it exists
12 |
13 | // Lazy load pages for better performance
14 | const LazyHome = lazy(() => import("./pages/Home").then(module => ({ default: module.Home })));
15 | const LazyComponents = lazy(() => import("./pages/Components").then(module => ({ default: module.Components })));
16 | const LazyDocumentation = lazy(() => import("./pages/Documentation").then(module => ({ default: module.Documentation })));
17 | const LazyTemplates = lazy(() => import("./pages/Templates").then(module => ({ default: module.Templates })));
18 |
19 | // Loading component for suspense fallback
20 | const PageLoader = () => (
21 |
48 |
78 | 49 | Customers also purchased 50 |
51 | 52 |
53 | {products.map((product) => (
54 |
77 |
55 | 
60 |
75 | ))}
76 |
61 |
74 |
62 |
70 | 63 | 64 | 65 | {product.name} 66 | 67 |
68 |{product.color}
69 |71 | {product.price} 72 |
73 |
22 |
23 |
24 | );
25 |
26 | export const App = () => {
27 | const handleMouseMove = useCallback((e: MouseEvent) => {
28 | document.documentElement.style.setProperty("--mouse-x", `${e.clientX}px`);
29 | document.documentElement.style.setProperty("--mouse-y", `${e.clientY}px`);
30 | }, []);
31 |
32 | useEffect(() => {
33 | window.addEventListener("mousemove", handleMouseMove);
34 | return () => window.removeEventListener("mousemove", handleMouseMove);
35 | }, [handleMouseMove]);
36 |
37 | return (
38 |
42 |
44 |
46 |
52 |
53 |
54 |
60 |
31 |
71 |
78 |
79 |
32 |
38 | Powerful Features for Your Business
39 |
40 |
44 |
45 | 41 | Everything you need to scale your business effectively 42 |
43 |
46 | {features.map((feature, index) => (
47 |
54 |
62 | ))}
63 |
64 |
65 |
55 | {feature.icon}
56 |
57 | {feature.title}
58 |59 | {feature.description} 60 |
61 |
72 |
77 |
27 | {cards.map((card, index) => (
28 |
34 | {/* Shining border effect */}
35 |
36 |
37 |
65 | ))}
66 |
67 | );
68 | };
69 |
--------------------------------------------------------------------------------
/src/components/sections/GradientBlob.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { motion } from "framer-motion";
3 |
4 | export const GradientBlob = () => {
5 | const canvasRef = useRef
38 |
39 |
40 |
41 | {/* Card content */}
42 |
43 |
61 | →
62 |
63 |
64 |
44 | 
49 |
50 |
51 |
52 |
57 | 53 | {card.title} 54 |
55 |{card.description}
56 |
76 |
77 |
78 |
98 | );
99 | };
100 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import "./styles/darkMode.css";
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | @layer base {
8 | :root {
9 | --background: 0 0% 100%;
10 | --foreground: 240 10% 3.9%;
11 | --card: 0 0% 100%;
12 | --card-foreground: 240 10% 3.9%;
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 240 10% 3.9%;
15 | --primary: 240 5.9% 10%;
16 | --primary-foreground: 0 0% 98%;
17 | --secondary: 240 4.8% 95.9%;
18 | --secondary-foreground: 240 5.9% 10%;
19 | --muted: 240 4.8% 95.9%;
20 | --muted-foreground: 240 3.8% 46.1%;
21 | --accent: 240 4.8% 95.9%;
22 | --accent-foreground: 240 5.9% 10%;
23 | --destructive: 0 84.2% 60.2%;
24 | --destructive-foreground: 0 0% 98%;
25 | --border: 240 5.9% 90%;
26 | --input: 240 5.9% 90%;
27 | --ring: 240 10% 3.9%;
28 | --chart-1: 12 76% 61%;
29 | --chart-2: 173 58% 39%;
30 | --chart-3: 197 37% 24%;
31 | --chart-4: 43 74% 66%;
32 | --chart-5: 27 87% 67%;
33 | --radius: 0.5rem;
34 | }
35 |
36 | .dark {
37 | --background: 240 10% 3.9%;
38 | --foreground: 0 0% 98%;
39 | --card: 240 10% 3.9%;
40 | --card-foreground: 0 0% 98%;
41 | --popover: 240 10% 3.9%;
42 | --popover-foreground: 0 0% 98%;
43 | --primary: 0 0% 98%;
44 | --primary-foreground: 240 5.9% 10%;
45 | --secondary: 240 3.7% 15.9%;
46 | --secondary-foreground: 0 0% 98%;
47 | --muted: 240 3.7% 15.9%;
48 | --muted-foreground: 240 5% 64.9%;
49 | --accent: 240 3.7% 15.9%;
50 | --accent-foreground: 0 0% 98%;
51 | --destructive: 0 62.8% 30.6%;
52 | --destructive-foreground: 0 0% 98%;
53 | --border: 240 3.7% 15.9%;
54 | --input: 240 3.7% 15.9%;
55 | --ring: 240 4.9% 83.9%;
56 | --chart-1: 220 70% 50%;
57 | --chart-2: 160 60% 45%;
58 | --chart-3: 30 80% 55%;
59 | --chart-4: 280 65% 60%;
60 | --chart-5: 340 75% 55%;
61 | }
62 | }
63 |
64 | @layer components {
65 | .gradient-text {
66 | @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500;
67 | }
68 |
69 | .hover-card {
70 | @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
71 | }
72 |
73 | .mouse-gradient {
74 | background: radial-gradient(
75 | 600px circle at var(--mouse-x) var(--mouse-y),
76 | rgba(var(--gradient-color), 0.15),
77 | transparent 40%
78 | );
79 | }
80 | .hiring-badge {
81 | background: linear-gradient(
82 | 135deg,
83 | rgba(124, 58, 237, 0.1) 0%,
84 | rgba(124, 58, 237, 0.2) 100%
85 | );
86 | backdrop-filter: blur(8px);
87 | border: 1px solid rgba(124, 58, 237, 0.2);
88 | animation: pulse 2s infinite;
89 | }
90 |
91 | .fancy-button {
92 | @apply relative overflow-hidden transition-all duration-300
93 | bg-gradient-to-r from-primary-500 to-secondary-500
94 | hover:from-primary-600 hover:to-secondary-600
95 | text-white font-semibold rounded-lg
96 | transform hover:scale-105 hover:shadow-lg
97 | active:scale-95;
98 | }
99 | }
100 |
101 | html {
102 | scroll-behavior: smooth;
103 | }
104 |
105 | @layer base {
106 | * {
107 | @apply border-border;
108 | }
109 | body {
110 | @apply bg-background text-foreground;
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/src/components/sections/FooterApp2.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { Download, Star, Heart } from 'lucide-react';
4 | import { Logo } from '../Header/Logo';
5 |
6 | export const FooterApp2 = () => {
7 | return (
8 |
59 | );
60 | };
--------------------------------------------------------------------------------
/src/components/sections/HeroVideo.tsx:
--------------------------------------------------------------------------------
1 | import { MoveRight, PhoneCall } from "lucide-react";
2 | import { Button } from "../ui/button";
3 | import { Badge } from "../ui/badge";
4 |
5 | function HeroVideo() {
6 | return (
7 |
79 |
85 | Gradient Blobs
86 |
87 |
93 | Smooth animated gradient blobs that create an organic, fluid
94 | background effect
95 |
96 |
97 |
8 | {/* Grid Background */}
9 |
21 |
22 | {/* Dark Mode Grid Overlay */}
23 |
35 |
36 | {/* Radial Gradient */}
37 |
38 |
39 | {/* Content */}
40 |
86 | );
87 | }
88 |
89 | export { HeroVideo };
90 |
--------------------------------------------------------------------------------
/src/components/sections/FooterNewsletter.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { Mail, ArrowRight } from 'lucide-react';
4 | import { Logo } from '../Header/Logo';
5 | import { SocialLinks } from './SocialLinks';
6 |
7 | export const FooterNewsletter = () => {
8 | return (
9 |
63 | );
64 | };
--------------------------------------------------------------------------------
/src/components/Footer/FooterApp.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 | import { Download, Star } from 'lucide-react';
4 | import { Logo } from '../Header/Logo';
5 |
6 | export const FooterApp = () => {
7 | return (
8 |
67 | );
68 | };
--------------------------------------------------------------------------------
/src/components/ComponentSection.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef } from "react";
2 | import { motion, AnimatePresence } from "framer-motion";
3 | import { Code, Copy, Check } from "lucide-react";
4 | import { useComponentTheme } from '../context/ComponentThemeContext';
5 |
6 | interface ComponentSectionProps {
7 | title: string;
8 | code: string;
9 | children: React.ReactNode;
10 | }
11 |
12 | export const ComponentSection = ({ title, code, children }: ComponentSectionProps) => {
13 | const { theme } = useComponentTheme();
14 | const [isCodeVisible, setIsCodeVisible] = useState(false);
15 | const [isCopied, setIsCopied] = useState(false);
16 | const codeRef = useRef
41 |
85 |
42 |
84 |
43 |
73 |
44 |
48 |
49 |
50 | We're Hiring!
51 |
52 |
53 |
54 |
55 |
64 | 56 | Innovate with Cutting-Edge Technology! 57 |
58 |59 | Embrace the future of business with our solutions. We simplify 60 | and accelerate SMB trade, making your operations smoother and 61 | more efficient. 62 |
63 |
65 |
68 |
71 |
72 |
74 |
82 |
83 |
43 |
75 | {isCodeVisible && (
76 |
84 |
102 | )}
103 |
104 |
105 | );
106 | };
--------------------------------------------------------------------------------
/src/components/sections/ThreeDCard.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { useState } from "react";
3 |
4 | export const ThreeDCardDemo = () => {
5 | const [rotateX, setRotateX] = useState(0);
6 | const [rotateY, setRotateY] = useState(0);
7 |
8 | const handleMouseMove = (e: React.MouseEvent
44 |
61 |
62 | {/* Component Preview */}
63 | 47 | {title} 48 |
49 | 60 |
68 |
72 |
73 | {/* Code Section */}
74 |
69 | {children}
70 |
71 |
85 |
95 |
96 |
97 |
98 | {code}
99 |
100 |
101 |
29 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/src/components/sections/AnimatedBeamSection.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, useRef } from "react";
2 | import { cn } from "../../lib/utils";
3 | import { AnimatedBeam } from "../ui/animated-beam";
4 |
5 | const Circle = forwardRef<
6 | HTMLDivElement,
7 | { className?: string; children?: React.ReactNode }
8 | >(({ className, children }, ref) => {
9 | return (
10 |
30 | {/* Animated border gradient */}
31 |
32 |
33 |
34 | {/* Shiny border effect */}
35 |
49 |
76 |
77 |
36 |
37 |
38 |
39 | {/* Card content */}
40 |
50 |
75 |
51 | 
56 | {/* Image overlay gradient */}
57 |
58 |
59 |
56 | {/* Image overlay gradient */}
57 |
58 | 60 | Aurora Borealis 61 |
62 |63 | Experience the magical dance of the Northern Lights in this 64 | stunning capture of nature's most spectacular light show. 65 |
66 |
67 |
71 | →
72 |
73 |
74 |
17 | {children}
18 |
19 | );
20 | });
21 |
22 | Circle.displayName = "Circle";
23 |
24 | function AnimatedBeamSection() {
25 | const containerRef = useRef
36 |
113 | );
114 | }
115 |
116 | export { AnimatedBeamSection, Icons };
117 |
--------------------------------------------------------------------------------
/src/components/sections/SaasHero.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import Lottie from "lottie-react";
3 | import { ArrowRight, CheckCircle } from "lucide-react";
4 |
5 | // Import Lottie JSON locally
6 | import analyticsAnimationLight from "../../assets/saas.json";
7 | import analyticsAnimationDark from "../../assets/saasdark.json";
8 |
9 | export const SaasHero = () => {
10 | const features = [
11 | "Real-time analytics dashboard",
12 | "Team collaboration tools",
13 | "Advanced reporting features",
14 | ];
15 |
16 | return (
17 |
40 |
112 |
41 |
69 |
70 |
42 |
43 |
45 |
46 |
48 |
49 |
50 |
51 |
53 |
54 |
56 |
57 |
59 |
60 |
61 |
62 |
64 |
65 |
67 |
68 |
19 |
90 |
20 | {/* Left Side Content */}
21 |
26 |
27 | New Features Available
28 |
29 |
61 |
62 | {/* Right Side Lottie Animation */}
63 |
69 | {/* Lottie Animation */}
70 |
88 |
89 | 30 | Transform Your Business with{" "} 31 | Advanced Analytics 32 |
33 |34 | Get actionable insights and make data-driven decisions with our 35 | powerful analytics platform. 36 |
37 |-
38 | {features.map((feature) => (
39 |
-
40 |
41 | 42 | {feature} 43 | 44 |
45 | ))}
46 |
48 |
53 | Get Started
54 |
56 |
59 |
60 |
71 | {/* Light mode Lottie */}
72 |
87 |
73 |
78 |
79 | {/* Dark mode Lottie */}
80 |
81 |
86 |
8 |
91 | Pricing Tables
9 | 10 | {/* Modern Pricing Grid */} 11 |
12 | {/* Basic Plan */}
13 |
19 |
36 |
37 | {/* Pro Plan */}
38 |
44 |
64 |
65 | {/* Enterprise Plan */}
66 |
72 |
89 |
90 | Basic
20 |
21 | $9
22 | /month
23 |
24 | -
25 | {['5 Projects', '10GB Storage', 'Basic Support'].map((feature) => (
26 |
-
27 |
28 | {feature} 29 |
30 | ))}
31 |
45 | Popular
46 |
47 | Pro
48 |
49 | $29
50 | /month
51 |
52 | -
53 | {['15 Projects', '50GB Storage', 'Priority Support', 'Advanced Features'].map((feature) => (
54 |
-
55 |
56 | {feature} 57 |
58 | ))}
59 |
Enterprise
73 |
74 | $99
75 | /month
76 |
77 | -
78 | {['Unlimited Projects', 'Unlimited Storage', '24/7 Support', 'Custom Features'].map((feature) => (
79 |
-
80 |
81 | {feature} 82 |
83 | ))}
84 |
45 |
99 | );
100 | }
--------------------------------------------------------------------------------
/src/components/sections/EcommerceSlider.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 |
3 | const products = [
4 | {
5 | id: 1,
6 | name: "Milk Chocolate Bar",
7 | href: "",
8 | imageSrc:
9 | "https://plus.unsplash.com/premium_photo-1675283825474-390ea83c0703?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
10 | imageAlt: "Delicious milk chocolate bar.",
11 | price: "$5",
12 | color: "Milk Chocolate",
13 | },
14 | {
15 | id: 2,
16 | name: "Dark Chocolate Truffles",
17 | href: "",
18 | imageSrc:
19 | "https://www.happyfoodstube.com/wp-content/uploads/2016/12/dark-chocolate-truffles-6.jpg",
20 | imageAlt: "Gourmet dark chocolate truffles.",
21 | price: "$12",
22 | color: "Dark Chocolate",
23 | },
24 | {
25 | id: 3,
26 | name: "White Chocolate Bark",
27 | href: "",
28 | imageSrc:
29 | "https://milkhousechocolates.net/cdn/shop/files/WhiteChocolatePeppermintBarkforweb4_1200x1200.jpg?v=1695243013",
30 | imageAlt: "White chocolate bark with nuts and fruits.",
31 | price: "$8",
32 | color: "White Chocolate",
33 | },
34 | {
35 | id: 4,
36 | name: "Assorted Chocolate Box",
37 | href: "",
38 | imageSrc:
39 | "https://www.li-lacchocolates.com/cdn/shop/files/ThanksgivingBox20_2000x1500_8a31c1a6-8b5b-4f4b-91d1-891dfb183e45.jpg?v=1695077708",
40 | imageAlt: "Premium assorted chocolate box.",
41 | price: "$25",
42 | color: "Assorted",
43 | },
44 | {
45 | id: 5,
46 | name: "Hazelnut Chocolate",
47 | href: "",
48 | imageSrc:
49 | "https://harvestcraftchocolate.com/cdn/shop/files/IMG_3158.heic?v=1725981510&width=1445",
50 | imageAlt: "Creamy hazelnut chocolate bar.",
51 | price: "$7",
52 | color: "Hazelnut Chocolate",
53 | },
54 | {
55 | id: 6,
56 | name: "Belgian Chocolate Box",
57 | href: "",
58 | imageSrc:
59 | "https://media-cdn2.greatbritishchefs.com/media/5t2bqaen/history-of-belgian-chocolate-guylian.whqc_1426x713q80.jpg",
60 | imageAlt: "Assorted Belgian chocolate box.",
61 | price: "$30",
62 | color: "Belgian Chocolate",
63 | },
64 | {
65 | id: 7,
66 | name: "Caramel Chocolate Bar",
67 | href: "",
68 | imageSrc:
69 | "https://itsallgoodvegan.com/wp-content/uploads/2020/05/IMG_4365.jpg",
70 | imageAlt: "Caramel-filled chocolate bar.",
71 | price: "$10",
72 | color: "Caramel Chocolate",
73 | },
74 | {
75 | id: 8,
76 | name: "Mint Chocolate Bar",
77 | href: "",
78 | imageSrc:
79 | "https://robard.com/wp-content/uploads/2024/08/ChocolateMintBar-wCocolate.jpg.webp",
80 | imageAlt: "Refreshing mint chocolate bar.",
81 | price: "$9",
82 | color: "Mint Chocolate",
83 | },
84 | ];
85 |
86 | export default function EcommerceCarousel() {
87 | return (
88 |
46 | {/* First row */}
47 |
98 |
48 |
62 | {[...images, ...images, ...images].map((image, index) => (
63 |
70 |
71 |
72 | {/* Second row - reverse direction */}
73 |
74 |
88 | {[...images, ...images, ...images].map((image, index) => (
89 |
96 |
97 |
89 |
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/src/components/sections/LogoTicker.tsx:
--------------------------------------------------------------------------------
1 | type LogoProps = {
2 | src: string;
3 | alt: string;
4 | };
5 |
6 | function Logo({ src, alt }: LogoProps) {
7 | if (!src) return null;
8 | return (
9 |
90 |
123 | 91 | Customers also purchased 92 |
93 |
94 | {/* Carousel Container */}
95 |
122 |
96 | {products.map((product) => (
97 |
118 |
101 |
106 |
115 |
116 | ))}
117 | 119 | Slide to see more 120 |
121 |
47 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/sections/ParticleField.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { motion } from "framer-motion";
3 |
4 | interface Particle {
5 | x: number;
6 | y: number;
7 | radius: number;
8 | vx: number;
9 | vy: number;
10 | color: string;
11 | }
12 |
13 | export const ParticleField = () => {
14 | const canvasRef = useRef
48 |
84 | 49 | Trusted by 50 |
51 | 52 | {/* Slider 1: Left to Right */} 53 |
57 |
67 |
68 | {/* Slider 2: Right to Left */}
69 |
58 | {repeatedLogos.map((src, index) => (
59 |
66 |
73 |
83 |
74 | {repeatedLogos.map((src, index) => (
75 |
82 |
107 |
111 |
131 | );
132 | };
133 |
--------------------------------------------------------------------------------
/src/components/sections/MarqueeLogo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { motion } from 'framer-motion';
3 |
4 | const logos = [
5 | "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png",
6 | "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png",
7 | "https://www.logo.wine/a/logo/Instagram/Instagram-Wordmark-Logo.wine.svg",
8 | "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/2560px-Logo_of_YouTube_%282015-2017%29.svg.png",
9 | "https://cdn.freelogovectors.net/wp-content/uploads/2023/09/next-js-logo-freelogovectors.net_.png",
10 | "https://1000logos.net/wp-content/uploads/2017/03/Nike-Logo-1971-now.png",
11 | "https://download.logo.wine/logo/Porsche/Porsche-Logo.wine.png",
12 | "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png",
13 | "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png",
14 | "https://www.logo.wine/a/logo/Instagram/Instagram-Wordmark-Logo.wine.svg",
15 | "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/2560px-Logo_of_YouTube_%282015-2017%29.svg.png",
16 | "https://cdn.freelogovectors.net/wp-content/uploads/2023/09/next-js-logo-freelogovectors.net_.png",
17 | "https://1000logos.net/wp-content/uploads/2017/03/Nike-Logo-1971-now.png",
18 | "https://download.logo.wine/logo/Porsche/Porsche-Logo.wine.png",
19 | "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1024px-Netflix_2015_logo.svg.png",
20 | "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png",
21 | "https://www.logo.wine/a/logo/Instagram/Instagram-Wordmark-Logo.wine.svg",
22 | "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/2560px-Logo_of_YouTube_%282015-2017%29.svg.png",
23 | "https://cdn.freelogovectors.net/wp-content/uploads/2023/09/next-js-logo-freelogovectors.net_.png",
24 | "https://1000logos.net/wp-content/uploads/2017/03/Nike-Logo-1971-now.png",
25 | "https://download.logo.wine/logo/Porsche/Porsche-Logo.wine.png",
26 | ];
27 |
28 | const LogoComponent = ({ src, index }: { src: string; index: number }) => (
29 |
112 |
118 | Particle Field
119 |
120 |
126 | Interactive particle system with dynamic connections and smooth
127 | animations
128 |
129 |
130 |
47 |
93 | );
94 | }
--------------------------------------------------------------------------------
/src/components/sections/WavyBackground.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 | import { motion } from "framer-motion";
3 |
4 | export const WavyBackground = () => {
5 | const canvasRef = useRef
48 | {/* First row */}
49 |
92 |
50 |
64 | {[...logos, ...logos, ...logos].map((logo, index) => (
65 |
68 |
69 |
70 | {/* Second row - reverse direction */}
71 |
72 |
86 | {[...logos, ...logos, ...logos].map((logo, index) => (
87 |
90 |
91 |
97 | {/* Gradient overlays for depth */}
98 |
99 |
100 |
101 | {/* Subtle radial gradient for center focus */}
102 |
103 |
104 |
105 |
106 |
126 | );
127 | };
128 |
--------------------------------------------------------------------------------
/src/components/sections/GridGallery.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { Image as LucideImage } from "lucide-react";
3 | import { useState } from "react";
4 | import { cn } from "../../lib/utils";
5 |
6 | interface GalleryImage {
7 | src: string;
8 | aspect: string;
9 | alt?: string;
10 | }
11 |
12 | interface GalleryProps {
13 | images?: GalleryImage[];
14 | title?: string;
15 | className?: string;
16 | }
17 |
18 | const defaultImages: GalleryImage[] = [
19 | {
20 | src: "https://images.unsplash.com/photo-1541336032412-2048a678540d?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
21 | aspect: "aspect-[9/16]",
22 | alt: "City skyline at sunset",
23 | },
24 | {
25 | src: "https://plus.unsplash.com/premium_photo-1672082422409-879d79636902?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
26 | aspect: "aspect-[9/16]",
27 | alt: "Mountain landscape",
28 | },
29 | {
30 | src: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
31 | aspect: "aspect-[9/16]",
32 | alt: "Urban architecture",
33 | },
34 | {
35 | src: "https://plus.unsplash.com/premium_photo-1680836316227-ef17dbbcfb27?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
36 | aspect: "aspect-[9/16]",
37 | alt: "Nature scene",
38 | },
39 | {
40 | src: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
41 | aspect: "aspect-[4/3]",
42 | alt: "City view",
43 | },
44 | {
45 | src: "https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
46 | aspect: "aspect-[4/3]",
47 | alt: "Urban landscape",
48 | },
49 | {
50 | src: "https://images.unsplash.com/photo-1485871981521-5b1fd3805eee?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
51 | aspect: "aspect-[4/3]",
52 | alt: "City panorama",
53 | },
54 | {
55 | src: "https://images.unsplash.com/photo-1440330033336-7dcff4630cef?q=80&w=2879&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
56 | aspect: "aspect-[4/3]",
57 | alt: "Architectural view",
58 | },
59 | ];
60 |
61 | const GalleryImage = ({ image, index }: { image: GalleryImage; index: number }) => {
62 | const [isLoading, setIsLoading] = useState(true);
63 | const [error, setError] = useState(false);
64 |
65 | return (
66 |
107 |
113 | Wavy Background
114 |
115 |
121 | A beautiful animated background effect that adds depth and movement to
122 | your designs
123 |
124 |
125 |
80 |
82 | ) : (
83 | Failed to load image
81 |
104 |
105 |
107 |
108 |
109 | {images.map((image, index) => (
110 |
113 |
114 | );
115 | };
116 |
117 | export default Gallery;
118 |
--------------------------------------------------------------------------------
/src/components/sections/GalleryExamples.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useEffect, useState } from "react";
3 | import { motion, MotionConfig, useMotionTemplate, useSpring } from "framer-motion";
4 | import { ChevronLeft, ChevronRight } from "lucide-react";
5 |
6 |
7 | // Image list for galleries
8 | const images = [
9 | "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=500&h=300&fit=crop",
10 | "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=500&h=300&fit=crop",
11 | "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=500&h=300&fit=crop",
12 | "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=500&h=300&fit=crop",
13 | "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=500&h=300&fit=crop",
14 | "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=500&h=300&fit=crop",
15 | ];
16 |
17 | export const GalleryExamples = () => {
18 | return (
19 |
105 |
107 |
108 |
21 |
74 | Gallery Examples
22 | 23 | {/* Grid Gallery */} 24 |
25 |
45 |
46 | {/* Masonry Gallery */}
47 | Grid Gallery
26 |
27 | {images.map((image, index) => (
28 |
36 | 
41 |
42 | ))}
43 |
44 |
48 |
67 |
68 | {/* Carousel */}
69 | Masonry Gallery
49 |
50 | {images.map((image, index) => (
51 |
58 |
63 |
64 | ))}
65 |
66 |
70 |
73 | Image Carousel
71 |
93 |
94 | {images.map((image, i) => (
95 |
103 |
104 | {/* Navigation */}
105 | {index > 0 && (
106 |
112 | )}
113 | {index < images.length - 1 && (
114 |
120 | )}
121 |
122 |
89 |
133 | );
134 | }
135 |
--------------------------------------------------------------------------------
/src/components/sections/HeaderExamples.tsx:
--------------------------------------------------------------------------------
1 | import { Menu, Search, ShoppingCart, User } from "lucide-react";
2 |
3 | export const HeaderExamples = () => {
4 | return (
5 |
90 |
132 |
91 |
101 |
102 | 92 | Customers also purchased 93 |
94 | 98 | View More → 99 | 100 |
103 | {products.map((product) => (
104 |
131 |
105 |
110 |
129 | ))}
130 |
111 |
124 |
128 |
112 |
120 | 113 | 114 | 115 | {product.name} 116 | 117 |
118 |{product.color}
119 |121 | {product.price} 122 |
123 |
7 |
115 | Headers
8 | 9 | {/* Header 1: Modern with Search */} 10 |
11 |
12 |
58 |
59 |
60 | {/* Header 2: E-commerce Style */}
61 |
13 |
57 |
14 |
56 |
15 |
16 | SRI
17 |
18 |
38 |
39 |
40 |
55 |
41 |
46 |
48 |
51 |
54 |
62 |
63 |
113 |
114 |
64 |
112 |
65 |
111 |
66 |
67 | Yamazon
68 |
69 |
84 |
110 |
70 |
73 |
76 |
82 |
83 |
38 | {/* Outer glow */}
39 |
107 | {particles.map((particle) => (
108 |
139 |
140 | {/* Magnetic field effect */}
141 |
181 | );
182 | };
--------------------------------------------------------------------------------
/src/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "../../lib/utils";
4 | import { Link, LinkProps } from "react-router-dom";
5 | import React, { useState, createContext, useContext } from "react";
6 | import { AnimatePresence, motion } from "framer-motion";
7 | import { Menu, X } from "lucide-react";
8 |
9 | interface Links {
10 | label: string;
11 | href: string;
12 | icon: React.JSX.Element | React.ReactNode;
13 | }
14 |
15 | interface SidebarContextProps {
16 | open: boolean;
17 | setOpen: React.Dispatch
121 |
128 | {open && (
129 |
142 |
150 | )}
151 |
152 |
153 |
154 | );
155 | };
156 |
157 | export const SidebarLink = ({
158 | link,
159 | className,
160 | ...props
161 | }: {
162 | link: Links;
163 | className?: string;
164 | props?: LinkProps;
165 | }) => {
166 | const { open, animate } = useSidebar();
167 | return (
168 |
176 | {link.icon}
177 |
122 |
127 | setOpen(!open)}
145 | >
146 |
148 | {children}
149 |
42 |
59 |
60 | {/* Navigation */}
61 |
43 |
44 | ReactWind
45 |
46 |
47 | {/* Search */}
48 |
49 |
58 |
62 |
79 |
80 | {/* Footer */}
81 |
63 | {filteredComponents.map((component) => (
64 | handleComponentClick(e, component.title)}
68 | className={`block px-4 py-2 rounded-lg transition-all duration-200 ${
69 | normalizeTitle(activeSection) === normalizeTitle(component.title)
70 | ? "bg-primary-500/10 text-primary-600 dark:text-primary-400 font-medium"
71 | : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800/50"
72 | }`}
73 | >
74 | {component.title}
75 |
76 | ))}
77 |
78 |
82 | setIsMobileOpen(false)}
85 | className="block px-4 py-2 rounded-lg text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-all duration-200"
86 | >
87 | Documentation
88 |
89 |
90 |
91 | );
92 |
93 | return (
94 | <>
95 | {/* Mobile Menu Button */}
96 |
102 |
103 | {/* Mobile Sidebar */}
104 |
42 |
54 |
152 | );
153 | };
154 |
--------------------------------------------------------------------------------
/src/components/sections/HeroSection.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const App: React.FC = () => {
4 | return (
5 |
55 |
60 | Pricing
56 |57 | Find the perfect plan tailored to your needs🚀. 58 |
59 |61 | Select a plan tailored to your needs, packed with powerful features to 62 | captivate your audience, build lasting customer loyalty, and boost your 63 | sales. 64 |
65 |
66 | {tiers.map((tier, tierIdx) => (
67 |
151 |
81 |
149 | ))}
150 | 88 | {tier.name} 89 |
90 |91 | 97 | {tier.priceMonthly} 98 | 99 | 105 | /month 106 | 107 |
108 |114 | {tier.description} 115 |
116 |-
123 | {tier.features.map((feature) => (
124 |
- 125 | 132 | {feature} 133 | 134 | ))} 135 |
6 | {/* Navigation */}
7 |
34 |
35 | {/* Hero Section */}
36 |
120 | );
121 | };
122 |
123 | export default App;
124 |
--------------------------------------------------------------------------------
37 |
119 |
38 |
118 |
39 |
40 |
116 |
117 |
41 | {/* Text Content */}
42 |
115 |
43 |
71 |
72 | {/* Image Grid */}
73 | 44 | We're changing the way people connect. 45 |
46 |47 | Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure 48 | qui lorem cupidatat commodo. Elit sunt amet fugiat veniam 49 | occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non 50 | deserunt sunt. 51 |
52 |
53 |
70 |
54 |
58 | Get started
59 |
60 |
61 |
62 |
66 | Live demo →
67 |
68 |
69 |
74 |
114 |
75 |
113 |
76 | {/* Left Column */}
77 |
112 |
78 |
93 |
94 | {/* Right Column */}
95 |
79 | 
84 |
85 |
84 |
86 |
91 |
92 |
91 |
96 |
111 |
97 | 
102 |
103 |
102 |
104 | 
109 |
110 |
109 |