Skip to content

Commit c764a34

Browse files
Fabio BrasileiroFabio Brasileiro
Fabio Brasileiro
authored and
Fabio Brasileiro
committed
feat:card de eventos
1 parent b6f6d71 commit c764a34

7 files changed

Lines changed: 422 additions & 81 deletions

File tree

‎src/app/page/landing-page-inicio/landing-page-inicio.component.html‎

Lines changed: 2 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -492,89 +492,11 @@ <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-w
492492
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Here at Landwind we focus on markets where
493493
technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
494494
</div>
495+
495496
<div class="space-y-8 lg:grid lg:grid-cols- sm:gap-6 xl:gap-10 lg:space-y-0">
497+
<app-slider-event></app-slider-event>
496498
<!-- Pricing Card -->
497499

498-
499-
<div id="indicators-carousel" class="relative w-full" data-carousel="static">
500-
<!-- Carousel wrapper -->
501-
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
502-
<!-- Item 1 -->
503-
<div class="duration-700 ease-in-out" data-carousel-item="active">
504-
<img src="../../../assets/event-java.jpeg"
505-
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
506-
</div>
507-
<!-- Item 2 -->
508-
<div class="hidden duration-700 ease-in-out" data-carousel-item>
509-
<img src="/docs/images/carousel/carousel-2.svg"
510-
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
511-
</div>
512-
<!-- Item 3 -->
513-
<div class="hidden duration-700 ease-in-out" data-carousel-item>
514-
<img src="/docs/images/carousel/carousel-3.svg"
515-
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
516-
</div>
517-
<!-- Item 4 -->
518-
<div class="hidden duration-700 ease-in-out" data-carousel-item>
519-
<img src="/docs/images/carousel/carousel-4.svg"
520-
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
521-
</div>
522-
<!-- Item 5 -->
523-
<div class="hidden duration-700 ease-in-out" data-carousel-item>
524-
<img src="/docs/images/carousel/carousel-5.svg"
525-
class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
526-
</div>
527-
</div>
528-
529-
<!-- Slider indicators -->
530-
<div class="absolute z-30 flex -translate-x-1/2 space-x-3 rtl:space-x-reverse bottom-5 left-1/2">
531-
<button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"
532-
data-carousel-slide-to="0"></button>
533-
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"
534-
data-carousel-slide-to="1"></button>
535-
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"
536-
data-carousel-slide-to="2"></button>
537-
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"
538-
data-carousel-slide-to="3"></button>
539-
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5"
540-
data-carousel-slide-to="4"></button>
541-
</div>
542-
<!-- Slider controls -->
543-
<button type="button"
544-
class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
545-
data-carousel-prev>
546-
<span
547-
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
548-
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
549-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
550-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
551-
d="M5 1 1 5l4 4" />
552-
</svg>
553-
<span class="sr-only">Previous</span>
554-
</span>
555-
</button>
556-
<button type="button"
557-
class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
558-
data-carousel-next>
559-
<span
560-
class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
561-
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
562-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
563-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
564-
d="m1 9 4-4-4-4" />
565-
</svg>
566-
<span class="sr-only">Next</span>
567-
</span>
568-
</button>
569-
</div>
570-
<div class="card-content text-white">
571-
<h6 class="" data-carousel-item="active">Sab,16 Fev - 10:00<span>(Horário de Manaus)</span></h6>
572-
<h2>Lorem Ipsum</h2>
573-
<p>Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam atque sunt pariatur, enim quae
574-
quidem praesentium. Similique dolor fugit explicabo vero debitis recusandae, expedita fuga corrupti dolorum
575-
esse perferendis ipsa.</p>
576-
</div>
577-
578500
<!-- fim -->
579501
<!-- <div
580502
class="flex flex-col max-w-lg p-6 mx-auto text-center text-gray-900 bg-white border border-gray-100 rounded-lg shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">

‎src/app/page/landing-page-inicio/landing-page-inicio.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Component } from '@angular/core';
22
import { HeaderLandingPageComponent } from '../header-landing-page/header-landing-page.component';
33
import { FooterComponent } from '../footer/footer.component';
4+
import { SliderEventComponent } from '../slider-event/slider-event.component';
45

