├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug.md
    │   ├── config.yaml
    │   ├── documentation.md
    │   ├── feature.md
    │   └── other.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .postcssrc
├── .prettierignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── _redirects
├── favicon.ico
├── index.css
├── index.html
├── netlify.toml
├── package-lock.json
├── package.json
├── src
    ├── .MainSection.tsx.swp
    ├── MainSection.tsx
    ├── Pages
    │   ├── DocsPage.jsx
    │   ├── HomePage.jsx
    │   ├── LoginPage.tsx
    │   ├── Navbar.jsx
    │   └── SignUpPage.tsx
    ├── components
    │   ├── NoImagesFound
    │   │   ├── .DS_Store
    │   │   ├── NoDataFound.json
    │   │   ├── NoDataFound.jsx
    │   │   └── NoImagesFound.js
    │   ├── Noresults.tsx
    │   ├── ShimmerLoading
    │   │   └── ShimmerLoading.tsx
    │   ├── assets
    │   │   ├── RocketLaunch.png
    │   │   ├── User.png
    │   │   ├── bg.png
    │   │   ├── cam.png
    │   │   ├── fork.png
    │   │   ├── github-star.webp
    │   │   ├── nft.png
    │   │   ├── pr.png
    │   │   └── rectangle.png
    │   ├── footer
    │   │   └── Footer.jsx
    │   ├── menu
    │   │   ├── BackToTopButton.tsx
    │   │   ├── DarkModeButton.tsx
    │   │   ├── HamburgerMenu.tsx
    │   │   ├── Header.tsx
    │   │   ├── ImageCard
    │   │   │   └── ImageCard.tsx
    │   │   ├── SelectionMenu.tsx
    │   │   └── ShareImagesModal.tsx
    │   └── noresults.png
    ├── declaration.d.ts
    ├── index.tsx
    └── utils
    │   ├── drawer.css
    │   ├── links.tsx
    │   └── style.css
├── tailwind.config.ts
├── tsconfig.json
└── vercel.json


/.github/ISSUE_TEMPLATE/bug.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🐛 BUG
 3 | about: Report an issue to help improve the project.
 4 | title: '[BUG] <description>'
 5 | labels: []
 6 | assignees: []
 7 | ---
 8 | 
 9 | **Description**
10 | 
11 | Please describe the Bug in detail.
12 | 
13 | **Expected Behavior**
14 | 
15 | What should happen?
16 | 
17 | **Actual Behavior**
18 | 
19 | What happens instead?
20 | 
21 | **Screenshots (if applicable)**
22 | 
23 | Add screenshots or other media to help explain the issue.
24 | 
25 | **Additional Information**
26 | 
27 | Add any other context or information about the issue here.
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yaml:
--------------------------------------------------------------------------------
1 | issue_template:
2 |  
3 |  feature: .github/ISSUE_TEMPLATE/feature.md
4 |  documentation: .github/ISSUE_TEMPLATE/documentation.md
5 |  bug: .github/ISSUE_TEMPLATE/bug.md
6 |  other: .github/ISSUE_TEMPLATE/other.md


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 📄 Documentation issue
 3 | about: Found an issue in the documentation? You can use this one!
 4 | title: '[DOCS] <description>'
 5 | labels: []
 6 | assignees: []
 7 | ---
 8 | 
 9 | **Description**
10 | 
11 | Please describe the issue in detail.
12 | 
13 | **Expected Behavior**
14 | 
15 | What should happen?
16 | 
17 | **Actual Behavior**
18 | 
19 | What happens instead?
20 | 
21 | **Screenshots (if applicable)**
22 | 
23 | Add screenshots or other media to help explain the issue.
24 | 
25 | **Additional Information**
26 | 
27 | Add any other context or information about the issue here.
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 💡General Feature Request
 3 | about: Have a new idea/feature for SnapGrid? Please suggest!
 4 | title: "[FEATURE] <description>"
 5 | labels: []
 6 | assignees: []
 7 | ---
 8 | 
 9 | **Description**
10 | 
11 | Please describe the Feature in detail.
12 | 
13 | **Expected Behavior**
14 | 
15 | What should happen?
16 | 
17 | **Actual Behavior**
18 | 
19 | What happens instead?
20 | 
21 | **Screenshots (if applicable)**
22 | 
23 | Add screenshots or other media to help explain the issue.
24 | 
25 | **Additional Information**
26 | 
27 | Add any other context or information about the issue here.
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/other.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Other
 3 | about: Use this for any other issues. Please do NOT create blank issues
 4 | title: '[OTHER] <Add your title here>'
 5 | labels: []
 6 | assignees: []
 7 | ---
 8 | 
 9 | **Description**
10 | 
11 | Please add your question in detail.
12 | 
13 | **Expected Behavior**
14 | 
15 | What should happen?
16 | 
17 | **Actual Behavior**
18 | 
19 | What happens instead?
20 | 
21 | **Screenshots (if applicable)**
22 | 
23 | Add screenshots or other media to help explain the issue.
24 | 
25 | **Additional Information**
26 | 
27 | Add any other context or information about the issue here.
28 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | 
 2 | **What does this PR do?**
 3 | Provide a brief description of the purpose of this PR.
 4 | 
 5 | **Related Issue(s)**
 6 | List any related issues or tasks that this PR addresses.
 7 | 
 8 | **Changes**
 9 | List the changes made in this PR. This could include new features, bug fixes, improvements, or any other modifications.
10 | 
11 | **Screenshots or GIFs (if applicable)**
12 | If your PR includes visual changes, provide screenshots or GIFs to demonstrate the changes.
13 | 
14 | **Checklist**
15 | - [ ] I have read and followed the [contributing guidelines](../CONTRIBUTING.md).
16 | - [ ] My code follows the project's coding style and conventions.
17 | - [ ] I have added unit tests (if applicable) to ensure the code works as expected.
18 | - [ ] I have updated the project documentation (if necessary).
19 | 
20 | **Additional Comments**
21 | Add any additional comments, context, or information about this PR.
22 | 
23 | **By submitting this PR, I confirm that:**
24 | - [ ] I have reviewed my code and believe it is ready for merging.
25 | - [ ] I understand that this PR may be subject to review and changes.
26 | - [ ] I agree to abide by the code of conduct and contributing guidelines of this project.
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | /.parcel-cache
4 | .env
5 | 


