website/index.html at master · dispensapp/website · GitHub

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./dist/output.css" rel="stylesheet">
    <script async src="https://cdn.splitbee.io/sb.js"></script>

    <!--Meta Settings-->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://dispensapp.com/">
    <meta property="og:title" content="Dispensa">
    <meta property="og:image" content="https://dispensapp.com/src/assets/icon.png">
    <meta property="og:description" content="Smart manage of food storage
            🥗">
    <meta name=description content="Smart manage of food storage 🥗">

    <link rel="icon" href="https://dispensapp.com/src/assets/icon.png">

    <meta property="og:locale" content="en_EN">
    <title>Dispensa</title>
</head>

<body>
    <nav class="sticky top-0 z-10 bg-white backdrop-filter backdrop-blur-lg bg-opacity-30 border-b border-gray-200 firefox:bg-opacity-30">
        <div class="mx-5 md:mx-32 lg:mx-64">
            <div class="flex items-center justify-between h-16">
                <img class="sm:flex hidden h-12 " src="./src/assets/logo_text.svg" alt="Dispensa">
                <img class="sm:hidden flex h-12 w-auto " src="./src/assets/logo.svg" alt="Dispensa">
                <div class="flex space-x-4 text-gray-900">
                    <a href="#intro">Intro</a>
                    <a href="#dispensa">Dispensa</a>
                    <a href="#offers">Offers</a>

                </div>
                <a href="https://twitter.com/nicolapreda_" class="bg-primary-blue py-2 px-3 rounded-lg text-white">Follow</a>

            </div>
        </div>
    </nav>

    <hero>
        <div class=" flex bg-primary-yellow h-full drop-shadow-lg">

            <div class="grid lg:grid-cols-2 gap-16 lg:mx-64 md:mx-32 mx-5 items-center">
                <div>

                    <div class="m-auto text-center lg:text-start">
                        <h1 class="mt-12 lg:mt-0 text-4xl xl:text-5xl 2xl:text-7xl font-bold">Smart manage <br>of food storage 🥗</h1>
                        <p class="mt-5 lg:mt-10 text-xl md:text-2xl font-normal">Organize and control your food storage in a smart, fast and intelligent way. Save time searching for supermarket deals💰
                        </p>
                        <div class="mt-5">
                            <a href="#intro" class="px-7 py-3 bg-primary-blue
                                    shadow-sm rounded-xl mt-10 font-semibold
                                    text-white">More informations</a>
                        </div>
                    </div>
                </div>
                <div>
                    <img src="./src/assets/hero.webp" alt="Banner" class="drop-shadow-lg w-auto hidden lg:block">
                    <img src="./src/assets/hero-mobile.webp" alt="Banner" class="drop-shadow-lg w-auto block lg:hidden">

                </div>
            </div>

        </div>
    </hero>


    <a name="intro"></a>
    <intro>
        <div class=" flex bg-white h-full ">
            <div class="grid lg:grid-cols-2 gap-4 lg:mx-64 md:mx-32 mx-5 my-32 text-center lg:text-start">
                <div class="flex justify-center">
                    <img src="./src/assets/intro.webp" class="w-64 h-full" alt="Banner">
                </div>
                <div class="m-auto">
                    <h1 class="text-4xl xl:text-5xl 2xl:text-7xl font-bold">All of your food storage in one place.</h1>
                    <p class="mt-10 font-normal md:text-2xl">Keep track of all the food products you own and their expirations in a single screen, which summarizes the main information and the most advantageous deals
                    </p>
                </div>
            </div>
        </div>
    </intro>


    <a name="dispensa"></a>
    <dispensa>
        <div class=" bg-secondary-yellow drop-shadow-lg h-full">
            <div class="grid 3xl:grid-cols-2 gap-4 h-full py-32 lg:mx-64 md:mx-32 mx-5 text-center">
                <div>
                    <h1 class="text-4xl xl:text-5xl 2xl:text-7xl font-bold">Better management of<br> products expiration</h1>
                    <p class="mt-10 md:text-2xl font-normal">Take a quick look at your food storage to understand what you will need to buy and when the next foods will expire, in order of priority</p>
                </div>
                <div class="flex justify-center">
                    <img src="./src/assets/scadenze.webp" class="drop-shadow-md grow-0 " alt="Products
                                expiration">
                </div>
            </div>
        </div>
    </dispensa>


    <a name="offers"></a>
    <offers class="flex bg-white drop-shadow-lg h-full ">
        <div class="grid lg:grid-cols-2 gap-4 h-full lg:mx-64 md:mx-32 mx-5 my-32 text-center lg:text-start">
            <div class="flex justify-center">
                <img src="./src/assets/offers.webp" class="w-64 h-auto" alt="Banner">
            </div>
            <div>
                <div class="m-auto">
                    <h1 class="text-4xl xl:text-5xl 2xl:text-7xl font-bold">Save time searching for offers</h1>
                    <p class="mt-10 md:text-2xl font-normal">Save time and money by consulting supermarket deals of your favorite products, through the dedicated section in the application
                    </p>
                </div>
            </div>
        </div>
    </offers>


    <footer>
        <div class="bg-primary-blue drop-shadow-lg">
            <div class="grid grid-cols-5 py-16 lg:mx-64 md:mx-32 mx-5">
                <div class="grid grid-rows-4 ">
                    <a href="https://twitter.com/nicolapreda_" alt="Twitter"><svg alt="Twitter" xmlns="http://www.w3.org/2000/svg" class="fill-white h-8 w-auto my-2" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
                    <a href="mailto:nicola.preda05@gmail.com" alt="Mail"><svg alt="Mail" xmlns="http://www.w3.org/2000/svg" class="fill-white h-8 w-auto my-2" viewBox="0 0 24 24"><path d="M.026 24l11.974-11.607 11.974 11.607h-23.948zm11.964-23.961l-11.99 8.725v12.476l7.352-7.127-5.653-4.113 10.291-7.488 10.309 7.488-5.655 4.108 7.356 7.132v-12.476l-12.01-8.725z"/></svg></a>
                    <a href="https://t.me/nicolapreda" alt="Telegram"><svg alt="Telegram" class="fill-white h-8 w-auto my-2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="telegram-1" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg></a>
                    <a href="https://github.com/DispensaApp" alt="Contribute"><svg alt="Contribute" xmlns="http://www.w3.org/2000/svg" class="fill-white h-8 w-auto my-2" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
                </div>
                <div class="grid grid-rows-5 col-span-4 text-white">
                    <a href="https://nicolapreda.me" alt="Blog">blog</a>
                    <a href="https://github.com/DispensaApp" alt="Support">support</a>
                    <a href="mailto:nicola.preda05@gmail.com" alt="Support">become an affiliate</a>
                    <a href="mailto:nicola.preda05@gmail.com" alt="Support">privacy policy
                    </a>
                    <a href="mailto:nicola.preda05@gmail.com" alt="Support">terms and conditions

                    </a>

                </div>


            </div>
        </div>

    </footer>
</body>

</html>