@@ -2,22 +2,54 @@ extends layout
22
33block content
44
5- main
6- section.hero
7- if first_name
8- h1 Ready for your next pint, #{first_name} ?
9- else
10- h1 Ready for your next pint?
11- p Discover pubs, rate pints, and see what others recommend.
5+ section.hero
6+ if first_name
7+ h1 Ready for your next pint, #{first_name} ?
8+ .search-container
9+ form.search-form ( method ="GET" action ="/map" )
10+ input.search-input ( type ="text" name ="search" placeholder ="Search for a pub near you..." value =search autocomplete ="off" )
11+ button.search-button ( type ="submit" ) #[ i.fa-solid.fa-magnifying-glass ]
12+ else
13+ h1( style ="margin-bottom: 30px;" ) Discover pubs, rate pints, and see what others recommend.
14+ a( href =` /login` ) .btn Log in to get started
1215
13- section
14- h2 Quick Actions
15- ul
16- li
17- a( href ="/pubs" ) Find a pub near you
18- li
19- a( href ="/users" ) Browse users and reviews
16+ main.container ( style ="margin-top: 40px; margin-bottom: 60px;" )
17+ section.remove-styling
18+ h2( style ="text-align: left; margin-bottom: 30px; font-size: 2.5em;" ) Featured Pubs
19+ if featuredPubs && featuredPubs .length > 0
20+ .section-row
21+ each pub in featuredPubs
22+ section.w-third.remove-styling
23+ div.beer-item ( style ="text-align: left; padding: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; box-sizing: border-box; overflow: hidden;" )
24+ - var lightness1 = 35 + (pub .id * 17 ) % 25
25+ - var lightness2 = 20 + (pub .id * 13 ) % 20
26+ - var bgStyle = ` background: linear-gradient(135deg, hsl(29, 60%, ${ lightness1} %), hsl(29, 70%, ${ lightness2} %));`
27+ div( style =` ${ bgStyle} width: 100%; height: 180px; display: flex; align-items: center; justify-content: center;` )
28+ i.fa-solid.fa-beer-mug-empty ( style ="font-size: 5em; color: rgba(255, 255, 255, 0.5);" )
29+ div( style ="padding: 20px; display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; width: 100%; box-sizing: border-box;" )
30+ strong( style ="display: block; font-size: 1.3em; margin-bottom: 10px;" ) #{pub .name }
31+ p( style ="margin: 5px 0 10px 0; color: #555;" ) #[ i.fa-solid.fa-location-dot ( style ="margin-right: 6px;" ) ] #{pub .address }
32+ - var avgRating = parseFloat (pub .average_rating ) || 0
33+ p( style ="margin: 5px 0 20px 0; color: #555; font-size: 1.1em;" ) #{avgRating .toFixed (1 )} #[ i.fa-solid.fa-star ( style ="color: #FFCC00;" ) ]
34+ a.view-profile-btn ( href =` /pubs/${ pub .id } ` , style ="margin-top: auto;" ) View Pub
35+ else
36+ p( style ="text-align: left;" ) No featured pubs available.
2037
21- section
22- h2 About
23- p TapThat helps you discover pubs, review pints, and see what others recommend. Use the map to find nearby pubs and check ratings before you go.
38+ section.remove-styling ( style ="margin-top: 60px;" )
39+ h2( style ="text-align: left; margin-bottom: 30px; font-size: 2.5em;" ) Quick Actions
40+ .section-row
41+ section.w-third.remove-styling
42+ div.beer-item ( style ="text-align: left; padding: 30px 20px;" )
43+ i.fa-solid.fa-map-location-dot ( style ="font-size: 2.5em; color: #B87333; margin-bottom: 15px;" )
44+ strong( style ="display: block; font-size: 1.2em; margin-bottom: 15px;" ) Interactive Map
45+ a.view-profile-btn ( href ="/map" ) Explore Map
46+ section.w-third.remove-styling
47+ div.beer-item ( style ="text-align: left; padding: 30px 20px;" )
48+ i.fa-solid.fa-beer-mug-empty ( style ="font-size: 2.5em; color: #B87333; margin-bottom: 15px;" )
49+ strong( style ="display: block; font-size: 1.2em; margin-bottom: 15px;" ) Browse Pubs
50+ a.view-profile-btn ( href ="/pubs" ) View Directory
51+ section.w-third.remove-styling
52+ div.beer-item ( style ="text-align: left; padding: 30px 20px;" )
53+ i.fa-solid.fa-users ( style ="font-size: 2.5em; color: #B87333; margin-bottom: 15px;" )
54+ strong( style ="display: block; font-size: 1.2em; margin-bottom: 15px;" ) Community
55+ a.view-profile-btn ( href ="/users" ) View Users
0 commit comments