Skip to content

Commit c468653

Browse files
rsmithlalrsmithlal
committed
improved community engine info page
Carosel, img attribution, cover image overlay, improved copywriting
1 parent 7642715 commit c468653

File tree

2 files changed

+126
-15
lines changed

2 files changed

+126
-15
lines changed

‎app/assets/images/better_together/helena-lopes-PGnqT0rXWLs-unsplash.jpg‎

4.63 MB
Loading

‎app/views/better_together/static_pages/community_engine.html.erb‎

Lines changed: 126 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,49 @@
1-
<!-- Hero Section with Background Image -->
2-
<section class="text-center" style="background: url(<%= asset_path('better_together/unsplash-community-1.jpeg') %>) no-repeat center center; background-size: cover;">
3-
<div class="container py-5 my-5 text-white">
1+
<!-- Hero Section with Carousel -->
2+
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
3+
<div class="carousel-inner">
4+
<div class="carousel-item active" style="background: url(<%= asset_path('better_together/unsplash-community-1.jpeg') %>) no-repeat center center; background-size: cover; height: 80vh;">
5+
<div class="overlay"></div>
6+
<!-- Placeholder Attribution -->
7+
<div class="attribution text-white">
8+
Photo by <a href="#" class="text-white">[Photographer Name]</a> on <a href="#" class="text-white">Unsplash</a>
9+
</div>
10+
</div>
11+
<div class="carousel-item" style="background: url(<%= asset_path('better_together/unsplash-collaborate-1.jpeg') %>) no-repeat center center; background-size: cover; height: 80vh;">
12+
<div class="overlay"></div>
13+
<!-- Placeholder Attribution -->
14+
<div class="attribution text-white">
15+
Photo by <a href="#" class="text-white">[Photographer Name]</a> on <a href="#" class="text-white">Unsplash</a>
16+
</div>
17+
</div>
18+
<div class="carousel-item" style="background: url(<%= asset_path('better_together/unsplash-community-2.jpeg') %>) no-repeat center center; background-size: cover; height: 80vh;">
19+
<div class="overlay"></div>
20+
<!-- Placeholder Attribution -->
21+
<div class="attribution text-white">
22+
Photo by <a href="#" class="text-white">[Photographer Name]</a> on <a href="#" class="text-white">Unsplash</a>
23+
</div>
24+
</div>
25+
</div>
26+
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
27+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
28+
<span class="visually-hidden">Previous</span>
29+
</a>
30+
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
31+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
32+
<span class="visually-hidden">Next</span>
33+
</a>
34+
</div>
35+
36+
<!-- Fixed Content -->
37+
<div class="carousel-content text-white">
38+
<div class="container py-5 my-5 text-center">
439
<div class="row py-lg-5">
540
<div class="col-lg-8 mx-auto">
641
<h1 class="display-4 fw-bold">Better Together<br /> Community Engine</h1>
742
<p class="lead">
8-
A platform dedicated to enhancing community engagement and collaboration.
43+
Enhancing community engagement and collaboration.
44+
</p>
45+
<p class="lead">
46+
A revolutionary open-source platform built to connect, share, and collaborate effectively within communities.
947
</p>
1048
<p>
1149
<a href="#" class="btn btn-primary my-2">Join the Community</a>
@@ -14,7 +52,7 @@
1452
</div>
1553
</div>
1654
</div>
17-
</section>
55+
</div>
1856

1957
<!-- Features Section -->
2058
<section class="py-5 bg-light">
@@ -27,8 +65,9 @@
2765
<div class="card-body">
2866
<h5 class="card-title">Collaborative Tools</h5>
2967
<p class="card-text">
30-
Engage with interactive tools designed for maximum productivity and collaboration among community members.
68+
Tools designed for maximum productivity, enabling seamless collaboration among community members. Share documents, communicate in real-time, and manage projects with ease.
3169
</p>
70+
<a href="#" class="btn btn-primary">Discover More</a>
3271
</div>
3372
</div>
3473
</div>
@@ -38,8 +77,9 @@
3877
<div class="card-body">
3978
<h5 class="card-title">Open Source</h5>
4079
<p class="card-text">
41-
Built with transparency and adaptability in mind, allowing for community-driven growth and development.
80+
Built with transparency and adaptability, promoting community-driven growth and development. Contribute to the codebase, customize features, and join our community of developers.
4281
</p>
82+
<a href="#" class="btn btn-primary">Get Involved</a>
4383
</div>
4484
</div>
4585
</div>
@@ -49,8 +89,9 @@
4989
<div class="card-body">
5090
<h5 class="card-title">Inclusive Environment</h5>
5191
<p class="card-text">
52-
A safe, welcoming, and inclusive environment for all members to share, learn, and grow.
92+
A safe, welcoming space for all members to share, learn, and grow, ensuring accessibility for everyone. Participate in workshops, events, and discussions that foster inclusivity.
5393
</p>
94+
<a href="#" class="btn btn-primary">Join Us</a>
5495
</div>
5596
</div>
5697
</div>
@@ -60,25 +101,95 @@
60101

