Building an online pharmacy store using Angular 17 involves creating a web application where users can browse, search, and purchase pharmaceutical products. The application will include features such as product listing, a shopping cart, and order management.
Project Preview Build an Online Pharmacy Store using Angular17 PrerequisitesApproach - Product Listing: Displaying a list of products with search and sorting functionality.
- Shopping Cart: Adding and removing products.
- Order Management: Placing and viewing orders.
- Search and Sort: Allow users to search and sort the product list.
- Responsive Design: Ensuring the application works on various screen sizes.
- Checkout: Proceed to checkout and clear the cart.
Steps to Create & Configure the ProjectStep 1: Install Angular CLInpm install -g @angular/cli Step 2: Create a New Angular Projectng new online-pharmacy-storecd online-pharmacy-store Step 3: Install Required Modulesnpm install json-server tailwindcss postcss Step 4: Generate Components and Servicesng generate component navbar --standalone ng generate component product-list --standalone ng generate component product-detail --standalone ng generate component cart --standalone ng generate component checkout --standalone ng generate service services/productng generate service services/cart Step 5 Configure Tailwind CSS and PostCSS1. Create a tailwind.config.js file in the root directory by using the following command and add the following code in the file.
module.exports = { content: ["./src/**/*.{html,ts}"], theme: { extend: {}, }, plugins: [], }; 2. Create a postcss.config.js(src/postcss.config.js) file in the root directory.
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; 3. Add TailwindCSS to your styles.css.
@tailwind base; @tailwind components; @tailwind utilities; Step 6: Setup json-server1. Create db.json for mock data (/src/db.json).
2. Add a script in package.json to start the server .
"scripts": { "start:server": "json-server --watch db.json" } Folder Structure Folder Structure Dependencies"dependencies": { "@angular/animations": "^17.3.0", "@angular/cdk": "^17.3.10", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", "@angular/material": "^17.3.10", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" }, "devDependencies": { "@angular-devkit/build-angular": "^17.3.8", "@angular/cli": "^17.3.8", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", "autoprefixer": "^10.4.19", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "postcss": "^8.4.39", "tailwindcss": "^3.4.4", "typescript": "~5.4.2" } Example
HTML
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Online Pharmacy Store</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>
HTML
<!-- src/app/cart/cart.component.html -->
<div class="p-24">
<table *ngIf="cartItems.length > 0; else emptyCart" border="1">
<tr>
<th>Image</th>
<th>Product</th>
<th>Price</th>
<th>Increase</th>
<th>Quantity</th>
<th>Descrease</th>
<th>Remove</th>
<th>Total</th>
</tr>
<tr *ngFor="let item of cartItems">
<td>
<img [src]="item.product.imageUrl" alt="Product Image"
class="w-full h-auto" />
</td>
<td>
{{ item.product.description }}
</td>
<td>RS {{ item.product.price }}</td>
<td>
<button class="bg-green-500 rounded-full h-8 w-8 text-white"
type="button" name="button"
(click)="increaseQuantity(item.product.id)">
+
</button>
</td>
<td>
<span class="text-center">{{ item.quantity }}</span>
</td>
<td>
<button class="bg-green-500 rounded-full h-8 w-8 text-white"
type="button" name="button"
(click)="decreaseQuantity(item.product.id)">
-
</button>
</td>
<td>
<button class="bg-red-500 rounded-md h-8 w-8 text-white"
(click)="removeFromCart(item.product.id)">
X
</button>
</td>
<td>RS {{ item.quantity * item.product.price }}</td>
</tr>
</table>
</div>
<div class="flex justify-between p-5 fixed w-full bg-black bottom-0 z-10 text-white">
<div class="total-price">
<h3>Total Cost: RS {{ totalCost() }}</h3>
</div>
<button [disabled]="!hasItems()" (click)="checkout()"
class="p-2 bg-yellow-500 text-white font-mono shadow-md rounded-md">
Checkout
</button>
</div>
<ng-template #emptyCart>
<div class="flex justify-center">
<p style="padding: 20px">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 4680 3120" viewBox="0 0 4680 3120"
width="550" height="550">
<path fill="#ffecd4"
d="M1445.963 743.523C575.23 640.132 245.717 2061.686 1318.036 1637.974s511.791
100.207 1648.275 216.633c1136.484 116.426 1585.918-1570.916 245.447-1564.
06-1340.471 6.856-1317.921 506.157-1765.795 452.976zM1412.561 2154.531c-811.
96 23.923-1182.667 57.133-818.728 344.268s998.175 9.266 1477.441 252.401c479
.266 243.135 2721.534-127.737 1639.898-462.027-1156.102-357.304-2041.473-142
.219-2298.611-134.642z"
class="colorffecd4 svgShape"></path>
<path fill="#f85d42"
d="M3634.621 2439.283H2584.679a33.174 33.174 0 0 1-18.454-5.583c-7.743-5.163-13.
24-13.509-14.543-23.327l-93.991-708.76c-1.215-9.164 1.404-17.856 6.541-24.577
6.045-7.908 15.578-13.085 26.456-13.085h1226.461c9.954 0 18.796 4.34 24.861
11.152 6.065 6.812 9.353 16.096 8.202 25.984l-82.529 708.759c-.977 8.39-5.019
15.749-10.929 21.011s-13.686 8.426-22.133 8.426z"
class="colorf85d42 svgShape"></path>
<path fill="#e0492f"
d="M3755.129 1704.216H2449.382a45.906 45.906 0 0 1-20.23-4.666c-15.311-7.492-25
.855-23.224-25.855-41.419v-50.525c0-14.589 6.78-27.596 17.36-36.04a45.894
45.894 0 0 1 28.726-10.046h1305.748c12.726 0 24.248 5.158 32.587 13.498
8.34 8.34 13.498 19.861 13.498 32.587v50.525c0 16.921-9.119 31.712-22.711
39.726a45.869 45.869 0 0 1-23.376 6.36z"
class="colore0492f svgShape"></path>
<path fill="#f85d42"
d="m3084.929 1235.131-260.611 445.133c-1.448 2.474-3.924 4.167-7.112 5.097-7.993
2.329-20.463-.145-32.452-7.164l-33.291-19.491c-9.613-5.628-16.83-12.957-20.28
2-19.821-2.571-5.111-3.054-9.965-.886-13.668l260.611-445.133c2.54-4.338 8.238
-6.276 15.398-5.902 7.16.374 15.781 3.06 24.166 7.97l33.291 19.491c11.149
6.528 19.075 15.342 21.643 23.068 1.295 3.893 1.228 7.512-.475 10.42z"
class="colorf85d42 svgShape"></path>
<circle cx="2802.501" cy="1610.194" r="33.958" fill="#ffffff"
transform="rotate(-45.001 2802.495 1610.234)" class="colorfff svgShape"></circle>
<path fill="#f85d42"
d="m3119.582 1235.131 260.612 445.133c1.448 2.474 3.924 4.167 7.112 5.097 7.993
2.329 20.463-.145 32.452-7.164l33.291-19.491c9.613-5.628 16.83-12.957 20.282-19.821
2.571-5.111 3.054-9.965.886-13.668l-260.611-445.133c-2.54-4.338-8.239-6.276-15.398-5
.902-7.16.374-15.781 3.06-24.166 7.97l-33.291 19.491c-11.149 6.528-19.075
15.342-21.644 23.068-1.295 3.893-1.228 7.512.475 10.42z"
class="colorf85d42 svgShape"></path>
<circle cx="3402.011" cy="1610.194" r="33.958" fill="#ffffff"
transform="rotate(-45.001 3402.008 1610.24)" class="colorfff svgShape"></circle>
<path fill="#e0492f"
d="M2727.406 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.99 4.908-21.382
4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247
.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735
0 16.371 1.731 20.508 4.311 2.087 1.299 3.283 2.815 3.283 4.435zM2727.406
1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99 4.907-21.382
4.907h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.
391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583
10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311
2.087 1.301 3.283 2.817 3.283 4.437zM2940.248 2105.624v247.841c0 1.377-.866
2.68-2.409 3.84-3.868 2.906-11.989 4.908-21.382 4.908h-26.082c-7.532
0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.
841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2
.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.085 1.299 3.282 2.815
3.282 4.435zM2940.248 1785.884v247.841c0 1.378-.866 2.681-2.409
3.84-3.868 2.906-11.989 4.907-21.382 4.907h-26.082c-7.532 0-14.246
-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416
2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735
0 16.371 1.731 20.508 4.311 2.085 1.301 3.282 2.817 3.282 4.437zM3153.09
2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.99 4.908-21.382
4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5
.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2
.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.086 1.299 3.283 2.815 3.283
4.435zM3153.09 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99
4.907-21.382 4.907h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.
391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562
16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.086 1.301 3.283 2.817
3.283 4.437zM3365.931 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.989
4.908-21.382 4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5
.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583
10.253-2.562 16.823-2.562h26.082c8.735 0 16.371 1.731 20.508 4.311 2.087
1.299 3.284 2.815 3.284 4.435zM3365.931 1785.884v247.841c0 1.378-.866
2.681-2.409 3.84-3.868 2.906-11.989 4.907-21.382 4.907h-26.083c-7.532
0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247
'.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.
082c8.735 0 16.371 1.731 20.508 4.311 2.087 1.301 3.284 2.817 3.284
4.437zM3578.772 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868
2.906-11.99 4.908-21.382 4.908h-26.083c-7.531 0-14.246-1.287-18.605
-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602'
6.968-6.185s10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508
4.311 2.087 1.299 3.283 2.815 3.283 4.435zM3578.772 1785.884v247.841c0
1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99 4.907-21.382 4.907h-26.083c-7.
531 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.
841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.
083c8.735 0 16.371 1.731 20.508 4.311 2.087 1.301 3.283 2.817 3.283 4.437z"
class="colore0492f svgShape"></path>
<circle cx="3750.439" cy="1610.194" r="219.108" fill="#ffa608"
transform="rotate(-45.001 3750.439 1610.245)" class="colorffa608 svgShape"></circle>
<path fill="#ffffff"
d="M3749.353 1665.866c-26.661 0-45.992-11.518-57.994-34.555-8.862-17.075-13.29-39.103-13.29-66.086 0-23.035 5.84-43.253 17.519-60.652 14.015-20.86 33.184-31.292 57.509-31.292 23.033 0 40.914 9.303 53.644 27.91 10.71 15.705 16.068 34.674 16.068 56.905 0 35.923-6.123 62.865-18.365 80.827-12.245 17.962-30.607 26.943-55.091 26.943zm3.624-161.171c-13.049 0-23.521 6.484-31.414 19.452-6.927 11.278-10.391 24.366-10.391 39.266 0 19.653 1.854 34.794 5.56 45.426 5.96 17.156 16.833 25.735 32.621 25.735 13.208 0 23.115-6.02 29.719-18.062 6.604-12.041 9.91-30.103 9.91-54.187 0-19.25-3.003-33.667-9.002-43.253-6.003-9.585-15.005-14.377-27.003-14.377zM3654.49 1718.768c0 1.618.048 4.216.149 7.794.098 3.577.149 6.175.149 7.794 0 1.647-.554 3.002-1.662 4.067-1.107 1.065-2.512 1.597-4.216 1.597-1.703 0-3.109-.532-4.216-1.597-1.107-1.065-1.66-2.42-1.66-4.067 0-1.618-.05-4.216-.149-7.794-.1-3.577-.149-6.175-.149-7.794 0-2.527.142-5.692.426-9.497.283-3.804.425-6.97.425-9.497 0-1.646.554-3.003 1.662-4.067 1.107-1.065 2.512-1.597 4.216-1.597 1.703 0 3.109.532 4.216 1.597 1.107 1.064 1.661 2.421 1.661 4.067 0 2.527-.142 5.693-.427 9.497-.283 3.805-.425 6.97-.425 9.497zm-3.621-31.217c-1.817 0-3.393-.61-4.727-1.831-1.335-1.22-2.001-2.711-2.001-4.471 0-1.761.667-3.251 2.001-4.472 1.333-1.22 2.91-1.831 4.727-1.831 1.817 0 3.386.61 4.707 1.831 1.321 1.221 1.98 2.712 1.98 4.472 0 1.76-.66 3.251-1.98 4.471-1.321 1.221-2.89 1.831-4.707 1.831zM3695.672 1704.459a40.34 40.34 0 0 1-2.108-.064 40.403 40.403 0 0 0-2.108-.064c-1.165 0-2.513.114-4.046.34.51 11.471.766 18.966.766 22.486 0 .37.014 1.058.042 2.066a97.37 97.37 0 0 1 .043 2.449c0 6.531-2.06 9.795-6.175 9.795-1.562 0-2.911-.483-4.046-1.448-1.25-1.022-1.874-2.3-1.874-3.833 0-1.022.042-2.555.127-4.599.085-2.044.128-3.578.128-4.6 0-3.435-.255-10.789-.766-22.06-1.761-.085-4.422-.32-7.985-.703-3.564-.383-5.345-2.221-5.345-5.515 0-1.59.539-2.939 1.618-4.046 1.079-1.107 2.471-1.661 4.174-1.661 1.051 0 3.464.17 7.24.511-.028-.908-.099-2.413-.212-4.514-.115-1.817-.171-3.222-.171-4.216 0-1.59.582-2.91 1.746-3.961 1.164-1.05 2.569-1.576 4.216-1.576 4.201 0 6.303 3.535 6.303 10.605l-.085 3.492c1.76-.255 3.194-.383 4.302-.383 3.264 0 5.493.213 6.686.639 2.271.795 3.407 2.527 3.407 5.196 0 1.618-.554 2.967-1.66 4.046-1.108 1.078-2.514 1.618-4.217 1.618zM3728.166 1740.701c-6.786 0-12.336-1.618-16.652-4.855-4.77-3.577-7.155-8.617-7.155-15.119 0-7.182 1.888-13.259 5.665-18.228 4.201-5.508 9.866-8.262 16.992-8.262 4.94 0 9.042.795 12.308 2.385 4.287 2.101 6.431 5.366 6.431 9.795 0 3.123-1.746 5.892-5.239 8.305-1.591 1.107-4.785 2.725-9.583 4.855l-14.352 6.346c1.363 1.476 3.009 2.584 4.94 3.322 1.931.739 4.145 1.107 6.644 1.107 3.804 0 7.027-.781 9.668-2.342 2.355-1.391 4.243-2.087 5.664-2.087 2.952 0 4.429 1.434 4.429 4.302 0 3.236-2.371 5.877-7.112 7.921-3.975 1.703-8.191 2.555-12.648 2.555zm-1.15-36.157c-2.64 0-4.897.88-6.771 2.641-1.875 1.761-3.379 4.401-4.515 7.922a2481.41 2481.41 0 0 1 9.583-4.131c3.833-1.732 6.885-3.336 9.156-4.813-1.902-1.079-4.387-1.619-7.453-1.619zM3766.495 1701.052c4.287-4.968 8.347-7.453 12.18-7.453 4.373 0 7.581 1.66 9.625 4.983 1.731-1.533 3.648-2.683 5.749-3.449 2.101-.767 4.373-1.15 6.815-1.15 5.564 0 9.34 2.768 11.328 8.305.397 1.136 1.007 4.983 1.831 11.541.795 4.599 1.817 12.266 3.066 22.998.114 1.618-.441 2.953-1.661 4.003-1.221 1.05-2.655 1.576-4.302 1.576-3.265 0-5.181-1.618-5.75-4.855-.51-2.924-1.036-7.055-1.575-12.393-.568-5.848-1.036-9.993-1.406-12.436-.766-5.081-1.746-7.623-2.938-7.623-.654 0-2.144.654-4.472 1.959-2.327 1.306-4.031 2.428-5.11 3.365 0 3.237.384 7.893 1.15 13.969.795 6.218 1.193 10.874 1.193 13.969 0 1.618-.553 2.966-1.661 4.046-1.107 1.078-2.513 1.619-4.216 1.619-1.704 0-3.109-.54-4.216-1.619-1.107-1.079-1.661-2.427-1.661-4.046 0-3.237-.348-7.999-1.043-14.289-.696-6.288-1.043-11.051-1.043-14.288 0-1.817-.156-3.265-.469-4.344-3.294 1.902-6.602 5.068-9.923 9.497-.143.199-.384.497-.725.894-.114 5.736-.169 10.236-.169 13.5 0 .795-.03 1.867-.085 3.215a76.217 76.217 0 0 0-.085 3.002c0 1.533-.625 2.741-1.875 3.62-1.136.823-2.54 1.235-4.215 1.235-2.414 0-4.046-1.051-4.898-3.152-.596-1.419-.894-3.677-.894-6.771v-15.843c0-1.419-.057-3.499-.171-6.239-.114-2.74-.169-4.819-.169-6.239 0-2.527.454-4.813 1.362-6.857 1.107-2.555 2.668-3.833 4.685-3.833 1.589 0 3.008.618 4.259 1.852 1.248 1.235 1.874 2.591 1.874 4.067-.001-.595-.129.626-.385 3.664zM3853.204 1707.567c-2.812 0-4.5-1.177-5.068-3.535a20.304 20.304 0 0 0-3.493-.298c-6.843 0-10.264.937-10.264 2.81 0 1.107 2.058 2.598 6.175 4.472 5.622 2.584 9.427 4.599 11.414 6.047 4.117 2.981 6.175 6.346 6.175 10.093 0 4.884-2.271 8.589-6.813 11.116-3.663 2.016-8.164 3.024-13.5 3.024-3.777 0-7.227-.582-10.349-1.746-4.259-1.589-6.388-3.932-6.388-7.027 0-2.839 1.689-4.259 5.068-4.259 1.305 0 3.194.412 5.664 1.235 2.471.824 4.373 1.235 5.708 1.235 5.763 0 8.659-1.164 8.687-3.493 0-1.448-2.002-3.052-6.005-4.812-5.848-2.584-9.597-4.443-11.243-5.579-4.003-2.811-6.005-6.232-6.005-10.264 0-5.707 3.024-9.554 9.071-11.541 3.549-1.164 8.944-1.746 16.184-1.746 2.838 0 4.94.37 6.302 1.107 1.875.994 2.812 2.825 2.812 5.494-.001 5.112-1.379 7.667-4.132 7.667z"
class="colorfff svgShape"></path>
<path fill="#ffa608"
d="M3848.416 1347.74c-8.708 0-15.766-7.059-15.766-15.766v-204.959c0-8.707 7.059-15.766 15.766-15.766s15.766 7.059 15.766 15.766v204.959c0 8.707-7.059 15.766-15.766 15.766zM3989.722 1489.047c0-8.707 7.059-15.766 15.766-15.766h204.959c8.708 0 15.766 7.059 15.766 15.766s-7.059 15.766-15.766 15.766h-204.959c-8.707 0-15.766-7.059-15.766-15.766zM3948.334 1389.128c-6.157-6.157-6.157-16.14 0-22.297l144.928-144.928c6.157-6.157 16.139-6.157 22.297 0 6.157 6.157 6.157 16.14 0 22.297l-144.928 144.928c-6.157 6.157-16.14 6.157-22.297 0z"
class="colorffa608 svgShape"></path>
<path fill="#efc68f"
d="M3434.131 2414.729c-4.37 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.259 4.829-6.546s2.529 16.742 3.756 14.066c1.228-2.676.94-8.365 3-6.998s4.269 8.49 20.683 22.366 24.913 14.063 24.84 12.212c-.073-1.851 4.652-3.712 13.371 2.025 8.718 5.738 8.373 4.71 7.878-1.732-.495-6.442-2.854-18.979-8.423-26.301-5.569-7.321 10.267 1.399 25.643 3.317 15.375 1.918 25.523-.673 26.059-1.911.536-1.238-5.154-5.643-.632-6.373 4.522-.73 12.808 3.466 13.109.227.301-3.239-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349 10.167-5.113 3.74-5.355 3.738-6.64s16.181-5.349 12.988-7.946c-3.193-2.597-14.198-4.354-14.303-5.245-.105-.891 8.765-3.721 3.96-6.623-4.805-2.902-22.703-6.597-24.487-7.415-1.784-.818 9.948-10.75 8.164-11.568-1.784-.818-7.359 4.129-7.573.292s6.124-5.904 1.888-6.65c-4.236-.747-15.138-2.469-31.325.138s-23.011 8.484-24.76 7.819c-1.749-.664 23.5-19.28 24.722-24.27 1.222-4.989-5.91.528-3.656-2.665 2.255-3.193 9.229-10.56 8.145-12.716s-17.852-6.076-25.811-2.203c-7.959 3.874 4.614-5.408 1.937-7.15-2.677-1.742-29.661.205-38.288 4.2-8.627 3.995 2.942-2.337-1.517-4.041s-11.155 7.497-13.627 5.652c-2.472-1.845 9.919-6.703 2.687-8.042-7.233-1.338-46.511 27.335-51.448 48.732z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M3557.806 2477.983s-20.991-7.457-45.124-31.082l-.088-.02c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.392-69.182-3.991 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.107-58.481 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a295 295 0 0 1-20.391-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.947-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.322 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.23 39.871 61.936 39.871 61.936s-19.923-19.87-35.046-59.974a277.618 277.618 0 0 0 39.896 12.433l-.397-.087c32.546 26.966 51.204 32.422 51.204 32.422z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M2487.026 2412.473c-4.371 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.259 4.829-6.546-.444 5.713 2.529 16.741 3.756 14.066 1.228-2.676.94-8.365 3-6.998 2.059 1.366 4.269 8.49 20.683 22.366 16.413 13.876 24.913 14.063 24.84 12.212-.073-1.85 4.652-3.712 13.37 2.026s8.373 4.71 7.878-1.732-2.854-18.98-8.423-26.301c-5.569-7.321 10.268 1.399 25.643 3.317s25.523-.673 26.059-1.91-5.154-5.643-.631-6.373c4.522-.73 12.808 3.466 13.109.227.301-3.24-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349s3.74-5.355 3.738-6.64c-.003-1.285 16.181-5.349 12.988-7.946-3.193-2.597-14.198-4.354-14.303-5.245-.105-.891 8.765-3.721 3.96-6.623-4.805-2.902-22.703-6.597-24.487-7.415-1.784-.818 9.948-10.75 8.164-11.568s-7.359 4.129-7.573.292c-.215-3.838 6.123-5.904 1.888-6.651s-15.138-2.469-31.325.138c-16.187 2.607-23.011 8.483-24.76 7.819-1.749-.664 23.5-19.28 24.722-24.269 1.222-4.989-5.911.528-3.656-2.665s9.229-10.56 8.145-12.716c-1.084-2.157-17.852-6.076-25.811-2.203s4.614-5.408 1.937-7.15-29.661.205-38.288 4.2c-8.627 3.995 2.942-2.337-1.517-4.041s-11.155 7.497-13.627 5.652c-2.472-1.845 9.919-6.703 2.687-8.042-7.233-1.339-46.51 27.333-51.448 48.73z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M2610.702 2475.728s-20.991-7.457-45.124-31.083l-.088-.019c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.391-69.182-3.991 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.107-58.482 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a294.75 294.75 0 0 1-20.39-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.946-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.322 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.231 39.871 61.937 39.871 61.937s-19.923-19.87-35.046-59.974a277.658 277.658 0 0 0 39.896 12.433l-.397-.087c32.546 26.965 51.204 32.421 51.204 32.421z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M1078.926 2504.611c-4.37 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.258 4.829-6.545-.444 5.713 2.529 16.741 3.756 14.065 1.228-2.676.94-8.364 3-6.998 2.059 1.366 4.269 8.49 20.683 22.366s24.913 14.063 24.84 12.212c-.073-1.851 4.652-3.712 13.37 2.026 8.718 5.738 8.373 4.71 7.878-1.732-.495-6.442-2.854-18.98-8.422-26.301-5.569-7.321 10.267 1.399 25.642 3.317s25.523-.673 26.059-1.91c.536-1.238-5.154-5.643-.632-6.373s12.808 3.466 13.109.227c.301-3.239-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349 10.167-5.113 3.74-5.355 3.738-6.64s16.181-5.349 12.988-7.947-14.198-4.354-14.303-5.245c-.105-.891 8.765-3.721 3.96-6.624-4.805-2.902-22.703-6.596-24.487-7.415-1.784-.819 9.948-10.75 8.164-11.568-1.784-.819-7.359 4.129-7.573.292-.214-3.838 6.123-5.904 1.888-6.651-4.235-.747-15.138-2.469-31.325.138-16.187 2.608-23.011 8.484-24.76 7.819s23.5-19.28 24.722-24.269c1.222-4.989-5.911.528-3.656-2.665s9.229-10.56 8.145-12.716c-1.084-2.156-17.852-6.076-25.811-2.203-7.959 3.874 4.614-5.408 1.937-7.15s-29.661.205-38.289 4.2 2.942-2.337-1.517-4.041c-4.459-1.703-11.155 7.497-13.627 5.652-2.472-1.845 9.919-6.703 2.687-8.042-7.231-1.337-46.508 27.335-51.446 48.732z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M1202.602 2567.866s-20.991-7.457-45.124-31.082l-.088-.02c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.392-69.182-3.99 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.106-58.481 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a294.75 294.75 0 0 1-20.39-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.946-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.323 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.231 39.871 61.936 39.871 61.936s-19.923-19.869-35.046-59.974a277.492 277.492 0 0 0 39.896 12.433l-.397-.088c32.545 26.964 51.203 32.421 51.203 32.421z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M2804.84 2607.138c4.37 22.012-9.849 57.964-11.766 57-1.917-.964-5.273-12.258-4.829-6.545s-2.529 16.741-3.756 14.065c-1.228-2.676-.94-8.364-3-6.998-2.06 1.366-4.269 8.49-20.683 22.366s-24.913 14.063-24.84 12.212c.073-1.851-4.653-3.712-13.371 2.026s-8.373 4.71-7.878-1.732c.495-6.442 2.854-18.98 8.423-26.301 5.569-7.321-10.267 1.399-25.643 3.317-15.375 1.918-25.523-.673-26.059-1.91-.536-1.238 5.154-5.643.632-6.373-4.522-.73-12.808 3.466-13.109.227-.301-3.24.484-9.406 3.163-11.662 2.678-2.256-15.683 1.763-25.85-3.35-10.167-5.113-3.74-5.355-3.738-6.64s-16.181-5.349-12.988-7.947c3.193-2.597 14.198-4.354 14.303-5.245.105-.891-8.765-3.721-3.96-6.624 4.805-2.902 22.703-6.596 24.487-7.415 1.784-.818-9.948-10.75-8.164-11.568 1.784-.818 7.359 4.13 7.573.292.214-3.838-6.124-5.904-1.888-6.651 4.236-.747 15.138-2.469 31.325.138 16.187 2.607 23.011 8.483 24.76 7.819 1.75-.664-23.5-19.28-24.722-24.269-1.222-4.989 5.911.528 3.656-2.665-2.254-3.192-9.229-10.56-8.145-12.716 1.085-2.156 17.852-6.076 25.811-2.203 7.959 3.874-4.614-5.408-1.937-7.15 2.677-1.742 29.661.205 38.288 4.2 8.627 3.995-2.942-2.337 1.517-4.041s11.155 7.497 13.627 5.652c2.472-1.845-9.919-6.704-2.687-8.042 7.233-1.336 46.511 27.336 51.448 48.733z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M2681.164 2670.393s20.991-7.457 45.124-31.083l.088-.019c-26.026 5.432-55.913 7.741-89.463 4.132 0 0 32.044 1.391 69.182-3.991-30.529-14.03-52.68-14.009-52.68-14.009s19.206-1.106 58.481 13.119c16.899-2.744 34.545-6.942 50.492-13.338a295 295 0 0 0 20.391-9.068c-37.641-26.794-71.042-33.668-71.042-33.668s27.444 3.01 76.186 31.074c33.947-17.615 47.279-34.09 52.819-36.858 5.764-2.763 19.425-2.069-12.748 19.323-12.333 8.2-29.521 18.562-51.302 27.657-22.217 46.231-39.871 61.936-39.871 61.936s19.923-19.869 35.046-59.974a277.492 277.492 0 0 1-39.896 12.433l.397-.087c-32.545 26.964-51.204 32.421-51.204 32.421z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M3359.557 752.07c-1.752 3.804-3.759 8.679-5.875 13.887-2.108 5.206-4.29 10.676-6.223 15.73-1.933 5.051-3.589 9.634-4.634 12.986-1.052 3.356-1.486 5.494-1.112 5.598.752.189 2.99-1.28 4.56-2.335 1.582-1.094 2.586-1.753 1.158.231-2.837 3.972-6.985 13.333-4.84 12.147 2.155-1.192 4.734-5.545 5.268-3.451.286 1.038-.11 3.164-.1 7.361.011 2.097.129 4.716.571 7.99a73.556 73.556 0 0 0 2.651 11.876c1.44 4.667 3.135 8.454 4.852 11.396 1.718 2.965 3.454 5.164 5.004 6.675 1.552 1.526 2.916 2.432 3.931 2.854 1.017.403 1.685.339 1.891-.043.418-.766 1.966-1.045 4.162-.153 2.205.83 5.065 2.909 8.337 6.714 3.289 3.823 5.11 5.46 6.279 5.409 1.179-.04 1.762-1.721 2.796-4.583 1.038-2.849 2.077-7.202 2.375-11.787.311-4.585-.109-9.401-1.607-13.294-.743-1.948-.547-2.681.361-2.597.912.091 2.548.98 4.788 2.192 1.12.61 2.393 1.324 3.8 2.053a92.602 92.602 0 0 0 4.599 2.182c1.655.741 3.416 1.393 5.264 1.99 1.848.6 3.778 1.119 5.735 1.464 3.941.747 7.637.994 11.004 1.014 3.322-.051 6.337-.294 8.797-.75 4.982-.842 7.927-2.184 8.256-2.786.618-1.242-5.189-4.719-.417-5.96 2.355-.663 5.743-.31 8.574-.343 2.84-.003 5.176-.267 5.255-1.864.207-3.186-1.108-8.765-4.003-10.277-.717-.384-.089-.675 1.416-1.022 1.492-.368 3.854-.826 6.644-1.541 2.748-.766 5.954-1.758 8.982-3.24 3.061-1.431 5.948-3.343 8.178-5.591 4.401-4.58 4.863-6.324 4.311-6.929-.564-.617-2.2-.211-2.379-.795-.182-.582 3.291-3.626 6.158-6.885 2.88-3.243 5.176-6.584 3.253-6.791-1.934-.229-5.503.76-8.625 1.545-3.15.774-5.824 1.419-6.019 1.056-.195-.363 1.426-2.142 2.414-3.885.977-1.764 1.277-3.465-1.324-3.55-1.292-.042-3.309.215-5.621.546l-3.61.561-3.755.535c-2.458.356-4.813.616-6.653.767-1.836.156-3.14.231-3.581.165-.851-.103.377-3.041 1.464-5.935.524-1.474 1.025-2.935 1.281-4.031.257-1.097.245-1.856-.176-1.875-1.67-.087-4.261 5.452-5.801 2.366-1.523-3.056 2.468-6.305-1.044-5.795-3.504.491-12.235 1.893-23.203 4.842-5.507 1.443-9.124 3.002-11.666 4.219-1.248.631-2.226 1.14-2.965 1.467-.737.33-1.236.472-1.559.292-.323-.18.399-1.174 1.616-2.603 1.202-1.456 2.866-3.393 4.421-5.505 1.564-2.104 3.013-4.38 3.986-6.369.965-2.004 1.47-3.704 1.257-4.679-.461-1.977-1.358-1.794-2.113-1.514-.757.29-1.344.745-1.146-.501.214-1.224.716-3.326.945-5.235.194-1.959.117-3.724-.668-4.49-.385-.379-1.424-.817-2.77-1.242-1.352-.43-2.982-.827-4.671-1.208a39.93 39.93 0 0 0-2.472-.462 21.219 21.219 0 0 0-2.318-.286c-1.415-.062-2.657-.005-3.379.551-1.527 1.013-1.32.098-1.027-1.227.265-1.38.569-3.136-.458-3.923-.509-.397-1.726-.806-3.219-1.202-1.527-.438-3.333-.883-5.108-1.362-3.572-.916-6.838-2.01-8.104-1.635-.635.221-.915.235-1.003.129-.088-.106.018-.328.131-.664.227-.7.457-1.779-.571-3.07-.51-.655-.896-.787-1.236-.71-.34.075-.622.414-.891.782-.549.66-1.049 1.467-1.589.3-1.005-2.255 2.093-2.215-.49-5.536-1.311-1.685-3.007-.15-5.882 3.427-1.43 1.795-3.17 4.09-5.082 6.792-1.896 2.713-3.981 5.826-5.736 9.42z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M3431.54 838.945s-1.345-.353-3.662-1.257a61.322 61.322 0 0 1-9.434-4.792 70.586 70.586 0 0 1-6.024-4.208 73.095 73.095 0 0 1-6.406-5.657 76.127 76.127 0 0 1-6.407-7.216 85.545 85.545 0 0 1-6.081-8.838l-.065-.036c9.641 5.2 21.68 8.528 35.376 8.512 13.642-.058 28.985-3.51 44.257-12.135l-1.351.637c-.888.404-2.178 1.008-3.861 1.693-3.373 1.355-8.228 3.155-14.211 4.578-5.962 1.445-13.006 2.556-20.55 2.699-7.54.153-15.556-.648-23.308-2.7 6.523-2.428 12.362-4.714 17.575-6.773l13.586-5.452c1.889-.794 3.638-1.449 5.14-2.06 1.502-.609 2.809-1.11 3.882-1.506 2.117-.829 3.306-1.216 3.306-1.216s-1.053.275-3.072.994c-2.052.675-5.057 1.798-9.042 3.268-8.003 2.882-19.707 7.457-36.148 11.312-6.849-2.289-13.307-5.605-18.89-9.792-5.596-4.184-10.331-9.2-14.007-14.776-3.447-5.264-5.893-10.422-7.666-15.457l7.5-1.961c2.34-.572 4.52-1.137 6.578-1.606a259.741 259.741 0 0 1 10.834-2.315c3.117-.62 5.77-1.026 7.631-1.329l2.186-.297c.508-.061.785-.078.785-.078s-.237-.019-.688-.022c-.457-.013-1.104.032-1.976.047-1.73.053-4.206.273-7.319.585-3.123.319-6.8.759-11.214 1.251-1.096.156-2.256.235-3.447.403-1.205.096-2.444.274-3.749.378-2.601.257-5.416.515-8.483.708a76.329 76.329 0 0 1-2.182-10.287 82.191 82.191 0 0 1-.538-4.774 90.335 90.335 0 0 1-.112-12.788c.157-2.571.385-4.909.67-7.103a133.178 133.178 0 0 1 1.845-10.694c.599-2.778 1.089-4.732 1.351-5.821.488-2.206 1.239-4.539.564-2.642-.33.94-1.052 2.885-2.148 6.439-1.066 3.566-2.578 8.759-3.594 16.35a93.446 93.446 0 0 0-.746 9.471c-.075 3.346.014 7.012.416 10.748.785 7.547 2.74 15.751 6.652 23.925-.318 11.587-.303 21.539.127 29.926.418 8.382 1.235 15.21 2.204 20.584.964 5.371 2.067 9.3 2.926 11.859.86 2.554 1.462 3.769 1.462 3.769s-.623-1.483-1.448-4.318c-.826-2.837-1.836-7.06-2.625-12.478-.797-5.421-1.359-12.051-1.496-19.735-.15-7.684.135-16.423.684-26.065 2.404 4.369 5.396 8.589 9.086 12.649a66.254 66.254 0 0 0 13.205 11.035l-.281-.177c10.026 15.728 21.306 24.406 29.354 29.03 4.051 2.327 7.348 3.676 9.604 4.487 2.243.78 3.445 1.024 3.445 1.024z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M2355.428 1177.425c-2.965 2.959-6.845 6.526-11.002 10.312-4.157 3.777-8.536 7.715-12.611 11.276-4.072 3.559-7.801 6.697-10.585 8.836-2.786 2.146-4.642 3.293-4.868 2.978-.437-.641.168-3.248.616-5.086.48-1.863.751-3.033-.617-1.007-2.747 4.035-10.098 11.162-9.726 8.739.374-2.434 3.568-6.359 1.418-6.136-1.073.091-2.932 1.196-6.873 2.637a61.073 61.073 0 0 1-7.695 2.225 73.452 73.452 0 0 1-12.06 1.616c-4.877.261-9.017-.02-12.37-.615-3.376-.588-6.04-1.457-7.993-2.39-1.969-.929-3.29-1.896-4.037-2.703-.73-.815-.9-1.464-.613-1.79.575-.657.301-2.206-1.295-3.958-1.541-1.782-4.48-3.748-9.181-5.503-4.724-1.765-6.889-2.908-7.245-4.023-.37-1.12 1.006-2.249 3.335-4.207 2.315-1.958 6.041-4.438 10.24-6.302 4.196-1.876 8.86-3.146 13.031-3.086 2.085.024 2.705-.413 2.313-1.236-.401-.825-1.8-2.053-3.712-3.735-.96-.84-2.069-1.788-3.239-2.856a91.49 91.49 0 0 1-3.636-3.562c-1.267-1.297-2.487-2.725-3.686-4.252-1.201-1.527-2.356-3.158-3.356-4.876-2.063-3.44-3.572-6.823-4.754-9.976-1.1-3.134-1.914-6.048-2.336-8.515-.932-4.966-.69-8.194-.238-8.711.951-1.009 6.221 3.239 5.737-1.669-.191-2.44-1.693-5.497-2.642-8.165-.979-2.666-1.538-4.949-.067-5.575 2.918-1.295 8.608-1.989 11.027.205.608.54.664-.149.47-1.682-.17-1.527-.557-3.902-.85-6.767-.231-2.843-.407-6.195-.063-9.548.285-3.367 1.082-6.736 2.421-9.607 2.777-5.712 4.254-6.748 5.012-6.44.774.316.958 1.991 1.568 1.958.609-.03 2.265-4.341 4.333-8.157 2.048-3.823 4.389-7.132 5.248-5.399.883 1.735 1.189 5.427 1.53 8.628.362 3.224.681 5.956 1.089 6.013.408.058 1.518-2.078 2.812-3.608 1.318-1.526 2.811-2.396 3.789.016.486 1.198.941 3.18 1.43 5.463l.721 3.581.795 3.708c.515 2.43 1.085 4.73 1.579 6.508.489 1.777.868 3.026 1.083 3.418.391.763 2.723-1.404 5.063-3.425 1.202-1.001 2.401-1.976 3.341-2.595.94-.62 1.657-.871 1.82-.483.659 1.537-3.644 5.883-.216 6.262 3.394.373 5.064-4.495 5.798-1.023.75 3.457 2.452 12.136 3.474 23.447.549 5.667.336 9.599.072 12.406-.161 1.389-.3 2.483-.352 3.289-.054.806-.016 1.323.265 1.564.281.241.963-.78 1.884-2.416.951-1.631 2.193-3.862 3.638-6.051 1.434-2.195 3.069-4.341 4.599-5.942 1.548-1.598 2.968-2.659 3.956-2.796 2.014-.251 2.153.654 2.151 1.459-.011.81-.234 1.518.866.903 1.074-.624 2.874-1.821 4.586-2.695 1.771-.859 3.454-1.397 4.444-.925.489.23 1.259 1.054 2.122 2.17.871 1.12 1.806 2.512 2.748 3.966.461.723.899 1.452 1.288 2.16.416.719.782 1.419 1.07 2.076.547 1.306.923 2.492.651 3.361-.423 1.783.364 1.273 1.506.54 1.204-.726 2.746-1.618 3.84-.926.549.34 1.353 1.341 2.241 2.606.938 1.282 1.98 2.823 3.043 4.323 2.094 3.036 4.25 5.722 4.335 7.04.012.673.096.94.226.986.129.046.302-.13.578-.352.579-.455 1.511-1.044 3.078-.525.791.252 1.048.569 1.093.914.047.345-.173.727-.426 1.106-.429.743-1.014 1.491.268 1.595 2.464.164 1.355-2.729 5.365-1.453 2.034.648 1.179 2.77-1.184 6.704a150.478 150.478 0 0 1-4.618 7.116c-1.893 2.718-4.093 5.75-6.86 8.639z"
class="colorefc68f svgShape"></path>
<path fill="#d8a96f"
d="M2249.031 1139.896s.796 1.141 2.445 3.002a61.344 61.344 0 0 0 7.756 7.197 70.66 70.66 0 0 0 6.031 4.199 72.832 72.832 0 0 0 7.523 4.056c2.729 1.284 5.748 2.474 8.985 3.519a85.635 85.635 0 0 0 10.395 2.652l.057.049c-8.211-7.25-15.494-17.398-20.212-30.255-4.66-12.822-6.722-28.413-3.906-45.724l-.131 1.488c-.072.973-.193 2.392-.255 4.208-.106 3.633-.117 8.812.615 14.918.705 6.094 2.096 13.088 4.568 20.217 2.462 7.128 5.983 14.374 10.587 20.939.024-6.96.152-13.229.283-18.832l.421-14.634c.093-2.047.103-3.915.157-5.535.053-1.62.071-3.019.072-4.163.046-2.273-.001-3.522-.001-3.522s.106 1.083.129 3.226c.076 2.159.06 5.367.057 9.614.061 8.506-.188 21.07 1.876 37.83 4.514 5.636 9.858 10.55 15.716 14.343 5.859 3.805 12.203 6.515 18.706 8.038 6.131 1.416 11.816 1.929 17.153 1.853l-.751-7.716c-.271-2.393-.496-4.635-.766-6.728a258.757 258.757 0 0 0-1.571-10.967c-.496-3.139-1.031-5.769-1.39-7.62l-.477-2.154c-.118-.498-.198-.763-.198-.763s.099.216.258.638c.17.424.352 1.047.639 1.87.549 1.642 1.198 4.041 1.98 7.07.78 3.041 1.638 6.643 2.701 10.956.233 1.082.559 2.198.813 3.374.326 1.164.587 2.388.94 3.649.658 2.53 1.388 5.26 2.267 8.205a76.405 76.405 0 0 0 10.407-1.507 81.71 81.71 0 0 0 4.666-1.145 90.264 90.264 0 0 0 12.039-4.313 104.85 104.85 0 0 0 6.434-3.083 132.831 132.831 0 0 0 9.398-5.427c2.4-1.522 4.064-2.657 4.996-3.279 1.901-1.221 3.832-2.731 2.284-1.443-.767.635-2.344 1.984-5.3 4.241-2.978 2.232-7.329 5.446-14.101 9.023a93.404 93.404 0 0 1-8.63 3.973c-3.114 1.226-6.585 2.41-10.23 3.323-7.354 1.872-15.728 2.872-24.749 2.025-10.763 4.303-20.107 7.727-28.127 10.222-8.01 2.504-14.7 4.097-20.078 5.045-5.374.951-9.442 1.274-12.14 1.352-2.693.076-4.042-.069-4.042-.069s1.607.072 4.552-.133c2.948-.205 7.259-.716 12.616-1.848 5.363-1.125 11.779-2.888 19.037-5.415 7.262-2.514 15.365-5.801 24.223-9.649-4.931-.746-9.924-2.096-15.009-4.155a66.217 66.217 0 0 1-14.918-8.579l.263.202c-18.223-3.974-30.265-11.56-37.385-17.514-3.584-2.997-5.988-5.625-7.53-7.462-1.503-1.838-2.148-2.882-2.148-2.882z"
class="colord8a96f svgShape"></path>
<path fill="#efc68f"
d="M2419.975 1143.294a1.214 1.214 0 0 1-.741-2.174 239.72 239.72 0 0 0 6.6-5.27 1.214 1.214 0 0 1 1.547 1.869 246.141 246.141 0 0 1-6.666 5.324 1.214 1.214 0 0 1-.74.251zM2439.264 1126.802a1.213 1.213 0 0 1-.832-2.095 287.723 287.723 0 0 0 11.893-11.902 1.213 1.213 0 0 1 1.764 1.664 291.372 291.372 0 0 1-11.994 12.003c-.233.22-.532.33-.831.33zm23.201-24.554a1.214 1.214 0 0 1-.924-1.997 346.027 346.027 0 0 0 10.565-13.114 1.213 1.213 0 0 1 1.924 1.476 348.13 348.13 0 0 1-10.64 13.206 1.208 1.208 0 0 1-.925.429zm20.58-26.802a1.212 1.212 0 0 1-.993-1.907 404.802 404.802 0 0 0 9.349-14.019 1.213 1.213 0 0 1 2.046 1.304 407.75 407.75 0 0 1-9.406 14.103 1.21 1.21 0 0 1-.996.519zm18.183-28.489a1.214 1.214 0 0 1-1.046-1.824 460.132 460.132 0 0 0 8.23-14.713 1.212 1.212 0 1 1 2.137 1.146 465.013 465.013 0 0 1-8.273 14.791c-.225.385-.631.6-1.048.6zm15.96-29.773a1.213 1.213 0 0 1-1.087-1.747 505.677 505.677 0 0 0 7.174-15.245 1.212 1.212 0 1 1 2.212.996 503.384 503.384 0 0 1-7.209 15.318 1.215 1.215 0 0 1-1.09.678zm13.876-30.799a1.214 1.214 0 0 1-1.121-1.675 532.7 532.7 0 0 0 6.17-15.694 1.214 1.214 0 0 1 2.272.852 541.617 541.617 0 0 1-6.199 15.767c-.193.467-.644.75-1.122.75zm11.873-31.655a1.213 1.213 0 0 1-1.148-1.603 540.415 540.415 0 0 0 5.176-16.065 1.213 1.213 0 0 1 2.32.708 546.299 546.299 0 0 1-5.2 16.138 1.214 1.214 0 0 1-1.148.822zm-57.45-11.06h-.442a1.213 1.213 0 1 1 0-2.426h.442c5.479 0 10.995-.149 16.393-.442a1.22 1.22 0 0 1 1.277 1.145 1.213 1.213 0 0 1-1.145 1.277 305.65 305.65 0 0 1-16.525.446zm-17.334-.478-.067-.002a329.97 329.97 0 0 1-16.907-1.369 1.213 1.213 0 0 1 .258-2.412 327.439 327.439 0 0 0 16.782 1.358 1.214 1.214 0 0 1-.066 2.425zm50.639-1.375a1.213 1.213 0 0 1-.136-2.418 272.23 272.23 0 0 0 16.658-2.414 1.214 1.214 0 0 1 .423 2.389 275.437 275.437 0 0 1-16.807 2.436 1.594 1.594 0 0 1-.138.007zm-84.231-2.209c-.063 0-.127-.005-.191-.015a339.309 339.309 0 0 1-16.669-3.068 1.212 1.212 0 0 1-.937-1.436 1.207 1.207 0 0 1 1.436-.937 338.006 338.006 0 0 0 16.55 3.045 1.213 1.213 0 0 1-.189 2.411zm117.505-3.711a1.212 1.212 0 0 1-.289-2.39 238.56 238.56 0 0 0 16.177-4.595 1.212 1.212 0 1 1 .746 2.308 241.517 241.517 0 0 1-16.342 4.641 1.173 1.173 0 0 1-.292.036zm-150.566-3.231a1.22 1.22 0 0 1-.309-.04 335.13 335.13 0 0 1-16.294-4.73 1.213 1.213 0 0 1 .736-2.312 331.362 331.362 0 0 0 16.175 4.695 1.214 1.214 0 0 1-.308 2.387zm182.701-7.178a1.214 1.214 0 0 1-.459-2.336 209.22 209.22 0 0 0 15.279-6.968 1.212 1.212 0 1 1 1.096 2.164 212.02 212.02 0 0 1-15.457 7.05c-.151.061-.306.09-.459.09zm-214.905-3.082a1.19 1.19 0 0 1-.428-.079 306.697 306.697 0 0 1-15.707-6.429 1.212 1.212 0 1 1 .982-2.218 304.5 304.5 0 0 0 15.581 6.378 1.213 1.213 0 0 1-.428 2.348zm183.513-.041a1.212 1.212 0 0 1-1.171-1.531 528.794 528.794 0 0 0 4.152-16.346 1.214 1.214 0 0 1 2.361.559 535.876 535.876 0 0 1-4.171 16.422c-.148.54-.637.896-1.171.896zm61.49-12.136a1.212 1.212 0 0 1-.638-2.245 190.44 190.44 0 0 0 13.859-9.43 1.212 1.212 0 1 1 1.452 1.942 192.089 192.089 0 0 1-14.036 9.551 1.199 1.199 0 0 1-.637.182zm-275.897-1.519c-.187 0-.377-.043-.555-.135a261.606 261.606 0 0 1-14.834-8.265 1.213 1.213 0 0 1 1.251-2.079 258.95 258.95 0 0 0 14.696 8.188 1.213 1.213 0 0 1-.558 2.291zm-28.925-17.451c-.242 0-.486-.072-.698-.222a203.197 203.197 0 0 1-13.474-10.364 1.212 1.212 0 1 1 1.559-1.857 201.423 201.423 0 0 0 13.313 10.24 1.213 1.213 0 0 1-.7 2.203zm331.811-1.234a1.214 1.214 0 0 1-.812-2.114 181.81 181.81 0 0 0 11.917-11.789 1.213 1.213 0 1 1 1.784 1.644 184.194 184.194 0 0 1-12.077 11.947 1.214 1.214 0 0 1-.812.312zm-80.685-.554a1.214 1.214 0 0 1-1.19-1.454 499.515 499.515 0 0 0 3.073-16.582 1.213 1.213 0 1 1 2.392.402 503.866 503.866 0 0 1-3.088 16.662 1.212 1.212 0 0 1-1.187.972zm-276.917-19.986c-.315 0-.63-.122-.868-.365-4.079-4.177-7.84-8.498-11.18-12.844a1.213 1.213 0 0 1 1.924-1.478c3.281 4.27 6.979 8.519 10.991 12.628a1.213 1.213 0 0 1-.867 2.059zm380.445-4.254a1.214 1.214 0 0 1-.963-1.949c3.361-4.4 6.578-9.033 9.563-13.769a1.214 1.214 0 0 1 2.053 1.293 190.263 190.263 0 0 1-9.687 13.948c-.239.313-.6.477-.966.477zm-97.945-9.099a1.212 1.212 0 0 1-1.204-1.371 448.244 448.244 0 0 0 1.882-16.752 1.205 1.205 0 0 1 1.32-1.095 1.213 1.213 0 0 1 1.095 1.32 453.102 453.102 0 0 1-1.891 16.843 1.215 1.215 0 0 1-1.202 1.055zm-302.912-13.445c-.425 0-.836-.223-1.059-.619-2.863-5.102-5.241-10.328-7.07-15.534a1.212 1.212 0 1 1 2.288-.804c1.782 5.075 4.103 10.172 6.896 15.152a1.213 1.213 0 0 1-1.055 1.805zm418.851-5.966a1.213 1.213 0 0 1-1.077-1.769 208.097 208.097 0 0 0 7.073-15.211 1.212 1.212 0 1 1 2.239.933 210.095 210.095 0 0 1-7.156 15.39 1.213 1.213 0 0 1-1.079.657zm-112.826-14.246-.065-.002a1.214 1.214 0 0 1-1.148-1.274 381.81 381.81 0 0 0 .508-16.841 1.213 1.213 0 0 1 1.213-1.203h.01c.67.005 1.208.552 1.203 1.222a383.626 383.626 0 0 1-.511 16.948 1.213 1.213 0 0 1-1.21 1.15zm-316.993-11.494a1.213 1.213 0 0 1-1.2-1.048 79.588 79.588 0 0 1-.736-10.769c0-2.099.086-4.228.255-6.33a1.204 1.204 0 0 1 1.306-1.111 1.213 1.213 0 0 1 1.112 1.306 77.243 77.243 0 0 0-.246 6.135c0 3.468.24 6.98.714 10.44a1.213 1.213 0 0 1-1.205 1.377zm442.831-5.372a1.216 1.216 0 0 1-1.152-1.595 242.385 242.385 0 0 0 4.711-16.118 1.213 1.213 0 0 1 2.35.6 245.462 245.462 0 0 1-4.759 16.28 1.209 1.209 0 0 1-1.15.833zm-125.612-16.925c-.646 0-1.184-.51-1.211-1.163a304.86 304.86 0 0 0-1.159-16.79 1.212 1.212 0 0 1 1.089-1.325 1.201 1.201 0 0 1 1.325 1.089c.536 5.489.929 11.183 1.169 16.925a1.212 1.212 0 0 1-1.16 1.263l-.053.001zm-314.577-11.108a1.213 1.213 0 0 1-1.163-1.558c1.571-5.299 3.709-10.635 6.358-15.86a1.214 1.214 0 0 1 2.163 1.096c-2.583 5.094-4.667 10.293-6.196 15.452-.155.528-.639.87-1.162.87zm448.572-4.645a1.212 1.212 0 0 1-1.192-1.438 291.772 291.772 0 0 0 2.628-16.603 1.204 1.204 0 0 1 1.359-1.047 1.213 1.213 0 0 1 1.047 1.358 294.082 294.082 0 0 1-2.651 16.741c-.11.583-.619.989-1.191.989zm-137.324-17.864a1.212 1.212 0 0 1-1.195-1.018 227.112 227.112 0 0 0-3.294-16.479 1.214 1.214 0 0 1 .896-1.463 1.218 1.218 0 0 1 1.463.896c1.28 5.336 2.4 10.94 3.329 16.656a1.211 1.211 0 0 1-1.199 1.408zm-296.209-7.57a1.213 1.213 0 0 1-.988-1.915c3.155-4.443 6.753-8.9 10.692-13.25a1.213 1.213 0 0 1 1.798 1.628c-3.876 4.279-7.412 8.662-10.512 13.026a1.213 1.213 0 0 1-.99.511zm437.888-8.032a1.212 1.212 0 0 1-1.21-1.305c.416-5.481.708-11.135.866-16.805.018-.669.57-1.228 1.246-1.179a1.21 1.21 0 0 1 1.178 1.246 353.883 353.883 0 0 1-.872 16.921 1.214 1.214 0 0 1-1.208 1.122zm-415.347-17.051a1.21 1.21 0 0 1-.818-2.108 222.334 222.334 0 0 1 12.984-10.947 1.212 1.212 0 1 1 1.493 1.911 220.366 220.366 0 0 0-12.842 10.827 1.206 1.206 0 0 1-.817.317zm265.716-.156c-.507 0-.979-.32-1.15-.827-1.828-5.447-3.896-10.692-6.145-15.591a1.212 1.212 0 1 1 2.204-1.012c2.285 4.977 4.385 10.303 6.24 15.831a1.213 1.213 0 0 1-1.149 1.599zm150.596-16.548a1.213 1.213 0 0 1-1.212-1.194 425.481 425.481 0 0 0-.603-16.834 1.213 1.213 0 0 1 1.144-1.278 1.227 1.227 0 0 1 1.278 1.144c.316 5.694.519 11.391.606 16.93.01.67-.524 1.221-1.194 1.232h-.019zm-389.759-4.15a1.212 1.212 0 0 1-.686-2.213 320.214 320.214 0 0 1 11.906-7.764l2.332-1.442a1.214 1.214 0 0 1 1.271 2.067l-2.323 1.435a317.372 317.372 0 0 0-11.814 7.704c-.212.144-.45.213-.686.213zm224.984-9.883a1.21 1.21 0 0 1-1.029-.569c-3.031-4.839-6.361-9.358-9.895-13.43a1.213 1.213 0 0 1 1.832-1.59c3.616 4.167 7.02 8.787 10.119 13.732a1.214 1.214 0 0 1-1.027 1.857zm-196.257-7.896a1.213 1.213 0 0 1-.601-2.267 435.329 435.329 0 0 1 14.884-8.096 1.213 1.213 0 1 1 1.116 2.153 432.193 432.193 0 0 0-14.8 8.051c-.19.108-.396.159-.599.159zm359.184-11.803c-.62 0-1.149-.473-1.206-1.102a511.061 511.061 0 0 0-1.822-16.757 1.212 1.212 0 0 1 2.406-.302 510.75 510.75 0 0 1 1.83 16.837 1.212 1.212 0 0 1-1.208 1.324zm-329.173-3.71a1.214 1.214 0 0 1-.51-2.314 317.768 317.768 0 0 1 15.577-6.708 1.213 1.213 0 1 1 .898 2.254 314.248 314.248 0 0 0-15.457 6.656 1.205 1.205 0 0 1-.508.112zm144.107-1.886c-.266 0-.535-.087-.759-.267a86.02 86.02 0 0 0-13.898-9.105 1.212 1.212 0 1 1 1.125-2.149 88.524 88.524 0 0 1 14.291 9.362 1.213 1.213 0 0 1-.759 2.159zm-112.709-10.554a1.214 1.214 0 0 1-.375-2.366 219.22 219.22 0 0 1 16.339-4.646 1.212 1.212 0 1 1 .568 2.358 216.233 216.233 0 0 0-16.156 4.594c-.125.041-.251.06-.376.06zm83.009-5.028c-.116 0-.233-.017-.35-.052-5.179-1.558-10.664-2.696-16.302-3.381a1.213 1.213 0 1 1 .292-2.408c5.775.702 11.396 1.869 16.708 3.467a1.213 1.213 0 0 1-.348 2.374zm-50.18-2.792a1.213 1.213 0 0 1-.168-2.414c5.799-.823 11.507-1.305 16.968-1.431.675-.047 1.225.514 1.24 1.184a1.212 1.212 0 0 1-1.184 1.24c-5.365.124-10.978.598-16.683 1.409a1.28 1.28 0 0 1-.173.012zM2702.716 637.863a1.212 1.212 0 0 1-1.196-1.024 609.927 609.927 0 0 0-1.376-8.36 1.213 1.213 0 1 1 2.39-.411c.485 2.821.946 5.618 1.382 8.394a1.212 1.212 0 0 1-1.2 1.401zM3561.706 697.734l-2.063-.006a1.213 1.213 0 0 1-1.206-1.22c.004-.67.571-1.112 1.22-1.206l2.048.006c4.969 0 9.97-.112 14.865-.333a1.235 1.235 0 0 1 1.266 1.157 1.213 1.213 0 0 1-1.157 1.266c-4.931.223-9.969.336-14.973.336zm-19.026-.526-.068-.002a364.457 364.457 0 0 1-16.984-1.335 1.212 1.212 0 0 1-1.083-1.329 1.202 1.202 0 0 1 1.329-1.083c5.621.574 11.297 1.02 16.871 1.326a1.213 1.213 0 0 1-.065 2.423zm50.878-1.029a1.213 1.213 0 0 1-.118-2.419 290.653 290.653 0 0 0 16.769-2.161 1.216 1.216 0 0 1 1.388 1.007 1.215 1.215 0 0 1-1.007 1.389 295.33 295.33 0 0 1-16.91 2.179 1.681 1.681 0 0 1-.122.005zm-226.812-1.072a1.215 1.215 0 0 1-1.184-1.483 228.965 228.965 0 0 1 4.424-16.461 1.213 1.213 0 0 1 2.318.715 226.062 226.062 0 0 0-4.377 16.285 1.212 1.212 0 0 1-1.181.944zm142.16-1.34c-.059 0-.119-.004-.179-.013a387.815 387.815 0 0 1-16.788-2.874 1.212 1.212 0 1 1 .462-2.38 382.676 382.676 0 0 0 16.682 2.856 1.212 1.212 0 0 1-.177 2.411zm118.167-2.947a1.213 1.213 0 0 1-.265-2.396 240.55 240.55 0 0 0 16.341-4.273 1.217 1.217 0 0 1 1.511.813 1.213 1.213 0 0 1-.813 1.51 242.776 242.776 0 0 1-16.507 4.316c-.089.02-.178.03-.267.03zm-151.495-3.516c-.094 0-.189-.011-.284-.033a398.285 398.285 0 0 1-16.473-4.326 1.213 1.213 0 1 1 .666-2.332 393.777 393.777 0 0 0 16.371 4.299 1.213 1.213 0 0 1-.28 2.392zm183.978-6.286a1.212 1.212 0 0 1-.44-2.343 184.867 184.867 0 0 0 15.424-6.81 1.213 1.213 0 0 1 1.083 2.171 187.177 187.177 0 0 1-15.627 6.901 1.262 1.262 0 0 1-.44.081zm-216.624-3.037c-.127 0-.255-.02-.383-.063a404.749 404.749 0 0 1-16.043-5.709 1.215 1.215 0 0 1-.704-1.565c.239-.626.94-.939 1.565-.703a403.102 403.102 0 0 0 15.947 5.675 1.214 1.214 0 0 1-.382 2.365zm-31.737-12.051c-.159 0-.322-.031-.477-.098a408.265 408.265 0 0 1-15.508-7.033 1.213 1.213 0 0 1 1.048-2.188 405.844 405.844 0 0 0 15.416 6.991c.615.263.901.977.636 1.592-.196.46-.644.736-1.115.736zm278.653-.13a1.213 1.213 0 0 1-.656-2.233c4.851-3.115 9.408-6.461 13.545-9.947a1.212 1.212 0 1 1 1.563 1.855c-4.217 3.553-8.859 6.963-13.799 10.133-.202.13-.429.192-.653.192zm-313.129-3.077a1.213 1.213 0 0 1-1.131-1.651 257.655 257.655 0 0 1 4.159-10.084 412.888 412.888 0 0 1-14.607-8.157 1.213 1.213 0 1 1 1.225-2.092 412.352 412.352 0 0 0 14.365 8.026 254.996 254.996 0 0 1 1.536-3.364 1.212 1.212 0 1 1 2.199 1.023 258.211 258.211 0 0 0-6.617 15.525 1.21 1.21 0 0 1-1.129.774zm338.9-18.837a1.214 1.214 0 0 1-.917-2.007c3.746-4.323 7.028-8.89 9.753-13.571a1.212 1.212 0 1 1 2.096 1.22c-2.802 4.813-6.172 9.503-10.016 13.94-.24.276-.577.418-.916.418zm-364.337-9.766c-.224 0-.451-.062-.654-.193a415.81 415.81 0 0 1-14.133-9.493 1.212 1.212 0 0 1 1.394-1.985 413.43 413.43 0 0 0 14.05 9.438 1.212 1.212 0 0 1-.657 2.233zm39.717-2.142a1.212 1.212 0 0 1-1.064-1.791 293.05 293.05 0 0 1 8.566-14.725 1.213 1.213 0 1 1 2.061 1.281 289.386 289.386 0 0 0-8.495 14.602 1.216 1.216 0 0 1-1.068.633zm341.444-17.284a1.213 1.213 0 0 1-1.153-1.588 75.49 75.49 0 0 0 3.367-16.31 1.213 1.213 0 0 1 2.416.227 78.016 78.016 0 0 1-3.476 16.834 1.216 1.216 0 0 1-1.154.837zm-408.944-.074c-.257 0-.516-.081-.736-.249-4.482-3.428-8.96-7-13.31-10.615a1.212 1.212 0 1 1 1.551-1.866 419.124 419.124 0 0 0 13.233 10.554 1.213 1.213 0 0 1-.738 2.176zm85.388-11.462a1.214 1.214 0 0 1-.992-1.91 317.4 317.4 0 0 1 10.162-13.681 1.214 1.214 0 0 1 1.703-.205c.526.414.618 1.176.205 1.703a315.44 315.44 0 0 0-10.084 13.576 1.21 1.21 0 0 1-.994.517zm-111.491-10.235a1.21 1.21 0 0 1-.812-.312 429.512 429.512 0 0 1-12.411-11.651 1.213 1.213 0 0 1 1.695-1.735 426.052 426.052 0 0 0 12.341 11.585 1.212 1.212 0 0 1-.813 2.113zm438.255-11.735a1.212 1.212 0 0 1-1.203-1.075c-.616-5.364-1.767-10.877-3.423-16.387a1.214 1.214 0 0 1 2.323-.697c1.696 5.646 2.877 11.302 3.508 16.808a1.211 1.211 0 0 1-1.205 1.351zm-305.808-4.739a1.212 1.212 0 0 1-.913-2.01 335.399 335.399 0 0 1 11.539-12.556 1.212 1.212 0 1 1 1.744 1.686 333.808 333.808 0 0 0-11.455 12.465 1.216 1.216 0 0 1-.915.415zm-156.727-7.244c-.322 0-.643-.127-.881-.38a440.024 440.024 0 0 1-11.453-12.592 1.213 1.213 0 1 1 1.825-1.597 440.977 440.977 0 0 0 11.39 12.522 1.212 1.212 0 0 1-.881 2.047zm180.348-17.183a1.211 1.211 0 0 1-.828-2.099 337.946 337.946 0 0 1 12.764-11.333 1.21 1.21 0 0 1 1.708.146 1.211 1.211 0 0 1-.145 1.708 334.699 334.699 0 0 0-12.671 11.251 1.209 1.209 0 0 1-.828.327zm272.639-3.266c-.458 0-.896-.261-1.101-.703l-.371-.788a155.52 155.52 0 0 0-7.56-14.057 1.212 1.212 0 1 1 2.072-1.26 158.324 158.324 0 0 1 7.678 14.275l.38.809a1.211 1.211 0 0 1-.591 1.61 1.17 1.17 0 0 1-.507.114zm-475.338-5.097a1.21 1.21 0 0 1-.943-.449l-.449-.556c-3.452-4.28-6.874-8.479-10.264-12.597a1.212 1.212 0 1 1 1.872-1.542c3.395 4.125 6.823 8.33 10.281 12.617l.445.551a1.212 1.212 0 0 1-.942 1.976zm228.678-13.541a1.214 1.214 0 0 1-.735-2.18 321.36 321.36 0 0 1 13.85-9.941 1.211 1.211 0 1 1 1.361 2.007 319.47 319.47 0 0 0-13.744 9.867 1.203 1.203 0 0 1-.732.247zm228.983-10.251c-.358 0-.711-.157-.951-.458a118.768 118.768 0 0 0-11.334-12.378 1.212 1.212 0 1 1 1.665-1.762 120.917 120.917 0 0 1 11.569 12.632 1.214 1.214 0 0 1-.949 1.966zm-479.241-2.412a1.21 1.21 0 0 1-.928-.432 1444.818 1444.818 0 0 0-11-12.908 1.212 1.212 0 0 1 1.837-1.584 1433.45 1433.45 0 0 1 11.017 12.93 1.211 1.211 0 0 1-.926 1.994zm278.369-6.382a1.211 1.211 0 0 1-.625-2.253 291.75 291.75 0 0 1 14.873-8.345 1.213 1.213 0 0 1 1.124 2.15 288.41 288.41 0 0 0-14.749 8.275 1.2 1.2 0 0 1-.623.173zm176.243-14.384c-.237 0-.477-.069-.687-.214a106.227 106.227 0 0 0-14.513-8.389 1.213 1.213 0 0 1 1.045-2.19 108.808 108.808 0 0 1 14.844 8.581 1.212 1.212 0 0 1-.689 2.212zm-146.144-1.318a1.213 1.213 0 0 1-.493-2.321 247.39 247.39 0 0 1 15.819-6.397 1.212 1.212 0 0 1 .83 2.278 246.19 246.19 0 0 0-15.664 6.335c-.16.072-.328.105-.492.105zm-330.641-3.616a1.21 1.21 0 0 1-.909-.409 1253.173 1253.173 0 0 0-11.32-12.623 1.212 1.212 0 1 1 1.794-1.632 1259.37 1259.37 0 0 1 11.343 12.648 1.213 1.213 0 0 1-.908 2.016zm362.54-7.955a1.212 1.212 0 0 1-.326-2.381 199.998 199.998 0 0 1 16.625-3.902 1.213 1.213 0 0 1 .45 2.383 197.628 197.628 0 0 0-16.423 3.854 1.193 1.193 0 0 1-.326.046zm83.746-1.687c-.115 0-.232-.017-.348-.051a118.853 118.853 0 0 0-16.387-3.653 1.212 1.212 0 0 1-1.019-1.38 1.21 1.21 0 0 1 1.38-1.019 121.396 121.396 0 0 1 16.723 3.727 1.213 1.213 0 0 1-.349 2.376zm-50.418-4.541a1.213 1.213 0 0 1-.107-2.421 153.54 153.54 0 0 1 17.092-.588c.67.015 1.2.57 1.185 1.239-.015.67-.582 1.224-1.24 1.185a152.095 152.095 0 0 0-16.821.58 1.345 1.345 0 0 1-.109.005zm-418.706-10.927c-.323 0-.647-.129-.885-.384-3.947-4.216-7.84-8.311-11.681-12.285a1.213 1.213 0 0 1 1.745-1.685 1070.06 1070.06 0 0 1 11.707 12.312 1.213 1.213 0 0 1-.886 2.042zm-23.588-24.403c-.31 0-.621-.118-.857-.355a923.46 923.46 0 0 0-12.09-11.876 1.21 1.21 0 0 1-.031-1.714 1.21 1.21 0 0 1 1.714-.031 915.465 915.465 0 0 1 12.123 11.906 1.212 1.212 0 0 1-.859 2.07zm-24.441-23.543c-.294 0-.59-.107-.823-.323a763.218 763.218 0 0 0-12.561-11.367 1.213 1.213 0 0 1 1.607-1.817 763.252 763.252 0 0 1 12.602 11.404 1.213 1.213 0 0 1-.825 2.103zm-25.429-22.469c-.275 0-.552-.094-.78-.284a603.377 603.377 0 0 0-13.108-10.718 1.213 1.213 0 0 1 1.509-1.899 611.286 611.286 0 0 1 13.16 10.762 1.212 1.212 0 0 1-.781 2.139zm-26.581-21.084c-.251 0-.505-.078-.722-.24a471.69 471.69 0 0 0-13.753-9.857 1.213 1.213 0 0 1 1.377-1.996c4.54 3.128 9.19 6.461 13.824 9.908a1.212 1.212 0 0 1-.726 2.185zm-27.95-19.219c-.22 0-.444-.06-.644-.186a341.135 341.135 0 0 0-14.52-8.649 1.215 1.215 0 0 1-.464-1.652 1.215 1.215 0 0 1 1.652-.464 344.33 344.33 0 0 1 14.623 8.711 1.212 1.212 0 0 1-.647 2.24zm-29.594-16.553a1.22 1.22 0 0 1-.529-.121c-5.243-2.543-10.434-4.836-15.432-6.814a1.213 1.213 0 1 1 .893-2.255c5.053 2 10.301 4.318 15.597 6.886a1.213 1.213 0 0 1-.529 2.304zm-31.553-12.349c-.111 0-.223-.015-.334-.047-5.751-1.648-11.267-2.845-16.395-3.561a1.212 1.212 0 0 1-1.033-1.368 1.208 1.208 0 0 1 1.369-1.033c5.241.731 10.869 1.953 16.728 3.631.644.185 1.016.856.832 1.5-.154.53-.64.878-1.167.878zm-33.874-3.872-.294-1.177-1.155-.371c.233-.724.798-.817 1.653-.958a1.213 1.213 0 1 1 .394 2.394c-.353.058-.552.101-.598.112z"
class="colorefc68f svgShape"></path>
<path fill="#7e892c"
d="M2037.778 2447.788c-7.531 99.196 20.609 209.192 89.111 203.891s118.635-72.491 114.616-203.891c-4.019-131.4-203.727 0-203.727 0z"
class="color7e892c svgShape"></path>
<path fill="#dbeafc"
d="M2050.193 2463.551c-6.609 77.729 18.085 163.921 78.198 159.767 60.114-4.154 104.107-56.804 100.58-159.767-3.526-102.964-178.778 0-178.778 0z"
class="colordbeafc svgShape"></path>
<path fill="#a9be3a"
d="M2045.697 2466.43c-2.321 120.779 98.728 170.599 143.352 110.814s39.983-121.462 39.983-121.462l-183.335 10.648z"
class="colora9be3a svgShape"></path>
<path fill="#ffffff"
d="M2130.142 2522.051c-1.894-.232-3.924-.761-6.088-1.586-2.266-.865-9.161-3.496-10.374-9.667-1.25-6.362 4.04-11.315 9.156-16.105 2.155-2.017 4.383-4.104 5.74-5.959 3.179-4.349 5.111-11.987 2.92-16.424-1.457-2.951-4.929-4.507-10.32-4.629-4.593-.102-10.136-.806-12.281-5.366-2.361-5.02 1.293-9.642 5.163-14.536 3.063-3.874 7.258-9.18 5.919-11.989-2.224-4.668-9.635-10.208-14.062-13.517-4.574-3.42-8.187-6.12-5.819-10.599 2.502-4.735 6.624-3.323 17.638.458a5.378 5.378 0 0 1 2.782 7.993c3.72 3.263 7.259 7.024 9.172 11.038 4.219 8.855-2.376 17.198-7.191 23.289-.571.723-1.269 1.605-1.9 2.448.254.012.528.021.821.028 12.105.271 17.406 5.926 19.725 10.621 4.3 8.708 1.302 20.443-3.881 27.533-1.952 2.671-4.555 5.108-7.072 7.464-1.877 1.759-4.886 4.575-5.735 6.119.466.366 1.46.997 3.436 1.751 3.28 1.251 5.122 1.157 5.703.696 1.067-.846 1.489-4.257 1.153-6.741-.397-2.933 1.65-5.649 4.581-6.061 2.928-.409 5.643 1.611 6.068 4.54.168 1.155 1.45 11.43-5.073 16.655-2.739 2.19-6.149 3.04-10.181 2.546z"
class="colorfff svgShape"></path>
<path fill="#3a95aa"
d="M1853.418 2276.156s279.83-69.542 310.405-91.056c30.575-21.514 4.985-80.718-112.854-59.523s-197.551 150.579-197.551 150.579z"
class="color3a95aa svgShape"></path>
<path fill="#f9ae93"
d="M2210.9 2167.165s-15.555 79.732-26.656 130.076c-5.034 22.783-9.144 39.564-10.499 40.188-4.346 2.001-82.636 11.188-109.874-18.222l-1.979-28.786-2.991-43.48-5.873-85.735-2.065-30.034 63.424 14.264 96.513 21.729z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="M2210.9 2167.165s-115.489 48.751-151.999 79.775l-5.873-85.735c18.696-7.293 40.748-12.435 61.359-15.77l96.513 21.73z"
class="colorf6816b svgShape"></path>
<path fill="#ffffff"
d="M2184.244 2297.24c-5.034 22.783-9.144 65.296-10.499 65.92-4.346 2.001-82.636 11.187-109.874-18.223l-1.979-54.517c42.34 12.608 92.361 10.134 122.352 6.82z"
class="colorfff svgShape"></path>
<path fill="#a9be3a"
d="M2063.862 2352.554c17.049-25.279 63.304-44.642 79.978-31.734 16.674 12.908 36.037 48.063 36.037 48.063l-116.015-16.329z"
class="colora9be3a svgShape"></path>
<path fill="#f9ae93"
d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021-59.766.043-55.163.043 5.766-110.971.689-13.146 10.456-.323 3.636-.129 75.063-2.366 115.231-3.636c-.002.001 50.923 84.617-3.594 108.993z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="m2090.356 2469.463-55.163.043 5.766-110.971c5.357-6.54 9.294-11.273 11.144-13.468l3.636-.129c40.533 21.406 39.048 87.348 34.617 124.525z"
class="colorf6816b svgShape"></path>
<path fill="#ffffff"
d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021c6.347-25.882 17.319-90.683-19.32-126.849l50.839-1.614 64.392-2.023c-.001.002 50.924 84.618-3.593 108.994z"
class="colorfff svgShape"></path>
<path fill="#dbeafc"
d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021s28.141-3.916 55.399-31.519c26.936-27.323 7.594-83.023-23.881-96.943l64.392-2.023c0 .001 50.925 84.617-3.592 108.993z"
class="colordbeafc svgShape"></path>
<path fill="#a9be3a"
d="M2328.885 2528.606c-14.285 11.123-14.092 42.749-6.841 82.486 1.721 9.381 1.571 19.621.323 29.798-1.979 16.631-6.863 33.068-11.188 45.266-56.905-12.758-83.906-141.995-90.209-158.173-7.122-18.179-56.583-26.011-52.474-38.554 4.087-12.521 73.192-40.662 72.353-90.92-.215-12.78-2.151-22.353-5.293-29.625-4.582-10.542-11.704-16.2-19.922-19.643-.022-.021-.043-.021-.065-.043-8.434-3.528-17.986-4.755-27.043-6.497-24.074-4.69-41.394-24.978 1.506-28.162 0 0 106.625-9.531 120.243-22.397a71.39 71.39 0 0 1 3.335-2.969c19.965 22.827 1.958 62.585 2.065 80.765.107 20.847 24.505 10.413 17.061 36.122-7.444 25.731-16.265 32.853-10.435 72.697 5.831 39.823 20.848 38.704 6.584 49.849z"
class="colora9be3a svgShape"></path>
<path fill="#ffffff"
d="M2386.974 2342.356c-13.317 43.416-30.12 88.531-26.613 135.734 3.076 41.523 2.582 139.477-9.596 179.021-1.656 5.422-3.528 9.746-5.658 12.672-4.862 6.712-9.165 11.833-12.865 15.749-7.422 2.022-14.437 2.108-21.063.624 4.325-12.198 9.208-28.635 11.188-45.266 1.248-10.176 1.398-20.417-.323-29.798-7.25-39.737-7.444-71.363 6.841-82.486 14.264-11.145-.753-10.026-6.583-49.849-5.83-39.844 2.991-46.965 10.435-72.697 7.444-25.71-16.954-15.275-17.061-36.122-.108-18.18 17.9-57.938-2.065-80.765 8.885-7.573 26.742-20.676 44.986-30.25 28.097 11.941 39.866 46.019 28.377 83.433z"
class="colorfff svgShape"></path>
<path fill="#7e892c"
d="M2412.361 2425.337c-33.068 41.286-35.068 79.71-30.873 114.456 3.227 26.72 15.856 85.627-11.381 121.19-8.175 10.693-19.944 19.255-36.638 24.225-.388.107-.818.237-1.227.323 3.7-3.916 8.003-9.036 12.865-15.749 2.13-2.926 4.002-7.25 5.658-12.672 12.177-39.543 12.672-137.498 9.596-179.021-3.507-47.203 13.296-92.318 26.613-135.734 11.489-37.414-.28-71.492-28.377-83.433 20.223-10.585 40.877-16.889 50.129-6.454 18.824 21.257 36.724 131.583 3.635 172.869zM2322.366 2640.889c-1.979 16.631-6.863 33.068-11.188 45.266-56.905-12.758-83.906-141.995-90.209-158.173-7.122-18.179-56.583-26.011-52.474-38.554 4.087-12.521 73.192-40.662 72.353-90.92-.215-12.78-2.151-22.353-5.293-29.625 17.255 25.838 20.826 64.134 6.885 87.649-12.091 20.396 20.913 136.81 79.926 184.357z"
class="color7e892c svgShape"></path>
<path fill="#dbeafc"
d="M2350.765 2657.111c-1.656 5.422-3.528 9.746-5.658 12.672-4.862 6.712-9.165 11.833-12.865 15.749-7.422 2.022-14.437 2.108-21.063.624 4.325-12.198 9.208-28.635 11.188-45.266 8.906 7.163 18.394 12.757 28.398 16.221z"
class="colordbeafc svgShape"></path>
<path fill="#ffffff"
d="M2247.125 2621.621c-1.908 0-3.988-.277-6.237-.833-2.354-.582-9.519-2.354-11.473-8.333-2.016-6.163 2.633-11.723 7.127-17.1 1.893-2.264 3.851-4.606 4.971-6.613 2.626-4.704 3.614-12.52.899-16.657-1.805-2.752-5.441-3.873-10.807-3.338-4.571.458-10.158.434-12.843-3.831-2.955-4.695.11-9.728 3.355-15.056 2.568-4.218 6.086-9.995 4.415-12.621-2.776-4.362-10.805-8.959-15.603-11.705-4.956-2.837-8.871-5.078-7.066-9.812 1.907-5.005 6.17-4.104 17.563-1.693a5.378 5.378 0 0 1 3.734 7.595c4.09 2.785 8.06 6.088 10.447 9.839 5.266 8.276-.265 17.359-4.303 23.991-.479.787-1.064 1.747-1.588 2.661.254-.019.526-.043.818-.072 12.048-1.205 17.998 3.763 20.871 8.141 5.328 8.12 3.781 20.132-.5 27.801-1.613 2.889-3.899 5.625-6.111 8.27-1.649 1.974-4.293 5.136-4.947 6.772.507.306 1.57.812 3.623 1.319 3.408.843 5.225.525 5.746-.004.956-.969.959-4.406.323-6.831-.75-2.863.95-5.808 3.81-6.573 2.856-.763 5.797.912 6.575 3.768.307 1.125 2.831 11.169-3.008 17.148-2.447 2.509-5.728 3.767-9.791 3.767z"
class="colorfff svgShape"></path>
<path fill="#64acc1"
d="M2210.9 2167.165c-114.757-14.888-222.695 29.066-289.325 65.554-41.501 22.719-66.995 42.534-68.136 43.416 9.961-25.968 19.147-80.012 26.312-131.883.667-4.97 1.334-9.918 1.979-14.823 7.702-58.498 12.543-110.347 12.543-110.347-.021.065-.043.151-.086.215a116.59 116.59 0 0 1-4.991 11.575c0 .021 0 .021-.022.043-25.709 52.387-92.339 104.388-136.315 134.658-24.139 16.631-41.458 26.699-41.458 26.699s-5.916 11.123-11.79 26.893c0 .021-.021.021-.021.043-9.746 26.183-19.363 65.167-1.463 87.09 10.219 12.5 55.27 20.654 109.766 25.968h.043c98.514 9.595 227.858 9.896 238.013 9.896 15.77 0 24.376 12.909 15.77 129.022-4.281 57.744-26.269 115.855-48.407 159.722-22.332 44.363-44.793 74.117-49.117 74.117-8.283 0-519.701-193.328-654.338-244.059-.15-.043-.301-.107-.452-.151-4.948-1.872-9.358-3.529-13.231-4.991-82.271-30.959-103.656-106.518-70.761-236.658 10.521-41.716 26.635-89.048 48.106-142.317l207.786-140.704 243.865-165.144 24.978-16.91s38.855-21.945 140.295-76.871c28.184-15.254 61.208-33.046 99.568-53.635 176.418-94.663 259.614-61.681 275.384 48.752 15.772 110.454-54.495 494.83-54.495 494.83z"
class="color64acc1 svgShape"></path>
<path fill="#3a95aa"
d="M1752.86 2165.573c-24.139 16.631-41.458 26.699-41.458 26.699s47.267-162.993 40.899-222.544c.818 4.066 19.707 101.698.559 195.845zM1695.826 1982.249c-130.937 195.866-380.158 124.783-470.411 236.916 10.521-41.716 26.635-89.048 48.106-142.317l207.786-140.704c108.604 11.897 214.519 46.105 214.519 46.105zM2013.313 2630.906c-22.332 44.363-44.793 74.117-49.117 74.117-8.283 0-519.701-193.328-654.338-244.059 247.437 85.434 551.886 183.883 703.455 169.942z"
class="color3a95aa svgShape"></path>
<path fill="#3a95aa"
d="M1881.731 2129.428c7.702-58.498 12.543-110.347 12.543-110.347-.021.065-.043.151-.086.215a116.59 116.59 0 0 1-4.991 11.575c0 .021 0 .021-.022.043-25.709 52.387-92.339 104.388-136.315 134.658 147.438-134.658 224.739-370.09 229.407-384.59l-102.516 363.269c.668-4.969 1.335-9.917 1.98-14.823z"
class="color3a95aa svgShape"></path>
<path fill="#0a2f54" d="M1982.461 1780.315c-.021.065-.043.172-.108.366l.108-.366z"
class="color0a2f54 svgShape"></path>
<path fill="#3a95aa"
d="M1807.894 2332.266c-83.734-5.917-205.14-10.908-205.14-10.908s74.547-55.184 96.836-102.15c-9.746 26.183-19.363 65.167-1.463 87.09 10.22 12.5 55.271 20.654 109.767 25.968zM1890.444 1677.218c-19.04 46.622-61.961 130.979-151.267 229.988 0 0-23.236-69.362-14.006-136.207l24.978-16.91s38.855-21.944 140.295-76.871z"
class="color3a95aa svgShape"></path>
<path fill="#ffffff"
d="M1400.865 2100.672a2.001 2.001 0 0 1-1.762-2.942 280.663 280.663 0 0 1 2.905-5.304 2 2 0 1 1 3.487 1.961 275.24 275.24 0 0 0-2.864 5.228 1.999 1.999 0 0 1-1.766 1.057zM1822.222 2445.415c-1.104 0-2.031-.896-2.031-2s.864-2 1.969-2h.063c1.175 0 2.348-.002 3.52-.008l8.359-.039c1.127.021 2.004.887 2.009 1.991a2 2 0 0 1-1.991 2.009l-8.357.039c-1.179.006-2.36.008-3.541.008zm-12.013-.096h-.033a771.616 771.616 0 0 1-11.982-.286 2 2 0 0 1-1.936-2.063c.035-1.104.962-1.987 2.063-1.936 3.932.124 7.942.22 11.92.284a2.002 2.002 0 0 1-.032 4.001zm35.852-.005a2 2 0 0 1-.009-4l11.951-.052h.009a2 2 0 0 1 .009 4l-11.951.052h-.009zm23.903-.101a2 2 0 0 1-.008-4l11.951-.047h.008a2 2 0 0 1 .008 4l-11.951.047h-.008zm23.901-.091a2 2 0 0 1-.007-4l11.951-.042h.007a2 2 0 0 1 .007 4l-11.951.042h-.007zm23.902-.08a2 2 0 0 1-.006-4l11.95-.036h.006a2 2 0 0 1 .006 4l-11.95.036h-.006zm23.901-.071a2 2 0 0 1-.005-4l11.951-.03h.005a2.001 2.001 0 0 1 .005 4l-11.951.03h-.005zm23.903-.055a2 2 0 0 1-.004-4l11.951-.021h.003a2 2 0 0 1 .003 4l-11.949.021h-.004zm23.901-.04a2 2 0 0 1-.003-4l11.952-.014h.002a1.999 1.999 0 0 1 .002 4l-11.95.014h-.003zm59.753-.01h-.003l-11.948-.011a2 2 0 0 1 .001-4h.001l11.952.011a2 2 0 0 1-.003 4zm-35.85-.013a2 2 0 0 1-.002-4l11.952-.002a2 2 0 0 1 0 4l-11.95.002zm-227.06-.291-.097-.002a784.024 784.024 0 0 1-11.963-.66 2 2 0 0 1 .252-3.992c3.964.249 7.968.471 11.9.656a2 2 0 0 1-.092 3.998zm-23.845-1.501c-.053 0-.106-.002-.159-.006a790.184 790.184 0 0 1-11.923-1.031 2 2 0 0 1 .375-3.983c3.926.37 7.917.715 11.862 1.025a2.001 2.001 0 0 1-.155 3.995zm-23.76-2.24c-.072 0-.146-.004-.221-.012a779.779 779.779 0 0 1-11.874-1.401 2 2 0 0 1-1.734-2.234 1.995 1.995 0 0 1 2.234-1.734c3.912.493 7.886.962 11.811 1.394a2 2 0 0 1-.216 3.987zm-23.652-2.98c-.094 0-.188-.006-.283-.02a760.058 760.058 0 0 1-11.857-1.777 2 2 0 0 1 .625-3.951c3.9.616 7.867 1.211 11.793 1.768a2 2 0 0 1-.278 3.98zm-23.617-3.733c-.114 0-.229-.01-.346-.03a762.029 762.029 0 0 1-11.793-2.157 2.002 2.002 0 0 1-1.589-2.341 2.004 2.004 0 0 1 2.341-1.589c3.889.744 7.835 1.467 11.729 2.147a1.998 1.998 0 0 1 1.625 2.313 1.999 1.999 0 0 1-1.967 1.657zm-23.485-4.497a2.06 2.06 0 0 1-.41-.042 710.123 710.123 0 0 1-11.715-2.547 2 2 0 1 1 .883-3.902 689.85 689.85 0 0 0 11.648 2.532 2.001 2.001 0 0 1-.406 3.959zm-23.321-5.276c-.157 0-.317-.02-.476-.059a694.447 694.447 0 0 1-11.623-2.946 2 2 0 0 1 1.017-3.869 696.111 696.111 0 0 0 11.555 2.931 2 2 0 0 1-.473 3.943zm-23.123-6.082c-.18 0-.363-.025-.545-.076a663.273 663.273 0 0 1-11.51-3.364 2 2 0 1 1 1.157-3.828 666.835 666.835 0 0 0 11.441 3.343 2 2 0 0 1-.543 3.925zm-22.886-6.92c-.204 0-.411-.032-.616-.098a623.546 623.546 0 0 1-11.376-3.799 2 2 0 1 1 1.303-3.781 615.614 615.614 0 0 0 11.303 3.773 2.002 2.002 0 0 1-.614 3.905zm-22.604-7.794c-.229 0-.463-.04-.691-.124a581.083 581.083 0 0 1-11.215-4.259 2 2 0 1 1 1.459-3.725 573.155 573.155 0 0 0 11.138 4.229 2 2 0 0 1 1.186 2.567 2 2 0 0 1-1.877 1.312zm-22.259-8.728c-.256 0-.517-.05-.769-.155a519.163 519.163 0 0 1-11.021-4.748 2 2 0 0 1-1.015-2.64 1.994 1.994 0 0 1 2.64-1.015 511.256 511.256 0 0 0 10.937 4.711 1.999 1.999 0 0 1 1.076 2.615 2.004 2.004 0 0 1-1.848 1.232zm-21.845-9.717a2 2 0 0 1-.854-.192 481.83 481.83 0 0 1-10.785-5.273 2 2 0 0 1 1.802-3.571 473.733 473.733 0 0 0 10.694 5.229 2 2 0 0 1-.857 3.807zm-21.339-10.776c-.32 0-.645-.077-.947-.239a427.957 427.957 0 0 1-10.493-5.842 2 2 0 1 1 1.995-3.466 428.514 428.514 0 0 0 10.395 5.787 2 2 0 0 1-.95 3.76zm-20.717-11.927a1.99 1.99 0 0 1-1.046-.297 378.799 378.799 0 0 1-10.133-6.459 2 2 0 1 1 2.204-3.338 377.45 377.45 0 0 0 10.026 6.391 2 2 0 0 1-1.051 3.703zm-19.942-13.175c-.4 0-.804-.119-1.155-.369a330.16 330.16 0 0 1-9.68-7.132 1.998 1.998 0 0 1-.373-2.803 2.001 2.001 0 0 1 2.804-.372 332.315 332.315 0 0 0 9.564 7.046 2 2 0 0 1-1.16 3.63zm-18.971-14.531c-.45 0-.901-.15-1.275-.46a292.336 292.336 0 0 1-9.107-7.863 2.001 2.001 0 0 1 2.678-2.972 285.65 285.65 0 0 0 8.981 7.756 1.999 1.999 0 0 1-1.277 3.539zm-17.741-16a1.994 1.994 0 0 1-1.404-.575 251.85 251.85 0 0 1-8.375-8.653 2 2 0 1 1 2.941-2.711 246.605 246.605 0 0 0 8.241 8.515 2 2 0 0 1-1.403 3.424zm-16.176-17.57a1.996 1.996 0 0 1-1.54-.723 217.317 217.317 0 0 1-7.441-9.482 2 2 0 0 1 3.214-2.379 214.79 214.79 0 0 0 7.304 9.307 2 2 0 0 1-1.537 3.277zm-14.189-19.197a1.998 1.998 0 0 1-1.678-.908 189.332 189.332 0 0 1-6.263-10.312 2 2 0 0 1 3.485-1.965 185.733 185.733 0 0 0 6.13 10.093 2 2 0 0 1-1.674 3.092zm-11.707-20.789a1.998 1.998 0 0 1-1.806-1.138 170.495 170.495 0 0 1-4.815-11.071 2 2 0 0 1 3.723-1.463 165.687 165.687 0 0 0 4.702 10.81 2 2 0 0 1-1.804 2.862zm-8.708-22.194a2.001 2.001 0 0 1-1.91-1.41 158.914 158.914 0 0 1-3.123-11.656 2.001 2.001 0 0 1 3.901-.887 154.755 154.755 0 0 0 3.044 11.361 2 2 0 0 1-1.912 2.592zm-5.279-23.258a2 2 0 0 1-1.977-1.71 157.352 157.352 0 0 1-1.289-12.008 2 2 0 0 1 1.859-2.132 2.006 2.006 0 0 1 2.131 1.858c.267 3.9.689 7.837 1.256 11.701a2 2 0 0 1-1.98 2.291zm-1.628-23.775h-.016a2 2 0 0 1-1.984-2.016c.032-3.993.215-8.06.546-12.086a2 2 0 0 1 3.987.328 160.032 160.032 0 0 0-.532 11.789 2.002 2.002 0 0 1-2.001 1.985zm1.943-23.81a1.998 1.998 0 0 1-1.979-2.303 181.453 181.453 0 0 1 2.239-11.873 2.01 2.01 0 0 1 2.388-1.517 2.001 2.001 0 0 1 1.517 2.388c-.863 3.869-1.6 7.775-2.19 11.609a2.002 2.002 0 0 1-1.975 1.696zm5.183-23.314a2 2 0 0 1-1.922-2.558c1.102-3.8 2.347-7.663 3.701-11.484a2 2 0 1 1 3.77 1.336 203.829 203.829 0 0 0-3.629 11.262 2.003 2.003 0 0 1-1.92 1.444zm7.961-22.523a2 2 0 0 1-1.846-2.769 242.566 242.566 0 0 1 4.911-11.004 2 2 0 1 1 3.612 1.719 240.992 240.992 0 0 0-4.83 10.822 2 2 0 0 1-1.847 1.232zM2134.81 2148.402a2 2 0 0 1-1.993-2.191c.353-3.687.73-7.686 1.13-11.971a1.988 1.988 0 0 1 2.177-1.805 2 2 0 0 1 1.806 2.177c-.399 4.289-.777 8.29-1.13 11.98a2.002 2.002 0 0 1-1.99 1.81zm2.233-23.95a2.001 2.001 0 0 1-1.995-2.182c.349-3.825.71-7.819 1.081-11.97a2 2 0 1 1 3.984.356c-.371 4.154-.732 8.15-1.081 11.978a1.998 1.998 0 0 1-1.989 1.818zm2.139-23.946a1.998 1.998 0 0 1-1.994-2.174c.339-3.882.685-7.875 1.034-11.971a1.991 1.991 0 0 1 2.164-1.822 2 2 0 0 1 1.822 2.164c-.352 4.098-.697 8.093-1.036 11.977a2 2 0 0 1-1.99 1.826zm2.048-23.95a2 2 0 0 1-1.995-2.167c.327-3.912.657-7.905.989-11.971a1.996 1.996 0 0 1 2.156-1.83 2 2 0 0 1 1.83 2.156c-.332 4.068-.662 8.063-.989 11.979a2 2 0 0 1-1.991 1.833zm1.956-23.95a2.001 2.001 0 0 1-1.996-2.159c.313-3.934.628-7.927.942-11.973a2.01 2.01 0 0 1 2.149-1.839 2.001 2.001 0 0 1 1.839 2.149 6247.66 6247.66 0 0 1-.942 11.98 2 2 0 0 1-1.992 1.842zm1.86-23.956a2 2 0 0 1-1.996-2.151c.299-3.95.597-7.944.894-11.976.081-1.102 1.035-1.942 2.141-1.848a1.998 1.998 0 0 1 1.847 2.141 6716.74 6716.74 0 0 1-.893 11.983 2 2 0 0 1-1.993 1.851zm1.762-23.961a2.001 2.001 0 0 1-1.997-2.143c.283-3.963.563-7.958.841-11.979a2.007 2.007 0 0 1 2.133-1.857 1.998 1.998 0 0 1 1.857 2.133 4359.74 4359.74 0 0 1-.841 11.988 2 2 0 0 1-1.993 1.858zm1.654-23.967a1.997 1.997 0 0 1-1.997-2.133c.264-3.973.525-7.969.783-11.982.071-1.101 1.04-1.923 2.124-1.868a2 2 0 0 1 1.868 2.124c-.258 4.017-.52 8.015-.785 11.991a2 2 0 0 1-1.993 1.868zm1.539-23.974a2 2 0 0 1-1.998-2.123c.245-3.982.486-7.979.723-11.985.064-1.104.984-1.96 2.114-1.878a1.998 1.998 0 0 1 1.878 2.114 4642.79 4642.79 0 0 1-.723 11.995 2 2 0 0 1-1.994 1.877zm1.414-23.982-.114-.003a2.001 2.001 0 0 1-1.885-2.109c.225-4.003.443-8.012.656-12.022.059-1.104 1.026-1.934 2.103-1.891a2 2 0 0 1 1.891 2.103 3882.59 3882.59 0 0 1-.656 12.035 2 2 0 0 1-1.995 1.887zm1.275-24.04-.102-.003a1.997 1.997 0 0 1-1.897-2.097c.198-3.999.391-7.995.576-11.987.051-1.103 1.001-1.94 2.091-1.905a2 2 0 0 1 1.905 2.091c-.186 3.996-.378 7.998-.578 12.001a1.999 1.999 0 0 1-1.995 1.9zm1.112-23.971-.086-.002a2 2 0 0 1-1.913-2.083c.17-4.008.334-8.008.489-11.994.043-1.103.983-1.986 2.076-1.92a1.999 1.999 0 0 1 1.92 2.076c-.156 3.99-.32 7.994-.49 12.008a1.997 1.997 0 0 1-1.996 1.915zm-426.22-.368a2 2 0 0 1-1.344-3.481 1714.18 1714.18 0 0 1 8.935-8.043 2 2 0 0 1 2.666 2.982c-3.008 2.688-5.98 5.362-8.914 8.024a1.996 1.996 0 0 1-1.343.518zm17.909-16.003a2.002 2.002 0 0 1-1.323-3.501c2.986-2.63 6.004-5.268 9.051-7.915a1.999 1.999 0 1 1 2.623 3.019c-3.04 2.641-6.051 5.273-9.029 7.898a1.996 1.996 0 0 1-1.322.499zm409.243-7.633-.07-.001a2 2 0 0 1-1.93-2.068c.139-4.019.269-8.019.389-11.997.033-1.104.974-2.008 2.06-1.939a1.999 1.999 0 0 1 1.938 2.06c-.12 3.984-.25 7.99-.389 12.015a2 2 0 0 1-1.998 1.93zm-391.11-8.116a1.998 1.998 0 0 1-1.302-3.518c3.026-2.593 6.078-5.19 9.154-7.791a2 2 0 0 1 2.582 3.054 2031.69 2031.69 0 0 0-9.135 7.773 1.984 1.984 0 0 1-1.299.482zm18.341-15.503a2 2 0 0 1-1.282-3.536c3.065-2.557 6.151-5.114 9.257-7.669a2 2 0 1 1 2.541 3.089 1780.402 1780.402 0 0 0-9.235 7.651 1.987 1.987 0 0 1-1.281.465zm373.49-.395-.051-.001a1.998 1.998 0 0 1-1.949-2.049c.101-4.026.189-8.028.268-11.998a2 2 0 0 1 1.999-1.961h.04a2.002 2.002 0 0 1 1.961 2.039c-.078 3.978-.169 7.985-.27 12.02a2 2 0 0 1-1.998 1.95zm-354.948-14.866a2 2 0 0 1-1.262-3.552 1680.07 1680.07 0 0 1 9.329-7.525 2 2 0 1 1 2.5 3.123c-3.118 2.497-6.221 5-9.308 7.507a1.984 1.984 0 0 1-1.259.447zm355.416-9.154h-.028a2.002 2.002 0 0 1-1.973-2.027c.055-4.038.096-8.04.123-11.998a2 2 0 0 1 2-1.986h.014a2 2 0 0 1 1.986 2.014c-.027 3.968-.068 7.977-.123 12.025a2 2 0 0 1-1.999 1.972zm-336.718-5.824a2.001 2.001 0 0 1-1.241-3.57c3.138-2.479 6.288-4.952 9.45-7.415a2 2 0 1 1 2.458 3.157 1708.356 1708.356 0 0 0-9.428 7.397c-.367.29-.805.431-1.239.431zm18.937-14.756a1.999 1.999 0 0 1-1.219-3.586 1725.31 1725.31 0 0 1 9.571-7.299 2 2 0 1 1 2.414 3.19 1755.416 1755.416 0 0 0-9.55 7.281c-.361.279-.79.414-1.216.414zm317.941-3.444a2 2 0 0 1-2-1.999c-.003-4.048-.022-8.044-.06-11.983a2 2 0 0 1 1.981-2.019c1.104.022 2.008.876 2.019 1.981.037 3.95.057 7.958.06 12.018a2.001 2.001 0 0 1-2 2.002zm-298.756-11.074a2 2 0 0 1-1.197-3.604c3.218-2.398 6.44-4.782 9.667-7.148a2 2 0 1 1 2.365 3.225 1561.84 1561.84 0 0 0-9.642 7.131 1.991 1.991 0 0 1-1.193.396zm298.524-12.926a2 2 0 0 1-1.999-1.962c-.076-4.024-.176-8.053-.297-11.973a2 2 0 0 1 1.938-2.06c1.101-.062 2.026.834 2.06 1.938.121 3.935.222 7.979.299 12.019a2 2 0 0 1-1.962 2.038h-.039zm-279.161-1.278a2 2 0 0 1-1.173-3.622c3.259-2.352 6.52-4.684 9.779-6.996a2 2 0 1 1 2.314 3.264 1398.023 1398.023 0 0 0-9.752 6.976 1.997 1.997 0 0 1-1.168.378zm19.59-13.891a2 2 0 0 1-1.146-3.641c3.304-2.3 6.604-4.577 9.9-6.827a2 2 0 1 1 2.256 3.302 1269.277 1269.277 0 0 0-9.869 6.808 1.994 1.994 0 0 1-1.141.358zm258.822-8.821a2 2 0 0 1-1.996-1.911c-.184-4.119-.396-8.14-.63-11.95a1.998 1.998 0 0 1 1.873-2.119c1.111-.083 2.051.771 2.119 1.873.236 3.833.449 7.877.634 12.019a2 2 0 0 1-1.909 2.087l-.091.001zm-238.989-4.721a2.001 2.001 0 0 1-1.114-3.663c3.352-2.242 6.696-4.455 10.031-6.638a2 2 0 1 1 2.189 3.347c-3.323 2.175-6.656 4.38-9.996 6.614-.342.231-.728.34-1.11.34zm20.097-13.146a2 2 0 0 1-1.08-3.686c3.393-2.167 6.816-4.326 10.178-6.418a2 2 0 1 1 2.113 3.397 991.618 991.618 0 0 0-10.137 6.393 1.983 1.983 0 0 1-1.074.314zm217.402-6.086a2 2 0 0 1-1.991-1.836 433.537 433.537 0 0 0-1.14-11.891 2.001 2.001 0 0 1 1.769-2.208 2.013 2.013 0 0 1 2.208 1.769c.418 3.783.805 7.821 1.149 12.002a2 2 0 0 1-1.995 2.164zm-197.01-6.599a2 2 0 0 1-1.037-3.711 835.87 835.87 0 0 1 10.342-6.157 1.995 1.995 0 0 1 2.736.715 1.999 1.999 0 0 1-.715 2.736 866.68 866.68 0 0 0-10.293 6.128c-.324.196-.68.289-1.033.289zm20.724-12.137a2 2 0 0 1-.986-3.741 710.761 710.761 0 0 1 10.53-5.841 2 2 0 0 1 1.91 3.516 707.676 707.676 0 0 0-10.472 5.807c-.31.176-.649.259-.982.259zm173.563-5.104a2 2 0 0 1-1.967-1.65c-.719-4.044-1.724-7.822-2.985-11.229a2 2 0 1 1 3.75-1.389c1.346 3.631 2.413 7.641 3.173 11.92a1.998 1.998 0 0 1-1.971 2.348zm-152.46-6.357a1.999 1.999 0 0 1-.923-3.775 561.293 561.293 0 0 1 10.754-5.441 2 2 0 1 1 1.766 3.59 561.857 561.857 0 0 0-10.676 5.401c-.296.153-.61.225-.921.225zm21.549-10.596a2 2 0 0 1-.84-3.816 418.128 418.128 0 0 1 11.021-4.911 2.001 2.001 0 0 1 1.574 3.678 421.577 421.577 0 0 0-10.915 4.864 2.015 2.015 0 0 1-.84.185zm122.381-5.265a1.998 1.998 0 0 1-1.647-.862c-2.197-3.179-4.813-5.952-7.771-8.241a2 2 0 1 1 2.448-3.164c3.284 2.542 6.183 5.613 8.614 9.13a2.001 2.001 0 0 1-1.644 3.137zm-100.302-4.171a1.999 1.999 0 0 1-.725-3.864 297.697 297.697 0 0 1 11.348-4.163 1.999 1.999 0 1 1 1.299 3.783 296.482 296.482 0 0 0-11.195 4.106 1.982 1.982 0 0 1-.727.138zm22.713-7.761a2.002 2.002 0 0 1-.554-3.923 194.04 194.04 0 0 1 11.746-3.009 1.997 1.997 0 0 1 2.385 1.52 1.999 1.999 0 0 1-1.52 2.385c-3.688.818-7.558 1.81-11.502 2.948a2.011 2.011 0 0 1-.555.079zm58.95-2.552c-.237 0-.477-.043-.712-.132-3.389-1.292-7.147-2.229-11.175-2.785a2 2 0 0 1 .549-3.963c4.325.599 8.38 1.611 12.05 3.01a2 2 0 0 1-.712 3.87zm-35.527-2.555a2 2 0 0 1-.267-3.981c4.236-.576 8.33-.911 12.17-.995l.045-.001a2 2 0 0 1 .043 4c-3.689.081-7.632.403-11.719.959a2.082 2.082 0 0 1-.272.018z"
class="colorfff svgShape"></path>
<path fill="#f9ae93"
d="M2385.511 1425.651c-33.025 3.055-68.201 3.55-98.6.753-20.718-1.915-39.436 1.7-57.637 8.735-64.027 24.698-121.749 91.5-238.185 107.4-34.294 4.69-67.792 4.454-99.052 1.312-69.534-6.992-128.01-28.377-159.636-42.06-16.157-6.992-25.301-11.962-25.301-11.962l10.757-197.631c10.09 4.69 19.879 9.359 29.41 13.963 133.927 64.629 215.337 118.2 283.624 120.201 73.149 2.151 348.532-102.193 362.517-97.89 13.984 4.303-87.133 37.65-48.407 50.559 38.726 12.909 139.843-31.196 157.055 1.076 11.616 21.792-47.871 39.197-116.545 45.544z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="M1892.036 1543.851c-69.534-6.992-128.01-28.377-159.636-42.06-9.467-88.015 14.866-195.63 14.866-195.63s14.716 174.502 144.77 237.69z"
class="colorf6816b svgShape"></path>
<path fill="#f9ae93"
d="M1124.985 1843.245s-40.791 56.97-92.985 127.838c-51.699 70.202-114.607 154.065-160.045 209.636-29.668 36.273-51.914 60.52-58.777 61.036-27.969 2.151-176.418-12.909-176.418-12.909s133.389-17.211 152.752-32.271c19.363-15.06 238.809-551.843 238.809-551.843l.022.021 96.642 198.492z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="M1032 1971.083c1.054-121.577-3.679-326.351-3.679-326.351l.022.021 96.642 198.491c0 .001-40.791 56.971-92.985 127.839z"
class="colorf6816b svgShape"></path>
<path fill="#f9ae93"
d="M1407.512 1282.753s-5.379 59.164-43.631 73.687c-38.231 14.522-85.563-58.132-85.563-58.132s16.63-45.395 24.828-88.316l.022-.021c2.237-11.747 3.851-23.321 4.303-33.713l80.141-6.992c-.646 2.625-.839 6.239-.71 10.542.581 18.61 7.466 50.451 13.124 73.794 4.065 16.759 7.486 29.151 7.486 29.151z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="M1365.021 1375.802c54.503 0 39.264-69.922 39.264-69.922s-22.859 19.094-43.835 19.901c-20.977.807-52.172-24.742-82.131-27.474l86.702 77.495zM1400.025 1253.601c-32.078-16.394-96.879-43.61-96.879-43.61l.022-.021c.732-.968 25.946-33.713 83.734-30.163.58 18.61 7.465 50.451 13.123 73.794z"
class="colorf6816b svgShape"></path>
<path fill="#a9be3a"
d="M1832.251 1671.626c.71 20.07 16.48 53.07-31.57 136.98-45.99 80.319-95.26 216.49-234.03 264.46a289.72 289.72 0 0 1-19.12 5.89c-40.3 10.931-83.24 19.23-125.35 25.641-21.05 3.21-41.9 5.949-62.09 8.31-3.59.429-7.16.83-10.7 1.23-37.02 4.14-71.53 7.029-100.72 9.279-40.64 3.13-70.96 4.98-83.37 7.17-36.57 6.46-13.64-43.019 9.32-88.92 21.07-42.13 47.42-218.58 51.6-247.24.34-2.369.53-3.729.56-3.92l-.03.03c-1.14 1.55-33.76 45.71-65.04 84.271-2.08 2.56-4.15 5.09-6.2 7.58-20.23 24.569-38.96 45.39-47.05 49.02 0 0-5.53-34.46-15.04-80.33-14.39-69.41-37.88-164.89-65.1-206.34l17.51-42.63 2.8-6.81 82.42-200.67c37.7-76.24 77.03-101.91 112.4-102.92 3.89-.12 7.72.06 11.5.51 6 .71 11.86 2.09 17.56 3.98 41.95 13.99 62.39 46.26 81.75 40.88 19.37-5.38 45.72-31.2 53.25-54.32 1.98-6.08 15.33-12.76 37.09-18.67 2.81-.76 5.76-1.51 8.85-2.24 55.32-13.18 153.63-21.29 257.82-7.27 2.37.32 4.75.65 7.13 1 13.98 2 28.05 4.42 42.12 7.28 0 0-13.38 7.85-15.34 74.31-.48 16.35-.26 36.27 1.01 60.52 4.09 77.66 23.13 131.73 36.53 160.94 7.6 16.521 13.38 25.09 13.65 25.49-.59-.17-19.1-5.4-42.93-13.66-2.76-.96-5.59-1.96-8.47-2.99-23.02-8.27-49.35-18.92-69-30.35-6.63-3.83-12.48-7.77-17.19-11.72h-.03c-.02-.03-.02-.03-.04-.03.09.09.17.18.24.26 6.26 6.86 117.12 127.58 182.61 110.13 0 0-6.45 10.141-8.63 24.49a60.08 60.08 0 0 0-.68 11.379z"
class="colora9be3a svgShape"></path>
<path fill="#4482f3" d="M1675.968 1537.117c-6.648-3.851-12.521-7.81-17.255-11.768l17.255 11.768z"
class="color4482f3 svgShape"></path>
<path fill="#7e892c"
d="M1841.564 1635.76s-6.454 10.133-8.627 24.483c-127.752-8.606-173.298-132.292-174.223-134.873 2.603 2.862 116.22 128.14 182.85 110.39zM1760.519 1262.852s-13.382 7.853-15.34 74.311c-76.376-60.972-217.101-111.358-337.667-54.41 7.53-23.128 180.182-55.034 353.007-19.901z"
class="color7e892c svgShape"></path>
<path fill="#7e892c"
d="M1796.384 1584.126s-76.72-21.6-120.416-47.009c-6.627-3.83-12.479-7.767-17.19-11.725 2.495.925 72.675 26.57 123.944 33.24 7.788 16.91 13.662 25.494 13.662 25.494zM1226.748 1790.535c-1.958 2.668-96.987 131.302-118.286 140.876 0 0-5.529-34.466-15.039-80.335 76.183-14.156 131.432-58.993 133.325-60.541z"
class="color7e892c svgShape"></path>
<path fill="#f6816b"
d="M871.955 2180.719c-29.668 36.273-51.914 60.52-58.777 61.036-27.969 2.151-176.418-12.909-176.418-12.909s133.927 7.939 175.88-9.681c19.234-8.09 41.2-23.795 59.315-38.446zM2385.511 1425.651c-33.025 3.055-68.201 3.55-98.6.753-20.718-1.915-39.436 1.7-57.637 8.735 18.481-14.479 34.574-22.397 68.394-22.397 32.336.001 58.476 8.434 87.843 12.909z"
class="colorf6816b svgShape"></path>
<path fill="#330234"
d="M1458.883 768.133c12.64-73.956 77.452-67.77 87.94-60.778 0 0-64.185-1.255-87.94 60.778z"
class="color330234 svgShape"></path>
<path fill="#330234"
d="M1461.444 762.352c18.082-34.512 58.172-20.181 63.842-14.888-.001.001-40.368-11.774-63.842 14.888z"
class="color330234 svgShape"></path>
<path fill="#f9ae93"
d="m1230.748 1005.167-10.413 26.893c-16.179 8.326-44.771 6.045-67.706-4.153h-.021c-29.367-13.08-49.44-39.156-22.268-72.589 15.706-19.32 31.777-24.289 46.299-21.041h.021c30.229 6.713 53.852 48.859 54.088 70.89z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="m1230.748 1005.167-10.413 26.893c-16.179 8.326-44.771 6.045-67.706-4.153 23.602.452 47.612-8.197 47.612-8.197l-15.813-29.432s-18.954-37.65-7.788-56.002h.021c30.228 6.714 53.851 48.86 54.087 70.891z"
class="colorf6816b svgShape"></path>
<path fill="#db6b5d"
d="M1217.869 993.758c-21.371 6.375-40.197-39.074-57.408-11.105-17.211 27.969 36.637 47.869 51.531 30.658 14.894-17.212 5.877-19.553 5.877-19.553z"
class="colordb6b5d svgShape"></path>
<path fill="#f6816b"
d="M1514.91 953.877c9.681-39.264 74.762-59.702 92.512-19.901 17.749 39.802-52.71 80.768-69.922 72.656-17.212-8.113-22.59-52.755-22.59-52.755z"
class="colorf6816b svgShape"></path>
<path fill="#db6b5d"
d="M1524.208 966.644c20.612.664 26.733-44.412 48.715-23.46 21.982 20.952-21.478 51.438-38.852 39.558-17.375-11.879-9.863-16.098-9.863-16.098z"
class="colordb6b5d svgShape"></path>
<path fill="#f9ae93"
d="M1447.636 1206.183c-1.57.172-3.184.345-4.798.495-40.705 3.808-76.763 5.594-108.045 4.948-106.001-2.151-157.356-32.228-149.589-106.969 10.047-96.815 48.773-194.339 48.773-194.339l43.609-28.055 109.143-70.201 145.393 113.854c.129.731.28 1.463.431 2.216 16.286 84.035 86.036 258.774-84.917 278.051z"
class="colorf9ae93 svgShape"></path>
<path fill="#f6816b"
d="M1240.865 998.161c-16.956 81.499 65.759 74.583 89.994 43.105 0 0-73.5-5.455-79.954-22.307-6.454-16.854-10.04-20.798-10.04-20.798zM1447.636 1206.183c16.093-13.167 33.735-30.163 49.698-50.365 41.91-53.076-2.732-234.743-2.732-234.743l-76.376-74.59s-51.957 84.272-136.078 113.574c0 0-15.856-17.771-4.561-77.796l109.143-70.201 145.393 113.854c.129.731.28 1.463.431 2.216 16.285 84.035 86.035 258.774-84.918 278.051z"
class="colorf6816b svgShape"></path>
<path fill="#ffffff"
d="M1361.254 985.245s-15.405 63.467-60.24 72.804c-44.815 9.316-61.66-28.334-60.24-59.896 50.666-1.247 95.115-8.412 120.48-12.908z"
class="colorfff svgShape"></path>
<path fill="#f6816b"
d="M1394.967 989.196c-16.956 81.499 44.104 101.602 85.48 70.296 0 0-68.986-32.645-75.44-49.498-6.454-16.853-10.04-20.798-10.04-20.798z"
class="colorf6816b svgShape"></path>
<circle cx="1317.471" cy="1006.632" r="10.847" fill="#00091a" class="color00091a svgShape"></circle>
<path fill="#ffffff"
d="M1394.967 989.196c74.942 14.702 123.349-8.964 123.349-8.964s-.359 79.244-60.24 86.416-62.75-63.826-63.109-77.452z"
class="colorfff svgShape"></path>
<circle cx="1494.605" cy="1002.688" r="10.847" fill="#00091a" class="color00091a svgShape"></circle>
<path fill="#f6816b"
d="M1316.253 1130.59c-11.737-20.121 20.245-41.533 53.429-29.428 33.185 12.105 42.368 45.916 30.263 43.829-12.105-2.087-16.697-10.853-44.037-6.679-27.341 4.175-35.272-.208-39.655-7.722z"
class="colorf6816b svgShape"></path>
<path fill="#ffffff"
d="M1229.038 1059.492c1.345 20.513-24.742 35.998-20.977 61.871 3.765 25.874 53.517 14.848 38.995-16.348-14.522-31.196-15.06-39.143-18.018-45.523z"
class="colorfff svgShape"></path>
<path fill="#330234"
d="M1542.34 941.872c-24.376 2.151-88.919 3.227-158.13-96.642-4.841 68.846-129.839 135.454-176.525 150.557 0 0-19.255 1.657-29.474-47.826-.86-4.109-1.377-8.627-1.549-13.49-2.13-53.851 36.768-150.299 134.766-196.986 106.841-50.924 149.869 24.376 149.869 24.376s65.274-13.619 101.849 75.3c36.573 88.92 3.57 102.559-20.806 104.711z"
class="color330234 svgShape"></path>
<path fill="#00091a"
d="M1450.644 961.724c-14.924 0-31.443-4.233-47.568-16.827a4.302 4.302 0 0 1-.743-6.039 4.3 4.3 0 0 1 6.039-.743c20.447 15.968 44.041 19.283 70.126 9.848a4.303 4.303 0 1 1 2.927 8.093c-8.699 3.147-19.265 5.668-30.781 5.668zM1309.019 962.413c-1.608 0-3.231-.044-4.871-.132a4.302 4.302 0 1 1 .461-8.593c21.876 1.172 40.58-6.461 55.582-22.689a4.304 4.304 0 0 1 6.32 5.842c-15.699 16.983-35.022 25.572-57.492 25.572z"
class="color00091a svgShape"></path>
<path fill="#ffffff"
d="M1453.452 1261.847c-28.96 80.89-50.66 135.06-75.26 142.07-1.89.53-3.79.8-5.67.8-5.2 0-10.38-2.03-15.45-6.07-11.13-8.87-34.97-32.15-58.03-54.67-21.29-20.78-47.26-46.15-55.59-52.27 3.89-.12 7.72.06 11.5.51 9.68 8.51 25.31 23.64 48.98 46.75 22.93 22.4 46.65 45.56 57.5 54.2 5.13 4.09 9.98 5.4 14.84 4.01 22.9-6.51 45.99-70.62 68.33-133.09 2.809-.76 5.759-1.51 8.85-2.24zM1161.712 1874.807c-2.08 2.56-4.15 5.09-6.2 7.58-2.09-19.591-7.65-62.37-20.01-109.78-14.63-56.12-41.88-129.8-89.67-170.5l2.8-6.81c21.4 17.71 40.52 42.96 56.92 75.21 14.41 28.33 26.77 62.131 36.75 100.44 11.16 42.83 16.819 81.94 19.41 103.86zM1753.442 1570.457c-2.76-.96-5.59-1.96-8.47-2.99-6.82-11.75-28.07-50.47-42.86-100.92-10.44-35.6-15.7-70.03-15.63-102.33.1-40.07 8.44-76.95 24.79-109.64 2.37.32 4.75.65 7.13 1-.05.37-.16.74-.34 1.09-36.77 72.5-25.32 153.08-9.23 207.91 17.48 59.62 44.01 102.45 44.28 102.87.58.94.67 2.04.33 3.01zM1455.571 1597.074c-31.82 22.333 6.18 51.333 18.479 73.036.959 2.057 1.762 3.988 3.595 7.095l16.704 28.313 3.074 5.211c12.329 16.677 25.329 49.677 51.329 45.677 1 0 1 3 2 4-5 1-10 3-14 6-18 14-33 29-53 40 20-27 1-59-11.924-85.493l-3.729-6.321-6.567-11.131a116.832 116.832 0 0 1-2.867-5.165c-7.913-21.89-20.913-40.89-37.913-56.89 14 22 21 48 16.227 74.201.026 1.899.031 3.736.312 5.891l1.692 12.943c.331 2.531.645 5.027.815 7.305 1.953 8.66-6.047 13.66-8.047 21.66-1 4 0 7 2 10 9 16 14 34 14 51 1 4-10-1-13-5-12-25-27-49-53.674-57.697l-6.982-5.107c-5.343-5.196-12.343-6.196-18.343-11.196-15-13-25-31-44-40 13 24 25 47 40.06 69.603 1.334 2.261 2.588 4.333 3.522 5.75.418 14.647 6.418 25.647 16.418 36.647 9 10 6 26 17 32 9 5 18-4 28-7-17 10-34 19-51 29 5-2 10-5 11-8 3-21-6-43-22-58-7-7 1-15-4.488-23.066-.913-1.449-2.025-3.312-3.182-5.273-13.33-18.661-28.33-36.661-37.33-58.661-6-16-20-13-33-9 20-8 42-37 62-17 19 19 34 44 61.644 49.33a280.303 280.303 0 0 1 5.018 3.78l5.492 4.201c4.845 4.69 11.845 9.69 17.845 8.69 5-1 7-10 6.139-15.822l-.885-6.495-.89-6.535c-.304-2.23-.604-4.49-.788-6.611 3.424-28.537-5.576-54.537-15.576-81.537-8-22 24-32 38.221-46.311l.599 1.978zM1562.787 1754.554c-1.036-1.147-2.036-2.147-3.036-3.147 31-18 10-54-6.808-74.039a1756.56 1756.56 0 0 0-6.066-10.346l-17.125-29.028c-1.064-1.803-2.038-3.505-2.801-5.021-8.2-24.565-31.2-53.565-60.2-44.565 23-18 54-21 78-3-5 1-12-2-13 1-4 10 11 15 14.495 25.462 1.396 2.585 3.321 5.897 5.466 9.533l25.025 42.419c1.406 2.384 2.739 4.603 4.005 6.486 13.009 31.1 62.009 51.1 71.009 17.1 6-22-25-49 3-72-6 10-17 21-13 32 9 20 24 51 50 42-44 11-88 26-119.452 59.673-5.956 3.717-9.512 5.473-9.512 5.473z"
class="colorfff svgShape"></path>
<path fill="#7e892c"
d="M1248.672 2123.417c-40.64 3.13-70.96 4.98-83.37 7.17-36.57 6.46-13.64-43.019 9.32-88.92 21.07-42.13 47.42-218.58 51.6-247.24.29-.56.47-.899.52-.989-.42 3.13-36.85 268.85-12.99 303.97 7.32 10.779 19.599 19.289 34.92 26.009zM1674.622 1953.237c-16.51 28.229-51.74 79.71-107.97 119.83a289.72 289.72 0 0 1-19.12 5.89c-40.3 10.931-83.24 19.23-125.35 25.641-21.05 3.21-41.9 5.949-62.09 8.31 113.44-14.911 268.26-94.622 314.53-159.671zM1685.741 1932.437c-2.27 6.689-6.04 13.649-11.12 20.8 7.221-12.34 10.86-20.241 11.12-20.8zM1337.108 1907.504c158-12.673 195.667-97.673 195.667-97.673s-38 92.167-133 110.667c0 0 21.487-3 46.868-25 0-.001-86.201 18.512-109.535 12.006z"
class="color7e892c svgShape"></path>
<path fill="#ffffff"
d="m1383.097 1897.413 5.638-2.461 2.814-1.228 2.771-1.326 5.543-2.63 5.448-2.814 2.718-1.412 2.68-1.482 5.349-2.976 5.255-3.139 2.623-1.572 2.58-1.646c13.832-8.65 26.981-18.331 39.956-28.271 12.934-9.996 25.798-20.144 38.739-30.243 12.977-10.051 26.149-19.896 39.55-29.438 13.467-9.447 27.171-18.575 41.16-27.242 14.025-8.608 28.249-16.896 42.817-24.531 3.626-1.937 7.254-3.87 10.93-5.71 3.666-1.858 7.315-3.747 11.004-5.557 7.426-3.525 14.788-7.169 22.294-10.509 14.942-6.824 30.126-13.093 45.441-18.978-14.696 7.312-29.464 14.401-43.937 22.067-7.304 3.693-14.474 7.644-21.688 11.493-7.13 4.009-14.357 7.832-21.404 11.976-7.108 4.033-14.099 8.265-21.142 12.401l-10.441 6.41c-3.485 2.128-6.898 4.371-10.35 6.551-13.776 8.77-27.34 17.868-40.647 27.343-26.786 18.72-52.394 39.108-79.083 58.338a581.397 581.397 0 0 1-20.319 14.022l-5.214 3.318-2.607 1.657-2.646 1.6-5.291 3.194-5.379 3.051-2.698 1.506-2.741 1.432-5.481 2.853-5.567 2.684c-.93.44-1.847.907-2.789 1.323l-2.835 1.227c-7.496 3.407-15.27 6.141-23.051 8.719z"
class="colorfff svgShape"></path>
<path fill="#7e892c"
d="M1285.995 1578.187c64.212-92.337 10.952-233.583-1.122-241.024 0 0 29.091 58.912 17.741 145.913 0 0 3.918-29.809-14.801-65.897-.001 0 29.63 99.695-1.818 161.008z"
class="color7e892c svgShape"></path>
</svg>
</p>
</div>
</ng-template>
HTML
<!-- src/app/checkout/checkout.component.html -->
<header>
<h3>Checkout</h3>
</header>
<main>
<section class="checkout-form">
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
<div class="form-control">
<label for="checkout-email">E-mail</label>
<input id="email" id="checkout-email" formControlName="email" type="email" />
<small *ngIf="
checkoutForm.get('email')?.invalid &&
(checkoutForm.get('email')?.dirty ||
checkoutForm.get('email')?.touched)
">
<span *ngIf="checkoutForm.get('email')?.errors?.['required']" class="text-red-500">Email is
required.</span>
<span *ngIf="checkoutForm.get('email')?.errors?.['email']">Enter a valid email.</span>
</small>
</div>
<div class="form-control">
<label for="phone">Phone</label>
<input id="phone" formControlName="phone" type="text" />
<small *ngIf="
checkoutForm.get('phone')?.invalid &&
(checkoutForm.get('phone')?.dirty ||
checkoutForm.get('phone')?.touched)
">
<span *ngIf="checkoutForm.get('phone')?.errors?.['required']" class="text-red-500">Phone number is
required.</span>
<span *ngIf="checkoutForm.get('phone')?.errors?.['pattern']">Enter a valid phone number.</span>
</small>
</div>
<div class="form-control">
<label for="name">Name</label>
<input id="name" formControlName="name" type="text" />
<small *ngIf="
checkoutForm.get('name')?.invalid &&
(checkoutForm.get('name')?.dirty ||
checkoutForm.get('name')?.touched)
">
<span *ngIf="checkoutForm.get('name')?.errors?.['required']" class="text-red-500">Full name is
required.</span>
</small>
</div>
<div class="form-control">
<label for="address">Address</label>
<input id="address" formControlName="address" type="text" />
<small *ngIf="
checkoutForm.get('address')?.invalid &&
(checkoutForm.get('address')?.dirty ||
checkoutForm.get('address')?.touched)
">
<span *ngIf="checkoutForm.get('address')?.errors?.['required']" class="text-red-500">Address is
required.</span>
</small>
</div>
<div class="form-control">
<label for="city">City</label>
<input id="city" formControlName="city" type="text" />
<small *ngIf="
checkoutForm.get('city')?.invalid &&
(checkoutForm.get('city')?.dirty ||
checkoutForm.get('city')?.touched)
">
<span *ngIf="checkoutForm.get('city')?.errors?.['required']" class="text-red-500">City is
required.</span>
</small>
</div>
<div class="form-control-btn">
<button type="submit" (click)="checkout()">Checkout</button>
</div>
</form>
</section>
<section class="checkout-details" *ngIf="cartItems.length > 0; else emptyCart">
<div class="checkout-details-inner">
<div class="checkout-lists" *ngFor="let item of cartItems">
<div class="card">
<div class="card-image">
<img src="{{ item.product.imageUrl }}" alt="" />
</div>
<div class="card-details">
<div class="card-name">{{ item.product.name }}</div>
<div class="card-price">RS {{ item.product.price }}</div>
<div class="card-wheel">
<button (click)="decreaseQuantity(item.product.id)">-</button>
<span>{{ item.quantity }}</span>
<button (click)="increaseQuantity(item.product.id)">+</button>
</div>
</div>
</div>
</div>
<div class="checkout-total">
<h6>Total</h6>
<p>RS {{ totalCost() }}</p>
</div>
</div>
</section>
</main>
<ng-template #emptyCart>
<p>Your cart is empty.</p>
</ng-template>
HTML
<!-- src/app/navbar/navbar.component.html -->
<nav class="nav shadow-md">
<a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24"
style="fill: #ffffff">
<path
d="M 12 2 A 1 1 0 0 0 11.289062 2.296875 L 1.203125 11.097656 A 0.5 0.5 0 0 0 1
11.5 A 0.5 0.5 0 0 0 1.5 12 L 4 12 L 4 20 C 4 20.552 4.448 21 5 21 L 9 21 C
9.552 21 10 20.552 10 20 L 10 14 L 14 14 L 14 20 C 14 20.552 14.448 21 15 21
L 19 21 C 19.552 21 20 20.552 20 20 L 20 12 L 22.5 12 A 0.5 0.5 0 0 0 23 11.5
A 0.5 0.5 0 0 0 22.796875 11.097656 L 12.716797 2.3027344 A 1 1 0 0 0 12.710938
2.296875 A 1 1 0 0 0 12 2 z">
</path>
</svg>
</a>
<a routerLink="/cart" routerLinkActive="active" ariaCurrentWhenActive="page">
<span class="flex">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIW
XMAAAsTAAALEwEAmpwYAAABDUlEQVR4nL3Vr0sEQRQA4NXgFbGYDCY9BJNVtGs2mhTlTDYv+ydc
8A8QQdSm1wUVrCImm3IWTQaLcOWTgQ3LodzO7K0PXpiBmQ/emx9Z9h+BO/QL+YVrzI8SucVNYTy
BfdyPDPktMI5XNLM6A8fYqRvZxkndyBx6tSIh8r4cop2Yw8sdyjVwvPuR+VQG2a2IHJRBmhWAb8w
MRXKol4h0SwE5cpqIbMQgrQTgA40YZCEB6ZQGKvRlKQU5iwAeo4Ec2YtAWqnIIp6TFkcgY3jDbN
1QB0eYrBOZxkOJnrxH3ZE/nv5lrBR7hE1cYgpX2KqKBGAVL4X58IuGzQPSrYqsh83zXCvMN3CBT
5wPlusH7Uppcbq/7rkAAAAASUVORK5CYII=" />
<span>
<sup>{{ cartService.getCartItemCount() }}</sup>
</span>
</span>
</a>
</nav>
HTML
<!-- src/app/product-detail/product-detail.component.html -->
<div id="product_container">
<section class="box shadow-md" style="margin-top: 100px">
<div class="content" *ngIf="product">
<div class="left">
<div class="product_img" style="background: url('{{ product.imageUrl }}') no-repeat; "></div>
<div class="product_details">
<h4 class="title">{{ product.name }}</h4>
<p class="discription">{{ product.description }}</p>
<p class="price">{{ product.price }}RS</p>
<p class="other">inclusive of all taxes</p>
</div>
</div>
<div class="right">
<div class="product_description">
<h4>PRODUCT DESCRIPTION</h4>
<p>
{{ product.description }}
</p>
<h4>PRODUCT CATEGORY</h4>
<p>
{{ product.category }}
</p>
<h4>PRODUCT USAGES</h4>
<p>
{{ product.usages }}
</p>
<h4>PRODUCT SIDE EFFECTS</h4>
<p>
{{ product.sideEffects }}
</p>
<p>
<span class="highlight">Country of Origin -</span>
India
</p>
<p>
<button *ngIf="!isInCart" (click)="addToCart()"
class="bg-fuchsia-700 shadow-md rounded-md text-white" style="padding: 8px">
Add to Cart
</button>
<button *ngIf="isInCart" routerLink="/cart" routerLinkActive="active"
ariaCurrentWhenActive="page" class="bg-blue-700 shadow-md rounded-md text-white"
style="padding: 8px">
Go to Cart
</button>
</p>
</div>
</div>
</div>
</section>
</div>
HTML
<!-- src/app/product-list/product-list.component.html-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="p-24">
<div class="search-sort-bar pl-5 flex justify-start gap-4">
<div>
<input type="text" [(ngModel)]="searchQuery" placeholder="Search products" class="p-2 border rounded"
(input)="searchProducts()" />
</div>
<div>
<select [(ngModel)]="sortCriteria" class="p-2 border rounded ml-2" (change)="sortProducts()">
<option value="name">Sort by Name</option>
<option value="priceAsc">Sort by Price: Low to High</option>
<option value="priceDesc">Sort by Price: High to Low</option>
</select>
</div>
<div>
<select [(ngModel)]="selectedCategory" class="p-2 border rounded ml-2" (change)="filterByCategory()">
<option value="">All Categories</option>
<option *ngFor="let category of categories" [value]="category">
{{ category }}
</option>
</select>
</div>
</div>
<div class="container">
<ng-container *ngIf="filteredProducts.length > 0; else noProducts">
<div class="card rounded-md shadow-md border-gray-300 border-2 border-solid"
*ngFor="let product of filteredProducts">
<div class="imgBx">
<img [src]="product.imageUrl" alt="" />
<ul class="action">
<li>
<i class="fa fa-eye">
<a [routerLink]="['/product', product.id]"> View Details </a>
</i>
</li>
</ul>
</div>
<div class="content">
<div class="productName">{{ product.name }}</div>
<div class="price-rating">
<h2>{{ product.price }}RS</h2>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa grey fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</ng-container>
</div>
</div>
<ng-template #noProducts>
<div>
<div class="flex justify-center items-center">
<span>No product found!!!</span>
</div>
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" width="350" height="350">
<circle cx="1006.34" cy="1001.75" r="800" fill="#e6e9f6" class="colore6e9f6 svgShape"></circle>
<path fill="#6d7aa7"
d="m1601.47,1536.37H411.22c146.45,162.92,358.82,265.38,595.12,265.38s448.68-102.47,595.13-265.38Z"
class="color6d7aa7 svgShape"></path>
<rect width="62.88" height="163.23" x="887.26" y="1092.45" fill="#ffffff" rx="31.44" ry="31.44"
class="colorfff svgShape"></rect>
<path fill="#3b4573"
d="m817.73,1558.34h-375.06c-15.58,0-27.72-11.82-26.04-25.36l40.38-325.16c1.44-11.62,12.67-20.42,26.04-20.42h294.29c13.37,0,24.59,8.8,26.04,20.42l40.38,325.16c1.68,13.54-10.45,25.36-26.04,25.36Z"
class="color3b4573 svgShape"></path>
<path fill="#6d7aa7"
d="m767.22,1558.34h-327.85c-13.62,0-24.23-11.82-22.76-25.36l35.3-325.16c1.26-11.62,11.07-20.42,22.76-20.42h257.25c11.69,0,21.5,8.8,22.76,20.42l35.3,325.16c1.47,13.54-9.14,25.36-22.76,25.36Z"
class="color6d7aa7 svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m694.41,1300.3v60.22c0,45.62-36.99,82.61-82.61,82.61h0c-45.62,0-82.61-36.99-82.61-82.61v-60.91"
class="colorStroke3b4573 svgStroke"></path>
<rect width="86.27" height="313.48" x="944" y="1083.05" fill="#6d7aa7" rx="37.68" ry="37.68"
class="color6d7aa7 svgShape"></rect>
<path fill="#3b4573"
d="m1030.27,1358.85v-34.46c-40-13.2-73.16-4.9-86.27.57v33.89c0,.36.02.72.03,1.08,7.25,19.41,15.09,13.38,15.09,13.38l65.59,5.25c3.53-5.73,5.56-12.48,5.56-19.71Z"
class="color3b4573 svgShape"></path>
<path fill="#6d7aa7"
d="m1252.2,1559.17c-23.28-125.25-133.11-220.08-265.11-220.08s-241.82,94.84-265.11,220.08h530.22Z"
class="color6d7aa7 svgShape"></path>
<path fill="#ffffff"
d="m721.98,1559.17h530.22c-2.87-15.46-7.07-30.45-12.46-44.85h-505.3c-5.39,14.41-9.58,29.4-12.46,44.85Z"
class="colorfff svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m953.91,1380.46s-81.34.43-140.33,114.21" class="colorStroke3b4573 svgStroke"></path>
<circle cx="1034.58" cy="748.72" r="387.99" fill="#c3cae5" class="colorc3cae5 svgShape"></circle>
<path fill="#9fa9cf"
d="m823.78,436.37c-38.79,28.4-72.11,63.82-98.08,104.4,28.47-11.56,59.6-17.94,92.22-17.94,135.52,0,245.39,109.86,245.39,245.39s-109.86,245.39-245.39,245.39c-18.98,0-37.45-2.16-55.19-6.24,31.83,35.79,70.19,65.66,113.22,87.72,155.66-27.44,273.91-163.34,273.91-326.87,0-181.36-145.45-328.73-326.07-331.86Z"
class="color9fa9cf svgShape"></path>
<ellipse cx="1112.07" cy="427.48" fill="#6d7aa7" rx="34.87" ry="87.47"
transform="rotate(-78.09 1112.082 427.479)" class="color6d7aa7 svgShape"></ellipse>
<rect width="62.88" height="194.58" x="1110.74" y="234.12" fill="#ffffff" rx="27.46" ry="27.46"
transform="rotate(17.45 1141.937 331.296)" class="colorfff svgShape"></rect>
<path fill="#9fa9cf"
d="m1075.73,1290.6c-54.26,0-107.84-8.03-159.24-23.87-20.24-6.24-31.59-27.7-25.35-47.94,6.24-20.24,27.7-31.59,47.94-25.35,44.08,13.58,90.06,20.47,136.66,20.47,62.57,0,123.26-12.25,180.36-36.4,55.18-23.34,104.74-56.75,147.31-99.32,42.57-42.57,75.99-92.13,99.32-147.31,24.15-57.1,36.4-117.79,36.4-180.36,0-55.25-9.61-109.27-28.57-160.59-18.32-49.58-44.87-95.4-78.91-136.18-68.47-82.01-163.58-138.22-267.83-158.27-20.8-4-34.41-24.1-30.41-44.9,4-20.8,24.11-34.42,44.9-30.41,121.57,23.38,232.45,88.88,312.22,184.43,39.67,47.52,70.61,100.93,91.98,158.75,22.11,59.85,33.32,122.82,33.32,187.16,0,72.89-14.29,143.63-42.46,210.24-27.2,64.32-66.14,122.07-115.73,171.66-49.59,49.59-107.34,88.52-171.66,115.73-66.61,28.17-137.34,42.46-210.24,42.46Z"
class="color9fa9cf svgShape"></path>
<g>
<circle cx="858.74" cy="210.02" r="145.47" fill="#6d7aa7" class="color6d7aa7 svgShape"></circle>
<path fill="#ffffff"
d="m855.16,260.15c-2.27,0-4.01-.74-5.23-2.22-1.22-1.48-1.83-3.53-1.83-6.15,0-6.1.74-11.81,2.22-17.13,1.48-5.32,3.83-10.77,7.06-16.35,3.22-5.58,7.63-11.6,13.21-18.05,4.36-5.23,7.85-9.85,10.46-13.86,2.62-4.01,4.49-7.89,5.62-11.64,1.13-3.75,1.7-7.54,1.7-11.38,0-7.32-2.62-13.12-7.85-17.39-5.23-4.27-12.47-6.41-21.71-6.41-8.02,0-15.39,1.18-22.1,3.53-6.72,2.35-13.21,5.89-19.49,10.59-2.62,1.75-5.01,2.62-7.19,2.62s-3.97-.61-5.36-1.83c-1.4-1.22-2.31-2.79-2.75-4.71-.44-1.92-.18-3.92.78-6.02.96-2.09,2.66-4.01,5.1-5.75,6.8-5.4,14.82-9.68,24.06-12.82,9.24-3.14,18.57-4.71,27.99-4.71,9.94,0,18.7,1.7,26.29,5.1,7.59,3.4,13.47,8.2,17.66,14.39,4.19,6.19,6.28,13.47,6.28,21.84,0,5.41-.78,10.59-2.35,15.56-1.57,4.97-4.05,9.98-7.45,15.04-3.4,5.06-8.15,10.81-14.26,17.26-5.41,5.58-9.77,10.77-13.08,15.56-3.31,4.8-5.8,9.42-7.46,13.86-1.66,4.45-2.75,9.11-3.27,13.99-.18,2.09-.87,3.79-2.09,5.1-1.22,1.31-2.88,1.96-4.97,1.96Zm-.26,48.13c-4.36,0-7.89-1.35-10.59-4.05-2.71-2.7-4.05-6.15-4.05-10.33s1.35-7.63,4.05-10.33c2.7-2.7,6.23-4.05,10.59-4.05s7.8,1.35,10.33,4.05c2.53,2.71,3.79,6.15,3.79,10.33s-1.27,7.63-3.79,10.33c-2.53,2.71-5.97,4.05-10.33,4.05Z"
class="colorfff svgShape"></path>
</g>
<g>
<path fill="#9fa9cf"
d="m196.61,550.67h358.03s76.04-21.12,73.93-99.28c-2.11-78.15-87.66-83.43-87.66-83.43,0,0-57.03-137.3-177.43-117.23-120.4,20.07-134.09,102.57-134.09,102.57,0,0-113.72,6.67-109.88,98.1,3.85,91.43,77.1,99.28,77.1,99.28Z"
class="color9fa9cf svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="M259.99 445.8s-41.73-28.74-30.6-92.5M446.13 430.99s24.93-71.31 94.78-63.03"
class="colorStroke3b4573 svgStroke"></path>
</g>
<g>
<path fill="#c3cae5"
d="m1517.83,959.34h297.04s63.09-17.52,61.34-82.37c-1.75-64.84-72.73-69.22-72.73-69.22,0,0-47.32-113.91-147.21-97.26-99.89,16.65-111.25,85.09-111.25,85.09,0,0-94.35,5.53-91.16,81.39,3.19,75.86,63.96,82.37,63.96,82.37Z"
class="colorc3cae5 svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="M1570.42 872.33s-34.62-23.85-25.39-76.74M1724.85 860.05s18.27-50.5 78.63-52.29"
class="colorStroke3b4573 svgStroke"></path>
</g>
<g>
<path fill="#6d7aa7"
d="m1346.11,1399.16h243.22c9.97,0,17.28-9.89,14.83-20.08l-18.05-75.07c-2.29-9.54-10.44-16.22-19.78-16.22h-243.22c-9.97,0-17.28,9.89-14.83,20.08l18.05,75.07c2.29,9.54,10.44,16.22,19.78,16.22Z"
class="color6d7aa7 svgShape"></path>
<rect width="376.84" height="277.2" x="1204.55" y="1287.22" fill="#3b4573" rx="20" ry="20"
class="color3b4573 svgShape"></rect>
<rect width="264.47" height="275.22" x="1204.55" y="1289.2" fill="#6d7aa7" rx="20" ry="20"
class="color6d7aa7 svgShape"></rect>
<path fill="#3b4573"
d="m1443.43,1420.85c10.28,0,19.25-9.11,21.77-22.11l4.39-22.61v-66.93c0-11.05-8.95-20-20-20h-225.04c-11.05,0-20,8.95-20,20v111.65h238.88Z"
class="color3b4573 svgShape"></path>
<path fill="#6d7aa7"
d="m1424.78,1399.13h-243.22c-9.97,0-17.28-9.89-14.83-20.08l18.05-75.07c2.29-9.54,10.44-16.22,19.78-16.22h243.22c9.97,0,17.28,9.89,14.83,20.08l-18.05,75.07c-2.29,9.54-10.44,16.22-19.78,16.22Z"
class="color6d7aa7 svgShape"></path>
</g>
<g>
<path fill="#9fa9cf"
d="m1004.73,1612.12c96.69,55.53,122.69,156.55,127.54,180.05,34.61-5.47,68.48-13.15,101.46-22.91-54.46-114.66-168.3-153.68-225.43-166.36-5.6-1.24-8.55,6.36-3.57,9.21Z"
class="color9fa9cf svgShape"></path>
<path fill="#c3cae5"
d="m1155.85,1788.09c-68.72-115.6-200.83-136.89-261.82-140.36-5.66-.32-7.4,7.57-2.12,9.64,98.46,38.53,143.02,117.17,155.65,143.63,36.81-1.87,72.96-6.23,108.29-12.91Z"
class="colorc3cae5 svgShape"></path>
<path fill="#c3cae5"
d="m1127.44,1792.94c39.03-5.92,77.13-14.68,114.09-26.02-11.59-111.12,53.4-236.53,76.28-276.68,2.41-4.22-2.03-9.04-6.44-7.02-165.32,75.84-182.23,267.16-183.93,309.72Z"
class="colorc3cae5 svgShape"></path>
<path fill="#9fa9cf"
d="m1221.52,1772.77c34.13-9.51,67.34-21.21,99.48-34.97-.31-74.94,97.41-228.22,125.86-271.24,2.61-3.94-1.22-8.98-5.72-7.51-166.08,54.26-212.82,276.08-219.62,313.73Z"
class="color9fa9cf svgShape"></path>
<path fill="#c3cae5"
d="m1303.12,1743.58s59.93-171.57,108.11-199.78c0,0,71.68,36.43,76.38,75.21,3.55,29.27-2.28,115.45-5.35,155.96-.4,5.29-7.68,6.39-9.63,1.46l-59.05-149.19-18,72.49c-31.06,18.02-61.92,33.15-92.46,43.85Z"
class="colorc3cae5 svgShape"></path>
</g>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m1419.6,1606.92s-7.04,12.13-6.02,20.32" class="colorStroke3b4573 svgStroke"></path>
<g>
<ellipse cx="961.3" cy="728.4" fill="#ffffff" stroke="#fff" stroke-miterlimit="10" stroke-width="12"
rx="57.29" ry="73.77" class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m1059.12,669.36s-84.76,5.79-120.04-42.12" class="colorStroke3b4573 svgStroke"></path>
<path fill="#3b4573" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="m961.3,802.17c8.15,0,15.89-2.21,22.91-6.16,7.34-11.79,11.75-26.76,11.75-43.05,0-.73-.03-1.46-.04-2.19l-29.85-12.16,21.82-22.02c-9.44-19.52-26.25-32.51-45.42-32.51-12.91,0-24.75,5.89-33.99,15.7-2.88,8.8-4.47,18.47-4.47,28.62,0,40.74,25.65,73.77,57.29,73.77Z"
class="color3b4573 svgShape colorStroke3b4573 svgStroke"></path>
<ellipse cx="737.7" cy="728.4" fill="#ffffff" stroke="#fff" stroke-miterlimit="10" stroke-width="12"
rx="57.29" ry="73.77" class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m656.59,664.73s84.76,5.79,120.04-42.12" class="colorStroke3b4573 svgStroke"></path>
<path fill="#3b4573" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="m737.7,802.17c8.15,0,15.89-2.21,22.91-6.16,7.34-11.79,11.75-26.76,11.75-43.05,0-.73-.03-1.46-.04-2.19l-29.85-12.16,21.82-22.02c-9.44-19.52-26.25-32.51-45.42-32.51-12.91,0-24.75,5.89-33.99,15.7-2.88,8.8-4.47,18.47-4.47,28.62,0,40.74,25.65,73.77,57.29,73.77Z"
class="color3b4573 svgShape colorStroke3b4573 svgStroke"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="M860.56 756.64s-60.54-6.39-58.84 29.44c1.7 35.83 64.64 22.73 64.64 22.73M987.65 890.94s-79.11-94.69-198.98-13.19M771.67 855.04s28.56 22.85 3.26 46.51M1007.18 873.16s-30.41 11.84-16.69 47.38M931.39 906.55s-37.39-30.94-88.95-2.58"
class="colorStroke3b4573 svgStroke"></path>
<path fill="#ffffff"
d="m1145.36,940.44s76.86,98.8,58.26,150.4l3.42,4,58.75,64.27s93.34-205.64-80.41-338.72l-40.01,120.04Z"
class="colorfff svgShape"></path>
<path fill="#3b4573"
d="m1205.85,1081.81c-.47,3.14-1.2,6.16-2.23,9.03l3.42,4,58.75,64.27s7-15.43,13.6-40.58c-35.86-32.62-63.15-36.59-73.54-36.73Z"
class="color3b4573 svgShape"></path>
<path fill="#ffffff"
d="m424.45,764.86s9.77,69.12,121.65,105.86l69.26,118.82s-207.04,60.03-287.2-250.58l96.29,25.9Z"
class="colorfff svgShape"></path>
<path fill="#3b4573"
d="m424.45,764.86l-96.29-25.9c1.57,6.1,3.2,12.04,4.87,17.86,14.11,11.49,45.08,29.12,94.36,18.52-2.38-6.52-2.95-10.49-2.95-10.49Z"
class="color3b4573 svgShape"></path>
<g>
<rect width="121.7" height="429.13" x="1028.98" y="966.3" fill="#9fa9cf" rx="53.16" ry="53.16"
transform="rotate(-38.34 1089.814 1180.854)" class="color9fa9cf svgShape"></rect>
<rect width="166.94" height="63.14" x="959.29" y="1091.62" fill="#6d7aa7" rx="15.74" ry="15.74"
transform="rotate(-38.03 1042.826 1123.216)" class="color6d7aa7 svgShape"></rect>
<path fill="#6d7aa7"
d="m859.76,435.38c-183.32,0-331.93,148.61-331.93,331.93s148.61,331.93,331.93,331.93,331.93-148.61,331.93-331.93-148.61-331.93-331.93-331.93Zm0,577.32c-135.52,0-245.39-109.86-245.39-245.39s109.86-245.39,245.39-245.39,245.39,109.86,245.39,245.39-109.86,245.39-245.39,245.39Z"
class="color6d7aa7 svgShape"></path>
<path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
d="m802.58,482.83s161.38-41.18,257.09,75.68" class="colorStrokefff svgStroke"></path>
<ellipse cx="1098.27" cy="603.11" fill="#ffffff" stroke="#fff" stroke-linecap="round"
stroke-linejoin="round" stroke-width="12" rx="14.59" ry="36.92"
transform="rotate(-26.9 1098.118 603.068)"
class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
</g>
<g>
<path fill="#6d7aa7"
d="m1196.98,1085.1s69.55,10.6,80.49,68.1c0,0,3.9,15.92-13.8,24.44-17.7,8.52-74.89-59.12-74.89-59.12,0,0-11.23-28.25,8.2-33.42Z"
class="color6d7aa7 svgShape"></path>
<path fill="#6d7aa7"
d="m1118.71,1133.36l-43.56-38.57c-10.52-9.31-10.55-25.72-.06-35.07h0c8.23-7.34,20.47-7.95,29.39-1.47l65,47.23s16.16-6.98,29.28,3c13.12,9.98,82.6,60.64,71.21,121.53-11.39,60.89-40.76,27.85-56.11,49.46-8.13,11.45-16.66,33.91-22.89,52.52-5.25,15.68-23.13,23.11-37.94,15.75h0c-12.59-6.25-18.36-21.06-13.3-34.18l16.33-42.4-35.52,27.37c-13.02,10.03-31.73,7.46-41.55-5.72h0c-8.81-11.81-7.52-28.32,3.01-38.62l15.74-17.96-26.35,17.12c-12.28,5.34-26.61.74-33.51-10.74h0c-7.39-12.31-5.08-28.11,5.52-37.79l75.29-71.46Z"
class="color6d7aa7 svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12" d="m1153.75,1184.89s-42.13,37.05-60.18,54.77"
class="colorStroke3b4573 svgStroke"></path>
<line x1="1188.31" x2="1156.07" y1="1225.7" y2="1271.16" fill="none" stroke="#3b4573"
stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
class="colorStroke3b4573 svgStroke"></line>
</g>
<g>
<path fill="#6d7aa7"
d="m424.45,764.86s-85.35,14.04-110.19-46.45c0,0-8.93-8.65,20.54-28.78,0,0-33.79-58.96-5.03-112.16,28.76-53.21,59.68-51.77,59.68-51.77,0,0-2.72-13.16,11.34-14.52,0,0-.45-17.69,18.15-22.23,13.29-3.24,56.89-15.51,80.73-22.25,9.95-2.82,20.64-.48,28.51,6.23l66.83,56.94c12.08,10.29,13.71,28.35,3.68,40.64h0c-8.35,10.23-22.53,13.58-34.57,8.15l-57.16-25.74,3.63,53.53,48.09,4.08s15.88,15.88,1.81,53.53c-14.06,37.66-69.41,42.65-69.41,42.65,0,0-.45,17.24-51.27,32.67,0,0-.76,23.29-15.35,25.48Z"
class="color6d7aa7 svgShape"></path>
<path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="M497.79 523.35s3.34 23.31 13.46 31.44M417.05 730.72s-55.52-5.15-82.25-41.09"
class="colorStroke3b4573 svgStroke"></path>
<path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="m368.55,589.78l17.38,6.87c4.6,1.82,8.32,5.33,10.4,9.81l16.57,35.64c5.71,12.28,20.43,17.42,32.54,11.36h0c10.34-5.17,15.53-16.96,12.37-28.08l-12.7-44.6c-2.67-9.36-8.21-17.65-15.86-23.68l-39.82-31.42"
class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
<path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="m533.77,661.76s-51.37,18.29-78.95-15.67c-11.72-15.74-7.32-38.99,15.94-37.09"
class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
<path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
stroke-width="12"
d="m402.09,511.3s91.69-1.81,104.85,41.62l2.93,42.94c.93,13.59-9.39,25.33-22.98,26.16h0c-10.75.65-20.68-5.78-24.46-15.87l-7.77-20.72c-2.87-12.75-2.24-10.85-2.24-10.85"
class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
</g>
</g>
<g>
<path fill="#9fa9cf"
d="m478.21,1603.03c29.25,25.71,60.38,49.31,93.17,70.59-1.56-36.74.25-152.87,76.41-240.49,3.48-4-.85-9.96-5.72-7.88-40.58,17.33-130.74,67.18-163.86,177.78Z"
class="color9fa9cf svgShape"></path>
<path fill="#c3cae5"
d="m419.87,1546.29c36.52,39.31,76.94,74.93,120.64,106.27,5.45-66.66,2.04-202.22-91.38-322.57-3.23-4.16-9.85-1.19-8.88,3.99,8.06,42.71,20.93,143.82-20.39,212.31Z"
class="colorc3cae5 svgShape"></path>
<path fill="#9fa9cf"
d="m528.35,1591.39c4.08,10.99,11.14,32.91,16,63.9,30.96,21.93,63.54,41.71,97.54,59.13-2.72-40.27-19.99-113.5-107.91-129.68-3.83-.71-6.99,2.99-5.63,6.65Z"
class="color9fa9cf svgShape"></path>
<path fill="#c3cae5"
d="m590.26,1685.5c28.87,17.61,58.96,33.43,90.08,47.34,14.23-106.47,97.24-219.95,123.81-253.98,2.85-3.66-.39-8.9-4.94-7.98-131.44,26.51-191.8,166.3-208.96,214.63Z"
class="colorc3cae5 svgShape"></path>
<path fill="#9fa9cf"
d="m438.65,1565.82c-4.03-77.35-31.24-257.18-200.49-347.61l-63.09,7.95c-15.47,2.09-29.19,11.01-37.37,24.31l-80.05,130.18c-2.81,4.57,2.56,9.75,7.03,6.78l157.26-104.57c9.28-6.17,21.62-5.2,29.7,2.47,3.99,3.79,8.13,8.48,11.59,14.01,40.29,100.51,100.35,190.95,175.41,266.49Z"
class="color9fa9cf svgShape"></path>
</g>
</svg>
</div>
</div>
</ng-template>
HTML
<!-- src/app/app.component.html -->
<app-navbar></app-navbar>
<router-outlet></router-outlet>
CSS
/* src/app/cart/cart.component.css */
table,
th,
td {
border: 1px solid rgb(167, 167, 167);
border-collapse: collapse;
}
th {
color: white;
background-color: rgb(4, 4, 122);
padding: 10px;
}
td {
text-align: center;
}
CSS
/* src/app/checkout/checkout.component.css */
main {
height: 85%;
display: flex;
column-gap: 100px;
padding: 80px;
.checkout-form {
width: 50%;
form {
h6 {
font-size: 12px;
font-weight: 500;
}
.form-control {
margin: 10px 0px;
position: relative;
label:not([for="checkout-checkbox"]) {
display: block;
font-size: 10px;
font-weight: 500;
margin-bottom: 2px;
}
input:not([type="checkbox"]) {
width: 100%;
padding: 10px 10px 10px 40px;
border-radius: 10px;
outline: none;
border: 0.2px solid #4e515085;
font-size: 12px;
font-weight: 700;
&::placeholder {
font-size: 10px;
font-weight: 500;
}
}
label[for="checkout-checkbox"] {
font-size: 9px;
font-weight: 500;
line-height: 10px;
}
>div {
position: relative;
span.fa {
position: absolute;
top: 50%;
left: 0%;
transform: translate(15px, -50%);
}
}
}
.form-group {
display: flex;
column-gap: 25px;
}
.checkbox-control {
display: flex;
align-items: center;
column-gap: 10px;
}
.form-control-btn {
display: flex;
align-items: center;
justify-content: flex-end;
button {
padding: 10px 25px;
font-size: 10px;
color: #fff;
background: #f24aa6;
border: 0;
border-radius: 7px;
letter-spacing: 0.5px;
font-weight: 200;
cursor: pointer;
}
}
}
}
.checkout-details {
width: 40%;
.checkout-details-inner {
background: #f2f2f2;
border-radius: 10px;
padding: 20px;
.checkout-lists {
display: flex;
flex-direction: column;
row-gap: 15px;
margin-bottom: 40px;
.card {
width: 100%;
display: flex;
column-gap: 15px;
.card-image {
width: 35%;
img {
width: 100%;
object-fit: fill;
border-radius: 10px;
}
}
.card-details {
display: flex;
flex-direction: column;
.card-name {
font-size: 12px;
font-weight: 500;
}
.card-price {
font-size: 10px;
font-weight: 500;
color: #f2994a;
margin-top: 5px;
span {
color: #4e5150;
text-decoration: line-through;
margin-left: 10px;
}
}
.card-wheel {
margin-top: 17px;
border: 0.2px solid #4e515085;
width: 90px;
padding: 8px 8px;
border-radius: 10px;
font-size: 12px;
display: flex;
justify-content: space-between;
button {
background: #e0e0e0;
color: #828282;
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
border: 0;
cursor: pointer;
border-radius: 3px;
font-weight: 500;
}
}
}
}
}
.checkout-shipping,
.checkout-total {
display: flex;
font-size: 16px;
padding: 5px 0px;
border-top: 1px solid #bdbdbd;
justify-content: space-between;
p {
font-size: 10px;
font-weight: 500;
}
}
}
}
}
CSS
/* src/app/navbar/navbar.component.css */
.nav {
background: #059700;
position: fixed;
z-index: 20;
width: -webkit-fill-available;
padding: 20px;
display: flex;
justify-content: space-between;
color: white;
align-items: baseline;
}
nav a {
color: white;
margin-right: 10px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
CSS
/* src/app/product-detail/product-detail.component.css */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
::root {
--color1: #53d3d1;
--color2: #002447;
--color3: #fbeceb;
--color4: #feb249;
}
#product_container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
margin-bottom: 10rem;
}
section {
background: #fbeceb;
width: 700px;
border-radius: 5px;
}
.content {
display: flex;
justify-content: space-between;
}
/* Left Side:Start */
.left {
display: block;
height: fit-content;
min-width: 250px;
}
.left .product_img {
height: 250px;
width: 230px;
margin: 10px;
border-radius: 5px;
/* background: url("https://i.postimg.cc/X799Yjd4/product-1.jpg") no-repeat; */
background-position: center;
background-size: cover;
}
.product_details {
text-align: left;
margin: 0 10px 10px;
padding: 5px;
}
.product_details .title {
font-size: 1.3em;
color: rgb(99, 99, 99);
font-weight: 900;
}
.product_details .discription {
margin-top: 2px;
font-size: 0.8em;
color: gray;
}
.product_details .price {
margin-top: 4px;
font-size: 1.1em;
font-weight: 600;
white-space: pre;
}
.product_details .price span {
font-weight: 500;
}
.product_details .price .price_original {
text-decoration: line-through;
font-size: 0.7em;
font-weight: 400;
color: gray;
}
.product_details .price .offer {
color: #03ac13;
font-weight: 600;
}
.product_details .other {
font-size: 0.8em;
color: grey;
}
/* Left Side:End */
/* Right Side:Start */
.right {
display: block;
}
.right .product_description {
text-align: left;
margin: 30px 20px;
}
.product_description h4 {
font-size: 0.9em;
font-weight: 900;
margin-bottom: 20px;
}
.product_description p {
font-size: 0.8em;
color: grey;
margin-bottom: 15px;
}
.product_description .highlight {
color: rgb(99, 99, 99);
font-weight: 900;
}
.product_description .special {
font-size: 0.85em;
}
/* Right Side:End */
/* Responsiveness:Start */
@media screen and (min-width: 320px) and (max-width: 480px) {
.content {
display: flex;
flex-direction: column;
width: 100vw;
border-radius: 0px;
}
section {
width: 100% !important;
}
.product_img {
width: calc(100vw - 6%) !important;
height: 350px !important;
}
h4.title {
font-size: 1em !important;
}
p {
width: 90%;
}
p.discription {
font-size: 0.7em !important;
}
p.other {
font-size: 0.7em !important;
}
}
/* Responsiveness:End */
CSS
/* src/app/product-list/product-list.component.css */
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.container .card {
width: 100%;
background: #fff;
}
.container .card .imgBx {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.container .card .imgBx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s ease-in-out;
transform-origin: right;
}
.container .card:hover .imgBx img {
transform: scale(1.5);
}
.container .card .content {
padding: 10px;
}
.container .card .content .productName h3 {
font-size: 18px;
font-weight: 500;
color: #333;
margin: 5px 0;
}
.container .card .content .price-rating {
display: flex;
justify-content: space-between;
align-items: center;
}
.container .card .content .price-rating h2 {
font-size: 20px;
color: #059700;
font-weight: 500;
}
.container .card .content .price-rating .fa {
color: #ffd513;
cursor: pointer;
}
.container .card .content .price-rating .fa.grey {
color: #ccc;
}
.action {
position: absolute;
top: 10px;
right: 10px;
}
.action li {
position: relative;
list-style: none;
width: 40px;
height: 40px;
background: #059700;
display: flex;
justify-content: center;
align-items: center;
margin: 4px;
cursor: pointer;
transition: 0.5s;
transform: translateX(60px);
border-radius: 30px;
color: white;
}
.action li a {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%) translateX(-20px);
white-space: nowrap;
padding: 4px 6px;
background: #fff;
color: #333;
font-weight: 500;
font-size: 12px;
border-radius: 4px;
opacity: 0;
transition: 0.5s;
}
.action li:hover a {
transform: translateY(-50%) translateX(0px);
opacity: 1;
}
.action li a::before {
content: "";
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
background: #fff;
transform: translateY(-50%) rotate(45deg);
}
.container .card:hover .action li {
transform: translateX(0px);
}
.action li:hover {
background: #ff2020;
color: #fff;
}
JavaScript
// src/app/cart/cart.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-cart',
standalone: true,
imports: [CommonModule],
templateUrl: './cart.component.html',
styleUrl: './cart.component.css',
})
export class CartComponent implements OnInit {
cartItems: any[] = [];
constructor(
private productService: ProductService,
private cartService: CartService,
private router: Router
) { }
ngOnInit(): void {
this.loadCartItems();
}
private loadCartItems(): void {
const cart = this.cartService.getItems();
this.cartItems = [];
cart.forEach(([productId, quantity]) => {
this.productService.getProduct(productId).subscribe((product) => {
this.cartItems.push({ product, quantity });
});
});
}
increaseQuantity(productId: string): void {
this.cartService.addItem(productId);
this.updateCart();
}
decreaseQuantity(productId: string): void {
this.cartService.decreaseItem(productId);
this.updateCart();
}
removeFromCart(productId: string): void {
this.cartService.removeItem(productId);
this.cartItems = this.cartItems.filter(
(item) => item.product.id !== productId
);
}
clearCart(): void {
this.cartService.clearCart();
this.cartItems = [];
}
get items(): any[] {
return this.cartService.getItems();
}
totalCost(): number {
return this.cartItems.reduce(
(total, item) => total + item.product.price * item.quantity,
0
);
}
checkout(): void {
this.router.navigate(['/checkout']);
}
hasItems(): boolean {
return this.cartItems.length > 0;
}
private updateCart(): void {
const cart = this.cartService.getItems();
this.cartItems = [];
cart.forEach(([productId, quantity]) => {
this.productService.getProduct(productId).subscribe((product) => {
this.cartItems.push({ product, quantity });
});
});
}
}
JavaScript
// src/app/checkout/checkout.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import {
FormBuilder,
FormGroup,
Validators,
ReactiveFormsModule,
FormsModule,
} from '@angular/forms';
@Component({
selector: 'app-checkout',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, FormsModule],
templateUrl: './checkout.component.html',
styleUrl: './checkout.component.css',
})
export class CheckoutComponent implements OnInit {
cartItems: any[] = [];
total: number = 0;
checkoutForm: FormGroup;
constructor(
private productService: ProductService,
private cartService: CartService,
private router: Router,
private fb: FormBuilder
) {
this.checkoutForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
phone: [
'',
[Validators.required, Validators.pattern(/^(\+\d{1,3}[- ]?)?\d{10}$/)],
],
name: ['', Validators.required],
address: ['', Validators.required],
city: ['', Validators.required],
});
}
ngOnInit(): void {
this.loadCartItems();
}
private loadCartItems(): void {
const cart = this.cartService.getItems();
this.cartItems = [];
cart.forEach(([productId, quantity]) => {
this.productService.getProduct(productId).subscribe((product) => {
this.cartItems.push({ product, quantity });
this.total += product.price * quantity;
});
});
}
increaseQuantity(productId: string): void {
this.cartService.addItem(productId);
this.updateCart();
}
decreaseQuantity(productId: string): void {
this.cartService.decreaseItem(productId);
this.updateCart();
}
private updateCart(): void {
const cart = this.cartService.getItems();
this.cartItems = [];
cart.forEach(([productId, quantity]) => {
this.productService.getProduct(productId).subscribe((product) => {
this.cartItems.push({ product, quantity });
});
});
}
totalCost(): number {
return this.cartItems.reduce(
(total, item) => total + item.product.price * item.quantity,
0
);
}
onSubmit() {
if (this.checkoutForm.valid) {
// Handle successful form submission
console.log('Form Submitted', this.checkoutForm.value);
// Clear cart and redirect to home
this.cartService.clearCart();
this.cartItems = [];
this.total = 0;
alert('Checkout complete. Thank you for your purchase!');
this.router.navigate(['/']);
} else {
// Handle form validation errors
console.log('Form is invalid');
alert('Form data is invalid');
}
}
checkout(): void {
// Placeholder for potential checkout logic
}
}
JavaScript
// src/app/navbar/navbar.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
} from '@angular/router';
import { CartService } from '../services/cart.service';
@Component({
selector: 'app-navbar',
standalone: true,
imports: [
CommonModule,
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.css',
})
export class NavbarComponent {
cartItemCount: number = 0;
constructor(public cartService: CartService) { }
ngOnInit(): void {
this.cartService.getCartItemsObservable().subscribe((items) => {
this.cartItemCount = Array.from(items.values()).reduce(
(sum, quantity) => sum + quantity,
0
);
});
}
}
JavaScript
// src/app/product-detail/product-detail.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import {
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
} from '@angular/router';
@Component({
selector: 'app-product-detail',
standalone: true,
imports: [
CommonModule,
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
],
templateUrl: './product-detail.component.html',
styleUrl: './product-detail.component.css',
})
export class ProductDetailComponent {
product: any;
isInCart: boolean = false;
constructor(
private route: ActivatedRoute,
private productService: ProductService,
private cartService: CartService
) { }
ngOnInit(): void {
const productId = this.route.snapshot.paramMap.get('id');
if (productId) {
this.productService.getProduct(productId).subscribe((product) => {
this.product = product;
this.isInCart = this.cartService.isInCart(productId);
});
}
}
addToCart(): void {
if (this.product) {
this.cartService.addItem(this.product.id);
this.isInCart = true;
}
}
}
JavaScript
// src/app/product-list/product-list.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import {
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
} from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-product-list',
standalone: true,
imports: [
CommonModule,
FormsModule,
RouterModule,
RouterOutlet,
RouterLink,
RouterLinkActive,
],
templateUrl: './product-list.component.html',
styleUrl: './product-list.component.css',
})
export class ProductListComponent implements OnInit {
products: any[] = [];
filteredProducts: any[] = [];
searchQuery: string = '';
sortCriteria: string = 'name';
categories: string[] = [
'Pain Relievers',
'Antibiotics',
'Diabetes Medications0',
'Cholesterol Medications',
'Acid Reducers',
'Blood Pressure Medications',
'Anxiety Medications',
'Thyroid Medications',
'Sleep Medications',
'Diuretics',
'Anticoagulants',
'Anticonvulsants',
'Antidepressants',
];
selectedCategory = '';
constructor(private productService: ProductService) { }
ngOnInit(): void {
this.productService.getProducts().subscribe((products) => {
this.products = products;
this.filteredProducts = products;
});
}
searchProducts(): void {
this.filteredProducts = this.products.filter((product) =>
product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
);
}
getCategories() {
this.categories = [
...new Set(this.products.map((product) => product.category)),
];
}
sortProducts(): void {
if (this.sortCriteria === 'name') {
this.filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
} else if (this.sortCriteria === 'priceAsc') {
this.filteredProducts.sort((a, b) => a.price - b.price);
} else if (this.sortCriteria === 'priceDesc') {
this.filteredProducts.sort((a, b) => b.price - a.price);
}
}
filterByCategory(): void {
if (this.selectedCategory) {
this.filteredProducts = this.products.filter(
(product) => product.category === this.selectedCategory
);
} else {
this.filteredProducts = this.products;
}
this.sortProducts();
}
}
JavaScript
// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
const routes: Routes = [
{ path: '', component: ProductListComponent },
{ path: 'product/:id', component: ProductDetailComponent },
{ path: 'cart', component: CartComponent },
{ path: 'checkout', component: CheckoutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule { }
JavaScript
// src/app/app.component.ts
import { Component } from '@angular/core';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
NavbarComponent,
RouterLink,
RouterLinkActive,
CommonModule,
],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'online-pharmacy-store';
}
JavaScript
// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http'; // Import HttpClientModule
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideAnimationsAsync(),
provideHttpClient(),
],
};
JavaScript
// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
export const routes: Routes = [
{ path: '', component: ProductListComponent },
{ path: 'product/:id', component: ProductDetailComponent },
{ path: 'cart', component: CartComponent },
{ path: 'checkout', component: CheckoutComponent },
];
JavaScript
// src/service/cart.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class CartService {
private items = new BehaviorSubject<Map<string, number>>(this.loadCart());
private isLocalStorageAvailable(): boolean {
try {
const testKey = '__test__';
localStorage.setItem(testKey, testKey);
localStorage.removeItem(testKey);
return true;
} catch (e) {
return false;
}
}
private loadCart(): Map<string, number> {
if (this.isLocalStorageAvailable()) {
const cart = localStorage.getItem('cart');
return cart ? new Map(JSON.parse(cart)) : new Map();
}
return new Map();
}
private saveCart(): void {
if (this.isLocalStorageAvailable()) {
localStorage.setItem(
'cart',
JSON.stringify(Array.from(this.items.getValue().entries()))
);
}
}
addItem(productId: string): void {
const currentItems = this.items.getValue();
if (currentItems.has(productId)) {
currentItems.set(productId, currentItems.get(productId)! + 1);
} else {
currentItems.set(productId, 1);
}
this.items.next(currentItems);
this.saveCart();
}
decreaseItem(productId: string): void {
const currentItems = this.items.getValue();
if (currentItems.has(productId) && currentItems.get(productId)! > 1) {
currentItems.set(productId, currentItems.get(productId)! - 1);
}
this.items.next(currentItems);
this.saveCart();
}
getCartItemCount(): number {
let count = 0;
this.items.getValue().forEach((quantity) => (count += quantity));
return count;
}
getCartItemsObservable() {
return this.items.asObservable();
}
getItems(): [string, number][] {
return Array.from(this.items.getValue().entries());
}
removeItem(productId: string): void {
const currentItems = this.items.getValue();
if (currentItems.has(productId)) {
currentItems.delete(productId);
}
this.items.next(currentItems);
this.saveCart();
}
clearCart(): void {
this.items.next(new Map());
this.saveCart();
}
isInCart(productId: string): boolean {
return this.items.getValue().has(productId);
}
}
JavaScript
// src/app/service/product.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class ProductService {
private apiUrl = 'http://localhost:3000/products'; // Use JSON Server or real API
constructor(private http: HttpClient) { }
getProducts(): Observable<any[]> {
return this.http.get<any[]>(this.apiUrl);
}
getProduct(id: string): Observable<any> {
return this.http.get<any>(`${this.apiUrl}/${id}`);
}
}
JavaScript
{
"products": [
{
"id": 1,
"name": "Aspirin",
"price": 5.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724204441/aspirin.jpeg",
"description": "Aspirin is used to reduce fever and relieve mild to moderate pain.",
"usages": "Pain relief, fever reduction, anti-inflammatory",
"sideEffects": "Stomach pain, heartburn, drowsiness",
"category": "Pain Relievers"
},
{
"id": 2,
"name": "Paracetamol",
"price": 3.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724204522/paracetaamol.jpeg",
"description": "Paracetamol is a pain reliever and a fever reducer.",
"usages": "Pain relief, fever reduction",
"sideEffects": "Nausea, stomach pain, loss of appetite",
"category": "Pain Relievers"
},
{
"id": 3,
"name": "Ibuprofen",
"price": 7.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724204602/Ibuprofen.jpeg",
"description": "Ibuprofen is used to reduce fever and treat pain or inflammation.",
"usages": "Pain relief, fever reduction, anti-inflammatory",
"sideEffects": "Upset stomach, mild heartburn, nausea",
"category": "Pain Relievers"
},
{
"id": 4,
"name": "Amoxicillin",
"price": 8.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205508/Amoxicillin.jpeg",
"description": "Amoxicillin is an antibiotic used to treat a number of bacterial infections.",
"usages": "Bacterial infections",
"sideEffects": "Nausea, vomiting, diarrhea",
"category": "Antibiotics"
},
{
"id": 5,
"name": "Metformin",
"price": 12.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205550/Metformin.jpeg",
"description": "Metformin is used to control high blood sugar in patients with type 2 diabetes.",
"usages": "Type 2 diabetes",
"sideEffects": "Nausea, vomiting, stomach upset",
"category": "Diabetes Medications"
},
{
"id": 6,
"name": "Atorvastatin",
"price": 9.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205656/Atorvastatin.jpeg",
"description": "Atorvastatin is used to lower cholesterol and triglycerides in the blood.",
"usages": "High cholesterol",
"sideEffects": "Joint pain, stuffy nose, sore throat",
"category": "Cholesterol Medications"
},
{
"id": 7,
"name": "Omeprazole",
"price": 6.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205731/Omeprazole.jpeg",
"description": "Omeprazole is used to treat certain stomach and esophagus problems.",
"usages": "Acid reflux, stomach ulcers",
"sideEffects": "Headache, abdominal pain, nausea",
"category": "Acid Reducers"
},
{
"id": 8,
"name": "Amlodipine",
"price": 11.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205805/Amlodipine.jpeg",
"description": "Amlodipine is used to treat high blood pressure and chest pain.",
"usages": "High blood pressure, angina",
"sideEffects": "Swelling of the ankles or feet, dizziness, flushing",
"category": "Blood Pressure Medications"
},
{
"id": 9,
"name": "Simvastatin",
"price": 10.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205843/Simvastatin.jpeg",
"description": "Simvastatin is used to lower cholesterol and triglycerides in the blood.",
"usages": "High cholesterol",
"sideEffects": "Headache, nausea, stomach pain",
"category": "Cholesterol Medications"
},
{
"id": 10,
"name": "Ciprofloxacin",
"price": 8.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205920/Ciprofloxacin.jpeg",
"description": "Ciprofloxacin is an antibiotic used to treat a variety of bacterial infections.",
"usages": "Bacterial infections",
"sideEffects": "Nausea, diarrhea, dizziness",
"category": "Antibiotics"
},
{
"id": 11,
"name": "Lisinopril",
"price": 7.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724205955/Lisinopril.jpeg",
"description": "Lisinopril is used to treat high blood pressure and heart failure.",
"usages": "High blood pressure, heart failure",
"sideEffects": "Cough, dizziness, headache",
"category": "Blood Pressure Medications"
},
{
"id": 12,
"name": "Azithromycin",
"price": 9.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210033/Azithromycin.jpeg",
"description": "Azithromycin is an antibiotic used to treat various types of infections.",
"usages": "Bacterial infections",
"sideEffects": "Diarrhea, nausea, abdominal pain",
"category": "Antibiotics"
},
{
"id": 13,
"name": "Alprazolam",
"price": 10.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210127/Alprazolam.jpeg",
"description": "Alprazolam is used to treat anxiety and panic disorders.",
"usages": "Anxiety, panic disorder",
"sideEffects": "Drowsiness, dizziness, increased saliva production",
"category": "Anxiety Medications"
},
{
"id": 14,
"name": "Levothyroxine",
"price": 6.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210203/Levothyroxine.jpeg",
"description": "Levothyroxine is used to treat an underactive thyroid (hypothyroidism).",
"usages": "Hypothyroidism",
"sideEffects": "Hair loss, sweating, sensitivity to heat",
"category": "Thyroid Medications"
},
{
"id": 15,
"name": "Zolpidem",
"price": 8.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210244/Zolpidem.jpeg",
"description": "Zolpidem is used to treat certain sleep problems (insomnia) in adults.",
"usages": "Insomnia",
"sideEffects": "Drowsiness, dizziness, weakness",
"category": "Sleep Medications"
},
{
"id": 16,
"name": "Hydrochlorothiazide",
"price": 5.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210319/Hydrochlorothiazide.jpeg",
"description": "Hydrochlorothiazide is used to treat high blood pressure and fluid retention.",
"usages": "High blood pressure, edema",
"sideEffects": "Dizziness, lightheadedness, headache",
"category": "Diuretics"
},
{
"id": 17,
"name": "Tramadol",
"price": 12.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210356/Tramadol.jpeg",
"description": "Tramadol is used to help relieve moderate to moderately severe pain.",
"usages": "Pain relief",
"sideEffects": "Nausea, vomiting, constipation",
"category": "Pain Relievers"
},
{
"id": 18,
"name": "Warfarin",
"price": 14.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210429/Warfarin.jpeg",
"description": "Warfarin is used to prevent blood clots from forming or growing larger in your blood and blood vessels.",
"usages": "Blood clot prevention",
"sideEffects": "Bleeding, nausea, vomiting",
"category": "Anticoagulants"
},
{
"id": 19,
"name": "Gabapentin",
"price": 13.49,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210459/Gabapentin.jpeg",
"description": "Gabapentin is used to help control partial seizures in adults and children.",
"usages": "Seizure control, nerve pain",
"sideEffects": "Drowsiness, dizziness, loss of coordination",
"category": "Anticonvulsants"
},
{
"id": 20,
"name": "Sertraline",
"price": 11.99,
"imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240724210558/Sertraline.jpeg",
"description": "Sertraline is used to treat depression, panic attacks, obsessive-compulsive disorder, and anxiety disorders.",
"usages": "Depression, anxiety, OCD",
"sideEffects": "Nausea, dizziness, drowsiness",
"category": "Antidepressants"
}
]
}
Steps to Run the ApplicationStep 1: Start the json-servercd src npm run start:server Step 2: Start the Angular Applicationng serve Open your browser and navigate to http://localhost:4200
Final View
 Output
|