+ <h2 class="text-2xl font-semibold mb-3">Request a Pickup</h2>
+ <form method="post" action="{% url 'public_frontend:pickup_request' %}" class="bg-white rounded-lg shadow-md p-4 grid gap-4">
+ {% csrf_token %}
+ <div>
+ <label class="block text-sm font-medium mb-1">Name</label>
+ <input type="text" name="name" value="{{ pickup_form.name.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+ </div>
+ <div class="grid md:grid-cols-2 gap-4">
+ <div>
+ <label class="block text-sm font-medium mb-1">Email</label>
+ <input type="email" name="email" value="{{ pickup_form.email.value|default:'' }}" class="w-full border rounded px-3 py-2">
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Phone</label>
+ <input type="text" name="phone" value="{{ pickup_form.phone.value|default:'' }}" class="w-full border rounded px-3 py-2">
+ </div>
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Pickup Address</label>
+ <textarea name="address" required class="w-full border rounded px-3 py-2" rows="3">{{ pickup_form.address.value|default:'' }}</textarea>
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Materials / Notes</label>
+ <textarea name="materials" class="w-full border rounded px-3 py-2" rows="4">{{ pickup_form.materials.value|default:'' }}</textarea>
+ </div>
+ <div>
+ <button class="btn-primary" type="submit">Submit Request</button>
+ </div>
+ </form>
+ </section>
+
+ {# Blog Section #}
+ <section id="blog">
+ <div class="flex items-center justify-between mb-3">
+ <h2 class="text-2xl font-semibold">Industry Insights</h2>
+ <a href="{% url 'public_frontend:blog_list' %}" class="text-blue-700 hover:underline">View all</a>
+ </div>
+ <div class="grid md:grid-cols-3 gap-4">
+ {% for p in posts %}
+ <a href="{% url 'public_frontend:blog_detail' p.slug %}" class="block p-4 border rounded bg-white hover:bg-gray-50 transition">
+ <div class="text-sm text-gray-500">{{ p.published_at|date:'M j, Y' }}</div>
+ <div class="font-medium">{{ p.title }}</div>
+ <div class="text-sm text-gray-600 line-clamp-2">{{ p.excerpt|default:p.content|striptags|truncatechars:120 }}</div>
+ </a>
+ {% empty %}
+ <div class="text-gray-500 p-4 bg-white rounded-lg shadow-md col-span-full">No posts yet.</div>
{% endfor %}
</div>
</section>
+
+ {# Contact Section #}
+ <section id="contact">
+ <h2 class="text-2xl font-semibold mb-3">Contact Us</h2>
+ <form method="post" action="{% url 'public_frontend:contact' %}" class="bg-white rounded-lg shadow-md p-4 grid gap-4">
+ {% csrf_token %}
+ <div class="grid md:grid-cols-2 gap-4">
+ <div>
+ <label class="block text-sm font-medium mb-1">Name</label>
+ <input type="text" name="name" value="{{ contact_form.name.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Email</label>
+ <input type="email" name="email" value="{{ contact_form.email.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+ </div>
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Subject</label>
+ <input type="text" name="subject" value="{{ contact_form.subject.value|default:'' }}" class="w-full border rounded px-3 py-2">
+ </div>
+ <div>
+ <label class="block text-sm font-medium mb-1">Message</label>
+ <textarea name="message" rows="5" class="w-full border rounded px-3 py-2">{{ contact_form.message.value|default:'' }}</textarea>
+ </div>
+ <div>
+ <button class="btn-primary" type="submit">Send Message</button>
+ </div>
+ </form>
+ </section>
</div>
<style>
-.btn-primary{background:#1d4ed8;color:white;padding:.5rem .75rem;border-radius:.375rem}
-.btn-outline{border:1px solid #cbd5e1;padding:.5rem .75rem;border-radius:.375rem}
+ html {
+ scroll-behavior: smooth;
+ }
+ .btn-primary { background:#1d4ed8; color:white; padding:.625rem 1rem; border-radius:.375rem; font-weight:500; transition: background-color 0.2s; }
+ .btn-primary:hover { background:#1e40af; }
+ .btn-outline { border:1px solid #cbd5e1; padding:.625rem 1rem; border-radius:.375rem; font-weight:500; transition: background-color 0.2s, border-color 0.2s; }
+ .btn-outline:hover { background-color: #f8fafc; border-color: #94a3b8; }
+ section { scroll-margin-top: 80px; } /* Offset for fixed header */
</style>
{% endblock %}
-
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
|
|
| 31 |
|
|
| 32 |
|
|
|
||
| 5 | 5 |
|
| 6 | 6 |
|
| 7 | 7 |
|
| 8 |
|
|
| 8 | 9 |
|
| 9 | 10 |
|
| 10 | 11 |
|
|
||
| 13 | 14 |
|
| 14 | 15 |
|
| 15 | 16 |
|
| 16 |
|
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
|
|
| 31 |
|
|
| 32 |
|
|
| 33 |
|
|
| 34 |
|
|
| 35 |
|
|
| 36 |
|
|
| 37 |
|
|
| 38 |
|
|
| 39 |
|
|
| 40 |
|
|
| 41 |
|
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
|
|
| 50 |
|
|
| 51 |
|
|
| 52 |
|
|
| 53 |
|
|
| 54 |
|
|
| 55 |
|
|
| 56 |
|
|
| 57 |
|
|
| 58 |
|
|
| 59 |
|
|
| 60 |
|
|
| 61 |
|
|
| 62 |
|
|
|
||
| 6 | 6 |
|
| 7 | 7 |
|
| 8 | 8 |
|
| 9 |
|
|
| 9 | 10 |
|
| 10 | 11 |
|
| 11 | 12 |
|
|
||
| 24 | 25 |
|
| 25 | 26 |
|
| 26 | 27 |
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
|
|
| 31 |
|
|
| 32 |
|
|
| 33 |
|
|
| 34 |
|
|
| 35 |
|
|
| 36 |
|
|
| 37 |
|
|
| 38 |
|
|
| 39 |
|
|
| 40 |
|
|
| 41 |
|
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
|
|
| 50 |
|
|
| 51 |
|
|
| 52 |
|
|
| 53 |
|
|
| 54 |
|
|
| 28 | 55 |
|
| 29 | 56 |
|
| 30 | 57 |
|
|
||
| 60 | 87 |
|
| 61 | 88 |
|
| 62 | 89 |
|
| 90 |
|
|
| 91 |
|
|
| 92 |
|
|
| 93 |
|
|
| 94 |
|
|
| 95 |
|
|
| 96 |
|
|
| 97 |
|
|
| 98 |
|
|
| 63 | 99 |
|
| 64 | 100 |
|
| 65 | 101 |
|
|
||
| 168 | 168 |
|
| 169 | 169 |
|
| 170 | 170 |
|
| 171 |
|
|
| 172 |
|
|
| 173 |
|
|
| 174 |
|
|
| 175 |
|
|
| 176 |
|
|
| 177 |
|
|
| 178 |
|
|
|
||
| 7 | 7 |
|
| 8 | 8 |
|
| 9 | 9 |
|
| 10 |
|
|
| 10 | 11 |
|
| 11 | 12 |
|
| 12 | 13 |
|
| 14 |
|
|
| 13 | 15 |
|
| 14 | 16 |
|
| 15 | 17 |
|
|
||
| 37 | 39 |
|
| 38 | 40 |
|
| 39 | 41 |
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
|
|
| 50 |
|
|
| 51 |
|
|
| 40 | 52 |
|
| 41 | 53 |
|
| 42 | 54 |
|
|
||
| 10 | 10 |
|
| 11 | 11 |
|
| 12 | 12 |
|
| 13 |
|
|
| 13 | 14 |
|
| 14 | 15 |
|
| 15 | 16 |
|
|
||
| 121 | 122 |
|
| 122 | 123 |
|
| 123 | 124 |
|
| 125 |
|
|
| 126 |
|
|
| 127 |
|
|
| 128 |
|
|
| 129 |
|
|
| 130 |
|
|
| 131 |
|
|
| 132 |
|
|
| 133 |
|
|
| 134 |
|
|
| 135 |
|
|
| 136 |
|
|
| 137 |
|
|
| 138 |
|
|
| 139 |
|
|
| 140 |
|
|
| 141 |
|
|
| 142 |
|
|
| 143 |
|
|
| 144 |
|
|
| 145 |
|
|
| 146 |
|
|
| 147 |
|
|
| 148 |
|
|
| 149 |
|
|
| 150 |
|
|
| 151 |
|
|
| 152 |
|
|
| 153 |
|
|
| 154 |
|
|
| 155 |
|
|
| 156 |
|
|
| 124 | 157 |
|
| 125 | 158 |
|
| 126 | 159 |
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
|
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
|
||
| 7 | 7 |
|
| 8 | 8 |
|
| 9 | 9 |
|
| 10 |
|
|
| 11 |
|
|
| 10 | 12 |
|
| 11 | 13 |
|
| 12 | 14 |
|
|
||
| 34 | 36 |
|
| 35 | 37 |
|
| 36 | 38 |
|
| 39 |
|
|
| 40 |
|
|
| 41 |
|
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
|
|
| 50 |
|
|
| 51 |
|
|
| 52 |
|
|
| 53 |
|
|
| 54 |
|
|
| 55 |
|
|
| 56 |
|
|
| 57 |
|
|
| 58 |
|
|
| 59 |
|
|
| 60 |
|
|
| 61 |
|
|
| 62 |
|
|
| 63 |
|
|
| 64 |
|
|
| 65 |
|
|
| 66 |
|
|
| 67 |
|
|
| 68 |
|
|
| 69 |
|
|
| 70 |
|
|
| 71 |
|
|
| 72 |
|
|
| 73 |
|
|
| 74 |
|
|
| 75 |
|
|
| 76 |
|
|
| 77 |
|
|
| 78 |
|
|
| 79 |
|
|
| 80 |
|
|
| 81 |
|
|
| 37 | 82 |
|
| 38 | 83 |
|
| 39 | 84 |
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
|
||
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
|
|
| 17 |
|
|
| 18 |
|
|
| 19 |
|
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
|
|
| 31 |
|
|
| 32 |
|
|
| 33 |
|
|
| 34 |
|
|
| 35 |
|
|
| 36 |
|
|
| 37 |
|
|
| 38 |
|
|
| 39 |
|
|
| 40 |
|
|
| 41 |
|
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
|
|
| 50 |
|
|
| 51 |
|
|
| 52 |
|
|
| 53 |
|
|
| 54 |
|
|
| 55 |
|
|
| 56 |
|
|
| 57 |
|
|
| 58 |
|
|
| 59 |
|
|
| 60 |
|
|
| 61 |
|
|
| 62 |
|
|
|
||
| 39 | 39 |
|
| 40 | 40 |
|
| 41 | 41 |
|
| 42 |
|
|
| 43 |
|
|
| 44 |
|
|
| 45 |
|
|
| 46 |
|
|
| 47 |
|
|
| 42 | 48 |
|
|
||
| 14 | 14 |
|
| 15 | 15 |
|
| 16 | 16 |
|
| 17 |
|
|
| 17 | 18 |
|
| 18 | 19 |
|
| 19 | 20 |
|
|
||
| 27 | 28 |
|
| 28 | 29 |
|
| 29 | 30 |
|
| 30 |
|
|
| 31 |
|
|
| 32 |
|
|
| 33 |
|
|
| 34 |
|
|
| 35 |
|
|
| 36 |
|
|
| 37 |
|
|
| 38 |
|
|
| 39 |
|
|
| 40 |
|
|
| 31 | 41 |
|
| 32 | 42 |
|
| 33 | 43 |
|
|
||
| 933 | 943 |
|
| 934 | 944 |
|
| 935 | 945 |
|
| 946 |
|
|
| 947 |
|
|
| 948 |
|
|
| 949 |
|
|
| 950 |
|
|
| 951 |
|
|
| 952 |
|
|
| 953 |
|
|
| 954 |
|
|
| 955 |
|
|
| 956 |
|
|
| 957 |
|
|
| 958 |
|
|
| 959 |
|
|
| 960 |
|
|
| 961 |
|
|
| 962 |
|
|
| 963 |
|
|
| 964 |
|
|
| 965 |
|
|
| 966 |
|
|
| 967 |
|
|
| 968 |
|
|
| 969 |
|
|
| 970 |
|
|
| 971 |
|
|
| 972 |
|
|
| 973 |
|
|
| 974 |
|
|
| 975 |
|
|
| 976 |
|
|
| 977 |
|
|
| 978 |
|
|
| 979 |
|
|
| 980 |
|
|
| 981 |
|
|
| 982 |
|
|
| 983 |
|
|
| 984 |
|
|
| 985 |
|
|
| 986 |
|
|
| 987 |
|
|
| 988 |
|
|
| 989 |
|
|
| 990 |
|
|
| 991 |
|
|
| 992 |
|
|
| 993 |
|
|
| 994 |
|
|
| 995 |
|
|
| 996 |
|
|
| 997 |
|
|
| 998 |
|
|
| 999 |
|
|
| 1000 |
|
|
| 1001 |
|
|
| 1002 |
|
|
| 1003 |
|
|
| 1004 |
|
|
| 1005 |
|
|
| 1006 |
|
|
| 1007 |
|
|
| 1008 |
|
|
| 1009 |
|
|
| 1010 |
|
|
| 1011 |
|
|
| 1012 |
|
|
| 1013 |
|
|
| 1014 |
|
|
| 1015 |
|
|
| 1016 |
|
|
| 1017 |
|
|
| 1018 |
|
|
| 1019 |
|
|
| 1020 |
|
|
| 1021 |
|
|
|
||
| 14 | 14 |
|
| 15 | 15 |
|
| 16 | 16 |
|
| 17 |
|
|