Add trademark request form

laravel · Sep 13, 2024 · fdedfff · fdedfff
1 parent aa19ed3
commit fdedfff
Show file tree

Hide file tree

Showing 11 changed files with 1,485 additions and 1,753 deletions.
diff --git a/config/services.php b/config/services.php
@@ -38,4 +38,8 @@
         'zone' => env('CLOUDFLARE_ZONE'),
         'token' => env('CLOUDFLARE_TOKEN'),
     ],
+
+    'recaptcha' => [
+        'site_key' => env('RECAPTCHA_SITE_KEY'),
+    ],
 ];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,14 +9,15 @@
         "@alpinejs/focus": "^3.9.6",
         "@docsearch/css": "^3.3.3",
         "@docsearch/js": "^3.3.3",
+        "@tailwindcss/forms": "^0.5.9",
         "alpinejs": "^3.7.1",
         "autoprefixer": "^10.4.14",
         "clipboard": "^2.0.10",
         "instant.page": "^5.2.0",
         "laravel-vite-plugin": "^0.7.6",
         "postcss": "^8.4.21",
         "postcss-import": "^14.0.0",
-        "tailwindcss": "^3.3.0",
+        "tailwindcss": "^3.4.0",
         "vite": "^4.3.9"
     }
 }
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
@@ -1,5 +1,15 @@
-<a {{ $attributes->merge(['class' => 'group relative inline-flex border border-red-500 focus:outline-none' ]) }}>
-    <span class="w-full inline-flex items-center justify-center self-stretch px-4 py-2 text-sm text-white text-center font-bold uppercase bg-red-500 ring-1 ring-red-500 ring-offset-1 ring-offset-red-500 transform transition-transform group-hover:-translate-y-1 group-hover:-translate-x-1 group-focus:-translate-y-1 group-focus:-translate-x-1">
-        {{ $slot }}
-    </span>
-</a>
+@props(['href' => null])
+
+@if ($href)
+    <a {{ $attributes->merge(['class' => 'group relative inline-flex border border-red-500 focus:outline-none' ]) }}>
+        <span class="w-full inline-flex items-center justify-center self-stretch px-4 py-2 text-sm text-white text-center font-bold uppercase bg-red-500 ring-1 ring-red-500 ring-offset-1 ring-offset-red-500 transform transition-transform group-hover:-translate-y-1 group-hover:-translate-x-1 group-focus:-translate-y-1 group-focus:-translate-x-1">
+            {{ $slot }}
+        </span>
+    </a>
+@else
+    <button {{ $attributes->merge(['class' => 'group relative inline-flex border border-red-500 focus:outline-none' ]) }}>
+        <span class="w-full inline-flex items-center justify-center self-stretch px-4 py-2 text-sm text-white text-center font-bold uppercase bg-red-500 ring-1 ring-red-500 ring-offset-1 ring-offset-red-500 transform transition-transform group-hover:-translate-y-1 group-hover:-translate-x-1 group-focus:-translate-y-1 group-focus:-translate-x-1">
+            {{ $slot }}
+        </span>
+    </button>
+@endif
diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php
@@ -0,0 +1 @@
+<input {{ $attributes->merge(['class' => 'text-red-600 border border-gray-400 focus:outline-none focus:ring-0 focus:border-red-600']) }} type="checkbox">
diff --git a/resources/views/components/forms/input.blade.php b/resources/views/components/forms/input.blade.php
@@ -0,0 +1,3 @@
+@props(['type' => 'text'])
+
+<input {{ $attributes->merge(['class' => 'w-full block px-3 py-2 border border-gray-400 sm:text-sm focus:outline-none focus:ring-0 focus:border-red-600 transition']) }} type="{{ $type }}">
diff --git a/resources/views/components/forms/label.blade.php b/resources/views/components/forms/label.blade.php
@@ -0,0 +1,3 @@
+<label {{ $attributes->merge(['class' => 'block text-sm text-gray-800 font-medium']) }}>
+    {{ $slot }}
+</label>
diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
@@ -0,0 +1 @@
+<textarea {{ $attributes->merge(['class' => 'w-full block px-3 py-2 border border-gray-400 sm:text-sm focus:outline-none focus:ring-0 focus:border-red-600 transition [field-sizing:content]']) }}></textarea>
diff --git a/resources/views/partials/layout.blade.php b/resources/views/partials/layout.blade.php
@@ -79,6 +79,8 @@
     </script>
 
     @include('partials.theme')