--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": {
3 |     "tailwindcss": {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | dist/
 2 | 
 3 | /node_modules
 4 | /.pnp
 5 | .pnp.js
 6 | 
 7 | # testing
 8 | /coverage
 9 | 
10 | # next.js
11 | .next
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "trailingComma": "es5",
 3 |   "tabWidth": 2,
 4 |   "semi": true,
 5 |   "singleQuote": true,
 6 |   "jsxSingleQuote": true,
 7 |   "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
 8 |   "importOrderSeparation": true,
 9 |   "importOrderSortSpecifiers": true,
10 |   "plugins": [
11 |     "prettier-plugin-tailwindcss",
12 |     "@trivago/prettier-plugin-sort-imports"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing to SnapGrid
  2 | 
  3 | Welcome to the SnapGrid project! We appreciate your interest in contributing to our open-source project. Your contributions help us improve and enhance the project for all users. Here are some guidelines to get you started:
  4 | 
  5 | ## Code of Conduct
  6 | 
  7 | Before you begin contributing, please read and adhere to our [Code of Conduct](https://www.contributor-covenant.org/version/1/4/code-of-conduct/). We expect all contributors to follow these guidelines to ensure a welcoming and inclusive environment.
  8 | 
  9 | ## Getting Started
 10 | 
 11 | To contribute to the SnapGrid project, follow these steps:
 12 | 
 13 | 1. **Fork the repository:**
 14 | 
 15 |    Click the "Fork" button on the top right of this repository to create your own copy.
 16 | 
 17 | 2. **Clone your fork:**
 18 | 
 19 |    Use `git clone` to clone your forked repository to your local machine:
 20 | 
 21 |    ```bash
 22 |    git clone https://github.com/your-username/Image-Searcher.git
 23 |    ```
 24 | 
 25 | 3. **Create a new branch:**
 26 |    Create a new branch for your contribution. Name it appropriately to describe the work you're doing:
 27 | 
 28 |    `git checkout -b feature/new-feature`
 29 | 
 30 | 4. Make changes and commit:Make your changes, write code, fix bugs, or add new features. Commit your changes with clear and descriptive commit messages:
 31 | 
 32 |    `git commit -m 'Add new feature'`
 33 | 
 34 | 5. **Push changes:**
 35 | 
 36 |    Push your changes to your fork on GitHub:
 37 | 
 38 |    `git push origin feature/new-feature`
 39 | 
 40 | 6. **Create a pull request:**
 41 |    Visit the original SnapGrid repository on GitHub and click the "New Pull Request" button. Provide a detailed description of your changes in the pull request, and our team will review your contribution.
 42 | 
 43 | ## Contribution Guidelines
 44 | 
 45 | - Ensure your code follows the project's coding standards and conventions.
 46 | - Include tests for new features or changes if applicable.
 47 | - Keep your pull request concise and focused on a single issue or feature.
 48 | - Provide clear and informative commit messages.
 49 | - Be open to feedback and engage in discussions to improve your contribution.
 50 | - Respect the project maintainers and other contributors.
 51 | 
 52 | ## Suggested Features
 53 | 
 54 | Please consider contributing to one of the following features by checking the box:
 55 | 
 56 | - [x] **Unsplash API Integration**
 57 |   - _Description:_ Integrate the Unsplash API to access a vast collection of high-quality images for the application. This API allows users to search and retrieve images based on keywords and other criteria.
 58 | - [ ] **Infinite Scroll**
 59 |   - _Description:_ Implement an infinite scroll feature that enables users to continuously load and browse more image results without the need for manual pagination. This feature enhances the user experience by providing seamless access to a large number of images.
 60 | - [x] **Basic Tag Selection**
 61 |   - _Description:_ Add basic tag selection functionality to allow users to filter and categorize images based on tags or labels. Tags help users discover specific types of images within the application.
 62 | - [x] **Responsive Design for Related Issues**
 63 |   - _Description:_ Ensure that the application's related issues section has a responsive design that adapts to different screen sizes and devices.
 64 | 
 65 | * [ ] **Feature: Dark Mode**
 66 | 
 67 |   - **Description:** Implement a dark mode theme for our application. Dark mode provides an alternative color scheme that's easier on the eyes in low-light environments. This feature enhances the user experience and aligns with current design trends.
 68 | 
 69 | * [ ] **Feature: Enhanced Search Filters**
 70 | 
 71 |   - **Description:** Improve the search filter options to include advanced filters like color, size, and date. Advanced search filters enhance the accuracy of search results and provide users with more control over their searches.
 72 | 
 73 | * [ ] **Feature: Localization Support**
 74 | 
 75 |   - **Description:** Add support for multiple languages to make the application accessible to a global audience. Localization enables users from different regions to use the application in their preferred language.
 76 | 
 77 | * [ ] **Feature: Collections**
 78 | 
 79 |   - **Description:** Enable users to create and manage collections of images and content. Collections help users organize and revisit their favorite content easily.
 80 | 
 81 | * [ ] **Feature: User Comments and Ratings**
 82 | 
 83 |   - **Description:** Implement a feature that allows users to leave comments and ratings on images and content. User comments and ratings enhance community engagement and provide valuable feedback.
 84 | 
 85 | * [ ] **Feature: Share and Embed**
 86 | 
 87 |   - **Description:** Add options for users to easily share images and content on social media platforms or embed them in websites and blogs. This feature extends the reach of our content.
 88 | 
 89 | * [ ] **Feature: Image Editing Tools**
 90 | 
 91 |   - **Description:** Introduce basic image editing tools within the application, such as cropping, resizing, and adding text or stickers. These tools provide users with customization options.
 92 | 
 93 | * [ ] **Feature: Related Images**
 94 | 
 95 |   - **Description:** Suggest related images based on user interactions to encourage users to explore more content. Related images enhance content discovery.
 96 | 
 97 | * [ ] **Feature: Content Moderation**
 98 | 
 99 |   - **Description:** Implement content moderation to ensure that uploaded content adheres to community guidelines and is safe for all users. Content moderation maintains a positive and safe environment.
100 | 
101 | * [ ] **Feature: Multi-API Support**
102 | 
103 |   - **Description:** Extend the application's capabilities by integrating multiple image APIs (e.g., Unsplash, Giphy, Pexels). Multi-API support provides users with a broader range of images.
104 | 
105 | * [ ] **Feature: User Accounts and Profiles**
106 | 
107 |   - **Description:** Create user accounts and profiles to enable personalization, saving preferences, and access to saved collections. User accounts enhance the user experience.
108 | 
109 | * [ ] **Feature: Trending and Popular Sections**
110 | 
111 |   - **Description:** Display trending and popular images based on user interactions and search trends. Trending and popular sections keep content fresh and engaging.
112 | 
113 | * [ ] **Feature: Responsive Design**
114 | 
115 |   - **Description:** Ensure that the application is fully responsive and mobile-friendly. Responsive design allows users to access the application on various devices.
116 | 
117 | * [ ] **Feature: User Uploads**
118 | 
119 |   - **Description:** Allow users to upload their own images and content. User uploads promote community engagement and diversify content.
120 | 
121 | * [ ] **Feature: User Notifications**
122 | 
123 |   - **Description:** Notify users of updates, new collections, and interactions with their uploaded content. User notifications enhance user engagement.
124 | 
125 | * [ ] **Feature: User Analytics**
126 | 
127 |   - **Description:** Collect user data (with consent) to analyze behavior and preferences. User analytics provide insights for continuous improvement.
128 | 
129 | * [ ] **Feature: Monetization**
130 | 
131 |   - **Description:** Explore revenue models such as ads, premium subscriptions, or affiliate partnerships to sustain the application.
132 | 
133 | ### Clean code features
134 | 
135 | Please consider contributing to one of the following clean code features by checking the box:
136 | 
137 | - [ ] **Feature: Refactor Component Structure**
138 | 
139 |   - **Description:** Review and refactor the component structure to follow a consistent pattern, such as container/presentation or atomic design. Consistent component structures improve code organization and maintainability.
140 | 
141 | - [ ] **Feature: Implement Design Patterns**
142 | 
143 |   - **Description:** Identify areas where design patterns (e.g., Singleton, Observer, Factory) can be applied to improve code structure and reusability. Design patterns help solve common design problems efficiently.
144 | 
145 | - [ ] **Feature: Code Cleanup**
146 | 
147 |   - **Description:** Conduct a thorough code cleanup to remove unused code, optimize imports, and ensure code consistency. A clean codebase is easier to read and maintain.
148 | 
149 | - [ ] **Feature: Performance Optimization**
150 | 
151 |   - **Description:** Profile and optimize performance bottlenecks in the code, such as database queries or rendering. Performance improvements lead to faster response times and a better user experience.
152 | 
153 | - [ ] **Feature: Documentation and Comments**
154 | 
155 |   - **Description:** Add missing documentation and comments to clarify code intent and usage. Well-documented code is more accessible to developers and helps with onboarding.
156 | 
157 | - [ ] **Feature: Testing Infrastructure**
158 | 
159 |   - **Description:** Enhance the testing infrastructure to include unit tests, integration tests, and end-to-end tests for critical parts of the application. Comprehensive testing ensures code reliability.
160 | 
161 | - [ ] **Feature: Dependency Management**
162 | 
163 |   - **Description:** Review and update dependencies to ensure they are up to date and compatible with each other. Keeping dependencies current reduces security risks and improves stability.
164 | 
165 | - [ ] **Feature: Code Review Guidelines**
166 | 
167 |   - **Description:** Establish and document code review guidelines to ensure that code quality and architectural patterns are consistently maintained. Code reviews become more effective and structured.
168 | 
169 | - [ ] **Feature: Automated Code Quality Checks**
170 | 
171 |   - **Description:** Implement automated code quality checks using tools like ESLint, Prettier, and linters. Automated checks enforce coding standards and catch issues early in the development process.
172 | 
173 | - [ ] **Feature: Codebase Modularization**
174 | 
175 |   - **Description:** Break down the codebase into modular components or microservices, promoting separation of concerns and scalability.
176 | 
177 | - [ ] **Feature: Continuous Integration (CI) Pipeline**
178 | 
179 |   - **Description:** Set up a CI pipeline that includes code quality checks, automated testing, and deployment processes. CI ensures code quality is maintained throughout the development lifecycle.
180 | 
181 | - [ ] **Feature: Codebase Analysis Tools**
182 | 
183 |   - **Description:** Integrate code analysis tools to detect code smells, complexity issues, and security vulnerabilities. These tools help identify areas for improvement.
184 | 
185 | - [ ] **Feature: Performance Monitoring**
186 | 
187 |   - **Description:** Implement performance monitoring tools to track application performance in real-time and identify areas for optimization.
188 | 
189 | - [ ] **Feature: Scalability Planning**
190 | 
191 |   - **Description:** Develop a plan for application scalability, considering factors like load balancing, caching, and database scaling. Scalability ensures the application can handle growth.
192 | 
193 | - [ ] **Feature: Security Audits**
194 | 
195 |   - **Description:** Conduct regular security audits and penetration testing to identify and address vulnerabilities in the codebase. Security audits protect user data and privacy.
196 | 
197 | - [ ] **Feature: Codebase Analytics**
198 | 
199 |   - **Description:** Use codebase analytics to gain insights into code contributions, patterns, and areas of improvement. Analytics inform decision-making for code quality enhancements.
200 | 
201 | - [ ] **Feature: Error Handling and Logging**
202 | 
203 |   - **Description:** Enhance error handling mechanisms and logging to facilitate debugging and troubleshooting.
204 | 
205 | - [ ] **Feature: Codebase Migration**
206 | 
207 |   - **Description:** Plan and execute codebase migrations, such as upgrading to newer frameworks or libraries, to stay up to date with industry best practices.
208 | 
209 | Feel free to use this list of code-related features in your project's documentation to encourage contributors to work on code quality and architecture improvements. Contributors can check the boxes next to the features they are interested in working on.
210 | 
211 | Feel free to choose a feature that interests you, and don't hesitate to ask questions or seek clarification in the issue discussions. Thank you for considering contributing to our project!
212 | 
213 | ## Thank You!
214 | 
215 | Thank you for considering contributing to SnapGrid. Your contributions help make the project better for everyone. We appreciate your dedication and look forward to collaborating with you!
216 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Vijay Kv
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SnapGrid
 2 | 
 3 | ![SnapGrid](https://i.ibb.co/gSSxMS4/Image-1-removebg-preview.png)
 4 | 
 5 | **SnapGrid** is a web application built with React JS that allows users to search for images using the Unsplash API. It provides a user-friendly interface for searching and exploring a vast collection of high-quality images.
 6 | 
 7 | - Search for images using keywords.
 8 | - View image results with details such as author, description, and download link.
 9 | - Infinite scrolling for seamless browsing of image results.
10 | - Responsive design for a great user experience on both desktop and mobile devices.
11 | 
12 | ### [Live Link](https://snapgrid.netlify.app/)
13 | 
14 | ## Getting Started
15 | 
16 | To get started with the SnapGrid project, follow these steps:
17 | 
18 | 1. Clone the repository to your local machine:
19 | 
20 | ```bash
21 |  git clone https://github.com/Vijaykv5/SnapGrid.git
22 | ```
23 | 
24 | 2. Navigate to the project directory:
25 | 
26 | ```bash
27 |  cd SnapGrid
28 | ```
29 | 
30 | 3. Install the project dependencies:
31 | 
32 | ```bash
33 |  npm install
34 | ```
35 | 
36 | 4. Create a .env file in the project root directory and add your Unsplash API access key:
37 | 
38 | ```bash
39 |  echo "REACT_APP_UNSPLASH_API_KEY=your-unsplash-api-key" > .env
40 | ```
41 | 
42 | Make sure to replace `your-unsplash-api-key` with your actual API access key obtained from the Unsplash Developer Dashboard.
43 | 
44 | 5. Start the development server:
45 | 
46 | ```bash
47 |  npm start
48 | ```
49 | 
50 | ## Contributing 🚀 (Hacktoberfest)
51 | 
52 | Contributions are welcome! If you'd like to contribute to the project, Please refer to our **[Contributing Guidelines](CONTRIBUTING.md)** for more details on how to contribute to this project.
53 | 
54 | ## Thank you for contributing to our project!
55 | 
56 | Your contributions are valuable, and we appreciate your effort in making our project better.
57 | 
58 |  <br>
59 | 
60 | **If you like the project, please feel free to give it a ⭐️**
61 | 
62 | ## Contributors
63 | 
64 | Meet the talented individuals who have contributed to SnapGrid:
65 | 
66 | <a href="https://github.com/Vijaykv5/SnapGrid/graphs/contributors">
67 |  <img src="https://contrib.rocks/image?repo=Vijaykv5/SnapGrid" />
68 | </a>
69 | 


--------------------------------------------------------------------------------
/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/favicon.ico


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* Hide scrollbar for Chrome, Safari, and Opera */
 6 | .hide-scrollbar::-webkit-scrollbar {
 7 |   display: none;
 8 | }
 9 | 
10 | /* Hide scrollbar for Firefox */
11 | .hide-scrollbar {
12 |   scrollbar-width: none;
13 |   -ms-overflow-style: none; /* IE and Edge */
14 | }
15 | 
16 | ::selection {
17 |   background: #8b5cf6;
18 |   color: black;
19 | }
20 | 
21 | /* BROWSER SCROLLBAR */
22 | :root {
23 |   --primary: black;
24 |   --secondary: #8b5cf6;
25 |   /* --secondary: #8f8f8f; */
26 | }
27 | 
28 | /* Firefox */
29 | * {
30 |   scrollbar-width: thin;
31 |   scrollbar-color: var(--secondary) var(--primary);
32 | }
33 | 
34 | /* Chrome, Edge, and Safari */
35 | *::-webkit-scrollbar {
36 |   width: 6px;
37 | }
38 | 
39 | *::-webkit-scrollbar-track {
40 |   background: var(--primary);
41 | }
42 | 
43 | *::-webkit-scrollbar-thumb {
44 |   background-color: var(--secondary);
45 |   border-radius: 50px;
46 |   border: 3px solid var(--secondary);
47 | }
48 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="index.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10 |     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
11 |     <title>SnapGrid</title>
12 | </head>
13 | 
14 | <body>
15 |     <div id="root">
16 | 
17 |     </div>
18 |     <script type="module" src="src/index.tsx"></script>
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |   command = "npm run build"
 3 |   publish = "dist"
 4 |   base = "/"
 5 | 
 6 | [[redirects]]
 7 |   from = "/*"
 8 |   to = "/index.html"
 9 |   status = 200
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "SnapGrid",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "format": "prettier --write \"src/**/*.js\"",
 7 |     "start": "parcel index.html",
 8 |     "test": "echo \"Error: no test specified\" && exit 1",
 9 |     "build": "parcel build index.html"
10 |   },
11 |   "keywords": [],
12 |   "author": "",
13 |   "license": "ISC",
14 |   "devDependencies": {
15 |     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
16 |     "buffer": "^6.0.3",
17 |     "crypto-browserify": "^3.12.0",
18 |     "events": "^3.3.0",
19 |     "os-browserify": "^0.3.0",
20 |     "parcel": "^2.9.3",
21 |     "path-browserify": "^1.0.1",
22 |     "postcss": "^8.4.24",
23 |     "prettier": "^3.0.3",
24 |     "prettier-plugin-tailwindcss": "^0.5.5",
25 |     "process": "^0.11.10",
26 |     "stream-browserify": "^3.0.0",
27 |     "tailwindcss": "^3.3.2"
28 |   },
29 |   "dependencies": {
30 |     "@fortawesome/fontawesome-svg-core": "^6.4.2",
31 |     "@fortawesome/free-brands-svg-icons": "^6.4.2",
32 |     "@fortawesome/free-regular-svg-icons": "^6.4.2",
33 |     "@fortawesome/free-solid-svg-icons": "^6.4.2",
34 |     "@fortawesome/react-fontawesome": "^0.2.0",
35 |     "@headlessui/react": "^1.7.17",
36 |     "@types/jest": "^29.5.5",
37 |     "@types/node": "^20.8.2",
38 |     "@types/react": "^18.2.24",
39 |     "@types/react-dom": "^18.2.9",
40 |     "dotenv": "^16.3.1",
41 |     "react": "^18.2.0",
42 |     "react-code-blocks": "^0.1.4",
43 |     "react-dom": "^18.2.0",
44 |     "react-icons": "^4.11.0",
45 |     "react-infinite-scroll-component": "^6.1.0",
46 |     "react-lottie": "^1.2.3",
47 |     "react-router-dom": "^6.18.0",
48 |     "react-share": "^4.4.1",
49 |     "typescript": "^5.2.2"
50 |   },
51 |   "overrides": {
52 |     "react-lottie": {
53 |       "react": "^0.14.7 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
54 |     }
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/.MainSection.tsx.swp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/.MainSection.tsx.swp


--------------------------------------------------------------------------------
/src/MainSection.tsx:
--------------------------------------------------------------------------------
  1 | import dotenv from 'dotenv';
  2 | import React, { useEffect, useRef, useState } from 'react';
  3 | import InfiniteScroll from 'react-infinite-scroll-component';
  4 | import { Outlet } from 'react-router-dom';
  5 | 
  6 | import Noresults from './components/Noresults';
  7 | import ShimmerLoading from './components/ShimmerLoading/ShimmerLoading';
  8 | import BackToTopButton from './components/menu/BackToTopButton';
  9 | import Header from './components/menu/Header';
 10 | import ImageCard from './components/menu/ImageCard/ImageCard';
 11 | import SelectionMenu from './components/menu/SelectionMenu';
 12 | import { links } from './utils/links';
 13 | 
 14 | const API_URL = 'https://api.unsplash.com/search/photos';
 15 | const Image_count = 28;
 16 | dotenv.config();
 17 | 
 18 | const MainSection = () => {
 19 |   const searchInput = useRef<any>(null);
 20 |   const FavouriteList: string[] = JSON.parse(
 21 |     localStorage.getItem('UserFavourite') ?? '[]'
 22 |   );
 23 |   const [images, setImages] = useState<any[]>([]);
 24 |   const [page, setPage] = useState<number>(1);
 25 |   const [bannerImage, setBannerImage] = useState<string | null>(null);
 26 |   const [linkInfo, setlinkInfo] = useState<any>({});
 27 |   const [isLoading, setIsLoading] = useState<boolean>(false);
 28 |   const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
 29 |   const [error, setError] = useState(false);
 30 |   const [lastPage, setLastPage] = useState(false);
 31 |   const [active, setActive] = useState<number>(-1);
 32 |   const [filter, setFilter] = useState<string>('');
 33 |   const [searchTerm, setSearchTerm] = useState('')
 34 | 
 35 |   const filterImage = () => {
 36 |     if (filter === 'Favourite') {
 37 |       setImages(images.filter((image) => FavouriteList.includes(image?.id)));
 38 |     } else {
 39 |       fetchImages();
 40 |     }
 41 |   };
 42 | 
 43 |   const updateQueryParams = (search: string, page: number) => {
 44 |     const currentUrl = window.location.href;
 45 |     const newParams = new URLSearchParams(window.location.search);
 46 |     newParams.set('search', search);
 47 |     newParams.set('page', String(page));
 48 |     const newUrl = `${currentUrl.split('?')[0]}?${newParams.toString()}`;
 49 |     window.history.pushState({}, '', newUrl);
 50 |   };
 51 | 
 52 |   const fetchImages = async () => {
 53 |     let results = [];
 54 |     try {
 55 |       setIsLoading(true);
 56 |       const data = await fetch(
 57 |         `${API_URL}?query=${searchInput.current?.value}&page=${page}&per_page=${Image_count}&client_id=${process.env.REACT_APP_UNSPLASH_API_KEY}`
 58 |       );
 59 |       const json = await data.json();
 60 |       results = json.results ? json.results : [];
 61 | 
 62 |       if (results < 28) setLastPage(true);
 63 | 
 64 |       setImages(results);
 65 | 
 66 |       if (filter === 'Favourite') {
 67 |         filterImage();
 68 |       }
 69 | 
 70 |       setIsLoading(false);
 71 |     } catch (error) {
 72 |       console.log(error);
 73 |     }
 74 | 
 75 |     if (results.length == 0 && searchInput.current?.value.length != 0) {
 76 |       setError(true);
 77 |     } else {
 78 |       setError(false);
 79 |     }
 80 |   };
 81 | 
 82 |   const fetchMore = async () => {
 83 |     let results = [];
 84 |     try {
 85 |       setIsLoading(true);
 86 |       const data = await fetch(
 87 |         `${API_URL}?query=${searchInput.current?.value}&page=${page}&per_page=${Image_count}&client_id=${process.env.REACT_APP_UNSPLASH_API_KEY}`
 88 |       );
 89 |       const json = await data.json();
 90 |       results = json.results ? json.results : [];
 91 | 
 92 |       if (results < 28) setLastPage(true);
 93 | 
 94 |       setImages(images.concat(results));
 95 | 
 96 |       if (filter === 'Favourite') {
 97 |         filterImage();
 98 |       }
 99 | 
100 |       setIsLoading(false);
101 |     } catch (error) {
102 |       console.log(error);
103 |     }
104 | 
105 |     if (results?.length == 0 && searchInput.current?.value.length != 0) {
106 |       setError(true);
107 |     } else {
108 |       setError(false);
109 |     }
110 |   };
111 | 
112 |   const handleClick = (e: any) => {
113 |     e.preventDefault();
114 |     const titleArray = links.map((obj) => obj.title);
115 |     const index = titleArray.indexOf(searchInput.current?.value);
116 |     if (index === -1) {
117 |       setBannerImage(null);
118 |       setActive(-1);
119 |     } else {
120 |       setActive(index);
121 |       const selectedLink = links[index];
122 |       setBannerImage(selectedLink.url);
123 |       setlinkInfo(selectedLink);
124 |       setSearchPerformed(true);
125 |     }
126 |     // images != null ? (
127 |     //   fetchImages()
128 |     // ) : (
129 |     //   <div className='font-bold text-black'>Error</div>
130 |     // );
131 |     fetchImages();
132 |     setPage(1);
133 |     setPage(1);
134 | 
135 |     updateQueryParams(String(searchInput.current?.value), 1);
136 |   };
137 | 
138 |   const handleSelection = (selectionIndex: number) => {
139 |     const selectedLink = links[selectionIndex];
140 |     if (selectedLink) {
141 |       searchInput.current.value = selectedLink.title;
142 |       fetchImages();
143 |       setPage(1);
144 |       setBannerImage(selectedLink.url);
145 |       setlinkInfo(selectedLink);
146 |       setSearchPerformed(true);
147 | 
148 |       updateQueryParams(String(searchInput.current?.value), 1);
149 |     } else {
150 |       setBannerImage(null);
151 |     }
152 |   };
153 | 
154 |   // const navigationHandler = (page: number) => {
155 |   //   setPage(page);
156 |   //   document.querySelector('#image_1')?.scrollIntoView({
157 |   //     behavior: 'smooth',
158 |   //   });
159 |   // };
160 | 
161 |   useEffect(() => {
162 |     fetchMore();
163 |   }, [page]);
164 | 
165 |   useEffect(() => {
166 |     filterImage();
167 |   }, [filter]);
168 |   useEffect(() => {
169 |     setFilter('');
170 |   }, [bannerImage]);
171 | 
172 |   useEffect(() => {
173 |     const queryParams = new URLSearchParams(window.location.search);
174 | 
175 |     try {
176 |       const s = queryParams.get('search');
177 |       const p =
178 |         Number(queryParams.get('page')) && Number(queryParams.get('page')) > 0
179 |           ? Number(queryParams.get('page'))
180 |           : 1;
181 | 
182 |       console.log(s, p);
183 | 
184 |       searchInput.current.value = s;
185 |       setPage(p);
186 | 
187 |       const titleArray = links.map((obj) => obj.title);
188 |       const index = titleArray.indexOf(String(s));
189 |       if (index === -1) {
190 |         setBannerImage(null);
191 |       } else {
192 |         const selectedLink = links[index];
193 |         setBannerImage(selectedLink.url);
194 |         setlinkInfo(selectedLink);
195 |         setSearchPerformed(true);
196 |       }
197 | 
198 |       if (s) fetchImages();
199 |     } catch (error) {
200 |       console.log(error);
201 |     }
202 |   }, []);
203 | 
204 |   useEffect(() => {
205 |     const delayDebounceFn = setTimeout(() => {
206 |       console.log(searchTerm)
207 |       fetchImages();
208 |     }, 1000)
209 | 
210 |     return () => clearTimeout(delayDebounceFn)
211 |   }, [searchTerm])
212 | 
213 |   return (
214 |     <div className='dark:bg-black dark:h-screen h-full'>
215 |       <Header />
216 |       <div className='flex flex-col justify-center items-center'>
217 |         <div className='text-violet-500 dark:bg-black text-center font-bold text-5xl py-8 md:text-7xl w-full '>
218 |           Snap Grid
219 |         </div>
220 |       </div>
221 |       <div className='text-center m-0'>
222 |         <form className=' dark:bg-black m-0 py-8' onSubmit={handleClick}>
223 |           <input
224 |             className='md:w-96 sm:w-50 h-15 dark:bg-black dark:text-white border-violet-500 hover:border-violet-500 bg-gray-100 rounded-xl p-2 px-4 border-2 focus:dark:drop-shadow-[0px_0px_16px_rgba(132,92,246,1)] live-search-field' autoComplete='off'
225 |             placeholder='Search here ...' onChange={(e) => setSearchTerm(e.target.value)}
226 |             ref={searchInput}
227 |           />
228 |         </form>
229 |       </div>
230 |       <div className='dark:bg-black m-0 flex flex-wrap'>
231 |         <div className='dark:bg-black p-5 m-0 mx-auto md:max-w-screen-xl overflow-x-scroll hide-scrollbar'>
232 |           <SelectionMenu
233 |             links={links}
234 |             handleSelection={handleSelection}
235 |             active={active}
236 |             setActive={setActive}
237 |           />
238 |         </div>
239 |         <div className='dark:bg-black p-5 m-0 mx-auto md:max-w-screen-xl'>
240 |           <button
241 |             onClick={() => setFilter('')}
242 |             className={`rounded-l-lg border p-2 border-r-0  dark:text-black ${
243 |               !filter
244 |                 ? 'bg-black dark:bg-white text-white dark:text-black'
245 |                 : 'bg-white dark:bg-black text-black dark:text-white'
246 |             }`}
247 |           >
248 |             All
249 |           </button>
250 |           <button
251 |             onClick={() => setFilter('Favourite')}
252 |             className={`rounded-r-lg border p-2 border-l-0 ${
253 |               filter === 'Favourite'
254 |                 ? 'bg-black dark:bg-white text-white dark:text-black'
255 |                 : 'bg-white dark:bg-black text-black dark:text-white'
256 |             }`}
257 |           >
258 |             Favourite
259 |           </button>
260 |         </div>
261 |       </div>
262 |       {isLoading && !bannerImage && searchPerformed ? (
263 |         <ShimmerLoading />
264 |       ) : (
265 |         <div>
266 |           {bannerImage && (
267 |             <div className='flex justify-between dark:bg-black pr-5 xs:px-5 xs:flex-col-reverse xs:mb-6'>
268 |               <div className='top-10 left-0 p-4 dark:text-white max-w-2xl xs:p-0'>
269 |                 <h1 className='top-15 font-bold text-left pt-20 px-20 text-5xl xs:p-0'>
270 |                   {linkInfo?.title}
271 |                 </h1>
272 |                 <div
273 |                   className='px-20 font-light dark:text-slate-200 pt-5 xs:px-0'
274 |                   dangerouslySetInnerHTML={{ __html: linkInfo?.description }}
275 |                 />
276 |               </div>
277 |               <img
278 |                 src={bannerImage}
279 |                 alt='Banner'
280 |                 className='w-3/6 h-90 shadow-md rounded-lg xs:w-full xs:mb-6'
281 |               />
282 |             </div>
283 |           )}
284 | 
285 |           {error && <Noresults />}
286 |           <InfiniteScroll
287 |             dataLength={images.length}
288 |             next={() => setPage(page + 1)}
289 |             hasMore={lastPage}
290 |             className='dark:bg-black grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 p-5'
291 |             loader={<></>}
292 |           >
293 |             {!error &&
294 |               images &&
295 |               images.map((image, index) => {
296 |                 return (
297 |                   <ImageCard
298 |                     key={image?.id}
299 |                     url={image?.urls?.small}
300 |                     download={image?.urls?.full}
301 |                     ImageId={image?.id}
302 |                   />
303 |                 );
304 |               })}
305 |             {/* {filter === 'Favourite' ? (
306 |               !error &&
307 |               images &&
308 |               FavouriteList.some((element) =>
309 |                 images.map(({ id }) => id).includes(element)
310 |               ) &&
311 |               FavouriteList.length !== 0 ? (
312 |                 images.map((image, index) => {
313 |                   if (FavouriteList.includes(image.id)) {
314 |                     return (
315 |                       <ImageCard
316 |                         key={image?.id}
317 |                         url={image?.urls?.small}
318 |                         download={image?.urls?.full}
319 |                         ImageId={image?.id}
320 |                       />
321 |                     );
322 |                   }
323 |                 })
324 |               ) : (
325 |                 <NoImagesFound />
326 |               )
327 |             ) : (
328 |               !error &&
329 |               images &&
330 |               images.map((image, index) => {
331 |                 return (
332 |                   <ImageCard
333 |                     key={image?.id}
334 |                     url={image?.urls?.small}
335 |                     download={image?.urls?.full}
336 |                     ImageId={image?.id}
337 |                   />
338 |                 );
339 |               })
340 |             )} */}
341 |           </InfiniteScroll>
342 |         </div>
343 |       )}
344 |       <Outlet />
345 |       {/* <div className='flex justify-center dark:bg-black py-4 '>
346 |         {page > 1 && (
347 |           <button
348 |             onClick={() => {
349 |               updateQueryParams(searchInput.current?.value, page - 1);
350 |               setPage(page - 1);
351 |             }}
352 |             className=' p-1 px-2 bg-violet-500 text-white w-fit rounded-md'
353 |           >
354 |             Previous
355 |           </button>
356 |         )}
357 |         {page < totalPages && (
358 |           <button
359 |             onClick={() => {
360 |               updateQueryParams(searchInput.current?.value, page + 1);
361 |               setPage(page + 1);
362 |             }}
363 |             className='p-1 px-2 mx-6 bg-violet-500 text-white w-fit rounded-md'
364 |           >
365 |             Next
366 |           </button>
367 |         )}
368 |       </div> */}
369 |       <BackToTopButton />
370 |     </div>
371 |   );
372 | };
373 | 
374 | export default MainSection;
375 | 


--------------------------------------------------------------------------------
/src/Pages/DocsPage.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { CodeBlock, CopyBlock, dracula, shadesOfPurple } from "react-code-blocks";
  3 | import Navbar from "./Navbar";
  4 | import fork from "../components/assets/fork.png";
  5 | import pr from "../components/assets/pr.png";
  6 | 
  7 | export default function DocsPage() {
  8 |   return (
  9 |     <div
 10 |       style={{
 11 |         background:
 12 |           'linear-gradient(31.67deg, rgba(3, 14, 21, 0.96) -2.58%, #05121B 70.47%)',
 13 |       }}
 14 |       className="h-screen w-screen overflow-x-hidden overflow-y-scroll"
 15 |       >
 16 |       <Navbar />
 17 |       <div className="py-20 px-40 gap-10 flex flex-col text-[#FFFFFF] items-center">
 18 |         <div className="text-3xl xs:text-xl xs:w-screen  xs:text-center font-bold ">
 19 |           Steps to setup the project locally:
 20 |         </div>
 21 |         <div className="text-lg md:text-xl flex flex-col gap-10 xs:w-screen xs:text-start xs:ml-3">
 22 |           <div className="text-lg md:text-xl xs:text-sm ">
 23 |             <span className='text-[#6F4FF2] font-bold  '>Step 1:</span> Create a fork of the repository.
 24 |             <img src={fork} alt='fork' className="mx-auto mt-6 d-block xs:w-screen xs:h-10 "/>
 25 |           </div>
 26 |           <div className="text-lg md:text-xl xs:text-sm">
 27 |             <span className='text-[#6F4FF2] font-bold'>Step 2:</span> Clone the forked repository to create a local copy on your machine. 
 28 |             <CopyBlock
 29 |               text={`git clone https://github.com/<your username>/SnapGrid.git`} 
 30 |               showLineNumbers={false} 
 31 |               language='bash'
 32 |               codeBlock 
 33 |               theme={shadesOfPurple}
 34 |             />
 35 |           </div>
 36 |           <div className="text-lg md:text-xl xs:text-sm">
 37 |             <span className='text-[#6F4FF2] font-bold'>Step 3:</span> Navigate to the project directory.
 38 |             <CopyBlock 
 39 |               text={`cd SnapGrid`} 
 40 |               showLineNumbers={false} 
 41 |               language='bash'
 42 |               codeBlock 
 43 |               theme={shadesOfPurple}
 44 |             />
 45 |           </div>
 46 |           <div className="text-lg md:text-xl xs:text-sm">
 47 |             <span className='text-[#6F4FF2] font-bold'>Step 4:</span> Add an upstream reference to the remote<br/> repository.
 48 |             <CopyBlock 
 49 |               text={`git remote add origin https://github.com/<your username>/SnapGrid.git`} 
 50 |               showLineNumbers={false} 
 51 |               language='bash'
 52 |               codeBlock 
 53 |               theme={shadesOfPurple}
 54 |             />
 55 |           </div>
 56 |           <div className="text-lg md:text-xl xs:text-sm">
 57 |             <span className='text-[#6F4FF2] font-bold'>Step 5:</span> Pull the latest changes from the upstream<br/> repository to your keep your local copy up-to-date. 
 58 |             <CopyBlock 
 59 |               text={`git pull origin master`} 
 60 |               showLineNumbers={false} 
 61 |               language='bash'
 62 |               codeBlock 
 63 |               theme={shadesOfPurple}
 64 |             />
 65 |           </div>
 66 |           <div className="text-lg md:text-xl xs:text-sm">
 67 |             <span className='text-[#6F4FF2] font-bold'>Step 6:</span> Install the necessary dependencies using npm install. 
 68 |             <CopyBlock 
 69 |               text={`npm install`} 
 70 |               showLineNumbers={false} 
 71 |               language='bash'
 72 |               codeBlock 
 73 |               theme={shadesOfPurple}
 74 |             />
 75 |           </div>
 76 |           <div className="text-lg md:text-xl xs:text-sm">
 77 |             <span className='text-[#6F4FF2] font-bold'>Step 7:</span> Create a .env file in the project root directory and add your Unsplash API access key: 
 78 |             <CopyBlock
 79 |               text={`echo "REACT_APP_UNSPLASH_API_KEY=your-unsplash-api-key" > .env`} 
 80 |               showLineNumbers={false} 
 81 |               language='bash'
 82 |               codeBlock 
 83 |               theme={shadesOfPurple}
 84 |             />
 85 |             Make sure to replace <span className="font-bold" >"your-unsplash-api-key"</span> with your actual API access key obtained from the Unsplash Developer Dashboard.
 86 |           </div>
 87 |           <div className="text-lg md:text-xl xs:text-sm">
 88 |             <span className='text-[#6F4FF2] font-bold'>Step 8:</span> Start the local server using npm start.
 89 |             <CopyBlock 
 90 |               text={`npm start`} 
 91 |               showLineNumbers={false}
 92 |               language='bash' 
 93 |               codeBlock 
 94 |               theme={shadesOfPurple}
 95 |             />
 96 |           </div>
 97 |           <div className="text-lg md:text-xl xs:text-sm">
 98 |             <span className='text-[#6F4FF2] font-bold'>Step 9:</span> Create a new branch and start working on the issue.
 99 |             <CopyBlock 
100 |               text={`git branch -b <branch name>
101 | git checkout <branch name>`} 
102 |               showLineNumbers={false}
103 |               language='bash' 
104 |               codeBlock 
105 |               theme={shadesOfPurple}
106 |             />
107 |           </div>
108 |           <div className="text-lg md:text-xl xs:text-sm">
109 |             <span className='text-[#6F4FF2] font-bold'>Step 10:</span> Stage the changes on the new branch. 
110 |             <CopyBlock 
111 |               text={`git add <files to stage>`} 
112 |               showLineNumbers={false} 
113 |               language='bash'
114 |               codeBlock 
115 |               theme={shadesOfPurple}
116 |             />
117 |           </div>
118 |           <div className="text-lg md:text-xl xs:text-sm">
119 |             <span className='text-[#6F4FF2] font-bold'>Step 11:</span> Commit the changes on the new branch. 
120 |             <CopyBlock 
121 |               text={`git commit -m "<commit message>"`} 
122 |               showLineNumbers={false} 
123 |               language='bash'
124 |               codeBlock 
125 |               theme={shadesOfPurple}
126 |             />
127 |           </div>
128 |           <div className="text-lg md:text-xl xs:text-sm">
129 |             <span className='text-[#6F4FF2] font-bold'>Step 12:</span> Push the changes to remote repository. 
130 |             <CopyBlock
131 |               text={`git push origin <branch name>`} 
132 |               showLineNumbers={false} 
133 |               language='bash'
134 |               codeBlock 
135 |               theme={shadesOfPurple}
136 |             />
137 |           </div>
138 |           <div className="text-lg md:text-xl xs:text-sm">
139 |             <span className='text-[#6F4FF2] font-bold'>Step 13:</span> Create a pull request by clicking on Compare & pull request button. 
140 |             <img src={pr} alt='fork' className="mx-auto mt-6 d-block"/>
141 |           </div>
142 |           <div className="text-lg md:text-xl xs:text-sm">
143 |             <span className='text-[#6F4FF2] font-bold'>Step 14:</span> Wait for your changes to be merged. 
144 |           </div>
145 |         </div>
146 |         <div className="text-3xl xs:text-2xl ">
147 |           Congratulations, you have successfully contributed to the <span className="font-bold">SnapGrid! 🎉</span>
148 |         </div>
149 |       </div>
150 |     </div>
151 |   );
152 | }


--------------------------------------------------------------------------------
/src/Pages/HomePage.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { useEffect,useState,useRef } from 'react';
  3 | import { Link } from 'react-router-dom';
  4 | import rocket from '../components/assets/RocketLaunch.png';
  5 | import bg from '../components/assets/bg.png';
  6 | import nft from '../components/assets/nft.png';
  7 | import Navbar from './Navbar';
  8 | import Footer from '../components/footer/Footer'
  9 | import '../utils/style.css';
 10 | 
 11 | 
 12 | export default function HomePage() {
 13 | 
 14 |   // Animation in home Page
 15 |   const [isVisible, setIsVisible] = useState(false);
 16 |   const ref = useRef(null);
 17 |   const ref2 = useRef(null);
 18 |   const ref3 = useRef(null);
 19 |   const ref4 = useRef(null);
 20 | 
 21 | 
 22 |   // Multiple Ref to animate multiple elements [II]
 23 |   useEffect(() => {
 24 |     if(isVisible){
 25 |       ref2.current.classList.add('slide__in2');
 26 |       ref.current.classList.add('slide__in');
 27 |       ref3.current.classList.add('slide__in3');
 28 |       ref4.current.classList.add('slide__in');
 29 |     }
 30 |     else{
 31 |       ref.current.classList.remove('slide__in');
 32 |       ref2.current.classList.remove('slide__in2');
 33 |       ref3.current.classList.remove('slide__in3');
 34 |       ref4.current.classList.remove('slide__in');
 35 |     }
 36 |   })
 37 | 
 38 | 
 39 |   // Intersection Observer [I]
 40 |   useEffect(() => {
 41 |     const observer= new IntersectionObserver(([entry])=>{
 42 |       setIsVisible(entry.isIntersecting);
 43 |       console.log(entry.isIntersecting);
 44 |     })
 45 |     observer.observe(ref.current);
 46 |     return ()=> observer.disconnect();
 47 | },[]);
 48 | 
 49 |   return (
 50 |     <div
 51 |       style={{
 52 |         background:
 53 |           'linear-gradient(31.67deg, rgba(3, 14, 21, 0.96) -2.58%, #05121B 70.47%)',
 54 |       }}
 55 |       className='h-screen overflow-y-scroll'
 56 |     >
 57 |       <Navbar />
 58 |       <div  className=' relative lg:flex-row pt-12 mb-20 md:pt-20 space-y-14 lg:space-y-0  px-6 flex flex-col-reverse lg:px-20 py-8 xs:py-0 justify-between'>
 59 |         <div className='hidden lg:block absolute top-0 right-0'>
 60 |           <img src={bg} className='h-48 w-80' />
 61 |         </div>
 62 |         {/* headline and subhead... */}
 63 |         <div  className='flex flex-col space-y-10  '>
 64 |           <div className='home__image' ref={ref}>
 65 |             <h1 className='text-[#FFFFFF] text-4xl md:text-6xl lg:text-7xl font-semibold'>
 66 |               Discover.Explore.
 67 |             </h1>
 68 |             <p className='text-[#FFFFFF] text-4xl md:text-6xl lg:text-7xl font-semibold'>
 69 |               Share.
 70 |             </p>
 71 |           </div>
 72 |           <p  ref={ref2} className='home__image text-[#FFFFFF]  text-lg md:text-xl leading-8 max-w-2xl'>
 73 |             <span className='text-[#6F4FF2] font-normal '>SnapGrid</span> is a
 74 |             versatile web platform that simplifies image discovery and
 75 |             downloads. Users can effortlessly find and acquire high-quality
 76 |             images spanning various categories, from nature to architecture.
 77 |           </p>
 78 |           <div ref={ref3} className='home__image'>
 79 |            
 80 |               <div style={{
 81 |   background: 'linear-gradient(270deg, #6F4FF2 0%, #6F4FF2 100%)',
 82 | }} className='rounded-2xl px-10 py-3 flex items-center text-[#FFFFFF] w-40'>
 83 |   <a href='/search' className='flex items-center'>
 84 |     <img className='pr-3' src={rocket} alt='' />
 85 |     Explore
 86 |   </a>
 87 | </div>
 88 | 
 89 |               
 90 |             
 91 |           </div>
 92 |         </div>
 93 | 
 94 |         {/* Image ... */}
 95 |         <div className='home__image' ref={ref4}>
 96 |           <img
 97 |             
 98 |             src={nft}
 99 |             className='max-w-xs md:max-w-md lg:max-w-sm'
100 |             alt='img.png'
101 |           />
102 |         </div>
103 |       </div>
104 |       <Footer />
105 |     </div>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/src/Pages/LoginPage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import cam from '../components/assets/cam.png';
 3 | import { Link } from 'react-router-dom';
 4 | function LoginPage() {
 5 |     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 6 |         e.preventDefault()
 7 |     }
 8 |     return (
 9 |         <section className="bg-gray-900 w-full h-max">
10 |             <div className="flex sm:h-screen  xs:h-screen  flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
11 |                 <Link to="/" className="flex items-center mb-6 text-2xl font-semibold text-white">
12 |                     <img className='w-[4.5rem]' src={cam} alt='cam.png' />
13 |                     SnapGrid
14 |                 </Link>
15 |                 <div className="w-full  rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 bg-gray-800 border-gray-700">
16 |                     <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
17 |                         <h1 className="text-xl font-bold leading-tight tracking-tight  md:text-2xl text-white">
18 |                             Login
19 |                         </h1>
20 |                         <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit}>
21 |                             <div>
22 |                                 <label className="block mb-2 text-sm font-medium text-white">Your email</label>
23 |                                 <input type="email" name="email" id="email" className="bg-gray-50 sm:text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 " placeholder="name@example.com" required />
24 |                             </div>
25 |                             <div>
26 |                                 <label className="block mb-2 text-sm font-medium text-white"> Password</label>
27 |                                 <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••" className="bg-gray-50 sm:text-sm rounded-lg  block w-full p-2.5 bg-gray-700 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" required />
28 |                             </div>
29 |                             <button type="submit" className="text-white  focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 
30 |                             w-full "
31 |                                 style={{
32 |                                     background: 'linear-gradient(270deg, #6F4FF2 0%, #6F4FF2 100%)',
33 |                                 }}>Login</button>
34 |                             <p className="text-sm font-light text-gray-400">
35 |                                 Don't Have account? <Link to="/signup"
36 |                                     className="font-medium hover:underline text-primary-500"
37 |                                 >
38 | 
39 |                                     SignUp
40 | 
41 |                                 </Link>
42 |                             </p>
43 |                         </form>
44 |                     </div>
45 |                 </div>
46 |             </div>
47 |         </section>
48 |     )
49 | }
50 | 
51 | export default LoginPage


--------------------------------------------------------------------------------
/src/Pages/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import user from '../components/assets/User.png';
 4 | import cam from '../components/assets/cam.png';
 5 | import { Link } from 'react-router-dom';
 6 | import HamburgerMenu from '@/components/menu/HamburgerMenu';
 7 | import '../utils/drawer.css'
 8 | export default function Navbar() {
 9 | 
10 |   const [visibility,setVisibility]=useState(false);
11 | 
12 |   const clickHandler=()=>{
13 |     visibility ? setVisibility(false) : setVisibility(true)
14 |   }
15 | 
16 |   return (
17 |     <div className='flex flex-col'>
18 |       <nav className='py-8 px-12 flex items-center justify-between'>
19 |         <div className='flex items-center'>
20 |         <Link to={'/'}>
21 |           <div className='flex'>
22 |             <img src={cam} alt='cam.png' className='w-12 lg:w-[4.5rem] cursor-pointer' />
23 |           <p className='text-2xl  p-2  lg:text-[32px] text-[#FFFFFF] font-semibold'>
24 |             SnapGrid
25 |           </p>
26 |           </div>
27 |           </Link>
28 |         </div>
29 |         <HamburgerMenu  onClick={clickHandler} visibility={visibility} />
30 |         <div className='hidden md:block'>
31 |           <ul className='flex space-x-10 text-[16px] text-[#FFFFFF] items-center'>
32 |             <Link to={'/docs'}><li className='cursor-pointer font-semibold text-lg'>Docs</li></Link>
33 |             <a href='https://github.com/Vijaykv5/SnapGrid' target='_blank'><li className='cursor-pointer font-semibold text-lg'>Github</li></a>
34 |             <li>
35 |               <Link to='/signup'>
36 |                 <button
37 |                   className='rounded-[1.25rem] px-8 py-2 flex items-center font-semibold'
38 |                   style={{
39 |                     background: 'linear-gradient(270deg, #6F4FF2 0%, #6F4FF2 100%)',
40 |                   }}
41 |                 >
42 |                   <img src={user} className='pr-3 font-semibold text-lg' alt='user.png' />
43 |                   Sign Up
44 |                 </button>
45 |               </Link>
46 |             </li>
47 |           </ul>
48 |         </div>
49 |       </nav>
50 | 
51 |       <div className={`common  ${visibility ? "visible__navbar__drawer" : "hidden__navbar__drawer"} drawer__container `}>
52 |         <div className={`flex justify-evenly items-center flex-col ${visibility ? "visible__drawer__container" : "hidden__drawer__container"} `}>
53 |           <a href='/docs' className=' font-bold text-white text-2xl m-2'>Docs</a>
54 |           <a href='https://github.com/Vijaykv5/SnapGrid' className='font-bold text-white text-2xl m-2 '>Github</a>
55 |           <Link to='/signup'>
56 |             <button
57 |               className='rounded-[1.25rem] px-8 py-2 flex items-center font-semibold text-white m-2 '
58 |               style={{
59 |                 background: 'linear-gradient(270deg, #6F4FF2 0%, #6F4FF2 100%)',
60 |               }}
61 |             >
62 |               <img src={user} className='pr-3 font-semibold text-lg' alt='user.png' />
63 |               Sign Up
64 |             </button>
65 |           </Link>
66 |                 </div>
67 |       </div>
68 |               
69 |     </div>
70 |   );
71 | }


--------------------------------------------------------------------------------
/src/Pages/SignUpPage.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import cam from '../components/assets/cam.png';
 3 | import { Link } from 'react-router-dom';
 4 | function SignUpPage() {
 5 |     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 6 |         e.preventDefault()
 7 |     }
 8 |     return (
 9 |         <section className="bg-gray-900 w-full h-max">
10 |             <div className="flex sm:h-screen  xs:h-screen  flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
11 |                 <Link to="/" className="flex items-center mb-6 text-2xl font-semibold text-white">
12 |                     <img className='w-[4.5rem]' src={cam} alt='cam.png' />
13 |                     SnapGrid
14 |                 </Link>
15 |                 <div className="w-full  rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 bg-gray-800 border-gray-700">
16 |                     <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
17 |                         <h1 className="text-xl font-bold leading-tight tracking-tight  md:text-2xl text-white">
18 |                             Create account
19 |                         </h1>
20 |                         <form className="space-y-4 md:space-y-6" onSubmit={handleSubmit}>
21 |                             <div>
22 |                                 <label className="block mb-2 text-sm font-medium text-white">User Name</label>
23 |                                 <input type="text" name="userName" placeholder="User Name" className="bg-gray-50 sm:text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 " required />
24 |                             </div>
25 |                             <div>
26 |                                 <label className="block mb-2 text-sm font-medium text-white">Your email</label>
27 |                                 <input type="email" name="email" id="email" className="bg-gray-50 sm:text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 " placeholder="name@example.com" required />
28 |                             </div>
29 |                             <div>
30 |                                 <label className="block mb-2 text-sm font-medium text-white"> Password</label>
31 |                                 <input type="password" name="confirm-password" id="confirm-password" placeholder="••••••••" className="bg-gray-50 sm:text-sm rounded-lg  block w-full p-2.5 bg-gray-700 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" required />
32 |                             </div>
33 |                             <button type="submit" className="text-white  focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 
34 |                             w-full "
35 |                                 style={{
36 |                                     background: 'linear-gradient(270deg, #6F4FF2 0%, #6F4FF2 100%)',
37 |                                 }}>
38 |                                 Create an account
39 |                             </button>
40 |                             <p className="text-sm font-light text-gray-400">
41 |                                 Already have an account? <Link to="/login" className="font-medium hover:underline text-primary-500">
42 |                                     Login here
43 |                                 </Link>
44 |                             </p>
45 |                         </form>
46 |                     </div>
47 |                 </div>
48 |             </div>
49 |         </section>
50 |     )
51 | }
52 | 
53 | export default SignUpPage


--------------------------------------------------------------------------------
/src/components/NoImagesFound/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/NoImagesFound/.DS_Store


--------------------------------------------------------------------------------
/src/components/NoImagesFound/NoDataFound.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "v": "5.4.4",
   3 |   "fr": 60,
   4 |   "ip": 0,
   5 |   "op": 316,
   6 |   "w": 642,
   7 |   "h": 642,
   8 |   "nm": "NEW sin movs",
   9 |   "ddd": 0,
  10 |   "assets": [
  11 |     {
  12 |       "id": "comp_0",
  13 |       "layers": [
  14 |         {
  15 |           "ddd": 0,
  16 |           "ind": 1,
  17 |           "ty": 3,
  18 |           "nm": "parent sombra",
  19 |           "sr": 1,
  20 |           "ks": {
  21 |             "o": { "a": 0, "k": 100, "ix": 11 },
  22 |             "r": {
  23 |               "a": 1,
  24 |               "k": [
  25 |                 {
  26 |                   "i": { "x": [0.3], "y": [1] },
  27 |                   "o": { "x": [0.3], "y": [0] },
  28 |                   "t": 34,
  29 |                   "s": [64],
  30 |                   "e": [23]
  31 |                 },
  32 |                 {
  33 |                   "i": { "x": [0.437], "y": [0.995] },
  34 |                   "o": { "x": [0.7], "y": [0] },
  35 |                   "t": 92,
  36 |                   "s": [23],
  37 |                   "e": [-21]
  38 |                 },
  39 |                 {
  40 |                   "i": { "x": [0.358], "y": [1] },
  41 |                   "o": { "x": [0.544], "y": [0] },
  42 |                   "t": 133,
  43 |                   "s": [-21],
  44 |                   "e": [16]
  45 |                 },
  46 |                 {
  47 |                   "i": { "x": [0.326], "y": [0.985] },
  48 |                   "o": { "x": [0.595], "y": [0] },
  49 |                   "t": 183,
  50 |                   "s": [16],
  51 |                   "e": [0]
  52 |                 },
  53 |                 { "t": 220 }
  54 |               ],
  55 |               "ix": 10
  56 |             },
  57 |             "p": {
  58 |               "a": 1,
  59 |               "k": [
  60 |                 {
  61 |                   "i": { "x": 0.222, "y": 1 },
  62 |                   "o": { "x": 0, "y": 0 },
  63 |                   "t": 34,
  64 |                   "s": [240.252, 377.045, 0],
  65 |                   "e": [323.752, 265.045, 0],
  66 |                   "to": [13.917, -18.667, 0],
  67 |                   "ti": [-5.248, 0.545, 0]
  68 |                 },
  69 |                 {
  70 |                   "i": { "x": 0.453, "y": 0.528 },
  71 |                   "o": { "x": 0.785, "y": 0 },
  72 |                   "t": 88,
  73 |                   "s": [323.752, 265.045, 0],
  74 |                   "e": [334.252, 403.045, 0],
  75 |                   "to": [5.248, -0.545, 0],
  76 |                   "ti": [-24.248, -17.455, 0]
  77 |                 },
  78 |                 {
  79 |                   "i": { "x": 0.156, "y": 1 },
  80 |                   "o": { "x": 0.423, "y": 0.345 },
  81 |                   "t": 133,
  82 |                   "s": [334.252, 403.045, 0],
  83 |                   "e": [499.252, 415.045, 0],
  84 |                   "to": [24.248, 17.455, 0],
  85 |                   "ti": [-27.5, -2, 0]
  86 |                 },
  87 |                 { "t": 183.03515625 }
  88 |               ],
  89 |               "ix": 2
  90 |             },
  91 |             "a": { "a": 0, "k": [47.206, 48.054, 0], "ix": 1 },
  92 |             "s": {
  93 |               "a": 1,
  94 |               "k": [
  95 |                 {
  96 |                   "i": { "x": [0.2, 0.2, 0.2], "y": [1, 1, 1] },
  97 |                   "o": { "x": [0.15, 0.15, 0.15], "y": [0, 0, 0] },
  98 |                   "t": 34,
  99 |                   "s": [0, 0, 100],
 100 |                   "e": [240, 240, 100]
 101 |                 },
 102 |                 {
 103 |                   "i": { "x": [0.53, 0.53, 0.53], "y": [1, 1, 1] },
 104 |                   "o": { "x": [0.167, 0.167, 0.167], "y": [0, 0, 0] },
 105 |                   "t": 60,
 106 |                   "s": [240, 240, 100],
 107 |                   "e": [240, 240, 100]
 108 |                 },
 109 |                 {
 110 |                   "i": { "x": [0.16, 0.16, 0.16], "y": [1, 1, 1] },
 111 |                   "o": { "x": [0.42, 0.42, 0.42], "y": [0, 0, 0] },
 112 |                   "t": 133,
 113 |                   "s": [240, 240, 100],
 114 |                   "e": [400, 400, 100]
 115 |                 },
 116 |                 { "t": 183 }
 117 |               ],
 118 |               "ix": 6
 119 |             }
 120 |           },
 121 |           "ao": 0,
 122 |           "ip": 34,
 123 |           "op": 12647,
 124 |           "st": 18,
 125 |           "bm": 0
 126 |         },
 127 |         {
 128 |           "ddd": 0,
 129 |           "ind": 2,
 130 |           "ty": 4,
 131 |           "nm": "LUPA sombra",
 132 |           "parent": 1,
 133 |           "sr": 1,
 134 |           "ks": {
 135 |             "o": { "a": 0, "k": 100, "ix": 11 },
 136 |             "r": { "a": 0, "k": 0, "ix": 10 },
 137 |             "p": { "a": 0, "k": [26.162, 29.375, 0], "ix": 2 },
 138 |             "a": {
 139 |               "a": 1,
 140 |               "k": [
 141 |                 {
 142 |                   "i": { "x": 0.67, "y": 1 },
 143 |                   "o": { "x": 0.33, "y": 0 },
 144 |                   "t": 133,
 145 |                   "s": [59.528, 35.656, 0],
 146 |                   "e": [55.428, 43.556, 0],
 147 |                   "to": [-0.683, 1.317, 0],
 148 |                   "ti": [0.683, -1.317, 0]
 149 |                 },
 150 |                 { "t": 183 }
 151 |               ],
 152 |               "ix": 1
 153 |             },
 154 |             "s": { "a": 0, "k": [50, 50, 100], "ix": 6 }
 155 |           },
 156 |           "ao": 0,
 157 |           "shapes": [
 158 |             {
 159 |               "ty": "gr",
 160 |               "it": [
 161 |                 {
 162 |                   "ind": 0,
 163 |                   "ty": "sh",
 164 |                   "ix": 1,
 165 |                   "ks": {
 166 |                     "a": 1,
 167 |                     "k": [
 168 |                       {
 169 |                         "i": { "x": 0.2, "y": 1 },
 170 |                         "o": { "x": 0.167, "y": 0.167 },
 171 |                         "t": 35,
 172 |                         "s": [
 173 |                           {
 174 |                             "i": [
 175 |                               [-2.46, 0.083],
 176 |                               [-0.259, 19.058],
 177 |                               [1.377, 0.116],
 178 |                               [0, -19.883]
 179 |                             ],
 180 |                             "o": [
 181 |                               [3.106, -0.105],
 182 |                               [0.271, -19.881],
 183 |                               [-1.276, -0.107],
 184 |                               [0, 19.882]
 185 |                             ],
 186 |                             "v": [
 187 |                               [0.001, 36],
 188 |                               [2.204, 2.371],
 189 |                               [0.001, -36],
 190 |                               [-3.43, 1.971]
 191 |                             ],
 192 |                             "c": true
 193 |                           }
 194 |                         ],
 195 |                         "e": [
 196 |                           {
 197 |                             "i": [
 198 |                               [-19.923, 0],
 199 |                               [0, 19.882],
 200 |                               [19.923, 0],
 201 |                               [0, -19.883]
 202 |                             ],
 203 |                             "o": [
 204 |                               [19.923, 0],
 205 |                               [0, -19.883],
 206 |                               [-19.923, 0],
 207 |                               [0, 19.882]
 208 |                             ],
 209 |                             "v": [
 210 |                               [0.001, 36],
 211 |                               [36.074, 0],
 212 |                               [0.001, -36],
 213 |                               [-36.074, 0]
 214 |                             ],
 215 |                             "c": true
 216 |                           }
 217 |                         ]
 218 |                       },
 219 |                       {
 220 |                         "i": { "x": 0.765, "y": 0.384 },
 221 |                         "o": { "x": 0.8, "y": 0 },
 222 |                         "t": 60,
 223 |                         "s": [
 224 |                           {
 225 |                             "i": [
 226 |                               [-19.923, 0],
 227 |                               [0, 19.882],
 228 |                               [19.923, 0],
 229 |                               [0, -19.883]
 230 |                             ],
 231 |                             "o": [
 232 |                               [19.923, 0],
 233 |                               [0, -19.883],
 234 |                               [-19.923, 0],
 235 |                               [0, 19.882]
 236 |                             ],
 237 |                             "v": [
 238 |                               [0.001, 36],
 239 |                               [36.074, 0],
 240 |                               [0.001, -36],
 241 |                               [-36.074, 0]
 242 |                             ],
 243 |                             "c": true
 244 |                           }
 245 |                         ],
 246 |                         "e": [
 247 |                           {
 248 |                             "i": [
 249 |                               [-2.46, 0.083],
 250 |                               [-0.259, 19.058],
 251 |                               [1.377, 0.116],
 252 |                               [0, -19.883]
 253 |                             ],
 254 |                             "o": [
 255 |                               [3.106, -0.105],
 256 |                               [0.271, -19.881],
 257 |                               [-1.276, -0.107],
 258 |                               [0, 19.882]
 259 |                             ],
 260 |                             "v": [
 261 |                               [0.001, 36],
 262 |                               [2.204, 2.371],
 263 |                               [0.001, -36],
 264 |                               [-3.43, 1.971]
 265 |                             ],
 266 |                             "c": true
 267 |                           }
 268 |                         ]
 269 |                       },
 270 |                       {
 271 |                         "i": { "x": 0.2, "y": 1 },
 272 |                         "o": { "x": 0.21, "y": 0.549 },
 273 |                         "t": 84,
 274 |                         "s": [
 275 |                           {
 276 |                             "i": [
 277 |                               [-2.46, 0.083],
 278 |                               [-0.259, 19.058],
 279 |                               [1.377, 0.116],
 280 |                               [0, -19.883]
 281 |                             ],
 282 |                             "o": [
 283 |                               [3.106, -0.105],
 284 |                               [0.271, -19.881],
 285 |                               [-1.276, -0.107],
 286 |                               [0, 19.882]
 287 |                             ],
 288 |                             "v": [
 289 |                               [0.001, 36],
 290 |                               [2.204, 2.371],
 291 |                               [0.001, -36],
 292 |                               [-3.43, 1.971]
 293 |                             ],
 294 |                             "c": true
 295 |                           }
 296 |                         ],
 297 |                         "e": [
 298 |                           {
 299 |                             "i": [
 300 |                               [-19.923, 0],
 301 |                               [0, 19.882],
 302 |                               [19.923, 0],
 303 |                               [0, -19.883]
 304 |                             ],
 305 |                             "o": [
 306 |                               [19.923, 0],
 307 |                               [0, -19.883],
 308 |                               [-19.923, 0],
 309 |                               [0, 19.882]
 310 |                             ],
 311 |                             "v": [
 312 |                               [0.001, 36],
 313 |                               [36.074, 0],
 314 |                               [0.001, -36],
 315 |                               [-36.074, 0]
 316 |                             ],
 317 |                             "c": true
 318 |                           }
 319 |                         ]
 320 |                       },
 321 |                       {
 322 |                         "i": { "x": 0.2, "y": 1 },
 323 |                         "o": { "x": 0.167, "y": 0 },
 324 |                         "t": 110,
 325 |                         "s": [
 326 |                           {
 327 |                             "i": [
 328 |                               [-19.923, 0],
 329 |                               [0, 19.882],
 330 |                               [19.923, 0],
 331 |                               [0, -19.883]
 332 |                             ],
 333 |                             "o": [
 334 |                               [19.923, 0],
 335 |                               [0, -19.883],
 336 |                               [-19.923, 0],
 337 |                               [0, 19.882]
 338 |                             ],
 339 |                             "v": [
 340 |                               [0.001, 36],
 341 |                               [36.074, 0],
 342 |                               [0.001, -36],
 343 |                               [-36.074, 0]
 344 |                             ],
 345 |                             "c": true
 346 |                           }
 347 |                         ],
 348 |                         "e": [
 349 |                           {
 350 |                             "i": [
 351 |                               [-19.923, 0],
 352 |                               [0, 19.882],
 353 |                               [19.923, 0],
 354 |                               [0, -19.883]
 355 |                             ],
 356 |                             "o": [
 357 |                               [19.923, 0],
 358 |                               [0, -19.883],
 359 |                               [-19.923, 0],
 360 |                               [0, 19.882]
 361 |                             ],
 362 |                             "v": [
 363 |                               [0.001, 36],
 364 |                               [36.074, 0],
 365 |                               [0.001, -36],
 366 |                               [-36.074, 0]
 367 |                             ],
 368 |                             "c": true
 369 |                           }
 370 |                         ]
 371 |                       },
 372 |                       {
 373 |                         "i": { "x": 0.765, "y": 0.384 },
 374 |                         "o": { "x": 0.167, "y": 0 },
 375 |                         "t": 126,
 376 |                         "s": [
 377 |                           {
 378 |                             "i": [
 379 |                               [-19.923, 0],
 380 |                               [0, 19.882],
 381 |                               [19.923, 0],
 382 |                               [0, -19.883]
 383 |                             ],
 384 |                             "o": [
 385 |                               [19.923, 0],
 386 |                               [0, -19.883],
 387 |                               [-19.923, 0],
 388 |                               [0, 19.882]
 389 |                             ],
 390 |                             "v": [
 391 |                               [0.001, 36],
 392 |                               [36.074, 0],
 393 |                               [0.001, -36],
 394 |                               [-36.074, 0]
 395 |                             ],
 396 |                             "c": true
 397 |                           }
 398 |                         ],
 399 |                         "e": [
 400 |                           {
 401 |                             "i": [
 402 |                               [-2.46, 0.083],
 403 |                               [-0.259, 19.058],
 404 |                               [1.377, 0.116],
 405 |                               [0, -19.883]
 406 |                             ],
 407 |                             "o": [
 408 |                               [3.106, -0.105],
 409 |                               [0.271, -19.881],
 410 |                               [-1.276, -0.107],
 411 |                               [0, 19.882]
 412 |                             ],
 413 |                             "v": [
 414 |                               [0.001, 36],
 415 |                               [2.204, 2.371],
 416 |                               [0.001, -36],
 417 |                               [-3.43, 1.971]
 418 |                             ],
 419 |                             "c": true
 420 |                           }
 421 |                         ]
 422 |                       },
 423 |                       {
 424 |                         "i": { "x": 0.2, "y": 1 },
 425 |                         "o": { "x": 0.21, "y": 0.549 },
 426 |                         "t": 147,
 427 |                         "s": [
 428 |                           {
 429 |                             "i": [
 430 |                               [-2.46, 0.083],
 431 |                               [-0.259, 19.058],
 432 |                               [1.377, 0.116],
 433 |                               [0, -19.883]
 434 |                             ],
 435 |                             "o": [
 436 |                               [3.106, -0.105],
 437 |                               [0.271, -19.881],
 438 |                               [-1.276, -0.107],
 439 |                               [0, 19.882]
 440 |                             ],
 441 |                             "v": [
 442 |                               [0.001, 36],
 443 |                               [2.204, 2.371],
 444 |                               [0.001, -36],
 445 |                               [-3.43, 1.971]
 446 |                             ],
 447 |                             "c": true
 448 |                           }
 449 |                         ],
 450 |                         "e": [
 451 |                           {
 452 |                             "i": [
 453 |                               [-19.923, 0],
 454 |                               [0, 19.882],
 455 |                               [19.923, 0],
 456 |                               [0, -19.883]
 457 |                             ],
 458 |                             "o": [
 459 |                               [19.923, 0],
 460 |                               [0, -19.883],
 461 |                               [-19.923, 0],
 462 |                               [0, 19.882]
 463 |                             ],
 464 |                             "v": [
 465 |                               [0.001, 36],
 466 |                               [36.074, 0],
 467 |                               [0.001, -36],
 468 |                               [-36.074, 0]
 469 |                             ],
 470 |                             "c": true
 471 |                           }
 472 |                         ]
 473 |                       },
 474 |                       { "t": 173 }
 475 |                     ],
 476 |                     "ix": 2
 477 |                   },
 478 |                   "nm": "Path 1",
 479 |                   "mn": "ADBE Vector Shape - Group",
 480 |                   "hd": false
 481 |                 },
 482 |                 {
 483 |                   "ty": "st",
 484 |                   "c": { "a": 0, "k": [0.85, 0.85, 0.85, 1], "ix": 3 },
 485 |                   "o": { "a": 0, "k": 100, "ix": 4 },
 486 |                   "w": {
 487 |                     "a": 1,
 488 |                     "k": [
 489 |                       {
 490 |                         "i": { "x": [0.2], "y": [1] },
 491 |                         "o": { "x": [0.167], "y": [0.167] },
 492 |                         "t": 35,
 493 |                         "s": [5.6],
 494 |                         "e": [3.6]
 495 |                       },
 496 |                       {
 497 |                         "i": { "x": [0.833], "y": [0.833] },
 498 |                         "o": { "x": [0.8], "y": [0] },
 499 |                         "t": 60,
 500 |                         "s": [3.6],
 501 |                         "e": [5.6]
 502 |                       },
 503 |                       {
 504 |                         "i": { "x": [0.2], "y": [1] },
 505 |                         "o": { "x": [0.167], "y": [0.167] },
 506 |                         "t": 84,
 507 |                         "s": [5.6],
 508 |                         "e": [3.6]
 509 |                       },
 510 |                       {
 511 |                         "i": { "x": [0.2], "y": [1] },
 512 |                         "o": { "x": [0.167], "y": [0] },
 513 |                         "t": 110,
 514 |                         "s": [3.6],
 515 |                         "e": [3.6]
 516 |                       },
 517 |                       {
 518 |                         "i": { "x": [0.833], "y": [0.833] },
 519 |                         "o": { "x": [0.167], "y": [0] },
 520 |                         "t": 126,
 521 |                         "s": [3.6],
 522 |                         "e": [5.6]
 523 |                       },
 524 |                       {
 525 |                         "i": { "x": [0.2], "y": [1] },
 526 |                         "o": { "x": [0.167], "y": [0.167] },
 527 |                         "t": 147,
 528 |                         "s": [5.6],
 529 |                         "e": [3.6]
 530 |                       },
 531 |                       { "t": 173 }
 532 |                     ],
 533 |                     "ix": 5
 534 |                   },
 535 |                   "lc": 1,
 536 |                   "lj": 1,
 537 |                   "ml": 10,
 538 |                   "bm": 0,
 539 |                   "nm": "Stroke 1",
 540 |                   "mn": "ADBE Vector Graphic - Stroke",
 541 |                   "hd": false
 542 |                 },
 543 |                 {
 544 |                   "ty": "fl",
 545 |                   "c": { "a": 0, "k": [0.85, 0.85, 0.85, 1], "ix": 4 },
 546 |                   "o": { "a": 0, "k": 100, "ix": 5 },
 547 |                   "r": 1,
 548 |                   "bm": 0,
 549 |                   "nm": "Fill 1",
 550 |                   "mn": "ADBE Vector Graphic - Fill",
 551 |                   "hd": false
 552 |                 },
 553 |                 {
 554 |                   "ty": "tr",
 555 |                   "p": { "a": 0, "k": [45.074, 45], "ix": 2 },
 556 |                   "a": { "a": 0, "k": [0, 0], "ix": 1 },
 557 |                   "s": { "a": 0, "k": [100, 100], "ix": 3 },
 558 |                   "r": { "a": 0, "k": -42.5, "ix": 6 },
 559 |                   "o": { "a": 0, "k": 100, "ix": 7 },
 560 |                   "sk": { "a": 0, "k": 0, "ix": 4 },
 561 |                   "sa": { "a": 0, "k": 0, "ix": 5 },
 562 |                   "nm": "Transform"
 563 |                 }
 564 |               ],
 565 |               "nm": "Group 2",
 566 |               "np": 3,
 567 |               "cix": 2,
 568 |               "bm": 0,
 569 |               "ix": 1,
 570 |               "mn": "ADBE Vector Group",
 571 |               "hd": false
 572 |             },
 573 |             {
 574 |               "ty": "gr",
 575 |               "it": [
 576 |                 {
 577 |                   "ind": 0,
 578 |                   "ty": "sh",
 579 |                   "ix": 1,
 580 |                   "ks": {
 581 |                     "a": 0,
 582 |                     "k": {
 583 |                       "i": [
 584 |                         [0, 0],
 585 |                         [-1.883, -1.88],
 586 |                         [0, 0],
 587 |                         [1.874, -1.878],
 588 |                         [0, 0],
 589 |                         [1.884, 1.881],
 590 |                         [0, 0],
 591 |                         [-1.874, 1.877]
 592 |                       ],
 593 |                       "o": [
 594 |                         [1.885, -1.879],
 595 |                         [0, 0],
 596 |                         [1.877, 1.874],
 597 |                         [0, 0],
 598 |                         [-1.885, 1.878],
 599 |                         [0, 0],
 600 |                         [-1.877, -1.875],
 601 |                         [0, 0]
 602 |                       ],
 603 |                       "v": [
 604 |                         [-15.301, -15.277],
 605 |                         [-8.483, -15.273],
 606 |                         [15.305, 8.476],
 607 |                         [15.31, 15.269],
 608 |                         [15.302, 15.277],
 609 |                         [8.483, 15.273],
 610 |                         [-15.305, -8.475],
 611 |                         [-15.31, -15.268]
 612 |                       ],
 613 |                       "c": true
 614 |                     },
 615 |                     "ix": 2
 616 |                   },
 617 |                   "nm": "Path 1",
 618 |                   "mn": "ADBE Vector Shape - Group",
 619 |                   "hd": false
 620 |                 },
 621 |                 {
 622 |                   "ty": "fl",
 623 |                   "c": { "a": 0, "k": [0.85, 0.85, 0.85, 1], "ix": 4 },
 624 |                   "o": { "a": 0, "k": 100, "ix": 5 },
 625 |                   "r": 1,
 626 |                   "bm": 0,
 627 |                   "nm": "Fill 1",
 628 |                   "mn": "ADBE Vector Graphic - Fill",
 629 |                   "hd": false
 630 |                 },
 631 |                 {
 632 |                   "ty": "tr",
 633 |                   "p": { "a": 0, "k": [79.622, 81.906], "ix": 2 },
 634 |                   "a": { "a": 0, "k": [0, 0], "ix": 1 },
 635 |                   "s": { "a": 0, "k": [100, 100], "ix": 3 },
 636 |                   "r": { "a": 0, "k": 0, "ix": 6 },
 637 |                   "o": { "a": 0, "k": 100, "ix": 7 },
 638 |                   "sk": { "a": 0, "k": 0, "ix": 4 },
 639 |                   "sa": { "a": 0, "k": 0, "ix": 5 },
 640 |                   "nm": "Transform"
 641 |                 }
 642 |               ],
 643 |               "nm": "Group 3",
 644 |               "np": 2,
 645 |               "cix": 2,
 646 |               "bm": 0,
 647 |               "ix": 2,
 648 |               "mn": "ADBE Vector Group",
 649 |               "hd": false
 650 |             }
 651 |           ],
 652 |           "ip": 34,
 653 |           "op": 421,
 654 |           "st": 0,
 655 |           "bm": 0
 656 |         }
 657 |       ]
 658 |     }
 659 |   ],
 660 |   "layers": [
 661 |     {
 662 |       "ddd": 0,
 663 |       "ind": 1,
 664 |       "ty": 3,
 665 |       "nm": "escalador papel",
 666 |       "sr": 1,
 667 |       "ks": {
 668 |         "o": { "a": 0, "k": 0, "ix": 11 },
 669 |         "r": { "a": 0, "k": 0, "ix": 10 },
 670 |         "p": { "a": 0, "k": [321, 161.5, 0], "ix": 2 },
 671 |         "a": { "a": 0, "k": [60, 60, 0], "ix": 1 },
 672 |         "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
 673 |       },
 674 |       "ao": 0,
 675 |       "ip": 0,
 676 |       "op": 421,
 677 |       "st": 0,
 678 |       "bm": 0
 679 |     },
 680 |     {
 681 |       "ddd": 0,
 682 |       "ind": 2,
 683 |       "ty": 3,
 684 |       "nm": "lupa Outlines 3",
 685 |       "sr": 1,
 686 |       "ks": {
 687 |         "o": { "a": 0, "k": 100, "ix": 11 },
 688 |         "r": {
 689 |           "a": 1,
 690 |           "k": [
 691 |             {
 692 |               "i": { "x": [0.3], "y": [1] },
 693 |               "o": { "x": [0.3], "y": [0] },
 694 |               "t": 34,
 695 |               "s": [64],
 696 |               "e": [23]
 697 |             },
 698 |             {
 699 |               "i": { "x": [0.437], "y": [0.995] },
 700 |               "o": { "x": [0.7], "y": [0] },
 701 |               "t": 92,
 702 |               "s": [23],
 703 |               "e": [-21]
 704 |             },
 705 |             {
 706 |               "i": { "x": [0.358], "y": [1] },
 707 |               "o": { "x": [0.544], "y": [0] },
 708 |               "t": 133,
 709 |               "s": [-21],
 710 |               "e": [16]
 711 |             },
 712 |             {
 713 |               "i": { "x": [0.326], "y": [0.985] },
 714 |               "o": { "x": [0.595], "y": [0] },
 715 |               "t": 183,
 716 |               "s": [16],
 717 |               "e": [0]
 718 |             },
 719 |             { "t": 220 }
 720 |           ],
 721 |           "ix": 10
 722 |         },
 723 |         "p": {
 724 |           "a": 1,
 725 |           "k": [
 726 |             {
 727 |               "i": { "x": 0.222, "y": 1 },
 728 |               "o": { "x": 0, "y": 0 },
 729 |               "t": 34,
 730 |               "s": [240.252, 377.045, 0],
 731 |               "e": [323.752, 265.045, 0],
 732 |               "to": [13.917, -18.667, 0],
 733 |               "ti": [-5.248, 0.545, 0]
 734 |             },
 735 |             {
 736 |               "i": { "x": 0.453, "y": 0.528 },
 737 |               "o": { "x": 0.785, "y": 0 },
 738 |               "t": 88,
 739 |               "s": [323.752, 265.045, 0],
 740 |               "e": [334.252, 403.045, 0],
 741 |               "to": [5.248, -0.545, 0],
 742 |               "ti": [-24.248, -17.455, 0]
 743 |             },
 744 |             {
 745 |               "i": { "x": 0.156, "y": 1 },
 746 |               "o": { "x": 0.423, "y": 0.345 },
 747 |               "t": 133,
 748 |               "s": [334.252, 403.045, 0],
 749 |               "e": [499.252, 415.045, 0],
 750 |               "to": [24.248, 17.455, 0],
 751 |               "ti": [-27.5, -2, 0]
 752 |             },
 753 |             { "t": 183.03515625 }
 754 |           ],
 755 |           "ix": 2
 756 |         },
 757 |         "a": { "a": 0, "k": [47.206, 48.054, 0], "ix": 1 },
 758 |         "s": {
 759 |           "a": 1,
 760 |           "k": [
 761 |             {
 762 |               "i": { "x": [0.2, 0.2, 0.2], "y": [1, 1, 1] },
 763 |               "o": { "x": [0.15, 0.15, 0.15], "y": [0, 0, 0] },
 764 |               "t": 34,
 765 |               "s": [0, 0, 100],
 766 |               "e": [240, 240, 100]
 767 |             },
 768 |             {
 769 |               "i": { "x": [0.53, 0.53, 0.53], "y": [1, 1, 1] },
 770 |               "o": { "x": [0.167, 0.167, 0.167], "y": [0, 0, 0] },
 771 |               "t": 60,
 772 |               "s": [240, 240, 100],
 773 |               "e": [240, 240, 100]
 774 |             },
 775 |             {
 776 |               "i": { "x": [0.16, 0.16, 0.16], "y": [1, 1, 1] },
 777 |               "o": { "x": [0.42, 0.42, 0.42], "y": [0, 0, 0] },
 778 |               "t": 133,
 779 |               "s": [240, 240, 100],
 780 |               "e": [400, 400, 100]
 781 |             },
 782 |             { "t": 183 }
 783 |           ],
 784 |           "ix": 6
 785 |         }
 786 |       },
 787 |       "ao": 0,
 788 |       "ip": 34,
 789 |       "op": 12647,
 790 |       "st": 18,
 791 |       "bm": 0
 792 |     },
 793 |     {
 794 |       "ddd": 0,
 795 |       "ind": 3,
 796 |       "ty": 4,
 797 |       "nm": "LUPA rotacion 3D",
 798 |       "parent": 2,
 799 |       "sr": 1,
 800 |       "ks": {
 801 |         "o": { "a": 0, "k": 100, "ix": 11 },
 802 |         "r": { "a": 0, "k": 0, "ix": 10 },
 803 |         "p": { "a": 0, "k": [26.162, 29.375, 0], "ix": 2 },
 804 |         "a": { "a": 0, "k": [48.528, 49.656, 0], "ix": 1 },
 805 |         "s": { "a": 0, "k": [50, 50, 100], "ix": 6 }
 806 |       },
 807 |       "ao": 0,
 808 |       "shapes": [
 809 |         {
 810 |           "ty": "gr",
 811 |           "it": [
 812 |             {
 813 |               "ind": 0,
 814 |               "ty": "sh",
 815 |               "ix": 1,
 816 |               "ks": {
 817 |                 "a": 1,
 818 |                 "k": [
 819 |                   {
 820 |                     "i": { "x": 0.25, "y": 1 },
 821 |                     "o": { "x": 0.167, "y": 0.167 },
 822 |                     "t": 202,
 823 |                     "s": [
 824 |                       {
 825 |                         "i": [
 826 |                           [0, 0],
 827 |                           [0, 0],
 828 |                           [0, 0],
 829 |                           [0, 0],
 830 |                           [0, 0],
 831 |                           [0, 0],
 832 |                           [0, 0],
 833 |                           [0, 0],
 834 |                           [0, 0],
 835 |                           [0, 0],
 836 |                           [0, 0],
 837 |                           [0, 0]
 838 |                         ],
 839 |                         "o": [
 840 |                           [0, 0],
 841 |                           [0, 0],
 842 |                           [0, 0],
 843 |                           [0, 0],
 844 |                           [0, 0],
 845 |                           [0, 0],
 846 |                           [0, 0],
 847 |                           [0, 0],
 848 |                           [0, 0],
 849 |                           [0, 0],
 850 |                           [0, 0],
 851 |                           [0, 0]
 852 |                         ],
 853 |                         "v": [
 854 |                           [3.438, -0.004],
 855 |                           [0.027, 3.406],
 856 |                           [0.01, 3.421],
 857 |                           [0.056, 3.461],
 858 |                           [-3.375, 0.031],
 859 |                           [-3.421, -0.01],
 860 |                           [-3.397, -0.021],
 861 |                           [0.014, -3.432],
 862 |                           [-0.01, -3.421],
 863 |                           [0.024, -3.444],
 864 |                           [3.454, -0.013],
 865 |                           [3.421, 0.011]
 866 |                         ],
 867 |                         "c": true
 868 |                       }
 869 |                     ],
 870 |                     "e": [
 871 |                       {
 872 |                         "i": [
 873 |                           [0, 0],
 874 |                           [0, 0],
 875 |                           [0, 0],
 876 |                           [0, 0],
 877 |                           [0, 0],
 878 |                           [0, 0],
 879 |                           [0, 0],
 880 |                           [0, 0],
 881 |                           [0, 0],
 882 |                           [0, 0],
 883 |                           [0, 0],
 884 |                           [0, 0]
 885 |                         ],
 886 |                         "o": [
 887 |                           [0, 0],
 888 |                           [0, 0],
 889 |                           [0, 0],
 890 |                           [0, 0],
 891 |                           [0, 0],
 892 |                           [0, 0],
 893 |                           [0, 0],
 894 |                           [0, 0],
 895 |                           [0, 0],
 896 |                           [0, 0],
 897 |                           [0, 0],
 898 |                           [0, 0]
 899 |                         ],
 900 |                         "v": [
 901 |                           [12.204, 8.794],
 902 |                           [8.792, 12.204],
 903 |                           [0.01, 3.422],
 904 |                           [-8.706, 12.137],
 905 |                           [-12.137, 8.707],
 906 |                           [-3.421, -0.01],
 907 |                           [-12.204, -8.793],
 908 |                           [-8.792, -12.204],
 909 |                           [-0.01, -3.421],
 910 |                           [8.706, -12.137],
 911 |                           [12.137, -8.706],
 912 |                           [3.421, 0.011]
 913 |                         ],
 914 |                         "c": true
 915 |                       }
 916 |                     ]
 917 |                   },
 918 |                   { "t": 232 }
 919 |                 ],
 920 |                 "ix": 2
 921 |               },
 922 |               "nm": "Path 1",
 923 |               "mn": "ADBE Vector Shape - Group",
 924 |               "hd": false
 925 |             },
 926 |             {
 927 |               "ty": "fl",
 928 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 4 },
 929 |               "o": { "a": 0, "k": 100, "ix": 5 },
 930 |               "r": 1,
 931 |               "bm": 0,
 932 |               "nm": "Fill 1",
 933 |               "mn": "ADBE Vector Graphic - Fill",
 934 |               "hd": false
 935 |             },
 936 |             {
 937 |               "ty": "tr",
 938 |               "p": { "a": 0, "k": [46.174, 44.297], "ix": 2 },
 939 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
 940 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
 941 |               "r": { "a": 0, "k": 0, "ix": 6 },
 942 |               "o": {
 943 |                 "a": 1,
 944 |                 "k": [
 945 |                   {
 946 |                     "i": { "x": [0.833], "y": [0.833] },
 947 |                     "o": { "x": [0.167], "y": [0.167] },
 948 |                     "t": 202,
 949 |                     "s": [0],
 950 |                     "e": [100]
 951 |                   },
 952 |                   { "t": 205 }
 953 |                 ],
 954 |                 "ix": 7
 955 |               },
 956 |               "sk": { "a": 0, "k": 0, "ix": 4 },
 957 |               "sa": { "a": 0, "k": 0, "ix": 5 },
 958 |               "nm": "Transform"
 959 |             }
 960 |           ],
 961 |           "nm": "Group 1",
 962 |           "np": 2,
 963 |           "cix": 2,
 964 |           "bm": 0,
 965 |           "ix": 1,
 966 |           "mn": "ADBE Vector Group",
 967 |           "hd": false
 968 |         },
 969 |         {
 970 |           "ty": "gr",
 971 |           "it": [
 972 |             {
 973 |               "ind": 0,
 974 |               "ty": "sh",
 975 |               "ix": 1,
 976 |               "ks": {
 977 |                 "a": 1,
 978 |                 "k": [
 979 |                   {
 980 |                     "i": { "x": 0.2, "y": 1 },
 981 |                     "o": { "x": 0.167, "y": 0.167 },
 982 |                     "t": 35,
 983 |                     "s": [
 984 |                       {
 985 |                         "i": [
 986 |                           [-2.46, 0.083],
 987 |                           [-0.259, 19.058],
 988 |                           [1.377, 0.116],
 989 |                           [0, -19.883]
 990 |                         ],
 991 |                         "o": [
 992 |                           [3.106, -0.105],
 993 |                           [0.271, -19.881],
 994 |                           [-1.276, -0.107],
 995 |                           [0, 19.882]
 996 |                         ],
 997 |                         "v": [
 998 |                           [0.001, 36],
 999 |                           [2.204, 2.371],
1000 |                           [0.001, -36],
1001 |                           [-3.43, 1.971]
1002 |                         ],
1003 |                         "c": true
1004 |                       }
1005 |                     ],
1006 |                     "e": [
1007 |                       {
1008 |                         "i": [
1009 |                           [-19.923, 0],
1010 |                           [0, 19.882],
1011 |                           [19.923, 0],
1012 |                           [0, -19.883]
1013 |                         ],
1014 |                         "o": [
1015 |                           [19.923, 0],
1016 |                           [0, -19.883],
1017 |                           [-19.923, 0],
1018 |                           [0, 19.882]
1019 |                         ],
1020 |                         "v": [
1021 |                           [0.001, 36],
1022 |                           [36.074, 0],
1023 |                           [0.001, -36],
1024 |                           [-36.074, 0]
1025 |                         ],
1026 |                         "c": true
1027 |                       }
1028 |                     ]
1029 |                   },
1030 |                   {
1031 |                     "i": { "x": 0.765, "y": 0.384 },
1032 |                     "o": { "x": 0.8, "y": 0 },
1033 |                     "t": 60,
1034 |                     "s": [
1035 |                       {
1036 |                         "i": [
1037 |                           [-19.923, 0],
1038 |                           [0, 19.882],
1039 |                           [19.923, 0],
1040 |                           [0, -19.883]
1041 |                         ],
1042 |                         "o": [
1043 |                           [19.923, 0],
1044 |                           [0, -19.883],
1045 |                           [-19.923, 0],
1046 |                           [0, 19.882]
1047 |                         ],
1048 |                         "v": [
1049 |                           [0.001, 36],
1050 |                           [36.074, 0],
1051 |                           [0.001, -36],
1052 |                           [-36.074, 0]
1053 |                         ],
1054 |                         "c": true
1055 |                       }
1056 |                     ],
1057 |                     "e": [
1058 |                       {
1059 |                         "i": [
1060 |                           [-2.46, 0.083],
1061 |                           [-0.259, 19.058],
1062 |                           [1.377, 0.116],
1063 |                           [0, -19.883]
1064 |                         ],
1065 |                         "o": [
1066 |                           [3.106, -0.105],
1067 |                           [0.271, -19.881],
1068 |                           [-1.276, -0.107],
1069 |                           [0, 19.882]
1070 |                         ],
1071 |                         "v": [
1072 |                           [0.001, 36],
1073 |                           [2.204, 2.371],
1074 |                           [0.001, -36],
1075 |                           [-3.43, 1.971]
1076 |                         ],
1077 |                         "c": true
1078 |                       }
1079 |                     ]
1080 |                   },
1081 |                   {
1082 |                     "i": { "x": 0.2, "y": 1 },
1083 |                     "o": { "x": 0.21, "y": 0.549 },
1084 |                     "t": 84,
1085 |                     "s": [
1086 |                       {
1087 |                         "i": [
1088 |                           [-2.46, 0.083],
1089 |                           [-0.259, 19.058],
1090 |                           [1.377, 0.116],
1091 |                           [0, -19.883]
1092 |                         ],
1093 |                         "o": [
1094 |                           [3.106, -0.105],
1095 |                           [0.271, -19.881],
1096 |                           [-1.276, -0.107],
1097 |                           [0, 19.882]
1098 |                         ],
1099 |                         "v": [
1100 |                           [0.001, 36],
1101 |                           [2.204, 2.371],
1102 |                           [0.001, -36],
1103 |                           [-3.43, 1.971]
1104 |                         ],
1105 |                         "c": true
1106 |                       }
1107 |                     ],
1108 |                     "e": [
1109 |                       {
1110 |                         "i": [
1111 |                           [-19.923, 0],
1112 |                           [0, 19.882],
1113 |                           [19.923, 0],
1114 |                           [0, -19.883]
1115 |                         ],
1116 |                         "o": [
1117 |                           [19.923, 0],
1118 |                           [0, -19.883],
1119 |                           [-19.923, 0],
1120 |                           [0, 19.882]
1121 |                         ],
1122 |                         "v": [
1123 |                           [0.001, 36],
1124 |                           [36.074, 0],
1125 |                           [0.001, -36],
1126 |                           [-36.074, 0]
1127 |                         ],
1128 |                         "c": true
1129 |                       }
1130 |                     ]
1131 |                   },
1132 |                   {
1133 |                     "i": { "x": 0.2, "y": 1 },
1134 |                     "o": { "x": 0.167, "y": 0 },
1135 |                     "t": 110,
1136 |                     "s": [
1137 |                       {
1138 |                         "i": [
1139 |                           [-19.923, 0],
1140 |                           [0, 19.882],
1141 |                           [19.923, 0],
1142 |                           [0, -19.883]
1143 |                         ],
1144 |                         "o": [
1145 |                           [19.923, 0],
1146 |                           [0, -19.883],
1147 |                           [-19.923, 0],
1148 |                           [0, 19.882]
1149 |                         ],
1150 |                         "v": [
1151 |                           [0.001, 36],
1152 |                           [36.074, 0],
1153 |                           [0.001, -36],
1154 |                           [-36.074, 0]
1155 |                         ],
1156 |                         "c": true
1157 |                       }
1158 |                     ],
1159 |                     "e": [
1160 |                       {
1161 |                         "i": [
1162 |                           [-19.923, 0],
1163 |                           [0, 19.882],
1164 |                           [19.923, 0],
1165 |                           [0, -19.883]
1166 |                         ],
1167 |                         "o": [
1168 |                           [19.923, 0],
1169 |                           [0, -19.883],
1170 |                           [-19.923, 0],
1171 |                           [0, 19.882]
1172 |                         ],
1173 |                         "v": [
1174 |                           [0.001, 36],
1175 |                           [36.074, 0],
1176 |                           [0.001, -36],
1177 |                           [-36.074, 0]
1178 |                         ],
1179 |                         "c": true
1180 |                       }
1181 |                     ]
1182 |                   },
1183 |                   {
1184 |                     "i": { "x": 0.765, "y": 0.384 },
1185 |                     "o": { "x": 0.167, "y": 0 },
1186 |                     "t": 126,
1187 |                     "s": [
1188 |                       {
1189 |                         "i": [
1190 |                           [-19.923, 0],
1191 |                           [0, 19.882],
1192 |                           [19.923, 0],
1193 |                           [0, -19.883]
1194 |                         ],
1195 |                         "o": [
1196 |                           [19.923, 0],
1197 |                           [0, -19.883],
1198 |                           [-19.923, 0],
1199 |                           [0, 19.882]
1200 |                         ],
1201 |                         "v": [
1202 |                           [0.001, 36],
1203 |                           [36.074, 0],
1204 |                           [0.001, -36],
1205 |                           [-36.074, 0]
1206 |                         ],
1207 |                         "c": true
1208 |                       }
1209 |                     ],
1210 |                     "e": [
1211 |                       {
1212 |                         "i": [
1213 |                           [-2.46, 0.083],
1214 |                           [-0.259, 19.058],
1215 |                           [1.377, 0.116],
1216 |                           [0, -19.883]
1217 |                         ],
1218 |                         "o": [
1219 |                           [3.106, -0.105],
1220 |                           [0.271, -19.881],
1221 |                           [-1.276, -0.107],
1222 |                           [0, 19.882]
1223 |                         ],
1224 |                         "v": [
1225 |                           [0.001, 36],
1226 |                           [2.204, 2.371],
1227 |                           [0.001, -36],
1228 |                           [-3.43, 1.971]
1229 |                         ],
1230 |                         "c": true
1231 |                       }
1232 |                     ]
1233 |                   },
1234 |                   {
1235 |                     "i": { "x": 0.2, "y": 1 },
1236 |                     "o": { "x": 0.21, "y": 0.549 },
1237 |                     "t": 147,
1238 |                     "s": [
1239 |                       {
1240 |                         "i": [
1241 |                           [-2.46, 0.083],
1242 |                           [-0.259, 19.058],
1243 |                           [1.377, 0.116],
1244 |                           [0, -19.883]
1245 |                         ],
1246 |                         "o": [
1247 |                           [3.106, -0.105],
1248 |                           [0.271, -19.881],
1249 |                           [-1.276, -0.107],
1250 |                           [0, 19.882]
1251 |                         ],
1252 |                         "v": [
1253 |                           [0.001, 36],
1254 |                           [2.204, 2.371],
1255 |                           [0.001, -36],
1256 |                           [-3.43, 1.971]
1257 |                         ],
1258 |                         "c": true
1259 |                       }
1260 |                     ],
1261 |                     "e": [
1262 |                       {
1263 |                         "i": [
1264 |                           [-19.923, 0],
1265 |                           [0, 19.882],
1266 |                           [19.923, 0],
1267 |                           [0, -19.883]
1268 |                         ],
1269 |                         "o": [
1270 |                           [19.923, 0],
1271 |                           [0, -19.883],
1272 |                           [-19.923, 0],
1273 |                           [0, 19.882]
1274 |                         ],
1275 |                         "v": [
1276 |                           [0.001, 36],
1277 |                           [36.074, 0],
1278 |                           [0.001, -36],
1279 |                           [-36.074, 0]
1280 |                         ],
1281 |                         "c": true
1282 |                       }
1283 |                     ]
1284 |                   },
1285 |                   { "t": 173 }
1286 |                 ],
1287 |                 "ix": 2
1288 |               },
1289 |               "nm": "Path 1",
1290 |               "mn": "ADBE Vector Shape - Group",
1291 |               "hd": false
1292 |             },
1293 |             {
1294 |               "ty": "st",
1295 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 3 },
1296 |               "o": { "a": 0, "k": 100, "ix": 4 },
1297 |               "w": {
1298 |                 "a": 1,
1299 |                 "k": [
1300 |                   {
1301 |                     "i": { "x": [0.2], "y": [1] },
1302 |                     "o": { "x": [0.167], "y": [0.167] },
1303 |                     "t": 35,
1304 |                     "s": [5.6],
1305 |                     "e": [3.6]
1306 |                   },
1307 |                   {
1308 |                     "i": { "x": [0.833], "y": [0.833] },
1309 |                     "o": { "x": [0.8], "y": [0] },
1310 |                     "t": 60,
1311 |                     "s": [3.6],
1312 |                     "e": [5.6]
1313 |                   },
1314 |                   {
1315 |                     "i": { "x": [0.2], "y": [1] },
1316 |                     "o": { "x": [0.167], "y": [0.167] },
1317 |                     "t": 84,
1318 |                     "s": [5.6],
1319 |                     "e": [3.6]
1320 |                   },
1321 |                   {
1322 |                     "i": { "x": [0.2], "y": [1] },
1323 |                     "o": { "x": [0.167], "y": [0] },
1324 |                     "t": 110,
1325 |                     "s": [3.6],
1326 |                     "e": [3.6]
1327 |                   },
1328 |                   {
1329 |                     "i": { "x": [0.833], "y": [0.833] },
1330 |                     "o": { "x": [0.167], "y": [0] },
1331 |                     "t": 126,
1332 |                     "s": [3.6],
1333 |                     "e": [5.6]
1334 |                   },
1335 |                   {
1336 |                     "i": { "x": [0.2], "y": [1] },
1337 |                     "o": { "x": [0.167], "y": [0.167] },
1338 |                     "t": 147,
1339 |                     "s": [5.6],
1340 |                     "e": [3.6]
1341 |                   },
1342 |                   { "t": 173 }
1343 |                 ],
1344 |                 "ix": 5
1345 |               },
1346 |               "lc": 1,
1347 |               "lj": 1,
1348 |               "ml": 10,
1349 |               "bm": 0,
1350 |               "nm": "Stroke 1",
1351 |               "mn": "ADBE Vector Graphic - Stroke",
1352 |               "hd": false
1353 |             },
1354 |             {
1355 |               "ty": "fl",
1356 |               "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
1357 |               "o": { "a": 0, "k": 100, "ix": 5 },
1358 |               "r": 1,
1359 |               "bm": 0,
1360 |               "nm": "Fill 1",
1361 |               "mn": "ADBE Vector Graphic - Fill",
1362 |               "hd": false
1363 |             },
1364 |             {
1365 |               "ty": "tr",
1366 |               "p": { "a": 0, "k": [45.074, 45], "ix": 2 },
1367 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1368 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1369 |               "r": { "a": 0, "k": -42.5, "ix": 6 },
1370 |               "o": { "a": 0, "k": 100, "ix": 7 },
1371 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1372 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1373 |               "nm": "Transform"
1374 |             }
1375 |           ],
1376 |           "nm": "Group 2",
1377 |           "np": 3,
1378 |           "cix": 2,
1379 |           "bm": 0,
1380 |           "ix": 2,
1381 |           "mn": "ADBE Vector Group",
1382 |           "hd": false
1383 |         },
1384 |         {
1385 |           "ty": "gr",
1386 |           "it": [
1387 |             {
1388 |               "ind": 0,
1389 |               "ty": "sh",
1390 |               "ix": 1,
1391 |               "ks": {
1392 |                 "a": 0,
1393 |                 "k": {
1394 |                   "i": [
1395 |                     [0, 0],
1396 |                     [-1.883, -1.88],
1397 |                     [0, 0],
1398 |                     [1.874, -1.878],
1399 |                     [0, 0],
1400 |                     [1.884, 1.881],
1401 |                     [0, 0],
1402 |                     [-1.874, 1.877]
1403 |                   ],
1404 |                   "o": [
1405 |                     [1.885, -1.879],
1406 |                     [0, 0],
1407 |                     [1.877, 1.874],
1408 |                     [0, 0],
1409 |                     [-1.885, 1.878],
1410 |                     [0, 0],
1411 |                     [-1.877, -1.875],
1412 |                     [0, 0]
1413 |                   ],
1414 |                   "v": [
1415 |                     [-15.301, -15.277],
1416 |                     [-8.483, -15.273],
1417 |                     [15.305, 8.476],
1418 |                     [15.31, 15.269],
1419 |                     [15.302, 15.277],
1420 |                     [8.483, 15.273],
1421 |                     [-15.305, -8.475],
1422 |                     [-15.31, -15.268]
1423 |                   ],
1424 |                   "c": true
1425 |                 },
1426 |                 "ix": 2
1427 |               },
1428 |               "nm": "Path 1",
1429 |               "mn": "ADBE Vector Shape - Group",
1430 |               "hd": false
1431 |             },
1432 |             {
1433 |               "ty": "fl",
1434 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 4 },
1435 |               "o": { "a": 0, "k": 100, "ix": 5 },
1436 |               "r": 1,
1437 |               "bm": 0,
1438 |               "nm": "Fill 1",
1439 |               "mn": "ADBE Vector Graphic - Fill",
1440 |               "hd": false
1441 |             },
1442 |             {
1443 |               "ty": "tr",
1444 |               "p": { "a": 0, "k": [79.622, 81.906], "ix": 2 },
1445 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1446 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1447 |               "r": { "a": 0, "k": 0, "ix": 6 },
1448 |               "o": { "a": 0, "k": 100, "ix": 7 },
1449 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1450 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1451 |               "nm": "Transform"
1452 |             }
1453 |           ],
1454 |           "nm": "Group 3",
1455 |           "np": 2,
1456 |           "cix": 2,
1457 |           "bm": 0,
1458 |           "ix": 3,
1459 |           "mn": "ADBE Vector Group",
1460 |           "hd": false
1461 |         }
1462 |       ],
1463 |       "ip": 34,
1464 |       "op": 421,
1465 |       "st": 0,
1466 |       "bm": 0
1467 |     },
1468 |     {
1469 |       "ddd": 0,
1470 |       "ind": 4,
1471 |       "ty": 4,
1472 |       "nm": "line 1 Outlines",
1473 |       "sr": 1,
1474 |       "ks": {
1475 |         "o": { "a": 0, "k": 100, "ix": 11 },
1476 |         "r": { "a": 0, "k": 0, "ix": 10 },
1477 |         "p": { "a": 0, "k": [299.82, 224.817, 0], "ix": 2 },
1478 |         "a": { "a": 0, "k": [36.006, 1.8, 0], "ix": 1 },
1479 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
1480 |       },
1481 |       "ao": 0,
1482 |       "shapes": [
1483 |         {
1484 |           "ty": "gr",
1485 |           "it": [
1486 |             {
1487 |               "ind": 0,
1488 |               "ty": "sh",
1489 |               "ix": 1,
1490 |               "ks": {
1491 |                 "a": 0,
1492 |                 "k": {
1493 |                   "i": [
1494 |                     [0, 0],
1495 |                     [0, 0]
1496 |                   ],
1497 |                   "o": [
1498 |                     [0, 0],
1499 |                     [0, 0]
1500 |                   ],
1501 |                   "v": [
1502 |                     [1.8, 1.8],
1503 |                     [70.211, 1.8]
1504 |                   ],
1505 |                   "c": false
1506 |                 },
1507 |                 "ix": 2
1508 |               },
1509 |               "nm": "Path 1",
1510 |               "mn": "ADBE Vector Shape - Group",
1511 |               "hd": false
1512 |             },
1513 |             {
1514 |               "ty": "st",
1515 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 3 },
1516 |               "o": { "a": 0, "k": 100, "ix": 4 },
1517 |               "w": { "a": 0, "k": 3.6, "ix": 5 },
1518 |               "lc": 2,
1519 |               "lj": 1,
1520 |               "ml": 10,
1521 |               "bm": 0,
1522 |               "nm": "Stroke 1",
1523 |               "mn": "ADBE Vector Graphic - Stroke",
1524 |               "hd": false
1525 |             },
1526 |             {
1527 |               "ty": "tr",
1528 |               "p": { "a": 0, "k": [0, 0], "ix": 2 },
1529 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1530 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1531 |               "r": { "a": 0, "k": 0, "ix": 6 },
1532 |               "o": { "a": 0, "k": 100, "ix": 7 },
1533 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1534 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1535 |               "nm": "Transform"
1536 |             }
1537 |           ],
1538 |           "nm": "Group 1",
1539 |           "np": 2,
1540 |           "cix": 2,
1541 |           "bm": 0,
1542 |           "ix": 1,
1543 |           "mn": "ADBE Vector Group",
1544 |           "hd": false
1545 |         },
1546 |         {
1547 |           "ty": "tm",
1548 |           "s": { "a": 0, "k": 0, "ix": 1 },
1549 |           "e": {
1550 |             "a": 1,
1551 |             "k": [
1552 |               {
1553 |                 "i": { "x": [0.2], "y": [1] },
1554 |                 "o": { "x": [0.15], "y": [0] },
1555 |                 "t": 17,
1556 |                 "s": [0],
1557 |                 "e": [100]
1558 |               },
1559 |               { "t": 39 }
1560 |             ],
1561 |             "ix": 2
1562 |           },
1563 |           "o": { "a": 0, "k": 0, "ix": 3 },
1564 |           "m": 1,
1565 |           "ix": 2,
1566 |           "nm": "Trim Paths 1",
1567 |           "mn": "ADBE Vector Filter - Trim",
1568 |           "hd": false
1569 |         }
1570 |       ],
1571 |       "ip": 17,
1572 |       "op": 421,
1573 |       "st": 0,
1574 |       "bm": 0
1575 |     },
1576 |     {
1577 |       "ddd": 0,
1578 |       "ind": 5,
1579 |       "ty": 4,
1580 |       "nm": "line 2 Outlines",
1581 |       "sr": 1,
1582 |       "ks": {
1583 |         "o": { "a": 0, "k": 100, "ix": 11 },
1584 |         "r": { "a": 0, "k": 0, "ix": 10 },
1585 |         "p": { "a": 0, "k": [292.734, 278.817, 0], "ix": 2 },
1586 |         "a": { "a": 0, "k": [32.463, 1.8, 0], "ix": 1 },
1587 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
1588 |       },
1589 |       "ao": 0,
1590 |       "shapes": [
1591 |         {
1592 |           "ty": "gr",
1593 |           "it": [
1594 |             {
1595 |               "ind": 0,
1596 |               "ty": "sh",
1597 |               "ix": 1,
1598 |               "ks": {
1599 |                 "a": 0,
1600 |                 "k": {
1601 |                   "i": [
1602 |                     [0, 0],
1603 |                     [0, 0]
1604 |                   ],
1605 |                   "o": [
1606 |                     [0, 0],
1607 |                     [0, 0]
1608 |                   ],
1609 |                   "v": [
1610 |                     [1.8, 1.8],
1611 |                     [63.125, 1.8]
1612 |                   ],
1613 |                   "c": false
1614 |                 },
1615 |                 "ix": 2
1616 |               },
1617 |               "nm": "Path 1",
1618 |               "mn": "ADBE Vector Shape - Group",
1619 |               "hd": false
1620 |             },
1621 |             {
1622 |               "ty": "st",
1623 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 3 },
1624 |               "o": { "a": 0, "k": 100, "ix": 4 },
1625 |               "w": { "a": 0, "k": 3.6, "ix": 5 },
1626 |               "lc": 2,
1627 |               "lj": 1,
1628 |               "ml": 10,
1629 |               "bm": 0,
1630 |               "nm": "Stroke 1",
1631 |               "mn": "ADBE Vector Graphic - Stroke",
1632 |               "hd": false
1633 |             },
1634 |             {
1635 |               "ty": "tr",
1636 |               "p": { "a": 0, "k": [0, 0], "ix": 2 },
1637 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1638 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1639 |               "r": { "a": 0, "k": 0, "ix": 6 },
1640 |               "o": { "a": 0, "k": 100, "ix": 7 },
1641 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1642 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1643 |               "nm": "Transform"
1644 |             }
1645 |           ],
1646 |           "nm": "Group 1",
1647 |           "np": 2,
1648 |           "cix": 2,
1649 |           "bm": 0,
1650 |           "ix": 1,
1651 |           "mn": "ADBE Vector Group",
1652 |           "hd": false
1653 |         },
1654 |         {
1655 |           "ty": "tm",
1656 |           "s": { "a": 0, "k": 0, "ix": 1 },
1657 |           "e": {
1658 |             "a": 1,
1659 |             "k": [
1660 |               {
1661 |                 "i": { "x": [0.2], "y": [1] },
1662 |                 "o": { "x": [0.15], "y": [0] },
1663 |                 "t": 24,
1664 |                 "s": [0],
1665 |                 "e": [100]
1666 |               },
1667 |               { "t": 46 }
1668 |             ],
1669 |             "ix": 2
1670 |           },
1671 |           "o": { "a": 0, "k": 0, "ix": 3 },
1672 |           "m": 1,
1673 |           "ix": 2,
1674 |           "nm": "Trim Paths 1",
1675 |           "mn": "ADBE Vector Filter - Trim",
1676 |           "hd": false
1677 |         }
1678 |       ],
1679 |       "ip": 24,
1680 |       "op": 428,
1681 |       "st": 7,
1682 |       "bm": 0
1683 |     },
1684 |     {
1685 |       "ddd": 0,
1686 |       "ind": 6,
1687 |       "ty": 4,
1688 |       "nm": "line 3 Outlines",
1689 |       "sr": 1,
1690 |       "ks": {
1691 |         "o": { "a": 0, "k": 100, "ix": 11 },
1692 |         "r": { "a": 0, "k": 0, "ix": 10 },
1693 |         "p": { "a": 0, "k": [258.464, 329.218, 0], "ix": 2 },
1694 |         "a": { "a": 0, "k": [15.327, 1.8, 0], "ix": 1 },
1695 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
1696 |       },
1697 |       "ao": 0,
1698 |       "shapes": [
1699 |         {
1700 |           "ty": "gr",
1701 |           "it": [
1702 |             {
1703 |               "ind": 0,
1704 |               "ty": "sh",
1705 |               "ix": 1,
1706 |               "ks": {
1707 |                 "a": 0,
1708 |                 "k": {
1709 |                   "i": [
1710 |                     [0, 0],
1711 |                     [0, 0]
1712 |                   ],
1713 |                   "o": [
1714 |                     [0, 0],
1715 |                     [0, 0]
1716 |                   ],
1717 |                   "v": [
1718 |                     [1.8, 1.8],
1719 |                     [28.855, 1.8]
1720 |                   ],
1721 |                   "c": false
1722 |                 },
1723 |                 "ix": 2
1724 |               },
1725 |               "nm": "Path 1",
1726 |               "mn": "ADBE Vector Shape - Group",
1727 |               "hd": false
1728 |             },
1729 |             {
1730 |               "ty": "st",
1731 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 3 },
1732 |               "o": { "a": 0, "k": 100, "ix": 4 },
1733 |               "w": { "a": 0, "k": 3.6, "ix": 5 },
1734 |               "lc": 2,
1735 |               "lj": 1,
1736 |               "ml": 10,
1737 |               "bm": 0,
1738 |               "nm": "Stroke 1",
1739 |               "mn": "ADBE Vector Graphic - Stroke",
1740 |               "hd": false
1741 |             },
1742 |             {
1743 |               "ty": "tr",
1744 |               "p": { "a": 0, "k": [0, 0], "ix": 2 },
1745 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1746 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1747 |               "r": { "a": 0, "k": 0, "ix": 6 },
1748 |               "o": { "a": 0, "k": 100, "ix": 7 },
1749 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1750 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1751 |               "nm": "Transform"
1752 |             }
1753 |           ],
1754 |           "nm": "Group 1",
1755 |           "np": 2,
1756 |           "cix": 2,
1757 |           "bm": 0,
1758 |           "ix": 1,
1759 |           "mn": "ADBE Vector Group",
1760 |           "hd": false
1761 |         },
1762 |         {
1763 |           "ty": "tm",
1764 |           "s": { "a": 0, "k": 0, "ix": 1 },
1765 |           "e": {
1766 |             "a": 1,
1767 |             "k": [
1768 |               {
1769 |                 "i": { "x": [0.2], "y": [1] },
1770 |                 "o": { "x": [0.15], "y": [0] },
1771 |                 "t": 31,
1772 |                 "s": [0],
1773 |                 "e": [100]
1774 |               },
1775 |               { "t": 53 }
1776 |             ],
1777 |             "ix": 2
1778 |           },
1779 |           "o": { "a": 0, "k": 0, "ix": 3 },
1780 |           "m": 1,
1781 |           "ix": 2,
1782 |           "nm": "Trim Paths 1",
1783 |           "mn": "ADBE Vector Filter - Trim",
1784 |           "hd": false
1785 |         }
1786 |       ],
1787 |       "ip": 31,
1788 |       "op": 435,
1789 |       "st": 14,
1790 |       "bm": 0
1791 |     },
1792 |     {
1793 |       "ddd": 0,
1794 |       "ind": 7,
1795 |       "ty": 4,
1796 |       "nm": "line 4 Outlines",
1797 |       "sr": 1,
1798 |       "ks": {
1799 |         "o": { "a": 0, "k": 100, "ix": 11 },
1800 |         "r": { "a": 0, "k": 0, "ix": 10 },
1801 |         "p": { "a": 0, "k": [258.464, 379.618, 0], "ix": 2 },
1802 |         "a": { "a": 0, "k": [15.327, 1.8, 0], "ix": 1 },
1803 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
1804 |       },
1805 |       "ao": 0,
1806 |       "shapes": [
1807 |         {
1808 |           "ty": "gr",
1809 |           "it": [
1810 |             {
1811 |               "ind": 0,
1812 |               "ty": "sh",
1813 |               "ix": 1,
1814 |               "ks": {
1815 |                 "a": 0,
1816 |                 "k": {
1817 |                   "i": [
1818 |                     [0, 0],
1819 |                     [0, 0]
1820 |                   ],
1821 |                   "o": [
1822 |                     [0, 0],
1823 |                     [0, 0]
1824 |                   ],
1825 |                   "v": [
1826 |                     [1.8, 1.8],
1827 |                     [28.855, 1.8]
1828 |                   ],
1829 |                   "c": false
1830 |                 },
1831 |                 "ix": 2
1832 |               },
1833 |               "nm": "Path 1",
1834 |               "mn": "ADBE Vector Shape - Group",
1835 |               "hd": false
1836 |             },
1837 |             {
1838 |               "ty": "st",
1839 |               "c": { "a": 0, "k": [0.59, 0.59, 0.59, 1], "ix": 3 },
1840 |               "o": { "a": 0, "k": 100, "ix": 4 },
1841 |               "w": { "a": 0, "k": 3.6, "ix": 5 },
1842 |               "lc": 2,
1843 |               "lj": 1,
1844 |               "ml": 10,
1845 |               "bm": 0,
1846 |               "nm": "Stroke 1",
1847 |               "mn": "ADBE Vector Graphic - Stroke",
1848 |               "hd": false
1849 |             },
1850 |             {
1851 |               "ty": "tr",
1852 |               "p": { "a": 0, "k": [0, 0], "ix": 2 },
1853 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
1854 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
1855 |               "r": { "a": 0, "k": 0, "ix": 6 },
1856 |               "o": { "a": 0, "k": 100, "ix": 7 },
1857 |               "sk": { "a": 0, "k": 0, "ix": 4 },
1858 |               "sa": { "a": 0, "k": 0, "ix": 5 },
1859 |               "nm": "Transform"
1860 |             }
1861 |           ],
1862 |           "nm": "Group 1",
1863 |           "np": 2,
1864 |           "cix": 2,
1865 |           "bm": 0,
1866 |           "ix": 1,
1867 |           "mn": "ADBE Vector Group",
1868 |           "hd": false
1869 |         },
1870 |         {
1871 |           "ty": "tm",
1872 |           "s": { "a": 0, "k": 0, "ix": 1 },
1873 |           "e": {
1874 |             "a": 1,
1875 |             "k": [
1876 |               {
1877 |                 "i": { "x": [0.2], "y": [1] },
1878 |                 "o": { "x": [0.15], "y": [0] },
1879 |                 "t": 38,
1880 |                 "s": [0],
1881 |                 "e": [100]
1882 |               },
1883 |               { "t": 60 }
1884 |             ],
1885 |             "ix": 2
1886 |           },
1887 |           "o": { "a": 0, "k": 0, "ix": 3 },
1888 |           "m": 1,
1889 |           "ix": 2,
1890 |           "nm": "Trim Paths 1",
1891 |           "mn": "ADBE Vector Filter - Trim",
1892 |           "hd": false
1893 |         }
1894 |       ],
1895 |       "ip": 38,
1896 |       "op": 442,
1897 |       "st": 21,
1898 |       "bm": 0
1899 |     },
1900 |     {
1901 |       "ddd": 0,
1902 |       "ind": 8,
1903 |       "ty": 0,
1904 |       "nm": "Sombra lupa",
1905 |       "refId": "comp_0",
1906 |       "sr": 1,
1907 |       "ks": {
1908 |         "o": { "a": 0, "k": 100, "ix": 11 },
1909 |         "r": { "a": 0, "k": 0, "ix": 10 },
1910 |         "p": { "a": 0, "k": [321, 321, 0], "ix": 2 },
1911 |         "a": { "a": 0, "k": [321, 321, 0], "ix": 1 },
1912 |         "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
1913 |       },
1914 |       "ao": 0,
1915 |       "hasMask": true,
1916 |       "masksProperties": [
1917 |         {
1918 |           "inv": false,
1919 |           "mode": "a",
1920 |           "pt": {
1921 |             "a": 0,
1922 |             "k": {
1923 |               "i": [
1924 |                 [-7.5, 3.5],
1925 |                 [0, 0],
1926 |                 [0, 0],
1927 |                 [0, 0],
1928 |                 [0, 0],
1929 |                 [-4, 0],
1930 |                 [0, -2.5],
1931 |                 [-29.5, 0],
1932 |                 [0, 15],
1933 |                 [0, 5]
1934 |               ],
1935 |               "o": [
1936 |                 [-13, 0],
1937 |                 [0, 0],
1938 |                 [0, 0],
1939 |                 [0, 0],
1940 |                 [0, 0],
1941 |                 [4, 0],
1942 |                 [0, 2.5],
1943 |                 [29.5, 0],
1944 |                 [0, -15],
1945 |                 [0, -5]
1946 |               ],
1947 |               "v": [
1948 |                 [412.5, 169.5],
1949 |                 [231.5, 169.5],
1950 |                 [202, 190.5],
1951 |                 [191, 254],
1952 |                 [191, 428.5],
1953 |                 [329, 428.5],
1954 |                 [333.5, 434.5],
1955 |                 [365.5, 478.5],
1956 |                 [399, 436.5],
1957 |                 [399, 193]
1958 |               ],
1959 |               "c": true
1960 |             },
1961 |             "ix": 1
1962 |           },
1963 |           "o": { "a": 0, "k": 100, "ix": 3 },
1964 |           "x": { "a": 0, "k": 0, "ix": 4 },
1965 |           "nm": "Mask 1"
1966 |         }
1967 |       ],
1968 |       "w": 642,
1969 |       "h": 642,
1970 |       "ip": 0,
1971 |       "op": 421,
1972 |       "st": 0,
1973 |       "bm": 0
1974 |     },
1975 |     {
1976 |       "ddd": 0,
1977 |       "ind": 13,
1978 |       "ty": 4,
1979 |       "nm": "papel bot Outlines",
1980 |       "parent": 1,
1981 |       "sr": 1,
1982 |       "ks": {
1983 |         "o": { "a": 0, "k": 100, "ix": 11 },
1984 |         "r": { "a": 0, "k": 0, "ix": 10 },
1985 |         "p": { "a": 0, "k": [-8.861, 353.102, 0], "ix": 2 },
1986 |         "a": { "a": 0, "k": [57.389, 18.529, 0], "ix": 1 },
1987 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
1988 |       },
1989 |       "ao": 0,
1990 |       "hasMask": true,
1991 |       "masksProperties": [
1992 |         {
1993 |           "inv": false,
1994 |           "mode": "a",
1995 |           "pt": {
1996 |             "a": 1,
1997 |             "k": [
1998 |               {
1999 |                 "i": { "x": 0.35, "y": 1 },
2000 |                 "o": { "x": 0.167, "y": 0.167 },
2001 |                 "t": 25,
2002 |                 "s": [
2003 |                   {
2004 |                     "i": [
2005 |                       [0, 0],
2006 |                       [0, 0],
2007 |                       [0, 0],
2008 |                       [0, 0]
2009 |                     ],
2010 |                     "o": [
2011 |                       [0, 0],
2012 |                       [0, 0],
2013 |                       [0, 0],
2014 |                       [0, 0]
2015 |                     ],
2016 |                     "v": [
2017 |                       [114.817, 36.647],
2018 |                       [1.381, 36.647],
2019 |                       [1.32, 36.478],
2020 |                       [114.756, 36.478]
2021 |                     ],
2022 |                     "c": true
2023 |                   }
2024 |                 ],
2025 |                 "e": [
2026 |                   {
2027 |                     "i": [
2028 |                       [0, 0],
2029 |                       [0, 0],
2030 |                       [0, 0],
2031 |                       [0, 0]
2032 |                     ],
2033 |                     "o": [
2034 |                       [0, 0],
2035 |                       [0, 0],
2036 |                       [0, 0],
2037 |                       [0, 0]
2038 |                     ],
2039 |                     "v": [
2040 |                       [114.756, 5.022],
2041 |                       [1.32, 5.022],
2042 |                       [1.32, 36.478],
2043 |                       [114.756, 36.478]
2044 |                     ],
2045 |                     "c": true
2046 |                   }
2047 |                 ]
2048 |               },
2049 |               { "t": 45 }
2050 |             ],
2051 |             "ix": 1
2052 |           },
2053 |           "o": { "a": 0, "k": 100, "ix": 3 },
2054 |           "x": { "a": 0, "k": 0, "ix": 4 },
2055 |           "nm": "Mask 1"
2056 |         }
2057 |       ],
2058 |       "shapes": [
2059 |         {
2060 |           "ty": "gr",
2061 |           "it": [
2062 |             {
2063 |               "ind": 0,
2064 |               "ty": "sh",
2065 |               "ix": 1,
2066 |               "ks": {
2067 |                 "a": 0,
2068 |                 "k": {
2069 |                   "i": [
2070 |                     [0, 0],
2071 |                     [0, 0],
2072 |                     [0.013, -9.145],
2073 |                     [0, 0],
2074 |                     [0, 0],
2075 |                     [7.994, -2.105],
2076 |                     [1.814, 0.473],
2077 |                     [-0.022, 8.366],
2078 |                     [0, 0],
2079 |                     [1.528, 0.009],
2080 |                     [0, 0],
2081 |                     [0, 0],
2082 |                     [0, 0],
2083 |                     [0, 0],
2084 |                     [0, 0],
2085 |                     [0, -1.541],
2086 |                     [0, 0],
2087 |                     [-13.061, -0.011],
2088 |                     [0, 0],
2089 |                     [0, 0],
2090 |                     [0, 0],
2091 |                     [-0.609, 0.093],
2092 |                     [-1.049, 0.261],
2093 |                     [-0.013, 11.099],
2094 |                     [0, 0],
2095 |                     [0, 0],
2096 |                     [-5.938, 0.542],
2097 |                     [-0.345, -0.019],
2098 |                     [-0.011, -6.47],
2099 |                     [0, 0],
2100 |                     [0, 0],
2101 |                     [0, 1.541],
2102 |                     [0, 0],
2103 |                     [9.485, 0.042]
2104 |                   ],
2105 |                   "o": [
2106 |                     [0, 0],
2107 |                     [-9.048, 0.552],
2108 |                     [0, 0],
2109 |                     [0, 0],
2110 |                     [-0.017, 8.335],
2111 |                     [-1.815, 0.473],
2112 |                     [-8.019, -2.135],
2113 |                     [0, 0],
2114 |                     [0.011, -1.541],
2115 |                     [0, 0],
2116 |                     [0, 0],
2117 |                     [0, 0],
2118 |                     [0, 0],
2119 |                     [0, 0],
2120 |                     [-1.527, 0],
2121 |                     [0, 0],
2122 |                     [-0.012, 13.175],
2123 |                     [0, 0],
2124 |                     [0, 0],
2125 |                     [0, 0],
2126 |                     [0.609, 0],
2127 |                     [1.076, -0.099],
2128 |                     [10.716, -2.516],
2129 |                     [0, 0],
2130 |                     [0, 0],
2131 |                     [0.079, -6.014],
2132 |                     [0.344, -0.019],
2133 |                     [6.414, 0.01],
2134 |                     [0, 0],
2135 |                     [0, 0],
2136 |                     [1.528, 0],
2137 |                     [0, 0],
2138 |                     [0.04, -9.569],
2139 |                     [0, 0]
2140 |                   ],
2141 |                   "v": [
2142 |                     [89.342, -145.931],
2143 |                     [88.309, -145.931],
2144 |                     [72.188, -128.68],
2145 |                     [72.188, -128.419],
2146 |                     [72.188, -6.1],
2147 |                     [58.594, 11.617],
2148 |                     [53.059, 11.617],
2149 |                     [39.481, -6.211],
2150 |                     [39.481, -9.933],
2151 |                     [36.734, -12.743],
2152 |                     [19.195, -12.743],
2153 |                     [5.094, -12.743],
2154 |                     [-16.645, -12.743],
2155 |                     [-39.406, -12.743],
2156 |                     [-53.01, -12.743],
2157 |                     [-55.777, -9.951],
2158 |                     [-55.777, -6.006],
2159 |                     [-32.146, 17.869],
2160 |                     [-32.111, 17.869],
2161 |                     [-2.276, 17.869],
2162 |                     [54.109, 17.869],
2163 |                     [56.268, 17.776],
2164 |                     [59.46, 17.237],
2165 |                     [77.777, -6.006],
2166 |                     [77.777, -128.586],
2167 |                     [77.777, -128.717],
2168 |                     [88.365, -140.254],
2169 |                     [89.398, -140.254],
2170 |                     [101.02, -128.531],
2171 |                     [101.02, -115.262],
2172 |                     [103.787, -115.262],
2173 |                     [106.555, -118.053],
2174 |                     [106.555, -128.531],
2175 |                     [89.454, -145.931]
2176 |                   ],
2177 |                   "c": true
2178 |                 },
2179 |                 "ix": 2
2180 |               },
2181 |               "nm": "Path 2",
2182 |               "mn": "ADBE Vector Shape - Group",
2183 |               "hd": false
2184 |             },
2185 |             {
2186 |               "ty": "fl",
2187 |               "c": { "a": 0, "k": [0.9, 0.9, 0.9, 1], "ix": 4 },
2188 |               "o": { "a": 0, "k": 100, "ix": 5 },
2189 |               "r": 1,
2190 |               "bm": 0,
2191 |               "nm": "Fill 1",
2192 |               "mn": "ADBE Vector Graphic - Fill",
2193 |               "hd": false
2194 |             },
2195 |             {
2196 |               "ty": "tr",
2197 |               "p": { "a": 0, "k": [58.74, 18.119], "ix": 2 },
2198 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2199 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2200 |               "r": { "a": 0, "k": 0, "ix": 6 },
2201 |               "o": { "a": 0, "k": 100, "ix": 7 },
2202 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2203 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2204 |               "nm": "Transform"
2205 |             }
2206 |           ],
2207 |           "nm": "Group 1",
2208 |           "np": 2,
2209 |           "cix": 2,
2210 |           "bm": 0,
2211 |           "ix": 1,
2212 |           "mn": "ADBE Vector Group",
2213 |           "hd": false
2214 |         }
2215 |       ],
2216 |       "ip": 25,
2217 |       "op": 421,
2218 |       "st": 0,
2219 |       "bm": 0
2220 |     },
2221 |     {
2222 |       "ddd": 0,
2223 |       "ind": 14,
2224 |       "ty": 4,
2225 |       "nm": "Papel front Outlines",
2226 |       "parent": 1,
2227 |       "sr": 1,
2228 |       "ks": {
2229 |         "o": { "a": 0, "k": 100, "ix": 11 },
2230 |         "r": { "a": 0, "k": 0, "ix": 10 },
2231 |         "p": { "a": 0, "k": [42.09, 219.148, 0], "ix": 2 },
2232 |         "a": { "a": 0, "k": [74.219, 89.605, 0], "ix": 1 },
2233 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
2234 |       },
2235 |       "ao": 0,
2236 |       "hasMask": true,
2237 |       "masksProperties": [
2238 |         {
2239 |           "inv": false,
2240 |           "mode": "a",
2241 |           "pt": {
2242 |             "a": 1,
2243 |             "k": [
2244 |               {
2245 |                 "i": { "x": 0.99, "y": 1 },
2246 |                 "o": { "x": 0.28, "y": 0 },
2247 |                 "t": 10,
2248 |                 "s": [
2249 |                   {
2250 |                     "i": [
2251 |                       [0, 0],
2252 |                       [0, 0],
2253 |                       [0, 0],
2254 |                       [0, 0]
2255 |                     ],
2256 |                     "o": [
2257 |                       [0, 0],
2258 |                       [0, 0],
2259 |                       [0, 0],
2260 |                       [0, 0]
2261 |                     ],
2262 |                     "v": [
2263 |                       [152.276, 7.781],
2264 |                       [-1.326, 7.781],
2265 |                       [-1.326, 9.031],
2266 |                       [152.276, 9.031]
2267 |                     ],
2268 |                     "c": true
2269 |                   }
2270 |                 ],
2271 |                 "e": [
2272 |                   {
2273 |                     "i": [
2274 |                       [0, 0],
2275 |                       [0, 0],
2276 |                       [0, 0],
2277 |                       [0, 0]
2278 |                     ],
2279 |                     "o": [
2280 |                       [0, 0],
2281 |                       [0, 0],
2282 |                       [0, 0],
2283 |                       [0, 0]
2284 |                     ],
2285 |                     "v": [
2286 |                       [152.276, 7.781],
2287 |                       [-1.326, 7.781],
2288 |                       [-1.326, 175.031],
2289 |                       [152.276, 175.031]
2290 |                     ],
2291 |                     "c": true
2292 |                   }
2293 |                 ]
2294 |               },
2295 |               { "t": 25 }
2296 |             ],
2297 |             "ix": 1
2298 |           },
2299 |           "o": { "a": 0, "k": 100, "ix": 3 },
2300 |           "x": { "a": 0, "k": 0, "ix": 4 },
2301 |           "nm": "Mask 1"
2302 |         }
2303 |       ],
2304 |       "shapes": [
2305 |         {
2306 |           "ty": "gr",
2307 |           "it": [
2308 |             {
2309 |               "ind": 0,
2310 |               "ty": "sh",
2311 |               "ix": 1,
2312 |               "ks": {
2313 |                 "a": 0,
2314 |                 "k": {
2315 |                   "i": [
2316 |                     [0, 0],
2317 |                     [0, 0],
2318 |                     [0.012, -9.145],
2319 |                     [0, 0],
2320 |                     [0, 0],
2321 |                     [7.994, -2.106],
2322 |                     [0.894, -0.009],
2323 |                     [0, 0],
2324 |                     [0, 0],
2325 |                     [0, 0],
2326 |                     [0, 0],
2327 |                     [-5.953, -0.005],
2328 |                     [0, 0],
2329 |                     [0, 0],
2330 |                     [0, 0],
2331 |                     [-0.61, 0.093],
2332 |                     [-1.049, 0.26],
2333 |                     [-0.014, 11.099],
2334 |                     [0, 0],
2335 |                     [0, 0],
2336 |                     [-5.937, 0.544],
2337 |                     [-0.326, -0.016]
2338 |                   ],
2339 |                   "o": [
2340 |                     [0, 0],
2341 |                     [-9.048, 0.551],
2342 |                     [0, 0],
2343 |                     [0, 0],
2344 |                     [-0.017, 8.335],
2345 |                     [-0.874, 0.227],
2346 |                     [0, 0],
2347 |                     [0, 0],
2348 |                     [0, 0],
2349 |                     [0, 0],
2350 |                     [4.154, 3.667],
2351 |                     [0, 0],
2352 |                     [0, 0],
2353 |                     [0, 0],
2354 |                     [0.608, 0],
2355 |                     [1.075, -0.099],
2356 |                     [10.716, -2.517],
2357 |                     [0, 0],
2358 |                     [0, 0],
2359 |                     [0.079, -6.015],
2360 |                     [0.328, -0.018],
2361 |                     [0, 0]
2362 |                   ],
2363 |                   "v": [
2364 |                     [68.364, -81.9],
2365 |                     [67.331, -81.9],
2366 |                     [51.208, -64.649],
2367 |                     [51.208, -64.388],
2368 |                     [51.208, 57.931],
2369 |                     [37.614, 75.648],
2370 |                     [34.951, 75.996],
2371 |                     [34.951, 75.999],
2372 |                     [34.882, 75.999],
2373 |                     [34.811, 75.999],
2374 |                     [-68.667, 75.999],
2375 |                     [-53.126, 81.9],
2376 |                     [-53.089, 81.9],
2377 |                     [-23.254, 81.9],
2378 |                     [33.132, 81.9],
2379 |                     [35.29, 81.807],
2380 |                     [38.48, 81.268],
2381 |                     [56.799, 58.024],
2382 |                     [56.799, -64.556],
2383 |                     [56.799, -64.686],
2384 |                     [67.385, -76.224],
2385 |                     [68.667, -76.224]
2386 |                   ],
2387 |                   "c": true
2388 |                 },
2389 |                 "ix": 2
2390 |               },
2391 |               "nm": "Path 1",
2392 |               "mn": "ADBE Vector Shape - Group",
2393 |               "hd": false
2394 |             },
2395 |             {
2396 |               "ty": "fl",
2397 |               "c": { "a": 0, "k": [0.9, 0.9, 0.9, 1], "ix": 4 },
2398 |               "o": { "a": 0, "k": 100, "ix": 5 },
2399 |               "r": 1,
2400 |               "bm": 0,
2401 |               "nm": "Fill 1",
2402 |               "mn": "ADBE Vector Graphic - Fill",
2403 |               "hd": false
2404 |             },
2405 |             {
2406 |               "ty": "tr",
2407 |               "p": { "a": 0, "k": [71.074, 92.141], "ix": 2 },
2408 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2409 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2410 |               "r": { "a": 0, "k": 0, "ix": 6 },
2411 |               "o": { "a": 0, "k": 100, "ix": 7 },
2412 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2413 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2414 |               "nm": "Transform"
2415 |             }
2416 |           ],
2417 |           "nm": "Group 1",
2418 |           "np": 2,
2419 |           "cix": 2,
2420 |           "bm": 0,
2421 |           "ix": 1,
2422 |           "mn": "ADBE Vector Group",
2423 |           "hd": false
2424 |         },
2425 |         {
2426 |           "ty": "gr",
2427 |           "it": [
2428 |             {
2429 |               "ind": 0,
2430 |               "ty": "sh",
2431 |               "ix": 1,
2432 |               "ks": {
2433 |                 "a": 0,
2434 |                 "k": {
2435 |                   "i": [
2436 |                     [0, 0],
2437 |                     [0, 0]
2438 |                   ],
2439 |                   "o": [
2440 |                     [0, 0],
2441 |                     [0, 0]
2442 |                   ],
2443 |                   "v": [
2444 |                     [-57.614, -15.262],
2445 |                     [-57.614, -11.587]
2446 |                   ],
2447 |                   "c": false
2448 |                 },
2449 |                 "ix": 2
2450 |               },
2451 |               "nm": "Path 1",
2452 |               "mn": "ADBE Vector Shape - Group",
2453 |               "hd": false
2454 |             },
2455 |             {
2456 |               "ind": 1,
2457 |               "ty": "sh",
2458 |               "ix": 2,
2459 |               "ks": {
2460 |                 "a": 0,
2461 |                 "k": {
2462 |                   "i": [
2463 |                     [0, 0],
2464 |                     [0, 3.997],
2465 |                     [0, 8.289]
2466 |                   ],
2467 |                   "o": [
2468 |                     [5.953, 0],
2469 |                     [0, -32.687],
2470 |                     [0, 0]
2471 |                   ],
2472 |                   "v": [
2473 |                     [-65.219, 79.059],
2474 |                     [-58.189, 68.737],
2475 |                     [-58.135, 4.655]
2476 |                   ],
2477 |                   "c": false
2478 |                 },
2479 |                 "ix": 2
2480 |               },
2481 |               "nm": "Path 2",
2482 |               "mn": "ADBE Vector Shape - Group",
2483 |               "hd": false
2484 |             },
2485 |             {
2486 |               "ind": 2,
2487 |               "ty": "sh",
2488 |               "ix": 3,
2489 |               "ks": {
2490 |                 "a": 0,
2491 |                 "k": {
2492 |                   "i": [
2493 |                     [0, 0],
2494 |                     [0, 0],
2495 |                     [-13.063, 0.021],
2496 |                     [0, 0]
2497 |                   ],
2498 |                   "o": [
2499 |                     [0, 0],
2500 |                     [0.021, -13.171],
2501 |                     [0, 0],
2502 |                     [0, 0]
2503 |                   ],
2504 |                   "v": [
2505 |                     [-58.135, -24.607],
2506 |                     [-58.135, -55.195],
2507 |                     [-34.467, -79.059],
2508 |                     [65.219, -79.059]
2509 |                   ],
2510 |                   "c": false
2511 |                 },
2512 |                 "ix": 2
2513 |               },
2514 |               "nm": "Path 3",
2515 |               "mn": "ADBE Vector Shape - Group",
2516 |               "hd": false
2517 |             },
2518 |             {
2519 |               "ty": "mm",
2520 |               "mm": 1,
2521 |               "nm": "Merge Paths 1",
2522 |               "mn": "ADBE Vector Filter - Merge",
2523 |               "hd": false
2524 |             },
2525 |             {
2526 |               "ty": "st",
2527 |               "c": { "a": 0, "k": [0.9, 0.9, 0.9, 1], "ix": 3 },
2528 |               "o": { "a": 0, "k": 100, "ix": 4 },
2529 |               "w": { "a": 0, "k": 3.6, "ix": 5 },
2530 |               "lc": 2,
2531 |               "lj": 1,
2532 |               "ml": 10,
2533 |               "bm": 0,
2534 |               "nm": "Stroke 1",
2535 |               "mn": "ADBE Vector Graphic - Stroke",
2536 |               "hd": false
2537 |             },
2538 |             {
2539 |               "ty": "tr",
2540 |               "p": { "a": 0, "k": [74.219, 91.151], "ix": 2 },
2541 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2542 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2543 |               "r": { "a": 0, "k": 0, "ix": 6 },
2544 |               "o": { "a": 0, "k": 100, "ix": 7 },
2545 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2546 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2547 |               "nm": "Transform"
2548 |             }
2549 |           ],
2550 |           "nm": "Group 2",
2551 |           "np": 5,
2552 |           "cix": 2,
2553 |           "bm": 0,
2554 |           "ix": 2,
2555 |           "mn": "ADBE Vector Group",
2556 |           "hd": false
2557 |         },
2558 |         {
2559 |           "ty": "gr",
2560 |           "it": [
2561 |             {
2562 |               "ind": 0,
2563 |               "ty": "sh",
2564 |               "ix": 1,
2565 |               "ks": {
2566 |                 "a": 0,
2567 |                 "k": {
2568 |                   "i": [
2569 |                     [0, 0],
2570 |                     [0.02, -13.17],
2571 |                     [0, 0],
2572 |                     [0, 0]
2573 |                   ],
2574 |                   "o": [
2575 |                     [-13.063, 0.021],
2576 |                     [0, 0],
2577 |                     [0, 0],
2578 |                     [0, 0]
2579 |                   ],
2580 |                   "v": [
2581 |                     [-6.133, -52.006],
2582 |                     [-29.801, -28.142],
2583 |                     [-29.801, 52.08],
2584 |                     [29.801, -52.08]
2585 |                   ],
2586 |                   "c": true
2587 |                 },
2588 |                 "ix": 2
2589 |               },
2590 |               "nm": "Path 1",
2591 |               "mn": "ADBE Vector Shape - Group",
2592 |               "hd": false
2593 |             },
2594 |             {
2595 |               "ty": "fl",
2596 |               "c": { "a": 0, "k": [0.94, 0.94, 0.94, 1], "ix": 4 },
2597 |               "o": { "a": 0, "k": 100, "ix": 5 },
2598 |               "r": 1,
2599 |               "bm": 0,
2600 |               "nm": "Fill 1",
2601 |               "mn": "ADBE Vector Graphic - Fill",
2602 |               "hd": false
2603 |             },
2604 |             {
2605 |               "ty": "tr",
2606 |               "p": { "a": 0, "k": [45.83, 62.33], "ix": 2 },
2607 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2608 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2609 |               "r": { "a": 0, "k": 0, "ix": 6 },
2610 |               "o": { "a": 0, "k": 100, "ix": 7 },
2611 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2612 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2613 |               "nm": "Transform"
2614 |             }
2615 |           ],
2616 |           "nm": "Group 3",
2617 |           "np": 2,
2618 |           "cix": 2,
2619 |           "bm": 0,
2620 |           "ix": 3,
2621 |           "mn": "ADBE Vector Group",
2622 |           "hd": false
2623 |         },
2624 |         {
2625 |           "ty": "gr",
2626 |           "it": [
2627 |             {
2628 |               "ind": 0,
2629 |               "ty": "sh",
2630 |               "ix": 1,
2631 |               "ks": {
2632 |                 "a": 0,
2633 |                 "k": {
2634 |                   "i": [
2635 |                     [0, 0],
2636 |                     [0, 0],
2637 |                     [0, 0],
2638 |                     [0.02, -13.17],
2639 |                     [0, 0],
2640 |                     [-1.527, 0],
2641 |                     [0, 0],
2642 |                     [-0.009, 13.153],
2643 |                     [0, 0],
2644 |                     [0, 0],
2645 |                     [-6.363, 0.009],
2646 |                     [-0.025, 0.001]
2647 |                   ],
2648 |                   "o": [
2649 |                     [0, 0],
2650 |                     [0, 0],
2651 |                     [-13.062, 0.02],
2652 |                     [0, 0],
2653 |                     [0, 1.54],
2654 |                     [0, 0],
2655 |                     [13.045, -0.041],
2656 |                     [0, 0],
2657 |                     [0, 0],
2658 |                     [0.081, -6.417],
2659 |                     [0.026, 0],
2660 |                     [0, 0]
2661 |                   ],
2662 |                   "v": [
2663 |                     [61.639, -76.59],
2664 |                     [61.639, -81.84],
2665 |                     [-38.048, -81.84],
2666 |                     [-61.714, -57.977],
2667 |                     [-61.714, 79.05],
2668 |                     [-58.947, 81.84],
2669 |                     [26.406, 81.84],
2670 |                     [50.018, 57.977],
2671 |                     [50.018, -64.542],
2672 |                     [50.018, -64.673],
2673 |                     [61.639, -76.581],
2674 |                     [61.714, -76.59]
2675 |                   ],
2676 |                   "c": true
2677 |                 },
2678 |                 "ix": 2
2679 |               },
2680 |               "nm": "Path 1",
2681 |               "mn": "ADBE Vector Shape - Group",
2682 |               "hd": false
2683 |             },
2684 |             {
2685 |               "ty": "fl",
2686 |               "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
2687 |               "o": { "a": 0, "k": 100, "ix": 5 },
2688 |               "r": 1,
2689 |               "bm": 0,
2690 |               "nm": "Fill 1",
2691 |               "mn": "ADBE Vector Graphic - Fill",
2692 |               "hd": false
2693 |             },
2694 |             {
2695 |               "ty": "tr",
2696 |               "p": { "a": 0, "k": [77.799, 92.164], "ix": 2 },
2697 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2698 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2699 |               "r": { "a": 0, "k": 0, "ix": 6 },
2700 |               "o": { "a": 0, "k": 100, "ix": 7 },
2701 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2702 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2703 |               "nm": "Transform"
2704 |             }
2705 |           ],
2706 |           "nm": "Group 4",
2707 |           "np": 2,
2708 |           "cix": 2,
2709 |           "bm": 0,
2710 |           "ix": 4,
2711 |           "mn": "ADBE Vector Group",
2712 |           "hd": false
2713 |         }
2714 |       ],
2715 |       "ip": 10,
2716 |       "op": 421,
2717 |       "st": 0,
2718 |       "bm": 0
2719 |     },
2720 |     {
2721 |       "ddd": 0,
2722 |       "ind": 15,
2723 |       "ty": 4,
2724 |       "nm": "Papel top Outlines",
2725 |       "parent": 1,
2726 |       "sr": 1,
2727 |       "ks": {
2728 |         "o": { "a": 0, "k": 100, "ix": 11 },
2729 |         "r": { "a": 0, "k": 0, "ix": 10 },
2730 |         "p": { "a": 0, "k": [89.026, 94.609, 0], "ix": 2 },
2731 |         "a": { "a": 0, "k": [69.157, 27.261, 0], "ix": 1 },
2732 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
2733 |       },
2734 |       "ao": 0,
2735 |       "hasMask": true,
2736 |       "masksProperties": [
2737 |         {
2738 |           "inv": false,
2739 |           "mode": "a",
2740 |           "pt": {
2741 |             "a": 1,
2742 |             "k": [
2743 |               {
2744 |                 "i": { "x": 0.833, "y": 0.833 },
2745 |                 "o": { "x": 0.4, "y": 0 },
2746 |                 "t": 0,
2747 |                 "s": [
2748 |                   {
2749 |                     "i": [
2750 |                       [0, 0],
2751 |                       [0, 0],
2752 |                       [0, 0],
2753 |                       [0, 0]
2754 |                     ],
2755 |                     "o": [
2756 |                       [0, 0],
2757 |                       [0, 0],
2758 |                       [0, 0],
2759 |                       [0, 0]
2760 |                     ],
2761 |                     "v": [
2762 |                       [133.251, 43.755],
2763 |                       [8.394, 43.755],
2764 |                       [8.394, 45.207],
2765 |                       [133.251, 45.207]
2766 |                     ],
2767 |                     "c": true
2768 |                   }
2769 |                 ],
2770 |                 "e": [
2771 |                   {
2772 |                     "i": [
2773 |                       [0, 0],
2774 |                       [0, 0],
2775 |                       [0, 0],
2776 |                       [0, 0]
2777 |                     ],
2778 |                     "o": [
2779 |                       [0, 0],
2780 |                       [0, 0],
2781 |                       [0, 0],
2782 |                       [0, 0]
2783 |                     ],
2784 |                     "v": [
2785 |                       [133.324, 9.505],
2786 |                       [8.466, 9.505],
2787 |                       [8.394, 45.207],
2788 |                       [133.251, 45.207]
2789 |                     ],
2790 |                     "c": true
2791 |                   }
2792 |                 ]
2793 |               },
2794 |               { "t": 10 }
2795 |             ],
2796 |             "ix": 1
2797 |           },
2798 |           "o": { "a": 0, "k": 100, "ix": 3 },
2799 |           "x": { "a": 0, "k": 0, "ix": 4 },
2800 |           "nm": "Mask 1"
2801 |         }
2802 |       ],
2803 |       "shapes": [
2804 |         {
2805 |           "ty": "gr",
2806 |           "it": [
2807 |             {
2808 |               "ind": 0,
2809 |               "ty": "sh",
2810 |               "ix": 1,
2811 |               "ks": {
2812 |                 "a": 0,
2813 |                 "k": {
2814 |                   "i": [
2815 |                     [0, -1.544],
2816 |                     [-1.545, 0],
2817 |                     [-0.018, -0.001],
2818 |                     [-0.01, -6.471],
2819 |                     [0, 0],
2820 |                     [0, 0],
2821 |                     [0, 1.541],
2822 |                     [0, 0],
2823 |                     [9.485, 0.041],
2824 |                     [0, 0],
2825 |                     [0, 0],
2826 |                     [0.251, -0.027],
2827 |                     [0, 0]
2828 |                   ],
2829 |                   "o": [
2830 |                     [0, 1.544],
2831 |                     [97.877, 0],
2832 |                     [6.414, 0.011],
2833 |                     [0, 0],
2834 |                     [0, 0],
2835 |                     [1.527, 0],
2836 |                     [0, 0],
2837 |                     [0.041, -9.569],
2838 |                     [0, 0],
2839 |                     [0, 0],
2840 |                     [-0.254, 0.015],
2841 |                     [0, 0],
2842 |                     [-1.544, 0]
2843 |                   ],
2844 |                   "v": [
2845 |                     [-58.955, -12.455],
2846 |                     [-56.155, -9.658],
2847 |                     [41.758, -9.658],
2848 |                     [53.379, 2.066],
2849 |                     [53.379, 15.334],
2850 |                     [56.147, 15.334],
2851 |                     [58.914, 12.543],
2852 |                     [58.914, 2.066],
2853 |                     [41.814, -15.334],
2854 |                     [41.703, -15.334],
2855 |                     [40.67, -15.334],
2856 |                     [39.918, -15.251],
2857 |                     [-56.159, -15.251]
2858 |                   ],
2859 |                   "c": true
2860 |                 },
2861 |                 "ix": 2
2862 |               },
2863 |               "nm": "Path 1",
2864 |               "mn": "ADBE Vector Shape - Group",
2865 |               "hd": false
2866 |             },
2867 |             {
2868 |               "ty": "fl",
2869 |               "c": { "a": 0, "k": [0.9, 0.9, 0.9, 1], "ix": 4 },
2870 |               "o": { "a": 0, "k": 100, "ix": 5 },
2871 |               "r": 1,
2872 |               "bm": 0,
2873 |               "nm": "Fill 1",
2874 |               "mn": "ADBE Vector Graphic - Fill",
2875 |               "hd": false
2876 |             },
2877 |             {
2878 |               "ty": "tr",
2879 |               "p": { "a": 0, "k": [69.205, 25.502], "ix": 2 },
2880 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2881 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2882 |               "r": { "a": 0, "k": 0, "ix": 6 },
2883 |               "o": { "a": 0, "k": 100, "ix": 7 },
2884 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2885 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2886 |               "nm": "Transform"
2887 |             }
2888 |           ],
2889 |           "nm": "Group 1",
2890 |           "np": 2,
2891 |           "cix": 2,
2892 |           "bm": 0,
2893 |           "ix": 1,
2894 |           "mn": "ADBE Vector Group",
2895 |           "hd": false
2896 |         },
2897 |         {
2898 |           "ty": "gr",
2899 |           "it": [
2900 |             {
2901 |               "ind": 0,
2902 |               "ty": "sh",
2903 |               "ix": 1,
2904 |               "ks": {
2905 |                 "a": 0,
2906 |                 "k": {
2907 |                   "i": [
2908 |                     [-0.67, 0],
2909 |                     [0, -9.44],
2910 |                     [0, 0],
2911 |                     [-1.527, 0],
2912 |                     [0, 0],
2913 |                     [0, 1.632],
2914 |                     [0, 0],
2915 |                     [9.475, 0]
2916 |                   ],
2917 |                   "o": [
2918 |                     [16, 0],
2919 |                     [0, 0],
2920 |                     [0, 1.632],
2921 |                     [0, 0],
2922 |                     [1.528, 0],
2923 |                     [0, 0],
2924 |                     [0, -10.128],
2925 |                     [-0.642, 0]
2926 |                   ],
2927 |                   "v": [
2928 |                     [-58.571, -15.544],
2929 |                     [-40.571, 3.353],
2930 |                     [-40.571, 13.652],
2931 |                     [-37.803, 16.61],
2932 |                     [56.472, 15.79],
2933 |                     [59.24, 12.833],
2934 |                     [59.24, 1.73],
2935 |                     [42.083, -16.61]
2936 |                   ],
2937 |                   "c": true
2938 |                 },
2939 |                 "ix": 2
2940 |               },
2941 |               "nm": "Path 1",
2942 |               "mn": "ADBE Vector Shape - Group",
2943 |               "hd": false
2944 |             },
2945 |             {
2946 |               "ty": "fl",
2947 |               "c": { "a": 0, "k": [0.9, 0.9, 0.9, 1], "ix": 4 },
2948 |               "o": { "a": 0, "k": 100, "ix": 5 },
2949 |               "r": 1,
2950 |               "bm": 0,
2951 |               "nm": "Fill 1",
2952 |               "mn": "ADBE Vector Graphic - Fill",
2953 |               "hd": false
2954 |             },
2955 |             {
2956 |               "ty": "tr",
2957 |               "p": { "a": 0, "k": [68.824, 26.86], "ix": 2 },
2958 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
2959 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
2960 |               "r": { "a": 0, "k": 0, "ix": 6 },
2961 |               "o": { "a": 0, "k": 100, "ix": 7 },
2962 |               "sk": { "a": 0, "k": 0, "ix": 4 },
2963 |               "sa": { "a": 0, "k": 0, "ix": 5 },
2964 |               "nm": "Transform"
2965 |             }
2966 |           ],
2967 |           "nm": "Group 2",
2968 |           "np": 2,
2969 |           "cix": 2,
2970 |           "bm": 0,
2971 |           "ix": 2,
2972 |           "mn": "ADBE Vector Group",
2973 |           "hd": false
2974 |         }
2975 |       ],
2976 |       "ip": 0,
2977 |       "op": 421,
2978 |       "st": 0,
2979 |       "bm": 0
2980 |     },
2981 |     {
2982 |       "ddd": 0,
2983 |       "ind": 16,
2984 |       "ty": 4,
2985 |       "nm": "circulito Outlines",
2986 |       "sr": 1,
2987 |       "ks": {
2988 |         "o": { "a": 0, "k": 100, "ix": 11 },
2989 |         "r": { "a": 0, "k": 0, "ix": 10 },
2990 |         "p": { "a": 0, "k": [516.83, 232.086, 0], "ix": 2 },
2991 |         "a": { "a": 0, "k": [7.194, 7.198, 0], "ix": 1 },
2992 |         "s": {
2993 |           "a": 1,
2994 |           "k": [
2995 |             {
2996 |               "i": { "x": [0.434, 0.434, 0.67], "y": [1, 1, 1] },
2997 |               "o": { "x": [0.233, 0.233, 0.33], "y": [0, 0, 0] },
2998 |               "t": 232,
2999 |               "s": [0, 0, 100],
3000 |               "e": [240, 240, 100]
3001 |             },
3002 |             {
3003 |               "i": { "x": [0.196, 0.196, 0.67], "y": [1, 1, 1] },
3004 |               "o": { "x": [0.172, 0.172, 0.33], "y": [0, 0, 0] },
3005 |               "t": 252,
3006 |               "s": [240, 240, 100],
3007 |               "e": [200, 200, 100]
3008 |             },
3009 |             { "t": 284 }
3010 |           ],
3011 |           "ix": 6
3012 |         }
3013 |       },
3014 |       "ao": 0,
3015 |       "shapes": [
3016 |         {
3017 |           "ty": "gr",
3018 |           "it": [
3019 |             {
3020 |               "ind": 0,
3021 |               "ty": "sh",
3022 |               "ix": 1,
3023 |               "ks": {
3024 |                 "a": 0,
3025 |                 "k": {
3026 |                   "i": [
3027 |                     [-1.643, 0],
3028 |                     [0, 1.652],
3029 |                     [1.642, 0],
3030 |                     [0, -1.652]
3031 |                   ],
3032 |                   "o": [
3033 |                     [1.642, 0],
3034 |                     [0, -1.652],
3035 |                     [-1.643, 0],
3036 |                     [0, 1.652]
3037 |                   ],
3038 |                   "v": [
3039 |                     [0, 2.988],
3040 |                     [2.976, 0],
3041 |                     [0, -2.988],
3042 |                     [-2.977, 0]
3043 |                   ],
3044 |                   "c": true
3045 |                 },
3046 |                 "ix": 2
3047 |               },
3048 |               "nm": "Path 1",
3049 |               "mn": "ADBE Vector Shape - Group",
3050 |               "hd": false
3051 |             },
3052 |             {
3053 |               "ind": 1,
3054 |               "ty": "sh",
3055 |               "ix": 2,
3056 |               "ks": {
3057 |                 "a": 0,
3058 |                 "k": {
3059 |                   "i": [
3060 |                     [3.837, 0],
3061 |                     [0, 3.836],
3062 |                     [-3.837, 0],
3063 |                     [0, -3.836]
3064 |                   ],
3065 |                   "o": [
3066 |                     [-3.837, 0],
3067 |                     [0, -3.836],
3068 |                     [3.837, 0],
3069 |                     [0, 3.836]
3070 |                   ],
3071 |                   "v": [
3072 |                     [0, 6.948],
3073 |                     [-6.944, 0],
3074 |                     [0, -6.948],
3075 |                     [6.944, 0]
3076 |                   ],
3077 |                   "c": true
3078 |                 },
3079 |                 "ix": 2
3080 |               },
3081 |               "nm": "Path 2",
3082 |               "mn": "ADBE Vector Shape - Group",
3083 |               "hd": false
3084 |             },
3085 |             {
3086 |               "ty": "mm",
3087 |               "mm": 1,
3088 |               "nm": "Merge Paths 1",
3089 |               "mn": "ADBE Vector Filter - Merge",
3090 |               "hd": false
3091 |             },
3092 |             {
3093 |               "ty": "fl",
3094 |               "c": { "a": 0, "k": [0.65, 0.65, 0.65, 1], "ix": 4 },
3095 |               "o": { "a": 0, "k": 100, "ix": 5 },
3096 |               "r": 1,
3097 |               "bm": 0,
3098 |               "nm": "Fill 1",
3099 |               "mn": "ADBE Vector Graphic - Fill",
3100 |               "hd": false
3101 |             },
3102 |             {
3103 |               "ty": "tr",
3104 |               "p": { "a": 0, "k": [7.194, 7.198], "ix": 2 },
3105 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
3106 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
3107 |               "r": { "a": 0, "k": 0, "ix": 6 },
3108 |               "o": { "a": 0, "k": 100, "ix": 7 },
3109 |               "sk": { "a": 0, "k": 0, "ix": 4 },
3110 |               "sa": { "a": 0, "k": 0, "ix": 5 },
3111 |               "nm": "Transform"
3112 |             }
3113 |           ],
3114 |           "nm": "Group 1",
3115 |           "np": 4,
3116 |           "cix": 2,
3117 |           "bm": 0,
3118 |           "ix": 1,
3119 |           "mn": "ADBE Vector Group",
3120 |           "hd": false
3121 |         }
3122 |       ],
3123 |       "ip": 232,
3124 |       "op": 566,
3125 |       "st": 145,
3126 |       "bm": 0
3127 |     },
3128 |     {
3129 |       "ddd": 0,
3130 |       "ind": 17,
3131 |       "ty": 4,
3132 |       "nm": "x 2 Outlines",
3133 |       "sr": 1,
3134 |       "ks": {
3135 |         "o": { "a": 0, "k": 100, "ix": 11 },
3136 |         "r": { "a": 0, "k": 0, "ix": 10 },
3137 |         "p": { "a": 0, "k": [96.613, 416.097, 0], "ix": 2 },
3138 |         "a": { "a": 0, "k": [6.515, 6.515, 0], "ix": 1 },
3139 |         "s": {
3140 |           "a": 1,
3141 |           "k": [
3142 |             {
3143 |               "i": { "x": [0.434, 0.434, 0.67], "y": [1, 1, 1] },
3144 |               "o": { "x": [0.233, 0.233, 0.33], "y": [0, 0, 0] },
3145 |               "t": 252,
3146 |               "s": [0, 0, 100],
3147 |               "e": [240, 240, 100]
3148 |             },
3149 |             {
3150 |               "i": { "x": [0.196, 0.196, 0.67], "y": [1, 1, 1] },
3151 |               "o": { "x": [0.172, 0.172, 0.33], "y": [0, 0, 0] },
3152 |               "t": 272,
3153 |               "s": [240, 240, 100],
3154 |               "e": [200, 200, 100]
3155 |             },
3156 |             { "t": 304 }
3157 |           ],
3158 |           "ix": 6
3159 |         }
3160 |       },
3161 |       "ao": 0,
3162 |       "shapes": [
3163 |         {
3164 |           "ty": "gr",
3165 |           "it": [
3166 |             {
3167 |               "ind": 0,
3168 |               "ty": "sh",
3169 |               "ix": 1,
3170 |               "ks": {
3171 |                 "a": 0,
3172 |                 "k": {
3173 |                   "i": [
3174 |                     [0, 0],
3175 |                     [0, 0],
3176 |                     [0, 0],
3177 |                     [0, 0],
3178 |                     [0, 0],
3179 |                     [0, 0],
3180 |                     [0, 0],
3181 |                     [0, 0],
3182 |                     [0, 0],
3183 |                     [0, 0],
3184 |                     [0, 0],
3185 |                     [0, 0]
3186 |                   ],
3187 |                   "o": [
3188 |                     [0, 0],
3189 |                     [0, 0],
3190 |                     [0, 0],
3191 |                     [0, 0],
3192 |                     [0, 0],
3193 |                     [0, 0],
3194 |                     [0, 0],
3195 |                     [0, 0],
3196 |                     [0, 0],
3197 |                     [0, 0],
3198 |                     [0, 0],
3199 |                     [0, 0]
3200 |                   ],
3201 |                   "v": [
3202 |                     [6.258, 3.885],
3203 |                     [3.885, 6.258],
3204 |                     [0.001, 2.372],
3205 |                     [-3.891, 6.264],
3206 |                     [-6.264, 3.891],
3207 |                     [-2.374, -0.001],
3208 |                     [-6.258, -3.885],
3209 |                     [-3.885, -6.26],
3210 |                     [-0.001, -2.374],
3211 |                     [3.891, -6.264],
3212 |                     [6.264, -3.891],
3213 |                     [2.374, 0.001]
3214 |                   ],
3215 |                   "c": true
3216 |                 },
3217 |                 "ix": 2
3218 |               },
3219 |               "nm": "Path 1",
3220 |               "mn": "ADBE Vector Shape - Group",
3221 |               "hd": false
3222 |             },
3223 |             {
3224 |               "ty": "fl",
3225 |               "c": { "a": 0, "k": [0.65, 0.65, 0.65, 1], "ix": 4 },
3226 |               "o": { "a": 0, "k": 100, "ix": 5 },
3227 |               "r": 1,
3228 |               "bm": 0,
3229 |               "nm": "Fill 1",
3230 |               "mn": "ADBE Vector Graphic - Fill",
3231 |               "hd": false
3232 |             },
3233 |             {
3234 |               "ty": "tr",
3235 |               "p": { "a": 0, "k": [6.515, 6.515], "ix": 2 },
3236 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
3237 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
3238 |               "r": { "a": 0, "k": 0, "ix": 6 },
3239 |               "o": { "a": 0, "k": 100, "ix": 7 },
3240 |               "sk": { "a": 0, "k": 0, "ix": 4 },
3241 |               "sa": { "a": 0, "k": 0, "ix": 5 },
3242 |               "nm": "Transform"
3243 |             }
3244 |           ],
3245 |           "nm": "Group 1",
3246 |           "np": 2,
3247 |           "cix": 2,
3248 |           "bm": 0,
3249 |           "ix": 1,
3250 |           "mn": "ADBE Vector Group",
3251 |           "hd": false
3252 |         }
3253 |       ],
3254 |       "ip": 252,
3255 |       "op": 441,
3256 |       "st": 20,
3257 |       "bm": 0
3258 |     },
3259 |     {
3260 |       "ddd": 0,
3261 |       "ind": 18,
3262 |       "ty": 4,
3263 |       "nm": "bg Outlines",
3264 |       "sr": 1,
3265 |       "ks": {
3266 |         "o": {
3267 |           "a": 1,
3268 |           "k": [
3269 |             {
3270 |               "i": { "x": [0.5], "y": [1] },
3271 |               "o": { "x": [0.44], "y": [0] },
3272 |               "t": 7,
3273 |               "s": [0],
3274 |               "e": [100]
3275 |             },
3276 |             { "t": 49 }
3277 |           ],
3278 |           "ix": 11
3279 |         },
3280 |         "r": { "a": 0, "k": 0, "ix": 10 },
3281 |         "p": { "a": 0, "k": [318.455, 325.042, 0], "ix": 2 },
3282 |         "a": { "a": 0, "k": [119.513, 102.602, 0], "ix": 1 },
3283 |         "s": { "a": 0, "k": [200, 200, 100], "ix": 6 }
3284 |       },
3285 |       "ao": 0,
3286 |       "shapes": [
3287 |         {
3288 |           "ty": "gr",
3289 |           "it": [
3290 |             {
3291 |               "ind": 0,
3292 |               "ty": "sh",
3293 |               "ix": 1,
3294 |               "ks": {
3295 |                 "a": 0,
3296 |                 "k": {
3297 |                   "i": [
3298 |                     [-34.357, -7.157],
3299 |                     [-2.441, 47.062],
3300 |                     [17.957, 18.605],
3301 |                     [34.584, 38.554],
3302 |                     [38.389, -25.44],
3303 |                     [-24.266, -40.899]
3304 |                   ],
3305 |                   "o": [
3306 |                     [79.337, 8.029],
3307 |                     [3.66, -70.593],
3308 |                     [-17.958, -18.605],
3309 |                     [-23.057, -25.703],
3310 |                     [-30.965, 25.202],
3311 |                     [24.266, 40.898]
3312 |                   ],
3313 |                   "v": [
3314 |                     [-7.063, 94.323],
3315 |                     [115.603, 35.774],
3316 |                     [39.645, -45.798],
3317 |                     [7.22, -76.517],
3318 |                     [-84.949, -76.912],
3319 |                     [-94.997, 22.24]
3320 |                   ],
3321 |                   "c": true
3322 |                 },
3323 |                 "ix": 2
3324 |               },
3325 |               "nm": "Path 1",
3326 |               "mn": "ADBE Vector Shape - Group",
3327 |               "hd": false
3328 |             },
3329 |             {
3330 |               "ty": "fl",
3331 |               "c": { "a": 0, "k": [0.78, 0.78, 0.78, 1], "ix": 4 },
3332 |               "o": { "a": 0, "k": 100, "ix": 5 },
3333 |               "r": 1,
3334 |               "bm": 0,
3335 |               "nm": "Fill 1",
3336 |               "mn": "ADBE Vector Graphic - Fill",
3337 |               "hd": false
3338 |             },
3339 |             {
3340 |               "ty": "tr",
3341 |               "p": { "a": 0, "k": [119.513, 102.602], "ix": 2 },
3342 |               "a": { "a": 0, "k": [0, 0], "ix": 1 },
3343 |               "s": { "a": 0, "k": [100, 100], "ix": 3 },
3344 |               "r": { "a": 0, "k": 0, "ix": 6 },
3345 |               "o": { "a": 0, "k": 100, "ix": 7 },
3346 |               "sk": { "a": 0, "k": 0, "ix": 4 },
3347 |               "sa": { "a": 0, "k": 0, "ix": 5 },
3348 |               "nm": "Transform"
3349 |             }
3350 |           ],
3351 |           "nm": "Group 1",
3352 |           "np": 2,
3353 |           "cix": 2,
3354 |           "bm": 0,
3355 |           "ix": 1,
3356 |           "mn": "ADBE Vector Group",
3357 |           "hd": false
3358 |         }
3359 |       ],
3360 |       "ip": 0,
3361 |       "op": 421,
3362 |       "st": 0,
3363 |       "bm": 0
3364 |     }
3365 |   ],
3366 |   "markers": []
3367 | }
3368 | 


