@@ -1,9 +1,12 @@
11module Route.Index exposing (ActionData, Data, Model, Msg, route)
22
33import BackendTask exposing (BackendTask)
4+import Color exposing (lightBrown)
5+import Effect
46import Element exposing (..)
57import Element.Background as Background
68import Element.Border as Border
9+import Element.Events as Events
710import Element.Font as Font
811import FatalError exposing (FatalError)
912import Head
@@ -12,18 +15,18 @@ import Html.Attributes exposing (style)
1215import Pages.Url
1316import PagesMsg exposing (PagesMsg)
1417import Route
15−import RouteBuilder exposing (App, StatelessRoute)
18+import RouteBuilder exposing (App, StatefulRoute)
1619import Shared
1720import UrlPath
1821import View exposing (View)
1922
2023
2124type alias Model =
22− {}
25+ { teamExpanded : Bool }
2326
2427
25−type alias Msg =
26− ()
28+type Msg
29+ = ExpandTeam
2730
2831
2932type alias RouteParams =
@@ -31,28 +34,37 @@ type alias RouteParams =
3134
3235
3336type alias Data =
34− { message : String
35− }
37+ {}
3638
3739
3840type alias ActionData =
3941 {}
4042
4143
42−route : StatelessRoute RouteParams Data ActionData
44+route : StatefulRoute RouteParams Data ActionData Model Msg
4345route =
4446 RouteBuilder.single
4547 { head = head
4648 , data = data
4749 }
48− |> RouteBuilder.buildNoState { view = view }
50+ |> RouteBuilder.buildWithLocalState
51+ { view = view
52+ , init = \_ _ -> ( { teamExpanded = False }, Effect.None )
53+ , update = \_ _ msg model -> ( update msg model, Effect.None )
54+ , subscriptions = \_ _ _ _ -> Sub.none
55+ }
56+
57+
58+update : Msg -> Model -> Model
59+update msg model =
60+ case msg of
61+ ExpandTeam ->
62+ { model | teamExpanded = True }
4963
5064
5165data : BackendTask FatalError Data
5266data =
5367 BackendTask.succeed Data
54− |> BackendTask.andMap
55− (BackendTask.succeed "Hello!")
5668
5769
5870head :
@@ -68,7 +80,7 @@ head app =
6880 , dimensions = Nothing
6981 , mimeType = Nothing
7082 }
71− , description = "Welcome to Horeco Productions!"
83+ , description = "Welcome to Horeca Productions!"
7284 , locale = Nothing
7385 , title = "Horeca Productions"
7486 }
@@ -78,63 +90,184 @@ head app =
7890view :
7991 App Data ActionData RouteParams
8092 -> Shared.Model
93+ -> Model
8194 -> View (PagesMsg Msg)
82−view app shared =
83− { title = "elm-pages is running"
95+view app shared model =
96+ { title = "Horeca Productions"
8497 , body =
8598 column [ width fill ]
8699 [ column [ width fill, Background.color (rgb255 53 30 30), spacing 88 ]
87100 [ el [] none
88− , row [ width fill ]
89− [ el [ width (px 50) ] none
90− , row [ centerX, width fill, spaceEvenly ]
91− [ el headerFont (text "услуги")
92− , el headerFont (text "студия")
93− , image [ height (px 50) ] { src = "/logo.svg", description = "logo" }
94− , el headerFont (text "сотрудники")
95− , el headerFont (text "о нас")
96− ]
97− , el [ width (px 50) ] none
101+ , row [ centerX, width fill, spaceEvenly, paddingXY 135 0 ]
102+ [ link [] { url = "#services", label = el headerFont (text "услуги") }
103+ , link [] { url = "#history", label = el headerFont (text "история") }
104+ , image [ height (px 83) ] { src = "/logo.svg", description = "logo" }
105+ , link [] { url = "#team", label = el headerFont (text "команда") }
106+ , link [] { url = "#blog", label = el headerFont (text "блог") }
98107 ]
99108 , column
100109 [ width fill
101110 , htmlAttribute (style "overflow" "hidden")
102111 , height (px 650)
103− , inFront (paragraph [ raleway, Font.color lightColor, moveDown 200, moveRight 100, width (px 370) ] [ text "Где подача — всё: дизайн, маркетинг, стратегия." ])
112+ , inFront (paragraph [ raleway, Font.color lightColor, moveDown 200, moveRight 135, width (px 370) ] [ text "Где подача — всё: дизайн, маркетинг, стратегия." ])
104113 ]
105114 [ el ([ alignRight, moveRight 40 ] ++ headerMainFont) (text "horeca")
106115 , el ([ moveLeft 26 ] ++ headerMainFont) (text "productions")
107116 ]
108117 ]
109− , el [ Background.image "olives.jpg", width fill, padding 20 ]
118+ , el [ Background.image "olives.png", width fill, paddingXY 135 35 ]
110119 (el
111120 [ centerX
112121 , Border.rounded 30
113122 , Background.color (rgba 0 0 0 0.2)
114− , padding 20
115− , width (px 920)
123+ , paddingXY 95 35
124+ , htmlAttribute (style "backdrop-filter" "blur(40px)")
116125 ]
117126 (paragraph
118− [ Font.color (rgb 1 1 1), raleway, Font.size 24 ]
127+ [ Font.color (rgb255 210 197 178), raleway, Font.size 24 ]
119128 [ text "Мы\u{00A0}— команда экспертов, которые знают ресторанный бизнес изнутри. Мы\u{00A0}не\u{00A0}просто оказываем услуги, мы\u{00A0}становимся вашими партнерами, погружаясь в\u{00A0}детали вашего бизнеса и\u{00A0}разрабатывая индивидуальные стратегии для достижения конкретных результатов." ]
120129 )
121130 )
122− , el [ padding 50, Background.color (rgb255 210 197 178), width fill ]
123− (column [ centerX, width fill ]
124− [ el [ ubuntu, Font.size 80, Font.color yellowColor ] (text "услуги для вашего бизнеса")
125− , row [ width fill, spaceEvenly ]
126− [ column [ width (px 350) ]
127− [ el [ ubuntu, Font.color yellowColor, Font.size 320 ] (text "1.")
128− , el [ raleway, Font.color yellowColor, Font.size 24 ] (paragraph [] [ text "Для тех, кто готов к радикальному росту и хочет видеть свой ресторан на вершине успеха." ])
131+ , el [ Background.color (rgb255 210 197 178), width fill, htmlAttribute (Html.Attributes.id "services") ]
132+ (el [ width fill, Background.image "/text-bg.svg" ]
133+ (column [ paddingXY 135 95, centerX, width fill ]
134+ [ el [ ubuntu, Font.size 80, Font.color yellowColor, Font.color redColor ] (text "услуги для вашего бизнеса")
135+ , el [ height (px 60) ] none
136+ , row [ width fill, spaceEvenly, Font.color darkColor ]
137+ [ column [ width (px 350), spacing 30 ]
138+ [ el [ ubuntu, Font.size 320, Font.light ] (text "1.")
139+ , el [ raleway, Font.size 24, Font.semiBold ] (paragraph [] [ text "полная разработка" ])
140+ ]
141+ , column [ width (px 350), spacing 30 ]
142+ [ el [ ubuntu, Font.size 320, Font.light ] (text "2.")
143+ , el [ raleway, Font.size 24, Font.semiBold ] (paragraph [] [ text "удаленная команда" ])
144+ ]
145+ , column [ width (px 350), spacing 30 ]
146+ [ el [ ubuntu, Font.size 320, Font.light ] (text "3.")
147+ , el [ raleway, Font.size 24, Font.semiBold ] (paragraph [] [ text "быстрый старт" ])
148+ ]
129149 ]
130− , column [ width (px 350) ]
131− [ el [ ubuntu, Font.color yellowColor, Font.size 320 ] (text "2.")
132− , el [ raleway, Font.color yellowColor, Font.size 24 ] (paragraph [] [ text "Для тех, кто хочет улучшить свои результаты и укрепить позиции на рынке." ])
150+ , el [ height (px 45) ] none
151+ ]
152+ )
153+ )
154+ , link [ width fill ]
155+ { url = "/horeca.pdf"
156+ , label =
157+ el [ Background.color (rgb255 196 185 151), width fill, paddingXY 0 146 ]
158+ (column [ width fill ]
159+ [ image [ width (px 1129) ] { src = "/viliche.png", description = "Viliche" }
160+ , el [ ubuntu, Font.size 32, Font.color redColor, alignRight, moveLeft 100, moveUp 130, Font.underline ] (text "о наших пакетах")
133161 ]
134− , column [ width (px 350) ]
135− [ el [ ubuntu, Font.color yellowColor, Font.size 320 ] (text "3.")
136− , el [ raleway, Font.color yellowColor, Font.size 24 ] (paragraph [] [ text "Для тех, кто хочет получить профессиональную оценку и рекомендации по улучшению своего бизнеса." ])
162+ )
163+ }
164+ , el
165+ [ Background.color (rgb255 210 197 178)
166+ , width fill
167+ , behindContent (image [ height (px 605), alignRight, moveDown 74 ] { src = "/oil.png", description = "oil" })
168+ , htmlAttribute (Html.Attributes.id "history")
169+ ]
170+ (paragraph
171+ [ ubuntu
172+ , Font.size 280
173+ , paddingXY 135 95
174+ , Font.color (rgb255 53 30 30)
175+ ]
176+ [ text "история бренда" ]
177+ )
178+ , el [ Background.color (rgb255 210 197 178), width fill, paddingXY 135 0, Font.size 24, Font.medium ] (paragraph [ raleway, Font.color darkColor ] [ text "Мы — Horeca Productions, команда, рожденная общей мечтой. Мы верили: рестораны могут покорять сердца не только кухней, но атмосферой, стилем, онлайн-присутствием. Энтузиасты, верящие в силу красивой идеи и продвижения, мы создаём вдохновляющие стратегии, завораживающий дизайн. Наша цель — сделать ваш ресторан звездой." ])
179+ , el [ height (px 96), Background.color (rgb255 210 197 178), width fill ] none
180+ , el [ width fill, Background.image "/bg.png", htmlAttribute (Html.Attributes.id "team") ]
181+ (el [ paddingXY 135 95, width fill ]
182+ (column [ width fill, Background.color (rgb255 196 185 151), width fill, Border.rounded 30 ]
183+ ([ el [ paddingXY 105 125 ] (image [ height (px 100) ] { src = "/team.png", description = "team" })
184+ , row [ paddingEach { top = 0, left = 115, right = 115, bottom = 95 }, spaceEvenly, width fill ]
185+ [ row [ spacing 30 ]
186+ [ image [ height (px 240), width (px 160) ] { src = "/alim.jpg", description = "Alim" }
187+ , column [ width (px 260), height (px 240) ]
188+ [ paragraph [ alignTop, Font.size 32 ] [ text "Алим Лаипанов" ]
189+ , paragraph [ alignBottom, Font.size 18 ] [ text "Копирайтер, администратор телеграм-канала. Создание текстов для рекламы, ведение и продвижение контента в Телеграм-канале." ]
190+ ]
191+ ]
192+ , row [ spacing 30 ]
193+ [ image [ height (px 240), width (px 160) ] { src = "/ilia.jpg", description = "Alim" }
194+ , column [ width (px 260), height (px 240) ]
195+ [ paragraph [ alignTop, Font.size 32 ] [ text "Илья Костюченко" ]
196+ , paragraph [ alignBottom, Font.size 18 ] [ text "Ведущий технический специалист. Разработка и поддержка технической инфраструктуры компании." ]
197+ ]
198+ ]
137199 ]
200+ ]
201+ ++ (case model.teamExpanded of
202+ False ->
203+ [ el
204+ [ Events.onClick <| PagesMsg.fromMsg ExpandTeam
205+ , pointer
206+ , Font.color redColor
207+ , ubuntu
208+ , paddingEach { top = 0, left = 115, right = 115, bottom = 95 }
209+ , Font.size 32
210+ , Font.underline
211+ ]
212+ (text "подробнее")
213+ ]
214+
215+ True ->
216+ [ row [ paddingEach { top = 0, left = 115, right = 115, bottom = 95 }, spaceEvenly, width fill ]
217+ [ row [ spacing 30 ]
218+ [ image [ height (px 240), width (px 160) ] { src = "/yasha.jpg", description = "Alim" }
219+ , column [ width (px 260), height (px 240) ]
220+ [ paragraph [ alignTop, Font.size 32 ] [ text "Яш Вардхан Сингх" ]
221+ , paragraph [ alignBottom, Font.size 18 ] [ text "Гид гастротуризма. Проведение гастрономических туров, презентация культурных и гастрономических аспектов." ]
222+ ]
223+ ]
224+ ]
225+ ]
226+ )
227+ )
228+ )
229+ )
230+ , el [ htmlAttribute (Html.Attributes.id "blog"), width fill, Background.image "/bg2.png" ]
231+ (el [ paddingXY 135 95, width fill, Font.color (rgb255 205 197 178) ]
232+ (column [ htmlAttribute (style "backdrop-filter" "blur(40px)"), paddingXY 125 0, Border.rounded 30, width fill ]
233+ [ el [ height (px 135) ] none
234+ , el [ Font.size 280, ubuntu ] (text "блог")
235+ , el [ height (px 120) ] none
236+ , el [ alignRight, ubuntu, Font.size 32, moveLeft 55 ]
237+ (row []
238+ [ link []
239+ { url = "https://dzen.ru/id/67f1ed371047046a46c0e665"
240+ , label = text "дзен"
241+ }
242+ , text "/"
243+ , link []
244+ { url = "https://t.me/horeca_productions"
245+ , label = text "telegram"
246+ }
247+ , text "/"
248+ , link []
249+ { url = "https://habr.com/ru/users/horeca_productions/"
250+ , label = text "хабр"
251+ }
252+ ]
253+ )
254+ , el [ height (px 190) ] none
255+ ]
256+ )
257+ )
258+ , el [ Background.color darkColor, paddingXY 135 76, width fill ]
259+ (row [ spacing 90, spaceEvenly, width fill ]
260+ [ image [ paddingEach { left = 0, right = 90, top = 0, bottom = 0 } ] { src = "/logo.svg", description = "logo" }
261+ , row [ centerX, width fill, spacing 90, spacing 120 ]
262+ [ link [] { url = "#services", label = el headerFont (text "услуги") }
263+ , link [] { url = "#history", label = el headerFont (text "история") }
264+ , link [] { url = "#team", label = el headerFont (text "команда") }
265+ , link [] { url = "#blog", label = el headerFont (text "блог") }
266+ ]
267+ , row [ spacing 28 ]
268+ [ -- link [] { url = "", label = image [] { src = "/tiktok.svg", description = "TikTok" } },
269+ link [] { url = "https://www.instagram.com/horeca_productions_", label = image [] { src = "/inst.svg", description = "Instagram" } }
270+ , link [] { url = "https://t.me/horeca_productions", label = image [] { src = "/tg.svg", description = "Telegram" } }
138271 ]
139272 ]
140273 )
@@ -152,6 +285,16 @@ lightColor =
152285 rgb255 210 197 178
153286
154287
288+redColor : Color
289+redColor =
290+ rgb255 120 2 4
291+
292+
293+darkColor : Color
294+darkColor =
295+ rgb255 36 21 21
296+
297+
155298headerFont : List (Attribute msg)
156299headerFont =
157300 [ raleway, Font.size 24, Font.color yellowColor ]