61102
<!-- Interspersed Hero Images and Content Sections -->
62103
<!-- Section with Background Image -->
63-
<section class="text-center" style="background: url(<%= asset_path('better_together/unsplash-collaborate-1.jpeg') %>) no-repeat center center; background-size: cover;">
104+
<section class="text-center banner-section" style="background: url(<%= asset_path('better_together/unsplash-collaborate-1.jpeg') %>) no-repeat center center; background-size: cover;">
105+
<div class="overlay"></div>
64106
<div class="container py-5 my-5 text-white">
65107
<h2>Collaborate Effectively</h2>
66-
<p>Join projects, share ideas, and collaborate in real-time with community tools that empower.</p>
108+
<p>Join projects, share ideas, and collaborate in real-time with community tools that empower you to make a difference.</p>
109+
<a href="#" class="btn btn-primary">Start Collaborating</a>
110+
<!-- Placeholder Attribution -->
111+
<div class="attribution text-white">
112+
Photo by <a href="#" class="text-white">[Photographer Name]</a> on <a href="#" class="text-white">Unsplash</a>
113+
</div>
67114
</div>
68115
</section>
69116

70117
<!-- Additional Info Section -->
71118
<section class="py-5">
72119
<div class="container">
73-
<h2 class="text-center">Community Impact</h2>
74-
<p class="lead text-center">See how our community is making a real-world impact and driving change.</p>
120+
<div class="row">
121+
<div class="col-md-6">
122+
<h2 class="text-center">Community Impact</h2>
123+
<p class="lead">See how our community is making a real-world impact and driving change. Our projects span environmental conservation, social justice, education, and more.</p>
124+
<p>Join our efforts to create a positive impact. Whether it's organizing local events, participating in global initiatives, or supporting grassroots movements, there's a place for you.</p>
125+
<a href="#" class="btn btn-primary">Learn About Our Impact</a>
126+
</div>
127+
<div class="col-md-6 text-center">
128+
<%= image_tag 'better_together/helena-lopes-PGnqT0rXWLs-unsplash.jpg', alt: 'Community Impact', class: 'img-fluid has-attribution' %>
129+
<!-- Specific Attribution -->
130+
<div class="attribution text-white">
131+
Photo by <a href="https://unsplash.com/@wildlittlethingsphoto?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" class="text-white">Helena Lopes</a> on <a href="https://unsplash.com/photos/four-person-hands-wrap-around-shoulders-while-looking-at-sunset-PGnqT0rXWLs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" class="text-white">Unsplash</a>
132+
</div>
133+
</div>
134+
</div>
75135
</div>
76136
</section>
77137

78138
<!-- Another Interspersed Image Section with CSS Class for Overlay -->
79-
<section class="text-center image-overlay-container" style="background: url(<%= asset_path('better_together/unsplash-community-2.jpeg') %>) no-repeat center center; background-size: cover;">
80-
<div class="container py-5 my-5 image-overlay">
139+
<section class="text-center banner-section" style="background: url(<%= asset_path('better_together/unsplash-community-2.jpeg') %>) no-repeat center center; background-size: cover;">
140+
<div class="overlay"></div>
141+
<div class="container py-5 my-5 text-white">
81142
<h2>Innovate Together</h2>
82-
<p>Explore new possibilities and innovations sparked by community-driven initiatives.</p>
143+
<p>Explore new possibilities and innovations sparked by community-driven initiatives. Share your ideas and collaborate with others to bring them to life.</p>
144+
<a href="#" class="btn btn-primary">Join the Innovation</a>
145+
<!-- Placeholder Attribution -->
146+
<div class="attribution text-white">
147+
Photo by <a href="#" class="text-white">[Photographer Name]</a> on <a href="#" class="text-white">Unsplash</a>
148+
</div>
83149
</div>
84150
</section>
151+
152+
<!-- Custom CSS for Carousel Content Positioning and Overlays -->
153+
<style>
154+
.carousel-content {
155+
position: absolute;
156+
top: 50%;
157+
left: 50%;
158+
transform: translate(-50%, -50%);
159+
width: 100%;
160+
padding: 0 15px;
161+
}
162+
.carousel-inner {
163+
height: 80vh;
164+
position: relative;
165+
}
166+
.carousel-item {
167+
height: 80vh;
168+
position: relative;
169+
}
170+
.overlay {
171+
position: relative;
172+
top: 0;
173+
left: 0;
174+
width: 100%;
175+
height: 100%;
176+
background: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
177+
}
178+
.banner-section {
179+
min-height: 50vh; /* Set a scalable minimum height */
180+
position: relative;
181+
}
182+
.attribution {
183+
position: absolute;
184+
bottom: 10px;
185+
right: 10px;
186+
font-size: 0.8rem;
187+
text-align: right;
188+
}
189+
190+
img.has-attribution + .attribution {
191+
position: relative;
192+
bottom: 20px;
193+
right: 20px;
194+
}
195+
</style>

0 commit comments

Comments
 (0)