--------------------------------------------------------------------------------
/src/components/NoImagesFound/NoDataFound.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Lottie from 'react-lottie';
 3 | 
 4 | import animationData from './NoDataFound.json';
 5 | 
 6 | const NoDataFound = ({ text }) => {
 7 |   const defaultOptions = {
 8 |     loop: true,
 9 |     autoplay: true,
10 |     animationData: animationData,
11 |     rendererSettings: {
12 |       preserveAspectRatio: 'xMidYMid slice',
13 |     },
14 |   };
15 |   return (
16 |     <div className='flex flex-col h-96 w-96 text-center'>
17 |       <Lottie options={defaultOptions} />
18 |       <div className='text-center font-bold text-violet-500'>
19 |         No {text} Found
20 |       </div>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default NoDataFound;
26 | 


--------------------------------------------------------------------------------
/src/components/NoImagesFound/NoImagesFound.js:
--------------------------------------------------------------------------------
 1 | import NoDataFound from './NoDataFound';
 2 | 
 3 | const NoImagesFound = () => {
 4 |   return (
 5 |     <div className='flex items-center justify-center text-2xl'>
 6 |       <NoDataFound text='Images' />
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default NoImagesFound;
12 | 


--------------------------------------------------------------------------------
/src/components/Noresults.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import noresults from "./noresults.png";
 3 | const Noresults = () => {
 4 |   return (
 5 |     <div className="text-center flex justify-center my-10">
 6 |       <img src={noresults} className='text-violet-500'></img>
 7 |       <div className="text-center flex justify-center font-bold text-violet-500 mx-2">Sorry no search results available </div>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default Noresults
13 | 


--------------------------------------------------------------------------------
/src/components/ShimmerLoading/ShimmerLoading.tsx:
--------------------------------------------------------------------------------
 1 | const ShimmerLoading: React.FC = () => {
 2 |   return (
 3 |     <div className='animate-pulse dark:bg-black dark:h-screen'>
 4 |       <div className='relative'>
 5 |         <div className='bg-gradient-to-r from-gray-200 to-gray-300 h-96 animate-pulse'></div>
 6 |         <div className='absolute top-0 left-0 p-4 text-white max-w-2xl'></div>
 7 |       </div>
 8 |       <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 p-5 mt-5'>
 9 |         {[1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
10 |           <div
11 |             key={index}
12 |             className='relative group w-full md:w-80 h-72 rounded-md overflow-hidden shadow-l'
13 |           >
14 |             <div className='bg-gradient-to-r from-gray-200 to-gray-300 animate-pulse h-full w-full'></div>
15 |             <div className='absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 backdrop-blur-sm'></div>
16 |           </div>
17 |         ))}
18 |       </div>
19 |       xs
20 |     </div>
21 |   );
22 | };
23 | 
24 | export default ShimmerLoading;
25 | 


--------------------------------------------------------------------------------
/src/components/assets/RocketLaunch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/RocketLaunch.png


--------------------------------------------------------------------------------
/src/components/assets/User.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/User.png


--------------------------------------------------------------------------------
/src/components/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/bg.png


--------------------------------------------------------------------------------
/src/components/assets/cam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/cam.png


--------------------------------------------------------------------------------
/src/components/assets/fork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/fork.png


--------------------------------------------------------------------------------
/src/components/assets/github-star.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/github-star.webp


--------------------------------------------------------------------------------
/src/components/assets/nft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/nft.png


--------------------------------------------------------------------------------
/src/components/assets/pr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/pr.png


--------------------------------------------------------------------------------
/src/components/assets/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/assets/rectangle.png


--------------------------------------------------------------------------------
/src/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from 'react'
 2 | import logo from '../assets/cam.png'
 3 | import githubStar from "../assets/github-star.webp"
 4 | import { Link } from "react-router-dom"
 5 | 
 6 | export default function Footer() {
 7 | 
 8 |   // Animation in footer
 9 |   const [isVisible, setIsVisible] = useState(false);
10 |   const ref = useRef(null);
11 |   const ref2 = useRef(null);
12 |   const ref3 = useRef(null);
13 |   const ref4 = useRef(null);
14 |   const ref5 = useRef(null);
15 | 
16 |   // Multiple Ref to animate multiple elements [II]
17 |   useEffect(() => {
18 |     if (isVisible) {
19 |       ref.current.classList.add('slide__in');
20 |       ref2.current.classList.add('slide__in2');
21 |       ref3.current.classList.add('slide__in3');
22 |       ref4.current.classList.add('slide__in4');
23 |       ref5.current.classList.add('slide__in5');
24 |     }
25 |     else {
26 |       ref.current.classList.remove('slide__in');
27 |       ref2.current.classList.remove('slide__in2');
28 |       ref3.current.classList.remove('slide__in3');
29 |       ref4.current.classList.remove('slide__in4');
30 |       ref5.current.classList.remove('slide__in5');
31 |     }
32 |   })
33 | 
34 |   // Intersection Observer [I]
35 |   useEffect(() => {
36 |     const observer = new IntersectionObserver(([entry]) => {
37 |       setIsVisible(entry.isIntersecting);
38 |       console.log(entry.isIntersecting);
39 |     })
40 |     observer.observe(ref.current);
41 |     return () => observer.disconnect();
42 |   }, []);
43 | 
44 |   return (
45 |     <footer style={{ backgroundColor: "#0b161d" }} className="border-t border-gray-800 pt-10 overflow-hidden">
46 |       <div className="text-white py-8 px-4 md:px-12">
47 |         <div className="container mx-auto flex flex-wrap justify-center">
48 |           <div ref={ref} className="w-full md:w-3/5 lg:w-2/5 px-4">
49 |             <div className="mb-4">
50 |               <div className="flex items-center">
51 |               <img className="inline-block w-10 h-8" src={logo} alt="SnapGrid Logo" />
52 |               <b className="font-bold text-2xl">SnapGrid</b>
53 |               </div>
54 |               <p className="mt-2">SnapGrid is a cool website where you can find and get really nice pictures of lots of different things, like nature and buildings!</p>
55 |             </div>
56 |           </div>
57 | 
58 |           <div ref={ref2} className="w-full md:w-2/5 lg:w-1/5 px-4">
59 |             <div className="mb-4">
60 |               <h2 className="text-lg font-semibold">Documentation</h2>
61 |               <ul className="mt-2">
62 |                 <li className="cursor-pointer hover:font-bold"><Link to={'/docs'}>Docs</Link></li>
63 |               </ul>
64 |             </div>
65 |           </div>
66 | 
67 |           <div ref={ref3} className="w-full md:w-3/5 lg:w-1/5 px-4">
68 |             <div className="mb-4">
69 |               <h2 className="text-lg font-semibold">License</h2>
70 |               <ul className="mt-2 hover:font-bold">
71 |                 <li><a className="hover:font-bold" href="https://opensource.org/license/mit/">MIT License</a></li>
72 |               </ul>
73 |             </div>
74 |           </div>
75 | 
76 |           <div ref={ref4} className="w-full md:w-2/5 lg:w-1/5 px-4">
77 |             <div className="mb-4">
78 |               <a href="https://github.com/Vijaykv5/SnapGrid">
79 |                 <img className="w-[115px] h-[40px]" src={githubStar} alt="Github Star Us" />
80 |               </a>
81 |             </div>
82 |           </div>
83 |         </div>
84 |       </div>
85 | 
86 |       <div ref={ref5} className="text-center py-4 text-white">
87 |         <p>&copy; SnapGrid 2024 All rights reserved</p>
88 |       </div>
89 | 
90 |     </footer>
91 |   )
92 | }


--------------------------------------------------------------------------------
/src/components/menu/BackToTopButton.tsx:
--------------------------------------------------------------------------------
 1 | import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 3 | import React from 'react';
 4 | import { useEffect, useState } from 'react';
 5 | 
 6 | function BackToTopButton() {
 7 |   const [backToTopButton, setBackToTopButton] = useState<Boolean>(false);
 8 | 
 9 |   useEffect(() => {
10 |     window.addEventListener('scroll', () => {
11 |       if (window.scrollY > 100) {
12 |         setBackToTopButton(true);
13 |       } else {
14 |         setBackToTopButton(false);
15 |       }
16 |     });
17 |   }, []);
18 | 
19 |   const scrollUp = () => {
20 |     window.scrollTo({
21 |       top: 0,
22 |       behavior: 'smooth',
23 |     });
24 |   };
25 | 
26 |   return (
27 |     <div>
28 |       {backToTopButton && (
29 |         <button
30 |           onClick={scrollUp}
31 |           className='fixed bottom-12 right-12 w-12 h-12 text-5xl text-white bg-violet-500 rounded-xl shadow-lg'
32 |         >
33 |           <FontAwesomeIcon icon={faChevronUp} size='2xs' />
34 |         </button>
35 |       )}
36 |     </div>
37 |   );
38 | }
39 | 
40 | export default BackToTopButton;
41 | 


--------------------------------------------------------------------------------
/src/components/menu/DarkModeButton.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { MdDarkMode, MdOutlineLightMode } from 'react-icons/md';
 3 | 
 4 | const DarkModeButton: React.FC = () => {
 5 |   const defaultTheme: string | null =localStorage.getItem("theme");
 6 |   const [theme, setTheme] =  defaultTheme ?  useState<string | null>(defaultTheme) : useState<string | null>(null) ;
 7 | 
 8 |   useEffect(() => {
 9 |     if(localStorage.getItem("theme")==='dark'){
10 |       setTheme('dark');
11 |     }
12 |     else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
13 |       setTheme('dark');
14 |     } else {
15 |       setTheme('light');
16 |     }
17 |   }, []);
18 | 
19 |   useEffect(() => {
20 |     if (theme === 'dark') {
21 |       localStorage.setItem("theme","dark")
22 |       document.documentElement.classList.add('dark');
23 |     } else {
24 |       localStorage.setItem("theme","light")
25 |       document.documentElement.classList.remove('dark');
26 |     }
27 |   }, [theme]);
28 | 
29 |   const handleThemeSwitch = () => {
30 |     setTheme(theme === 'dark' ? 'light' : 'dark');
31 |   };
32 | 
33 |   return (
34 |     <>
35 |       <button
36 |         onClick={handleThemeSwitch}
37 |         className=' shadow-black text-white bg-violet-500 rounded-3xl dark:text-black h-12 w-auto my-auto px-2 py-0'
38 |       >
39 |         {theme === 'dark' ? (
40 |           <MdOutlineLightMode size={'2rem'} />
41 |         ) : (
42 |           <MdDarkMode size={'2rem'} />
43 |         )}
44 |       </button>
45 |     </>
46 |   );
47 | };
48 | 
49 | export default DarkModeButton;
50 | 


--------------------------------------------------------------------------------
/src/components/menu/HamburgerMenu.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | interface Props{
 4 |     onClick:()=>void,
 5 |     visibility:Boolean
 6 | }
 7 | 
 8 | const HamburgerMenu : React.FC<Props> =({onClick,visibility})=>{
 9 |     console.log(visibility)
10 |     return(
11 |         <div className='flex w-10 h-10 flex-col items-center justify-evenly sm:visible xs:visible text-white hamburger' onClick={onClick} >
12 |         
13 |             <div className={`w-10 h-1 bg-white ${visibility?"hamburger__1":"hamburger_1"} `}  ></div>
14 |             <div className={`w-10 h-1 bg-white ${visibility? "hamburger__2":"hamburger_1"} `} ></div>
15 |             <div className={`w-10 h-1 bg-white ${visibility?"hamburger__3":"hamburger_1"}`}></div>
16 | 
17 |         </div>
18 |     )
19 | }
20 | export default HamburgerMenu


--------------------------------------------------------------------------------
/src/components/menu/Header.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import DarkModeButton from './DarkModeButton';
 4 | import { Link } from 'react-router-dom';
 5 | 
 6 | const Header: React.FC = () => {
 7 |   return (
 8 |     <div className='dark:z-10 dark:shadow-gray-500 dark:shadow-sm dark:bg-slate-950 shadow-md px-10 h-13 justify-between dark:text-white flex w-full '>
 9 |       <Link to={"/"}>
10 |       <img
11 |         src='https://i.ibb.co/gSSxMS4/Image-1-removebg-preview.png'
12 |         alt='logo'
13 |         className='w-[90px] cursor-pointer'
14 |       />
15 |       </Link>
16 |       <ul className='flex gap-5 my-auto '>
17 |         <li className='h-full '>
18 |           <a href='https://github.com/Vijaykv5/Image-Searcher' target='_blank'>
19 |             <i className='fa fa-github fa-3x text-violet-500'></i>
20 |           </a>
21 |         </li>
22 |         <li className='h-full my-auto '>
23 |           {/* Importing Dark Mode Button */}
24 |           <DarkModeButton />
25 |         </li>
26 |       </ul>
27 |     </div>
28 |   );
29 | };
30 | 
31 | export default Header;
32 | 


--------------------------------------------------------------------------------
/src/components/menu/ImageCard/ImageCard.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | 
  4 | interface ImageCardProps {
  5 |   url: string | undefined;
  6 |   download: string | undefined;
  7 |   ImageId?: string;
  8 | }
  9 | 
 10 | const ImageCard: React.FC<ImageCardProps> = ({ url, download, ImageId }) => {
 11 |   // State that Track The Favourite List
 12 |   const [favouriteList, setFavouriteList] = useState<string[]>(
 13 |     JSON.parse(localStorage.getItem('UserFavourite') ?? '[]')
 14 |   );
 15 | 
 16 |   // Function to Download Image
 17 |   const downloadImage = async () => {
 18 |     try {
 19 |       if (download) {
 20 |         const response = await fetch(download);
 21 |         if (!response.ok) {
 22 |           throw new Error('Network response was not ok');
 23 |         }
 24 | 
 25 |         const blob = await response.blob();
 26 |         const img = URL.createObjectURL(blob);
 27 | 
 28 |         const link = document.createElement('a');
 29 |         link.href = img;
 30 |         link.download = generateDownloadString();
 31 |         document.body.appendChild(link);
 32 |         link.click();
 33 |         document.body.removeChild(link);
 34 |       }
 35 |     } catch (error) {
 36 |       console.error('Error downloading image:', error);
 37 |     }
 38 |   };
 39 | 
 40 |   // Function to Toggle Image ID from Favourite List
 41 |   const ToggleFavList = (id: string) => {
 42 |     let FavList = JSON.parse(localStorage.getItem('UserFavourite') ?? '[]');
 43 |     if (FavList.includes(id)) {
 44 |       FavList = FavList.filter((imageId: string) => imageId != id);
 45 |     } else {
 46 |       FavList.push(id);
 47 |     }
 48 |     localStorage.setItem('UserFavourite', JSON.stringify(FavList));
 49 |     setFavouriteList(JSON.parse(localStorage.getItem('UserFavourite') ?? '[]'));
 50 |   };
 51 | 
 52 |   // Function to generate random 8-digit number
 53 |   const generateRandomNumber = () => {
 54 |     const randomNumber = Math.floor(10000000 + Math.random() * 90000000);
 55 |     return randomNumber.toString();
 56 |   };
 57 | 
 58 |   // Function for generating download string
 59 |   const generateDownloadString = () => {
 60 |     const randomNumber = generateRandomNumber();
 61 |     return `Image-Searcher-${randomNumber}.png`;
 62 |   };
 63 | 
 64 |   return (
 65 |     <div className='relative group w-full md:w-80 h-72 rounded-md overflow-hidden shadow-lg hover:shadow-md transform transition-transform hover:scale-105'>
 66 |       <img
 67 |         src={url}
 68 |         id={ImageId}
 69 |         alt='Image'
 70 |         className='w-full h-full object-cover transform hover:scale-105 duration-200'
 71 |       />
 72 |       <div className='absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 backdrop-blur-sm'>
 73 |         <button
 74 |           className='cursor-pointer bg-violet-500 text-white font-bold py-2 px-4 rounded-md'
 75 |           onClick={() => {
 76 |             downloadImage();
 77 |           }}
 78 |         >
 79 |           <i className='fa fa-download fa-beat-fade fa-lg'></i>
 80 |         </button>
 81 |         <button
 82 |           title={`${
 83 |             favouriteList.includes(ImageId ?? '')
 84 |               ? 'Unlike Image'
 85 |               : 'Like Image'
 86 |           }`}
 87 |           className='cursor-pointer bg-violet-500 text-white font-bold py-2 px-4 mx-2 rounded-md'
 88 |           onClick={() => ToggleFavList(ImageId ?? '')}
 89 |         >
 90 |           <i
 91 |             className={`fa fa-regular fa-heart fa-beat-fade fa-lg 
 92 |             ${favouriteList.includes(ImageId ?? '') ? 'text-rose-500' : ' '}`}
 93 |           ></i>
 94 |         </button>
 95 |         <Link
 96 |           to={`/search/${ImageId}`}
 97 |           title='Share Image'
 98 |           className='cursor-pointer bg-violet-500 text-white font-bold py-2 px-4 mx-2 rounded-md'
 99 |         >
100 |           <i className='fa fa-solid fa-share fa-lg'></i>
101 |         </Link>
102 |       </div>
103 |       <div className='absolute inset-0 flex items-end justify-end group-hover:hidden'>
104 |         <i
105 |           className={`fa fa-regular fa-heart fa-lg m-4 
106 |             ${
107 |               favouriteList.includes(ImageId ?? '')
108 |                 ? 'text-rose-500'
109 |                 : 'opacity-0'
110 |             }`}
111 |         ></i>
112 |       </div>
113 |     </div>
114 |   );
115 | };
116 | 
117 | export default ImageCard;
118 | 


--------------------------------------------------------------------------------
/src/components/menu/SelectionMenu.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | interface SelectionMenuProps {
 4 |   links: { title: string }[];
 5 |   handleSelection: (index: number) => void;
 6 |   active: number;
 7 |   setActive: React.Dispatch<React.SetStateAction<number>>
 8 | }
 9 | 
10 | const SelectionMenu: React.FC<SelectionMenuProps> = ({
11 |   links,
12 |   handleSelection,
13 |   active,
14 |   setActive
15 | }) => {
16 |   return (
17 |     <div className='hide-scrollbar flex md:justify-center overflow-x-scroll md:overflow-x-hidden menu-container '>
18 |       {links.map((value, index) => (
19 |         <button
20 |           key={value.title}
21 |           onClick={() => {
22 |             handleSelection(index);
23 |             setActive((active) => (active = index));
24 |           }}
25 |           className={`text-white bg-violet-500 p-1 px-2 rounded-md dark:bg-transparent dark:text-violet-300 dark:border-2 dark:border-violet-500 hover:dark:bg-violet-500 hover:dark:text-white ${
26 |             active === index ? 'dark:bg-violet-500 dark:text-white' : ''
27 |           } ${index !== 0 ? 'ml-3' : ''}`}
28 |         >
29 |           {value.title}
30 |         </button>
31 |       ))}
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default SelectionMenu;
37 | 


--------------------------------------------------------------------------------
/src/components/menu/ShareImagesModal.tsx:
--------------------------------------------------------------------------------
  1 | import { Dialog, Transition } from '@headlessui/react';
  2 | import React, { Fragment, useEffect, useState } from 'react';
  3 | import { useNavigate, useParams } from 'react-router-dom';
  4 | import {
  5 |   EmailIcon,
  6 |   EmailShareButton,
  7 |   FacebookIcon,
  8 |   FacebookShareButton,
  9 |   InstapaperIcon,
 10 |   InstapaperShareButton,
 11 |   LinkedinIcon,
 12 |   LinkedinShareButton,
 13 |   TelegramIcon,
 14 |   TelegramShareButton,
 15 |   TwitterIcon,
 16 |   TwitterShareButton,
 17 |   WhatsappIcon,
 18 |   WhatsappShareButton,
 19 | } from 'react-share';
 20 | 
 21 | const API_URL = 'https://api.unsplash.com/photos';
 22 | 
 23 | interface ImageData {
 24 |   id: string;
 25 |   urls: {
 26 |     full: string;
 27 |   };
 28 | }
 29 | 
 30 | const ShareImageModal = () => {
 31 |   const [isOpen, setIsOpen] = useState(true);
 32 |   const [isCopied, setIsCopied] = useState(false);
 33 |   const [imageData, setImageData] = useState<ImageData>({
 34 |     id: '',
 35 |     urls: { full: '' },
 36 |   });
 37 | 
 38 |   const navigate = useNavigate();
 39 |   const { ImageId } = useParams();
 40 | 
 41 |   const closeModal = () => {
 42 |     setIsOpen(false);
 43 |     navigate(-1);
 44 |   };
 45 | 
 46 |   const copyText = async (link: string) => {
 47 |     if ('clipboard' in navigator) {
 48 |       await navigator.clipboard.writeText(link);
 49 |       setIsCopied(true);
 50 |     }
 51 |     setTimeout(() => setIsCopied(false), 1000 * 10);
 52 |   };
 53 | 
 54 |   useEffect(() => {
 55 |     fetch(
 56 |       `${API_URL}/${ImageId}?client_id=${process.env.REACT_APP_UNSPLASH_API_KEY}`
 57 |     )
 58 |       .then((res) => res.json())
 59 |       .then((data) => setImageData(data))
 60 |       .catch((err) => console.log(err));
 61 |   }, []);
 62 |   console.log(imageData);
 63 |   return (
 64 |     <Transition appear show={isOpen} as={Fragment}>
 65 |       <Dialog as='div' className='relative z-10' onClose={closeModal}>
 66 |         <Transition.Child
 67 |           as={Fragment}
 68 |           enter='ease-out duration-300'
 69 |           enterFrom='opacity-0'
 70 |           enterTo='opacity-100'
 71 |           leave='ease-in duration-200'
 72 |           leaveFrom='opacity-100'
 73 |           leaveTo='opacity-0'
 74 |         >
 75 |           <div className='fixed inset-0 bg-black/25' />
 76 |         </Transition.Child>
 77 | 
 78 |         <div className='fixed inset-0 overflow-y-auto'>
 79 |           <div className='flex min-h-full items-center justify-center p-4 text-center'>
 80 |             <Transition.Child
 81 |               as={Fragment}
 82 |               enter='ease-out duration-300'
 83 |               enterFrom='opacity-0 scale-95'
 84 |               enterTo='opacity-100 scale-100'
 85 |               leave='ease-in duration-200'
 86 |               leaveFrom='opacity-100 scale-100'
 87 |               leaveTo='opacity-0 scale-95'
 88 |             >
 89 |               <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all dark:bg-gray-700'>
 90 |                 <Dialog.Title
 91 |                   as='h3'
 92 |                   className='text-3xl text-center font-bold leading-6 text-gray-900 dark:text-white'
 93 |                 >
 94 |                   <div>Share Image</div>
 95 |                 </Dialog.Title>
 96 |                 <button
 97 |                   onClick={closeModal}
 98 |                   className='absolute right-0 top-0 my-4 mx-8'
 99 |                 >
100 |                   <svg
101 |                     xmlns='http://www.w3.org/2000/svg'
102 |                     height='1em'
103 |                     viewBox='0 0 448 512'
104 |                     className='text-3xl text-white'
105 |                   >
106 |                     <path d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm79 143c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z' />
107 |                   </svg>
108 |                 </button>
109 |                 <div className='mt-2 flex items-center flex-wrap'>
110 |                   <button
111 |                     className='w-12 h-12 rounded-full bg-black p-4 mx-2 cursor-pointer flex items-center justify-center outline-none dark:bg-white'
112 |                     onClick={() => copyText(imageData?.urls?.full)}
113 |                   >
114 |                     {isCopied ? (
115 |                       <i
116 |                         title='Copy Link'
117 |                         className='fa fa-solid fa-check fa-lg cursor-pointer text-white dark:text-black'
118 |                       ></i>
119 |                     ) : (
120 |                       <i
121 |                         title='Copied'
122 |                         className='fa fa-sharp fa-solid fa-link fa-lg cursor-pointer text-white dark:text-black'
123 |                       ></i>
124 |                     )}
125 |                   </button>
126 |                   <FacebookShareButton url={imageData?.urls?.full}>
127 |                     <FacebookIcon className='rounded-full p-2' />
128 |                   </FacebookShareButton>
129 |                   <TwitterShareButton url={imageData?.urls?.full}>
130 |                     <TwitterIcon className='rounded-full p-2' />
131 |                   </TwitterShareButton>
132 |                   <WhatsappShareButton url={imageData?.urls?.full}>
133 |                     <WhatsappIcon className='rounded-full p-2' />
134 |                   </WhatsappShareButton>
135 |                   <LinkedinShareButton url={imageData?.urls?.full}>
136 |                     <LinkedinIcon className='rounded-full p-2' />
137 |                   </LinkedinShareButton>
138 |                   <TelegramShareButton url={imageData?.urls?.full}>
139 |                     <TelegramIcon className='rounded-full p-2' />
140 |                   </TelegramShareButton>
141 |                   <InstapaperShareButton url={imageData?.urls?.full}>
142 |                     <InstapaperIcon className='rounded-full p-2' />
143 |                   </InstapaperShareButton>
144 |                   <EmailShareButton url={imageData?.urls?.full}>
145 |                     <EmailIcon className='rounded-full p-2' />
146 |                   </EmailShareButton>
147 |                 </div>
148 |               </Dialog.Panel>
149 |             </Transition.Child>
150 |           </div>
151 |         </div>
152 |       </Dialog>
153 |     </Transition>
154 |   );
155 | };
156 | 
157 | export default ShareImageModal;
158 | 


--------------------------------------------------------------------------------
/src/components/noresults.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vijaykv5/SnapGrid/362190a7d104e22990dc2b54da2d84eeaee1ba91/src/components/noresults.png


--------------------------------------------------------------------------------
/src/declaration.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.jpg"
2 | declare module "*.png"
3 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import { Route, Routes } from 'react-router-dom';
 5 | 
 6 | import MainSection from './MainSection';
 7 | import DocsPage from './Pages/DocsPage';
 8 | import HomePage from './Pages/HomePage';
 9 | import LoginPage from './Pages/LoginPage';
10 | import SignUpPage from './Pages/SignUpPage';
11 | import ShareImageModal from './components/menu/ShareImagesModal';
12 | 
13 | const App: React.FC = () => {
14 |   return (
15 |     <BrowserRouter>
16 |       <Routes>
17 |         <Route path='/' element={<HomePage />} />
18 |         <Route path='/search' element={<MainSection />}>
19 |           <Route path=':ImageId' element={<ShareImageModal />} />
20 |         </Route>
21 |         <Route path='/docs' element={<DocsPage />} />
22 |         <Route path='/signup' element={<SignUpPage />} />
23 |         <Route path='/login' element={<LoginPage />} />
24 |       </Routes>
25 |     </BrowserRouter>
26 |   );
27 | };
28 | 
29 | const root = ReactDOM.createRoot(document.getElementById('root')!);
30 | root.render(<App />);
31 | 


--------------------------------------------------------------------------------
/src/utils/drawer.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .hidden__navbar__drawer{
 4 |     height: 0vh;
 5 |     width: 100%;
 6 |     transition: height 1s ease-out;
 7 | }
 8 | 
 9 | 
10 | .visible__navbar__drawer{
11 |     display: flex;
12 |     height: 20vh;
13 |     width: 100%;
14 | 
15 |     flex-direction: column;
16 |     transition: height  0.5s;
17 | }
18 | .hidden__drawer__container{
19 |     display: none;
20 |     transition: 1s;
21 | }
22 | .visible__drawer__container{
23 |     display: flex;
24 |     transition: 1s;
25 |     
26 | }
27 | .hamburger_1{
28 |     transition: 1s;
29 | }
30 | .hamburger__1{
31 |     transition: 1s;
32 |     transform: rotate(45deg) translateX(3px) ;
33 | }
34 | .hamburger__2{
35 |     transition: 1s;
36 |     transform: rotate(-45deg)  translateX(8px) translateY(-5px) ;
37 |     
38 | }
39 | .hamburger__3{
40 |    visibility: hidden;
41 | }
42 | 


--------------------------------------------------------------------------------
/src/utils/links.tsx:
--------------------------------------------------------------------------------
 1 | interface Link {
 2 |     url: string;
 3 |     title: string;
 4 |     description: string;
 5 | }
 6 | 
 7 | export const links: Link[] = [
 8 |     {
 9 |         url: 'https://images.unsplash.com/photo-1475070929565-c985b496cb9f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
10 |         title: 'Nature',
11 |         description:
12 |             '<p>Through photography, the beauty of Mother Nature can be frozen in time. This category celebrates the magic of our planet and beyond, from the vastness of the outdoors to miraculous moments in your own backyard.<p>',
13 |     },
14 |     {
15 |         url: 'https://images.unsplash.com/photo-1465479423260-c4afc24172c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
16 |         title: 'Shoes',
17 |         description:
18 |             '<p>Shoe photography captures the essence of style and footwear, where each step becomes a unique statement. This category celebrates the world of shoes, from fashionable trends to the artistry of craftsmanship, all waiting to be explored one step at a time.<p>',
19 |     },
20 |     {
21 |         url: 'https://images.unsplash.com/photo-1502982720700-bfff97f2ecac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
22 |         title: 'Camera',
23 |         description:
24 |             '<p>Explore the world through the lens of a camera. This category embraces the art of photography, from capturing breathtaking landscapes to the fine details of everyday life, all frozen in time for your viewing pleasure.<p>',
25 |     },
26 |     {
27 |         url: 'https://images.unsplash.com/photo-1599676609657-b4235ea50e6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
28 |         title: 'Birds',
29 |         description:
30 |             '<p>Witness the fascinating world of our feathered friends. This category celebrates the beauty of avian creatures, their graceful flights, vibrant plumage, and the unique moments they create in the wild.<p>',
31 |     },
32 |     {
33 |         url: 'https://images.unsplash.com/photo-1512149673953-1e251807ec7c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
34 |         title: 'Phones',
35 |         description:
36 |             '<p>Discover the ever-evolving technology in the palm of your hand. This category showcases the world of smartphones, from cutting-edge innovations to their role in modern communication and connectivity.<p>',
37 |     },
38 |     {
39 |         url: 'https://images.unsplash.com/photo-1481018085669-2bc6e4f00eed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
40 |         title: 'Movies',
41 |         description:
42 |             "<p>Let's pay homage to the beginnings of photography by celebrating the analogue of the past and present. From vintage polaroids to mesmerizing 35mm photos, this category examines the best of what film photography has to offer.<p>",
43 |     },
44 |     {
45 |         url: 'https://images.unsplash.com/photo-1510906594845-bc082582c8cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2044&q=80',
46 |         title: 'Science',
47 |         description:
48 |             '<p>Dive into the realms of discovery and innovation. This category explores the wonders of science, from groundbreaking research to the captivating mysteries of the natural world and beyond.<p>',
49 |     },
50 |     {
51 |         url: 'https://images.unsplash.com/photo-1479142506502-19b3a3b7ff33?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
52 |         title: 'History',
53 |         description:
54 |             '<p>Journey through the annals of time. This category delves into the rich tapestry of human history, showcasing pivotal moments, iconic figures, and the fascinating stories that have shaped our world.<p>',
55 |     },
56 |     {
57 |         url: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2020&q=80',
58 |         title: 'Travel',
59 |         description:
60 |             "<p>Travel allows us to explore the world's wonders and experience new cultures. It's a journey of discovery, from iconic landmarks to hidden gems. Pack your bags and set out on an adventure to create memories that will last a lifetime.<p>",
61 |     },
62 |     {
63 |         url: 'https://images.unsplash.com/photo-1493514789931-586cb221d7a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
64 |         title: 'Business',
65 |         description:
66 |             "<p>In the world of business, innovation and entrepreneurship drive progress. Whether you're a startup founder or a seasoned executive, the business landscape offers challenges and opportunities. Success comes to those who adapt, innovate, and lead.<p>",
67 |     },
68 |     {
69 |         url: 'https://images.unsplash.com/photo-1491841550275-ad7854e35ca6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
70 |         title: 'People',
71 |         description:
72 |             '<p>People are the heart of our world, with diverse stories, experiences, and perspectives. From everyday heroes to global leaders, individuals shape our societies. Together, we strive for equality, understanding, and a brighter future.<p>',
73 |     },
74 |     {
75 |         url: 'https://images.unsplash.com/photo-1528357136257-0c25517acfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
76 |         title: 'Religion',
77 |         description:
78 |             "<p>Religion provides spiritual guidance and a sense of purpose for billions around the globe. It's a source of strength, faith, and community. Through rituals, teachings, and beliefs, people find meaning in their lives and a connection to the divine.<p>",
79 |     },
80 | ];


--------------------------------------------------------------------------------
/src/utils/style.css:
--------------------------------------------------------------------------------
 1 | .home__image{
 2 |     transform: translateX(-20%);
 3 |     opacity: 0;
 4 |     filter: blur(70px);
 5 | 
 6 | }
 7 | .home__image2{
 8 |     transform: translateX(-120%);
 9 |     opacity: 0;
10 |     filter: blur(70px);
11 | }
12 | 
13 | .slide__in{
14 |     animation: slideIn 0.6s ease-in-out forwards;
15 |     opacity: 1;
16 |     filter: blur(0);
17 | }
18 | .slide__in2{
19 |     animation: slideIn 0.7s ease-in-out forwards;
20 |     opacity: 1;
21 |     filter: blur(0);
22 | }
23 | .slide__in3{
24 |     animation: slideIn 0.8s ease-in-out forwards;
25 |     opacity: 1;
26 |     filter: blur(0);
27 | }
28 | 
29 | .slide__in4 {
30 |     animation: slideIn 0.9s ease-in-out forwards;
31 |     opacity: 1;
32 |     filter: blur(0);
33 | }
34 | 
35 | .slide__in5 {
36 |     animation: slideIn 1s ease-in-out forwards;
37 |     opacity: 1;
38 |     filter: blur(0);
39 | }
40 | 
41 | @media only screen and (min-width:698px){
42 |     .hamburger{
43 |         display: none;
44 |     }   
45 |     .drawer__container{
46 |         display: none;
47 |     }
48 | }
49 | 
50 | 
51 | @keyframes slideIn {
52 |     0%{
53 |         transform: translateX(-10%);
54 |         opacity: 0;
55 |     }
56 |     60%{
57 |         transform: translateX(2%);
58 |         opacity: 1;
59 |     }
60 |     90%{
61 |         transform: translateX(-1%);
62 |         opacity: 1;
63 |     }
64 |     100%{
65 |         transform: translateX(0);
66 |         opacity: 1;
67 |     }
68 | }


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   darkMode: 'class',
 3 |   content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
 4 |   theme: {
 5 |     extend: {
 6 |       backdropBlur: {
 7 |         xs : '1.5px',
 8 |       },
 9 |       screens: {
10 |         'xs': {'max': '639px'},
11 |       },
12 |       height: {
13 |         '128': '37rem',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | };


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "paths": {
17 |       "@/*": ["./src/*"]
18 |     }
19 |   },
20 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/index.tsx", "src/MainSection.js", "src/components/menu/BackToTopButton.js", "src/components/menu/DarkModeButton.js", "src/components/menu/Header.js", "src/components/menu/SelectionMenu.tsx", "src/components/ShimmerLoading/ShimmerLoading.js", "src/components/menu/ImageCard/ImageCard.js"],
21 |   "exclude": ["node_modules"]
22 | }
23 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"rewrites": [{ "source": "/(.*)", "destination": "/" }]
3 | }


--------------------------------------------------------------------------------