56
@Component({
67
selector: 'app-landing-page-inicio',
78
standalone: true,
8-
imports: [HeaderLandingPageComponent, FooterComponent],
9+
imports: [HeaderLandingPageComponent, FooterComponent,SliderEventComponent],
910
templateUrl: './landing-page-inicio.component.html',
1011
styleUrl: './landing-page-inicio.component.css'
1112
})

‎src/app/page/slider-event/slider-event.component.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* .product {
2+
padding: 20px 0;
3+
}
4+
5+
.slider-wrap {
6+
position: relative;
7+
}
8+
.slider-main {
9+
position: absolute;
10+
}
11+
12+
.item {
13+
display: inline-block;
14+
width: 300px;
15+
height: 150px;
16+
background-color: rgb(183, 39, 39);
17+
}
18+
.text {
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
transform: translate(-50%, -50%);
23+
} */
24+
.w-100 {
25+
width: 100% !important;
26+
}
27+
28+
.container {
29+
display: flex;
30+
position: relative;
31+
justify-content: center;
32+
}
33+
34+
.cards {
35+
width: calc(100% - 80px);
36+
overflow: hidden;
37+
}
38+
39+
.overflow {
40+
position: relative;
41+
transition: left 0.5s ease-in-out;
42+
}
43+
44+
.card {
45+
height: 100px;
46+
background-color: #e0e1e2;
47+
border-radius: 5px;
48+
width: 100px;
49+
display: inline-block;
50+
margin-right: 10px;
51+
position: relative;
52+
}
53+
54+
.no-right-margin {
55+
margin-right: 0px;
56+
}
57+
58+
.card span {
59+
font-size: 48px;
60+
position: absolute;
61+
top: 50%;
62+
left: 50%;
63+
transform: translate(-50%, -50%);
64+
}
65+
66+
.left,
67+
.right {
68+
z-index: 100;
69+
height: 30px;
70+
width: 30px;
71+
background-color: #0072bc;
72+
position: absolute;
73+
top: 50%;
74+
transform: translateY(-50%);
75+
}
76+
77+
.left.disabled,
78+
.right.disabled {
79+
background-color: #ccc;
80+
}
81+
82+
.left {
83+
left: 0;
84+
}
85+
86+
.right {
87+
right: 0;
88+
}

