homepage

backend/assets/main.js

@@ -10,9 +10,12 @@ import './main.css';
 
 import Alpine from 'alpinejs';
 import collapse from '@alpinejs/collapse';
+import ngoSearch from './ngoSearch';
 
 Alpine.plugin(collapse);
 
+Alpine.data('ngoSearch', ngoSearch);
+
 window.Alpine = Alpine;
 
 Alpine.start();

backend/assets/ngoSearch.js

@@ -0,0 +1,32 @@
+export default function() {
+  return {
+    query: null,
+    isOpen: false,
+    results: [],
+
+    open() {
+      if (!this.results.length) {
+        return;
+      }
+
+      this.isOpen = true;
+    },
+
+    close() {
+      this.isOpen = false;
+    },
+
+    async search() {
+      const url = new URL(window.location.origin + '/api/search');
+      url.searchParams.set('q', this.query);
+
+      this.results = await (await fetch(url)).json();
+
+      this.open();
+    },
+
+    init() {
+      this.$watch('query', () => this.search());
+    }
+  }
+}

backend/donations/views/site.py

@@ -16,7 +16,7 @@
 
 
 class HomePage(TemplateView):
-    template_name = "index.html"
+    template_name = "public/home.html"
 
     @staticmethod
     @cache_decorator(timeout=settings.TIMEOUT_CACHE_LONG, cache_key_prefix=ALL_NGO_IDS_CACHE_KEY)

backend/templates/v2/public/components/home-hero.html

@@ -0,0 +1,51 @@
+{% load static %}
+
+<section class="relative overflow-hidden isolate">
+  <div class="container pb-8 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:pt-8 lg:pb-24">
+    <div class="px-6 lg:px-0 lg:pt-4 lg:col-span-7">
+      <div class="max-w-lg mx-auto lg:max-w-none">
+        <h1 class="block mt-1 text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl">
+          <span class="block text-gray-900">Tu decizi ce se întâmplă</span>
+          <span class="block text-amber-300">cu 3,5% din impozit</span>
+        </h1>
+        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+          Declarația 230 pentru redirecționarea a 3,5% din impozitul pe venit aferent anului 2024 va fi disponibilă după 15 ianuarie 2025.
+        </p>
+
+        {% include "public/components/ngo-search.html" %}
+
+        <div class="mt-8 overflow-hidden">
+          <dl class="grid -mx-8 -mt-8 sm:grid-cols-3">
+            <div class="flex flex-col px-8 pt-8">
+              <dt class="order-2 text-base font-medium text-gray-500">
+                organizații înregistrate în platformă
+              </dt>
+              <dd class="order-1 text-2xl font-bold text-cyan-700 sm:text-3xl sm:tracking-tight">
+                XXXX
+              </dd>
+            </div>
+            <div class="flex flex-col px-8 pt-8">
+              <dt class="order-2 text-base font-medium text-gray-500">
+                declarații completate în 2024
+              </dt>
+              <dd class="order-1 text-2xl font-bold text-cyan-700 sm:text-3xl sm:tracking-tight">
+                XXXX
+              </dd>
+            </div>
+            <div class="flex flex-col px-8 pt-8">
+              <dt class="order-2 text-base font-medium text-gray-500">
+                redirecționați către ONG-uri prin redirectioneaza.ro
+              </dt>
+              <dd class="order-1 text-2xl font-bold text-cyan-700 sm:text-3xl sm:tracking-tight">
+                &gt; €2 milioane
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+    <div class="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen lg:col-span-5">
+      <img class="w-full max-w-lg mx-auto lg:max-w-none" src="{% static 'images/hero.svg' %}" alt="">
+    </div>
+  </div>
+</section>

backend/templates/v2/public/components/ngo-search.html

@@ -0,0 +1,44 @@
+<div class="relative pt-8 pb-4" x-data="ngoSearch" x-on:click.outside="close">
+  <ul
+    id="ngo-results"
+    role="listbox"
+    class="absolute w-full pt-10 overflow-auto text-sm bg-white border border-gray-300 shadow-lg rounded-2xl max-h-60 ring-1 ring-black/5 focus:outline-none sm:text-sm"
+    x-show="isOpen"
+    x-cloak
+  >
+    <template x-for="(ngo, index) in results" :key="index">
+      <li
+        class="relative cursor-default select-none"
+        role="option"
+        tabindex="-1">
+
+        <a
+          class="block px-3 py-2 text-gray-900 truncate hover:bg-amber-300 hover:outline-none"
+          :href="ngo.url"
+        >
+          <span x-text="ngo.name"></span>
+        </a>
+      </li>
+    </template>
+  </ul>
+
+  <label class="relative grid grid-cols-1">
+    <span class="sr-only">Caută un ONG după nume sau CUI/CIF</span>
+
+    <input
+      type="text"
+      class="border-none col-start-1 row-start-1 block w-full rounded-full bg-white py-1.5 pl-10 pr-3 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-amber-300 sm:pl-9 sm:text-sm/6 focus:outline-none"
+      role="combobox"
+      aria-controls="ngo-results"
+      placeholder="Caută un ONG după nume sau CUI/CIF"
+      x-model.debounce="query"
+      autocomplete="off"
+      x-on:click="open"
+      x-on:blur="close"
+    >
+
+    <svg class="self-center col-start-1 row-start-1 ml-3 text-gray-400 pointer-events-none size-5 sm:size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+      <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
+    </svg>
+  </label>
+</div>

backend/templates/v2/public/home.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+<!-- TODO: add compatiblity with custom subdomains -->
+
+{% block content %}
+  {% include "public/components/home-hero.html" %}
+
+  {% include "account/snippets/cta-ngohub.html" %}
+{% endblock %}