+
+    @stack('head')
 </head>
 <body
     x-data="{

diff --git a/resources/views/trademark.blade.php b/resources/views/trademark.blade.php
@@ -1,11 +1,18 @@
 @extends('partials.layout')
 
+@pushOnce('head')
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+@endPushOnce
+
 @section('content')
     @include('partials.header')
 
     <div class="relative overflow-hidden">
         <div class="relative max-w-screen-xl mx-auto px-5 pt-12 md:pt-12">
-            <h1 class="text-4xl font-medium">Trademark Policy</h1>
+            <div class="flex items-center gap-6">
+                <h1 class="text-4xl font-medium">Trademark Policy</h1>
+                <x-button.secondary href="#request-form">Make a Request</x-button.secondary>
+            </div>
 
             <div class="mt-8 space-y-4 max-w-4xl">
                 <p class="italic">This Trademarks and Logos use policy (the "Policy") is based on the Ubuntu trademark policy and published under the CC-BY-SA license. You are welcome to base your own project trademark policies off it, just let others use your changes and give credit to the Ubuntu project as the original source!</p>
@@ -36,6 +43,49 @@
                 </ul>
                 <p>If you wish to have permission for any of the uses above or for any other use which is not specifically referred to in this Policy, please contact us and we'll let you know as soon as possible if your proposed use is permissible. Permission may only be granted subject to certain conditions and these may include the requirement that you enter into an agreement with us to maintain the quality of the product and/or service which you intend to supply at a prescribed level.</p>
             </div>
+
+            <div id="request-form" class="mt-20 scroll-m-20 max-w-xl">
+                <h2 class="text-3xl font-medium">Make a Trademark Request</h2>
+                <form action="https://fieldgoal.io/f/O3Xsqr" method="POST" class="mt-8 space-y-4">
+                    <div>
+                        <x-forms.label for="name">Name</x-forms.label>
+                        <x-forms.input name="name" class="mt-2" required />
+                    </div>
+                    <div>
+                        <x-forms.label for="organization">Organization</x-forms.label>
+                        <x-forms.input name="organization" class="mt-2" required />
+                    </div>
+                    <div>
+                        <x-forms.label for="email">Email</x-forms.label>
+                        <x-forms.input name="email" class="mt-2" required type="email" />
+                    </div>
+                    <div class="!mt-8">
+                        <x-forms.label>Requested Use (check all that apply)</x-forms.label>
+                        <div class="mt-4 flex items-start gap-2.5">
+                            <x-forms.checkbox id="requested_use_1" name="requested_use" value="Commercial Use (training, event, or other services)" />
+                            <x-forms.label for="requested_use_1" class="!font-normal">Commercial Use (training, event, or other services)</x-forms.label>
+                        </div>
+                        <div class="mt-2 flex items-start gap-2.5">
+                            <x-forms.checkbox id="requested_use_2" name="requested_use" value="Commercial Use (training, event, or other services)" />
+                            <x-forms.label for="requested_use_2" class="!font-normal">Software Product</x-forms.label>
+                        </div>
+                        <div class="mt-2 flex items-start gap-2.5">
+                            <x-forms.checkbox id="requested_use_3" name="requested_use" value="Commercial Use (training, event, or other services)" />
+                            <x-forms.label for="requested_use_3" class="!font-normal">Domain Name or URL</x-forms.label>
+                        </div>
+                        <div class="mt-2 flex items-start gap-2.5">
+                            <x-forms.checkbox id="requested_use_4" name="requested_use" value="Commercial Use (training, event, or other services)" />
+                            <x-forms.label for="requested_use_4" class="!font-normal">Another type of service</x-forms.label>
+                        </div>
+                    </div>
+                    <div>
+                        <x-forms.label for="details">Details</x-forms.label>
+                        <x-forms.textarea name="details" class="mt-2 min-h-[160px]" required />
+                    </div>
+                    <div class="min-h-[78px] g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>
+                    <x-button.primary type="submit" class="w-full !mt-8">Submit Request</x-button.primary>
+                </form>
+            </div>
         </div>
     </div>
 @stop
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
 import colors from 'tailwindcss/colors';
+import forms from '@tailwindcss/forms';
 
 const accentColors = {
     vapor: '#25c4f2',
@@ -130,5 +131,5 @@ export default {
         pattern: new RegExp(`bg-(${Object.keys(accentColors).join('|')})`),
     }
   ],
-  plugins: [],
+  plugins: [forms],
 }