‎src/app/page/slider-event/slider-event.component.html‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!-- <section class="product">
2+
<div class="containere">
3+
<div class="slider-wrap">
4+
<div class="slider-main">
5+
<div class="item">
6+
<div class="text">1</div>
7+
</div>
8+
</div>
9+
</div>
10+
</div>
11+
</section> -->
12+
<!-- <div class="card-container">
13+
<button (click)="onNavigate('next')">Next Card</button>
14+
<button (click)="onNavigate('prev')" *ngIf="currentIndex > 0">Previous Card</button>
15+
</div> -->
16+
17+
18+
<!-- <div class="flex gap-2 max-sm:flex-col">
19+
<div class="max-w-sm m-auto w-full lg:max-w-full lg:flex">
20+
<div
21+
class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
22+
style="background-image: url('../../../assets/event-java.jpeg')" title="Woman holding a mug">
23+
</div>
24+
<div
25+
class="border-r border-b border-l border-gray-300 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white dark:bg-gray-900 rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
26+
<div class="mb-8">
27+
<p class="text-sm text-gray-500 flex items-center">
28+
<svg class="fill-current text-gray-400 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
29+
<path
30+
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
31+
</svg>
32+
33+
</p>
34+
<div class="text-gray-400 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
35+
<p class="text-gray-500 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia,
36+
nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
37+
</div>
38+
<div class="flex items-center">
39+
<img class="w-10 h-10 rounded-full mr-4" src="../../../assets/doke-noticia.png"
40+
alt="Avatar of Jonathan Reinink">
41+
<div class="text-sm">
42+
<p class="text-gray-500 leading-none">Jonathan Reinink</p>
43+
<p class="text-gray-600">Aug 18</p>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
<!-- fim ->
49+
<div class="max-w-sm m-auto w-full lg:max-w-full lg:flex">
50+
<div
51+
class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
52+
style="background-image: url('../../../assets/event-java.jpeg')" title="Woman holding a mug">
53+
</div>
54+
<div
55+
class="border-r border-b border-l border-gray-300 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white dark:bg-gray-900 rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
56+
<div class="mb-8">
57+
<p class="text-sm text-gray-500 flex items-center">
58+
<svg class="fill-current text-gray-400 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
59+
<path
60+
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
61+
</svg>
62+
Members only
63+
</p>
64+
<div class="text-gray-400 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
65+
<p class="text-gray-500 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia,
66+
nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
67+
</div>
68+
<div class="flex items-center">
69+
<img class="w-10 h-10 rounded-full mr-4" src="../../../assets/doke-noticia.png"
70+
alt="Avatar of Jonathan Reinink">
71+
<div class="text-sm">
72+
<p class="text-gray-500 leading-none">Jonathan Reinink</p>
73+
<p class="text-gray-600">Aug 18</p>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</div> -->
79+
<!-- <div class="carousel w-full">
80+
<div id="slide1" class="carousel-item relative w-full">
81+
<img src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg" class="w-full" />
82+
<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
83+
<a href="#slide4" class="btn btn-circle">❮</a>
84+
<a href="#slide2" class="btn btn-circle">❯</a>
85+
</div>
86+
</div> -->
87+
<div class="">
88+
89+
<div class="mb-5 flex justify-end">
90+
<div class="inline-flex">
91+
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
92+
(click)="onNavigate('prev')" [disabled]="currentIndex === 0">
93+
Prev
94+
</button>
95+
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r"
96+
(click)="onNavigate('next')" [disabled]="currentIndex >= cards.length - 2">
97+
Next
98+
</button>
99+
</div>
100+
<!-- <button class="btn btn-circle" (click)="onNavigate('prev')" [disabled]="currentIndex === 0">❮ </button> -->
101+
<!-- <button class="btn btn-circle" (click)="onNavigate('next')" [disabled]="currentIndex >= cards.length - 2">❯</button> -->
102+
</div>
103+
<div class="flex gap-4 max-sm:flex-col">
104+
105+
<ng-container *ngFor="let card of cards.slice(currentIndex, currentIndex + 2); let i = index" class="">
106+
<div class="max-w-sm m-auto w-full lg:max-w-full lg:flex ">
107+
<div
108+
class="h-48 lg:h-auto lg:w-60 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
109+
[style.backgroundImage]="'url(' + card.imgPath + ')'" title="Imagem">
110+
111+
</div>
112+
<div
113+
class="border-r border-b border-l border-gray-300 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white dark:bg-gray-900 rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
114+
<div class="mb-8">
115+
<p class="text-sm text-gray-500 flex items-center">
116+
<svg class="fill-current text-gray-400 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
117+
viewBox="0 0 20 20">
118+
<path
119+
d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
120+
</svg>
121+
{{ card.typeMembro }}
122+
</p>
123+
<a target="_blank " href="{{card.link}}" style="display: block;">
124+
<div class=" hover:text-gray-100 text-gray-400 font-bold text-xl mb-2">{{ card.Title }}</div>
125+
</a>
126+
<p class="text-gray-500 text-base">{{ card.desc }}</p>
127+
</div>
128+
<div class="flex items-center">
129+
<img class="w-10 h-10 rounded-full mr-4" [src]="card.imgAutor" alt="Avatar">
130+
<div class="text-sm">
131+
<p class="text-gray-500 leading-none">{{ card.nomes }}</p>
132+
<p class="text-gray-600">{{ card.datas }}</p>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</ng-container>
138+
</div>
139+
140+
141+
142+
143+
<!-- <div class="container" #container>
144+
<div class="left" *ngIf="totalPages > 1" (click)="currentPage != 1 && changePage(-1)"
145+
[ngClass]="{'disabled':currentPage === 1}"></div>
146+
<div class="cards" [ngClass]="{'w-100': totalPages === 1}">
147+
<div class="overflow" [ngStyle]="{'width': overflowWidth, 'left': pagePosition}">
148+
<div class="card" *ngFor="let i of arr; let index = index" [ngStyle]="{'width': cardWidth}">
149+
<span>{{i}}</span>
150+
</div>
151+
</div>
152+
</div>
153+
<div class="right" *ngIf="totalPages > 1" (click)="currentPage != totalPages && changePage(+1)"
154+
[ngClass]="{'disabled':currentPage === totalPages}"></div>
155+
</div> -->
156+
</div>

‎src/app/page/slider-event/slider-event.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SliderEventComponent } from './slider-event.component';
4+
5+
describe('SliderEventComponent', () => {
6+
let component: SliderEventComponent;
7+
let fixture: ComponentFixture<SliderEventComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [SliderEventComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(SliderEventComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)