From d4fb9e473b2a2e2a463e033a38d50d6a4b3d9279 Mon Sep 17 00:00:00 2001 From: Alicia Paz Date: Thu, 4 Apr 2024 13:12:40 -0600 Subject: [PATCH] Update component content slot method (#544) --- app/views/about_us/show.html.slim | 120 +++++++++++++++--------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/app/views/about_us/show.html.slim b/app/views/about_us/show.html.slim index 6d4b4cb74..49ec9ff83 100644 --- a/app/views/about_us/show.html.slim +++ b/app/views/about_us/show.html.slim @@ -1,34 +1,34 @@ div class="flex flex-col text-gray-2" /* Banner */ - div class="relative bg-seafoam h-60" - div class="flex justify-around overflow-hidden flew-row h-60" + div class="relative h-60 bg-seafoam" + div class="flex overflow-hidden justify-around h-60 flew-row" div = inline_svg_tag 'new-blur-left.svg', size:'723*288' div = inline_svg_tag 'new-blur-right.svg', size:'723*288' - div class="flex flex-col items-center justify-center h-full absolute top-0 left-0 right-0" - h2 class="px-5 text-3xl font-bold text-center leading-10 text-blue-dark" + div class="flex absolute top-0 right-0 left-0 flex-col justify-center items-center h-full" + h2 class="px-5 text-3xl font-bold leading-10 text-center text-blue-dark" | Start with change in your
community - div class="absolute hidden fill-current top-20 left-80 text-blue-dark lg:block" + div class="hidden absolute top-20 left-80 fill-current text-blue-dark lg:block" = inline_svg_tag 'simple-star.svg', size: '22*22' - div class="absolute hidden fill-current top-12 right-96 text-blue-dark lg:block" + div class="hidden absolute top-12 right-96 fill-current text-blue-dark lg:block" = inline_svg_tag 'simple-heart.svg', size: '22*22' - div class="absolute hidden fill-current bottom-12 right-64 text-blue-dark lg:block" + div class="hidden absolute bottom-12 right-64 fill-current text-blue-dark lg:block" = inline_svg_tag 'simple-star.svg', size: '22*22' /* Mission and Vision*/ - div class="flex flex-col items-center justify-center px-6 py-20 bg-white" + div class="flex flex-col justify-center items-center px-6 py-20 bg-white" div class="flex flex-col w-full max-w-4xl" div class="flex flex-col justify-between lg:flex-row lg:mb-20" div class="flex justify-center mb-6 lg:hidden lg:mb-0" = inline_svg_tag "pablita-4.svg", size: "313*176" - div class="relative flex flex-col text-center" + div class="flex relative flex-col text-center" div = inline_svg_tag "blur-background-3.svg", size: "345*220" - div class="absolute top-0 left-0 right-0 lg:top-1/4" + div class="absolute top-0 right-0 left-0 lg:top-1/4" h2 class="mb-6 text-2xl font-bold text-gray-2" | Our Mission p class="mx-auto text-gray-2 max-w-327px" @@ -39,23 +39,23 @@ div class="flex flex-col text-gray-2" div class="flex flex-col justify-between lg:flex-row" - div class="flex items-center justify-center mb-6 lg:mb-0" + div class="flex justify-center items-center mb-6 lg:mb-0" = inline_svg_tag "pablita-5.svg", size: "403*269" - div class="relative flex flex-col text-center" + div class="flex relative flex-col text-center" div = inline_svg_tag "blur-background-4.svg", size: "306*219" - div class="absolute top-0 left-0 right-0 lg:top-1/4" + div class="absolute top-0 right-0 left-0 lg:top-1/4" h2 class="mb-6 text-2xl font-bold text-gray-2" | Our Vision p class="mx-auto text-gray-2 max-w-327px" ' A world where finding help and serving others is easy. /* Our Objectives */ - div class="flex flex-col items-center justify-center w-full px-6 pt-20 text-center bg-blue-gradient-3 pb-14" + div class="flex flex-col justify-center items-center px-6 pt-20 pb-14 w-full text-center bg-blue-gradient-3" h3 class="mb-8 text-2xl font-bold uppercase text-blue-dark lg:mb-16" | Our Objectives div class="flex flex-col justify-center w-full max-w-5xl lg:flex-row lg:justify-around" - div class="flex flex-col items-center justify-center mx-auto mb-10 text-center max-w-270px" + div class="flex flex-col justify-center items-center mx-auto mb-10 text-center max-w-270px" div class="relative mb-6" = image_tag 'hands-table-2.png', size:'268x206', class:'rounded-lg' = inline_svg_tag 'sticker-sparkle.svg', size:'39', class:'absolute top-1/2 -left-7' @@ -65,7 +65,7 @@ div class="flex flex-col text-gray-2" ' Connect those in need with resources in their community. Foster greater and deeper | connections between volunteers, donors, and nonprofits. - div class="flex flex-col items-center justify-center mx-auto mb-10 text-center max-w-270px" + div class="flex flex-col justify-center items-center mx-auto mb-10 text-center max-w-270px" div class="relative mb-6" = image_tag 'friends-2.png', size:'268x206', class:'rounded-lg' = inline_svg_tag 'sticker-heart.svg', size:'39', class:'absolute top-6 -right-7' @@ -75,7 +75,7 @@ div class="flex flex-col text-gray-2" ' Equip communities with the tools they need to help their local members. Empower users | to form their own specialized communities of desired change. - div class="flex flex-col items-center justify-center mx-auto mb-10 text-center max-w-270px" + div class="flex flex-col justify-center items-center mx-auto mb-10 text-center max-w-270px" div class="relative mb-6" = image_tag 'hands-2.png', size:'268x206', class:'rounded-lg' = inline_svg_tag 'sticker-sparkle.svg', size:'39', class:'absolute bottom-5 -right-5' @@ -86,17 +86,17 @@ div class="flex flex-col text-gray-2" | based on giving rather than receiving, compassion over competition. /* Meet the Trustees */ - div class="flex flex-col items-center justify-center w-full px-6 pt-20 bg-white" + div class="flex flex-col justify-center items-center px-6 pt-20 w-full bg-white" div h2 class="mb-12 text-2xl font-bold text-center uppercase text-blue-dark" | Meet the Trustees - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Stephanie Morrison", job_title: "President & Founder", img_url: "stephanie.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Stephanie Morrison's immersion in the nonprofit world spans many decades, locations and experiences - as ' a beneficiary of services, volunteer, donor, supporter, intern with nonprofits as well as a nonprofit @@ -148,17 +148,17 @@ div class="flex flex-col text-gray-2" ' Alongside her relentless pursuit of kindness and connection, Stephanie's passions include any activity ' on or near the water, traveling, health & wellness, country music, and spending time with her family and friends. br - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Emily Longfellow", job_title: "Vice President", img_url: "emily.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Emily Longfellow has made it her lifelong mission to help people live happier and healthier ' lives. Her focus on balancing physical, mental, emotional and spiritual health makes her a @@ -196,17 +196,17 @@ div class="flex flex-col text-gray-2" ' enthusiast, and a volunteer coach for girls’ field hockey and lacrosse. But even with all her many successes ' and accomplishments, Emily's favorite role of all is of course as mom. She lives in Oklahoma City with her ' husband, three young sons, and three dogs. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Erikka Moreno", job_title: "Secretary", img_url: "erikka.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Growing up in Southern California, Erikka Moreno was extremely active from the start. Her passion for problem ' solving and helping others led her to numerous school activities, most prominently many years of competitive sports. @@ -238,17 +238,17 @@ div class="flex flex-col text-gray-2" ' While her days of competing in collegiate sports may be over, Erikka still maintains an active lifestyle ' and prioritizes health and fitness in her daily life. Erikka lives in Boston with her 1 year old golden ' retriever, Lola. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Gail Wilsey-Morrison", job_title: "Treasurer", img_url: "gail.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Gail Wilsey-Morrison’s passion in life is serving her family, friends, and community. Growing up in the ' small resort town of Cape May as the daughter of two teachers, the stage was set for a life full of compassion, @@ -292,17 +292,17 @@ div class="flex flex-col text-gray-2" ' admiration, respect and care. Gail was honored with the 2022 Arthur T. Birsh Supporter of the Year Award for her ' service and dedication to Giving Connection. She looks forward to continuing her support and ultimately making ' the world a better place. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Kelly McNabb", job_title: "Trustee", img_url: "kelly.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Kelly earned her Bachelor’s degree in Human Biology from Stanford University, ' where she was granted Phi Beta Kappa honors. @@ -330,17 +330,17 @@ div class="flex flex-col text-gray-2" ' Most notably, Kelly helped to establish the Dropbox product donation program, of which she has been the manager ' for the last six years. Since its inception, this program has donated over forty-thousand licenses to two-thousand ' nonprofits around the world. Kelly has had a hand in facilitating each of these donations. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Makala Kaupalolo", job_title: "Trustee", img_url: "makala.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Born and raised in Maui, Hawaii, Makala attended Stanford University, where she was involved in a variety of ' volunteer and student activities. She served as President of Project Dosti, through which she volunteered at @@ -359,17 +359,17 @@ div class="flex flex-col text-gray-2" br ' Makala graduated from Harvard Law School in 2017. Since then, she has worked in New York City and Palo Alto as an Associate at ' Skadden, Arps, Slate, Meagher & Flom LLP in the Financial Institutions Group (Mergers and Acquisitions). - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Karen Nesbitt", job_title: "Trustee", img_url: "karen2.png"\ ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Karen was born and raised in Montgomery, Ohio, but spent several years of her early childhood in Kobe, Japan. ' Arriving not knowing the culture or language, she quickly learned the value of openness and humility, and the @@ -415,17 +415,17 @@ div class="flex flex-col text-gray-2" ' Japanese words for “heart”. Karen feels blessed to be a part of an incredibly talented, passionately patient ' focused team, developing a cutting edge mitral valve regurgitation therapy to help suffering patients live ' longer, healthier, and more productive lives – exactly what she set out to do during that one defining assembly in high school. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Frances Wilsey", job_title: "Honorary Board Member & Chief Joy Officer", img_url: "fran.png", ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" ' Frances Wilsey, Stephanie's aunt and Gail's sister, grew up in the small town on the Jersey Shore of Cape May, NJ. ' She has served her community as the unofficial town mayor and social director for decades. Fran has many @@ -458,23 +458,23 @@ div class="flex flex-col text-gray-2" ' Williams Syndrome & everything in between) while also teaching us life lessons of love, joy, and happiness. They wrote a ' children’s book about Fran called "Super Fran!" In addition, they rewrote the Keith Urban song “Fighter” and created ' a music video to celebrate Gail on her 62nd birthday. All of which can be found at - a href="https://www.fransayspodcast.com/" class="font-bold text-blue-medium mt-2" fransayspodcast.com + a href="https://www.fransayspodcast.com/" class="mt-2 font-bold text-blue-medium" fransayspodcast.com br br ' As Chief Joy Officer, Fran is responsible for infusing joy into everything she does which is infectious to every person ' she meets. While she is not a voting or official member of the Board, Fran provides inspiration, comic relief, ' constant joy and a grounding spirit that reminds us all that kindness and giving are the most important parts of life. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Monica Cook", job_title: "Nonprofit Outreach Coordinator", img_url: "monica_cook.jpg", ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" | Monica joined the Giving Connection team in January 2023 for an internship as the Nonprofit Outreach Coordinator, | focusing her attention on building relationships in the Nashville community. Monica is a freshman at Lipscomb University @@ -489,17 +489,17 @@ div class="flex flex-col text-gray-2" | In her free time Monica enjoys participating in dance, which she has been practicing consistently for ten years. Monica | cares deeply about making an impact in her community. She takes advantage of every learning opportunity and is excited | to incorporate her experience as an intern with Giving Connection into her future aspiration of becoming a lawyer. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Mohraeil Rezk", job_title: "Community Outreach Coordinator", img_url: "mohraeil_razk.jpg", ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" | Mohraeil was born in Asyut, Egypt and immigrated to Nashville, TN as a young child. Growing up in a low income, | minority community, she witnessed firsthand the disparities underprivileged populations encounter. She joined @@ -519,17 +519,17 @@ div class="flex flex-col text-gray-2" | learners. She is currently working with her church to establish a Sunday school service for youth with special needs. | She is incredibly grateful and excited to work with Giving Connection, hoping to use her experience here as a foundation for her | future career in law and nonprofit work. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Molly Buffenbarger", job_title: "Community Outreach Coordinator", img_url: "Molly_Buffenbarger.png", ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" | Molly Buffenbarger started her internship at Giving Connection in June 2023 as the Community Outreach Coordinator. Molly grew up in Atlanta, Georgia | and is now a rising senior at Vanderbilt University. At Vanderbilt, she is double majoring in Medicine, Health, & Society and English—with a concentration @@ -546,17 +546,17 @@ div class="flex flex-col text-gray-2" | at Vanderbilt. Within Vanderbilt Dance Marathon, Molly has continuously worked on the outreach side of the organization, where she has served as the Director | of High Schools, Director of Alumni Relations, and Director of Stewardship. Molly remains ecstatic to apply the outreach skills she has gained from Dance Marathon | to the greater Nashville community through Giving Connection. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end - div class="w-full max-w-4xl pb-12 mb-16 border-b border-blue-gradient-2 last:border-b-0" + div class="pb-12 mb-16 w-full max-w-4xl border-b border-blue-gradient-2 last:border-b-0" = render BioCard::Component.new(\ name: "Astha Bhandari", job_title: "Web Development Fellow", img_url: "astha.jpg", ) do |c| - - c.biography do + - c.with_biography do p class="mb-3 text-gray-2" | Astha Bhandari is joining us through Stanford University's Haas Center for Public Service for an internship as our Web Development Fellow. She was | awarded a stipend for students specifically pursuing CS + Social Good. She will be focused on improving our platform's user experience as well as @@ -577,21 +577,21 @@ div class="flex flex-col text-gray-2" | Astha believes that technology is the way of the future, there is no going around it. She wants to embrace the good that technology has to offer while realizing | there are many aspects that can be improved. Astha wants to help build a better future for upcoming generations by making the world a little more ethical, | one line of code at a time. - a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold text-blue-medium cursor-pointer" Read More + a data-read-more-target="readMoreButton" data-action="read-more#toggleVisibility" class="font-bold cursor-pointer text-blue-medium" Read More end end // Youtube Video - div class="w-full max-w-4xl pb-12 mb-16 h-full" + div class="pb-12 mb-16 w-full max-w-4xl h-full" iframe src="https://www.youtube.com/embed/H62FCqZ1cAg?rel=0" class="w-full h-64 md:h-500px" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" - div class="relative bg-seafoam h-96" - div class="flex justify-around overflow-hidden flew-row h-96" + div class="relative h-96 bg-seafoam" + div class="flex overflow-hidden justify-around h-96 flew-row" div = inline_svg_tag 'new-blur-left.svg', size:'723*384' div = inline_svg_tag 'new-blur-right.svg', size:'723*384' - div class="absolute top-0 left-0 right-0 max-w-md mx-auto text-center" - h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11" + div class="absolute top-0 right-0 left-0 mx-auto max-w-md text-center" + h2 class="px-5 pt-20 pb-11 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark" | Want to connect with nonprofits in your community? = link_to "START YOUR SEARCH", search_path, class:'c-button inline-block my-1 text-white bg-blue-dark'