Add investment and profile buttons to explore component for enhanced …

…project interaction
block-core · Dec 13, 2024 · 64e78cc · 64e78cc
1 parent 809f2df
commit 64e78cc
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/src/app/components/explore/explore.component.html b/src/app/components/explore/explore.component.html
@@ -172,6 +172,32 @@ <h2 class="text-xl font-semibold">Explore Projects</h2>
                                 <span class="font-semibold">{{ project.projectSeeders?.secretHashes?.length || 0 }}</span>
                             </div>
                         </div>
+
+                        <!-- Investment Buttons -->
+                        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <!-- Invest Button -->
+                            <a [href]="'https://test.angor.io/view/' + project.projectIdentifier"
+                               target="_blank"
+                               class="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-primary p-0.5 text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary dark:hover:bg-primary-600 dark:focus:ring-primary-800 w-full">
+                                <span class="relative flex items-center justify-center gap-2 rounded-md bg-card w-full px-4 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
+                                    <mat-icon class="icon-size-5 text-primary dark:text-primary-400 group-hover:text-white" 
+                                             [svgIcon]="'heroicons_solid:circle-stack'">
+                                    </mat-icon>
+                                    <span class="text-primary dark:text-primary-400 group-hover:text-white">Invest Now</span>
+                                </span>
+                            </a>
+
+                            <!-- Profile Button -->
+                            <button (click)="goToProjectDetails(project)"
+                                    class="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-700 p-0.5 text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 w-full">
+                                <span class="relative flex items-center justify-center gap-2 rounded-md bg-card w-full px-4 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
+                                    <mat-icon class="icon-size-5 text-gray-700 dark:text-gray-300 group-hover:text-white" 
+                                             [svgIcon]="'heroicons_outline:document-text'">
+                                    </mat-icon>
+                                    <span class="text-gray-700 dark:text-gray-300 group-hover:text-white">View Details</span>
+                                </span>
+                            </button>
+                        </div>
                     </div>
                 </angor-card>
                 }