Skip to content

Instantly share code, notes, and snippets.

@lewislarsen
Last active November 28, 2021 19:54
Show Gist options
  • Save lewislarsen/5ab342132727f4ca6b7d026ad3e52251 to your computer and use it in GitHub Desktop.
Save lewislarsen/5ab342132727f4ca6b7d026ad3e52251 to your computer and use it in GitHub Desktop.
Recreated GitHub's sponsorship page in Tailwind (set tailwind.config.js to Inter Var font too!)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" xmlns:x-transition="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sponsor @taylorotwell on GitHub Sponsors</title>
<link rel="shortcut icon" type="image/jpg" href="https://github.githubassets.com/favicons/favicon.png"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased min-h-screen bg-white" style="color: #24292f">
<nav class="h-16 w-full bg-gray-800">
<div class="flex justify-between text-white">
<div class="space-x-2 mt-4 px-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
stroke-width="2" class="h-8 w-8 text-white inline">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
</svg>
<input type="search"
class="inline bg-transparent rounded-md border border-gray-600 text-white text-sm h-8 w-64"
placeholder="Search or jump to.."/>
<span class="text-sm space-x-2">
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Pull requests') }}</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Issues') }}</a>
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Marketplace') }}</a>
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Explore') }}</a>
</span>
</div>
<div class="space-x-2 mt-5 px-6 text-white">
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 inline">
<path
d="M12.721 5.003L11.255 5c-3.344-.008-6.247 2.709-6.27 6v3.79c0 .79-.1 1.561-.531 2.218l-.287.438C3.73 18.11 4.2 19 4.985 19h14.03c.785 0 1.254-.89.818-1.554l-.287-.438c-.43-.657-.531-1.429-.531-2.219v-3.788c-.04-3.292-2.95-5.99-6.294-5.998z"/>
<path d="M15 19a3 3 0 1 1-6 0"/>
<path d="M12 2a2 2 0 0 1 2 2v1h-4V4a2 2 0 0 1 2-2z"/>
</svg>
</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 inline">
<path d="M12 20v-8m0 0V4m0 8h8m-8 0H4"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline text-white">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<img src="{{ Auth::user()->avatar('s') }}" alt="{{ Auth::user()->name }}"
class="rounded-full h-5 w-5 inline border border-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline mr-2 text-white">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
</div>
</div>
</nav>
<div class="max-w-6xl px-16 py-4 container mx-auto">
<div>
<img src="https://avatars.githubusercontent.com/u/463230?s=32&v=4" alt="{{ trans('Taylor Otwell') }}"
class="h-4 w-4 inline border border-gray-200 rounded-full"/>
<a href="{{ route('sponsor') }}" class="text-sm hover:underline text-indigo-600">{{ trans('Sponsor') }} <span
class="font-semibold">{{ trans('taylorotwell') }}</span></a>
<span class="mx-1 text-gray-500">{{ trans('/') }}</span>
<a href="#" class="text-sm hover:underline">{{ trans('Tier confirmation') }}</a>
<div class="grid grid-cols-11 gap-4 mt-4">
<div class="col-span-4 pr-10">
<div class="text-sm border-b border-gray-200 pb-4 mb-5 mt-1">
<span class="text-gray-600">{{ trans('Sponsor as') }}</span>
<a href="#">
<img src="{{ Auth::user()->avatar('s') }}"
class="ml-1 rounded-full border border-gray-300 h-7 w-7 inline"/>
<span class="font-semibold">{{ Auth::user()->name }}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
</div>
<h4 class="text-base font-bold self-end text-gray-800 mb-2">{{ trans('Selected tier') }}</h4>
<div class="rounded-lg border border-gray-300">
<div
class="border-gray-300 px-2.5 py-3.5">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$4 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-100 rounded-md px-4 py-1">
{{ trans('Edit') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Using Laravel for your personal projects and side projects and really enjoying it? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
</div>
</div>
<div class="col-span-7 px-4">
<h2 class="font-bold text-2xl">{{ trans('Sponsorship summary') }}</h2>
<div class="flex justify-between items-center text-sm my-4">
<div class="font-semibold">{{ trans('Total amount') }}</div>
<div class="font-medium text-gray-800">
{{ trans('$4.00 / month') }}
</div>
</div>
<div class="rounded-lg overflow-hidden border border-indigo-200 bg-indigo-100 px-4 py-4">
<div class="flex justify-between items-center font-bold">
<div>{{ trans('Due today') }}</div>
<div class="text-2xl">{{ trans('$4.00') }}</div>
</div>
</div>
<div class="flex justify-between items-center text-sm mt-6 my-4">
<div>
<div class="font-semibold">{{ trans('Next payment') }}</div>
<div class="text-gray-600 text-xs my-0.5">{{ trans('On Dec 3, 2021') }}</div>
</div>
<div class="font-medium text-gray-800">
{{ trans('$4.00') }}
</div>
</div>
<div class="border-t border-gray-200 py-3 pb-4">
<h4 class="font-bold pt-1">{{ trans('Billing information') }}</h4>
<div class="flex items-stretch py-2 justify-center items-center my-1">
<div class="flex-none pr-3">
<img src="{{ Auth::user()->avatar('s') }}" class="border-gray-200 border rounded-full"/>
</div>
<div class="flex-1 text-left">
<p class="font-bold">{{ Auth::user()->name }}</p>
<p class="text-xs text-gray-600">{{ trans('Personal account') }}</p>
</div>
</div>
</div>
<div class="border-t border-gray-200 py-3 pb-4">
<h4 class="font-bold pt-1">{{ trans('Payment method') }}</h4>
<div class="flex justify-between items-center py-2 my-1">
<div>
<div class="flex items-stretch py-2 justify-center items-center my-1">
<div class="flex-none pr-3">
<img src="https://github.githubassets.com/images/paypal/paypal-small.png"
class="object-scale-down h-12 w-12 bg-gray-100 border-gray-100 border rounded-full"/>
</div>
<div class="flex-1 text-left">
<p class="font-bold">{{ trans('Paypal account') }}</p>
<p class="text-xs text-gray-600">{{ Auth::user()->email }}</p>
</div>
</div>
</div>
<div>
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-100 rounded-md px-4 py-1">
{{ trans('Edit') }}
</button>
</div>
</div>
</div>
<form method="post" action="{{ route('sponsor.pay') }}">
@csrf
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}"/>
<div class="border-t border-gray-200 py-3 pb-4">
<h4 class="font-bold pt-1">{{ trans('Who can see your sponsorship?') }}</h4>
<div class="my-1">
<div>
<div class="flex items-stretch py-2 justify-center items-center">
<div class="flex-none pr-3">
<input type="radio" name="privacy_level" value="public" checked=""
class="border border-gray-300 shadow-sm text-indigo-600 focus:ring focus:ring-indigo-200">
</div>
<div class="flex-1 text-left">
<p class="font-semibold text-sm">{{ trans('Everyone') }}</p>
<p class="text-xs text-gray-600">{{ trans('Others can see that you sponsor taylorotwell.') }}</p>
</div>
</div>
<div class="flex items-stretch py-2 justify-center items-center">
<div class="flex-none pr-3">
<input type="radio" name="privacy_level" value="private"
class="border border-gray-300 shadow-sm text-indigo-600 focus:ring focus:ring-indigo-200">
</div>
<div class="flex-1 text-left">
<p class="font-semibold text-sm">{{ trans('Private') }}</p>
<p class="text-xs text-gray-600">{{ trans('Only taylorotwell will be able to see that you are a sponsor.') }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-200 py-3 pb-4">
<div class="flex items-stretch py-2 justify-center items-center">
<div class="flex-none pr-3">
<input name="email_opt_in" type="checkbox"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
</div>
<div class="flex-1 text-left">
<p class="font-semibold text-sm">{{ trans('Receive email updates from taylorotwell') }}</p>
<p class="text-xs text-gray-600">{{ trans('Your email will not be shared') }}</p>
</div>
</div>
</div>
<div class="border-t border-gray-200 py-3 pb-4">
<h4 class="font-bold pt-1">{{ trans('Are you purchasing as a business?') }}</h4>
<div class="py-2 my-1">
<div x-data="{ toggleBusinessInput: false}">
<div class="flex items-center justify-start mb-2.5">
<button @click="toggleBusinessInput = ! toggleBusinessInput"
:class="toggleBusinessInput ? 'text-gray-800 bg-transparent border-gray-300 hover:bg-gray-100 active:bg-gray-100' : 'text-white bg-indigo-600 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-600'"
class="border-l border-r border-t border-b text-sm px-4 py-1.5 rounded-l-md outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
type="button">
{{ trans('No') }}
</button>
<button @click="toggleBusinessInput = ! toggleBusinessInput"
:class="toggleBusinessInput ? 'text-white bg-indigo-600 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-600' : 'text-gray-800 bg-transparent border-gray-300 hover:bg-gray-100 active:bg-gray-100'"
class="border-t border-b border-r text-sm px-4 py-1.5 rounded-r-md outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
type="button">
{{ trans('Yes') }}
</button>
</div>
<div x-show="toggleBusinessInput" x-cloak x-transition:enter.duration.500ms
x-transition:leave.duration.400ms class="mb-3">
<div>
<label for="sponsors_business_tax_identifier_country"
class="font-semibold text-sm block my-1.5">{{ trans('Country') }}</label>
<select class="rounded-lg border border-gray-300 bg-gray-50 h-9 text-sm w-96"
required="required" name="sponsors_business_tax_identifier[country]"
id="sponsors_business_tax_identifier_country">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia (Plurinational State of)</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CV">Cabo Verde</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo (Democratic Republic of the)</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czechia</option>
<option value="CI">CΓ΄te d'Ivoire</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran (Islamic Republic of)</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea (Democratic People's Republic of)</option>
<option value="KR">Korea (Republic of)</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia (Federated States of)</option>
<option value="MD">Moldova (Republic of)</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MK">North Macedonia</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestine, State of</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="RE">RΓ©union</option>
<option value="BL">Saint BarthΓ©lemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom of Great Britain and Northern Ireland
</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="US">United States of America</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela (Bolivarian Republic of)</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands (British)</option>
<option value="VI">Virgin Islands (U.S.)</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
<option value="SZ">eSwatini</option>
<option value="AX">Γ…land Islands</option>
</select>
</div>
<div class="mt-2">
<label for="tax_region"
class="font-semibold text-sm block my-1.5">{{ trans('Region') }}</label>
<select class="rounded-lg border border-gray-300 bg-gray-50 h-9 text-sm w-96"
required="required" name="sponsors_business_tax_identifier[region]"
id="sponsors_business_tax_identifier_region">
<option>{{ trans('-----') }}</option>
</select>
</div>
<div class="mt-2">
<label for="sponsors_business_tax_identifier_vat_code"
class="font-semibold text-sm block my-1.5">{{ trans('VAT number') }}</label>
<input class="rounded-lg border border-gray-300 bg-gray-50 h-9 text-sm w-96"
type="text" id="sponsors_business_tax_identifier_vat_code"
name="sponsors_business_tax_identifier[vat_code]"/>
</div>
</div>
<div class="mt-2">
<span class="text-sm" x-show="toggleBusinessInput">
{{ trans('GitHub will share your sponsorship amount, country, region, and business tax status with the recipient of your sponsorship to help them calculate and pay taxes where appropriate.')}}
<a href="#" class="text-indigo-600 hover:text-underline text-sm">{{ trans('Learn more about GitHub Sponsors sales tax.') }}</a>
</span>
<span class="text-sm" x-show="!toggleBusinessInput">
{{ trans('GitHub will share your sponsorship amount, country, and region with the recipient of your sponsorship to help them calculate and pay taxes where appropriate.') }}
<a href="#" class="text-indigo-600 hover:text-underline text-sm">{{ trans('Learn more about GitHub Sponsors sales tax.') }}</a>
</span>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-200 py-3 pb-4">
<button type="button"
class="w-full text-center mt-2 text-sm text-white font-semibold bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 rounded-md overflow-hidden py-1.5 px-4 border border-indigo-600 transition duration-250 ease-in-out focus:outline-none focus:border-indigo-900 focus:ring ring-indigo-300 disabled:opacity-25">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="h-4 w-4 inline">
<path
d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.985.985 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95 22 5.216 19.761 3 17 3s-5 3-5 3-2.239-3-5-3z"/>
</svg>
{{ trans('Sponsor taylorotwell') }}
</button>
</div>
</form>
</div>
</div>
</div>
<footer class="px-4 mt-12">
<div class="border-t border-gray-200 w-full pb-6">
<div class="space-x-4 pt-8 flex">
<div>
<a href="#" class="opacity-60">
<svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24"
data-view-component="true" class="inline text-gray-600 mr-2">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<span class="text-xs text-gray-600 mr-4">{{ trans("Β© 2021 GitHub, Inc. ") }}</span>
</div>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Terms') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Privacy') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Security') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Status') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Docs') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Contact GitHub') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Pricing') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('API') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Training') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Blog') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('About') }}
</a>
</div>
</div>
</footer>
</div>
</body>
</html>
<style>
[x-cloak] {
display: none;
}
</style>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sponsor @taylorotwell on GitHub Sponsors</title>
<link rel="shortcut icon" type="image/jpg" href="https://github.githubassets.com/favicons/favicon.png"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="font-sans antialiased min-h-screen bg-white" style="color: #24292f">
<nav class="h-16 w-full bg-gray-800">
<div class="flex justify-between text-white">
<div class="space-x-2 mt-4 px-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"
stroke-width="2" class="h-8 w-8 text-white inline">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
</svg>
<input type="search"
class="inline bg-transparent rounded-md border border-gray-600 text-white text-sm h-8 w-64"
placeholder="Search or jump to.."/>
<span class="text-sm space-x-2">
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Pull requests') }}</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Issues') }}</a>
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Marketplace') }}</a>
<a href="#"
class="hover:text-gray-300 ease-in-out duration-100 font-semibold">{{ trans('Explore') }}</a>
</span>
</div>
<div class="space-x-2 mt-5 px-6 text-white">
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 inline">
<path
d="M12.721 5.003L11.255 5c-3.344-.008-6.247 2.709-6.27 6v3.79c0 .79-.1 1.561-.531 2.218l-.287.438C3.73 18.11 4.2 19 4.985 19h14.03c.785 0 1.254-.89.818-1.554l-.287-.438c-.43-.657-.531-1.429-.531-2.219v-3.788c-.04-3.292-2.95-5.99-6.294-5.998z"/>
<path d="M15 19a3 3 0 1 1-6 0"/>
<path d="M12 2a2 2 0 0 1 2 2v1h-4V4a2 2 0 0 1 2-2z"/>
</svg>
</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 inline">
<path d="M12 20v-8m0 0V4m0 8h8m-8 0H4"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline text-white">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
<a href="#" class="hover:text-gray-300 ease-in-out duration-100">
<img src="{{ Auth::user()->avatar('s') }}" alt="{{ Auth::user()->name }}"
class="rounded-full h-5 w-5 inline border border-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline mr-2 text-white">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
</div>
</div>
</nav>
<div class="max-w-6xl px-16 py-5 container mx-auto">
<div class="mb-4 text-2xl">
{{ trans('Become a sponsor to') }} <a class="font-bold hover:underline"
href="#">{{ trans('Taylor Otwell') }}</a>
</div>
<div class="grid grid-cols-12 gap-20">
<div class="col-span-7 w-full">
<div class="flex items-stretch py-2 justify-center items-center mb-3">
<div class="flex-none px-4">
<a href="#">
<img src="https://avatars.githubusercontent.com/u/463230?s=160&v=4"
class="rounded-full w-20 h-20 border border-gray-300"/>
</a>
</div>
<div class="flex-1 text-left">
<h3 class="-mb-1">
<a class="font-bold text-lg hover:underline" href="#">{{ trans('Taylor Otwell') }}</a>
</h3>
<a href="#" class="text-gray-500 text-sm">{{ trans('taylorotwell') }}</a>
<div class="text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 inline">
<circle cx="12" cy="10" r="3"/>
<path
d="M12 2a8 8 0 0 0-8 8c0 1.892.402 3.13 1.5 4.5L12 22l6.5-7.5c1.098-1.37 1.5-2.608 1.5-4.5a8 8 0 0 0-8-8z"/>
</svg>
<span class="text-sm">{{ trans('Little Rock, AR') }}</span>
</div>
</div>
</div>
<div class="mb-4">
<p>
{{ trans("Hi! I'm Taylor Otwell, the creator of the Laravel framework.") }}
</p>
<p class="mt-4">
{{ trans("My mission is to make developer's lives more enjoyable and peaceful by creating wonderful tools to create web applications. I believe the tools you use to create your application should be functional and beautiful. They should be easy to learn, yet provide the power you need to build amazing solutions.") }}
</p>
<p class="mt-4">{{ trans("I've created a variety of open source solutions to make PHP development productive and enjoyable, including:") }}</p>
<ul class="list-inside list-disc mt-3 ml-5 space-y-1">
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Laravel') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Cashier') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Dusk') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Envoy') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Homestead') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Horizon') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Lumen') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Passport') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Sanctum') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Scout') }}</a></li>
<li><a href="#" class="text-indigo-600 hover:underline">{{ trans('Valet') }}</a></li>
</ul>
<p class="mt-4">
{{ trans("I love working on Laravel and give it to you without expecting anything in return. I find great joy in providing you with the best foundation for your application as I possibly can. However, if you choose to show your appreciation by sponsoring my work on the project, know that I am deeply appreciative.") }}
</p>
<p class="mt-4">
{{ trans("Thanks! πŸ₯°") }}
</p>
<div class="mt-6 pt-4 border-t border-gray-100">
<p class="text-lg text-gray-500 font-light">{{ trans("94 sponsors are funding taylorotwell's work.") }}</p>
<div class="space-x-1 my-3 flex">
<a href="#" class="inline"><img src="https://i.pravatar.cc/40"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=corylaravel"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=dave"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=stev5e"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=taylo5rotwell"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=zacha5ry23"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=zac3454k"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=zack1"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=jeff"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=jeff1"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=avery"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=avery2"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=jim"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=egg"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=test"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=poo"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=yeet"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
</div>
<div class="space-x-1 my-3 flex">
<a href="#" class="inline"><img src="https://i.pravatar.cc/4564664648580"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=4535363353544"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=456645"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=65757"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=785547"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=786686"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=677545"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=4535325325"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=54646464"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=3453552"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=3424322"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=3454525452"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=532455325"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=43563656"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=45353532323"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=54353352362"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=5425425623643"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
</div>
<div class="space-x-1 my-3 flex">
<a href="#" class="inline"><img src="https://i.pravatar.cc/53455375675353"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=4533453535666476"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=3453566367346"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=65464255"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=354374577476"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=3224341452455"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=68758865868"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=9879979969"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=546646464"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=34546454"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=45353335764"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=453635767457"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=4356736756"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=68868768656446"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=65353525234"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=566477553"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
<a href="#"><img src="https://i.pravatar.cc/40?u=5657562425"
class="rounded-full border border-gray-200 h-8 w-8"/></a>
</div>
<button class="hover:underline text-xs text-gray-600">
{{ trans('Show more') }}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline">
<path d="M4 9l8 8 8-8"/>
</svg>
</button>
</div>
<div class="mt-6 pt-4 border-t border-gray-100">
<p class="text-lg text-gray-500 font-light">{{ trans("Featured work") }}</p>
<div class="my-3">
<div class="grid grid-cols-12 gap-4">
<div class="col-span-6">
<div class="border border-gray-300 rounded px-5 py-3">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline">
<path d="M2 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z"/>
<path d="M12 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z"/>
</svg>
<a class="font-bold text-sm hover:underline ml-2"
href="#">{{ trans('laravel/laravel') }}</a>
<p class="text-gray-600 font-normal text-xs my-0.5">{{ trans(" A PHP framework for web artisans.") }}</p>
<div>
<div class="flex justify-start items-center">
<div>
<div class="mr-4 flex my-2">
<div class="h-3 w-3 rounded-full"
style="background-color: #4F5D95"></div>
<span class="text-xs ml-1.5 -mt-0.5">{{ trans('PHP') }}</span>
</div>
</div>
<div>
<div class="text-gray-600 flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 inline">
<path
d="M11.074 2.633c.32-.844 1.531-.844 1.852 0l2.07 5.734c.145.38.514.633.926.633h5.087c.94 0 1.35 1.17.611 1.743L18 14a.968.968 0 0 0-.322 1.092L19 20.695c.322.9-.72 1.673-1.508 1.119l-4.917-3.12a1 1 0 0 0-1.15 0l-4.917 3.12c-.787.554-1.83-.22-1.508-1.119l1.322-5.603A.968.968 0 0 0 6 14l-3.62-3.257C1.64 10.17 2.052 9 2.99 9h5.087a.989.989 0 0 0 .926-.633l2.07-5.734z"/>
</svg>
<span class="text-xs ml-1.5">{{ trans('67,471') }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-6">
<div class="border border-gray-300 rounded px-5 py-3">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline">
<path d="M2 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z"/>
<path d="M12 6s1.5-2 5-2 5 2 5 2v14s-1.5-1-5-1-5 1-5 1V6z"/>
</svg>
<a class="font-bold text-sm hover:underline ml-2"
href="#">{{ trans('laravel/framework') }}</a>
<p class="text-gray-600 font-normal text-xs my-0.5">{{ trans("The Laravel Framework.") }}</p>
<div>
<div class="flex justify-start items-center">
<div>
<div class="mr-4 flex my-2">
<div class="h-3 w-3 rounded-full"
style="background-color: #4F5D95"></div>
<span class="text-xs ml-1.5 -mt-0.5">{{ trans('PHP') }}</span>
</div>
</div>
<div>
<div class="text-gray-600 flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 inline">
<path
d="M11.074 2.633c.32-.844 1.531-.844 1.852 0l2.07 5.734c.145.38.514.633.926.633h5.087c.94 0 1.35 1.17.611 1.743L18 14a.968.968 0 0 0-.322 1.092L19 20.695c.322.9-.72 1.673-1.508 1.119l-4.917-3.12a1 1 0 0 0-1.15 0l-4.917 3.12c-.787.554-1.83-.22-1.508-1.119l1.322-5.603A.968.968 0 0 0 6 14l-3.62-3.257C1.64 10.17 2.052 9 2.99 9h5.087a.989.989 0 0 0 .926-.633l2.07-5.734z"/>
</svg>
<span class="text-xs ml-1.5">{{ trans('25,528') }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-100 text-sm space-y-1">
<a class="text-indigo-600 hover:underline block"
href="#">{{ trans('Learn more about sponsoring developers and organizations.') }}</a>
<a class="text-gray-600 hover:underline hover:text-indigo-600"
href="#">{{ trans('Report abuse') }}</a>
</div>
</div>
</div>
<div class="col-span-5 w-full px-6">
<div class="border border-gray-300 rounded-lg text-sm overflow-hidden">
<div class="border-b border-gray-300 bg-white px-4 py-3.5 text-gray-600">
{{ trans('Sponsor as') }}
<a href="#">
<img src="{{ Auth::user()->avatar('s') }}"
class="ml-1 rounded-full w-7 h-7 border border-gray-300 inline"/>
<span
class="font-bold text-gray-800">{{ trans(':username', ['username' => Auth::user()->name]) }}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 inline">
<path d="M4 9l8 8 8-8"/>
</svg>
</a>
</div>
<div class="px-2 py-1.5 bg-gray-50">
<div class="flex items-stretch py-2 justify-center items-center mb-1">
<div class="flex-none px-3">
<a href="#">
<img src="{{ Auth::user()->avatar('s') }}"
class="ml-1.5 rounded-full w-10 h-10 border border-gray-300 inline"/>
</a>
</div>
<div class="flex-1 text-left text-xs text-gray-900">
{{ trans("Hover over your avatar to review the badge you'll get that shows")}} <a href="#" class="font-semibold hover:underline">{{ trans('@taylorotwell') }}</a> {{ trans("you're a sponsor.") }}
</div>
</div>
</div>
</div>
<div class="mt-6">
<div class="flex justify-between">
<div class="mt-3">
<h4 class="text-base font-bold self-end">{{ trans('Select a tier') }}</h4>
</div>
<div>
<div class="flex items-center justify-center mb-4">
<button
class="text-white bg-indigo-600 border-l border-r border-t border-b border-indigo-600 hover:bg-indigo-600 active:bg-indigo-600 text-sm px-4 py-1.5 rounded-l-md outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
type="button">
{{ trans('Monthly') }}
</button>
<button
class="text-gray-800 bg-transparent border-t border-b border-r border-gray-300 hover:bg-gray-100 active:bg-gray-100 text-sm px-4 py-1.5 rounded-r-md outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
type="button">
{{ trans('One-time') }}
</button>
</div>
</div>
</div>
<div>
<div class="rounded-lg border border-gray-300">
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<input type="number" value="4"
class="rounded-md bg-gray-100 border border-gray-300 mr-1.5 w-20 h-8"/>
<span class="font-bold">{{ trans('a month') }}</span>
</div>
<div class="px-4">
<button
class="text-indigo-600 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-2">{{ trans('Choose a custom amount.') }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$4 a month') }}</span>
</div>
<div class="px-4">
<a href="{{ route('sponsor.pay') }}">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</a>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Using Laravel for your personal projects and side projects and really enjoying it? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$9 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Has Laravel reinvigorated your love for programming? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$19 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Has Laravel helped you in your career and made your development experience more enjoyable? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$49 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Has Laravel seriously changed your life? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("") }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$99 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Has Laravel made your small business more productive? This sponsorship tier gives you the chance to give back via community based support for Laravel. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
<div
class="border-b border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$499 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Laravel is making a significant impact on your small business. Your developers are productive and happy and your customers love giving you money. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
<div
class="border-gray-300 px-2.5 py-3.5 hover:bg-indigo-100 ease-in-out duration-100 transition">
<div class="flex justify-between items-center">
<div class="px-2">
<span class="font-bold">{{ trans('$999 a month') }}</span>
</div>
<div class="px-4">
<button
class="text-gray-800 text-sm border border-gray-300 bg-gray-50 hover:bg-indigo-600 hover:text-white ease-in-out duration-150 transition rounded-md px-4 py-1">
{{ trans('Select') }}
</button>
</div>
</div>
<p class="text-sm mt-2 px-3 text-gray-700">{{ trans("Laravel is the lifeline of your business. Your developers have become one with the framework, churning out code with blinding speed. All proceeds go towards funding full-time staff working on the Laravel framework and ecosystem. πŸ’–") }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="px-4 mt-12">
<div class="border-t border-gray-200 w-full pb-6">
<div class="space-x-4 pt-8 flex">
<div>
<a href="#" class="opacity-60">
<svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24"
data-view-component="true" class="inline text-gray-600 mr-2">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<span class="text-xs text-gray-600 mr-4">{{ trans("Β© 2021 GitHub, Inc. ") }}</span>
</div>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Terms') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Privacy') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Security') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Status') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Docs') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Contact GitHub') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Pricing') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('API') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Training') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('Blog') }}
</a>
<a href="#" class="text-xs text-indigo-600 hover:text-underline mr-5 mt-1 hover:underline">
{{ trans('About') }}
</a>
</div>
</div>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment