ffcs/src/components/ui/Hero.tsx at 06a3309519caa6d9fa53fcbc41e5395214f517aa · CodeChefVIT/ffcs · 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
152
153
154
155
156
157
158
159
160
161
"use client";

import Image from "next/image";
import { ZButton } from "../ui/Buttons";

export default function Hero() {
  return <div className="relative w-320 h-150 md:h-180 flex justify-center items-center font-pangolin text-black">
    <div className="absolute left-1/2 top-36 w-full transform -translate-x-1/2 flex flex-col items-center text-center align-center">
      <Image
        src="/logo_ffcs.svg"
        alt=""
        width={96}
        height={96}
        className="mx-auto w-24 h-24 md:w-32 md:h-32 mb-6"
        unselectable="on"
        draggable={false}
        priority
      />
      <div className="text-5xl md:text-6xl mb-6">FFCS-inator</div>
      <div className="text-sm md:text-base font-poppins font-semibold text-black mb-6">
        Generate priority-based timetables in seconds.
        <br />
        No more clashes, no more stress.
      </div>
      <div className="text-2xl md:text-3xl mb-8">Create Your Ideal Timetable!</div>
      <ZButton
        type="large"
        text="Start"
        image="/icons/arrow_down.svg"
        color="purple"
        onClick={() => {
          const el = document.getElementById("start");
          if (el) {
            el.scrollIntoView({ behavior: "smooth" });
          }
        }}
      />
    </div>

    <div className="w-16 h-16 left-100 top-108 md:w-24 md:h-24 md:left-80 md:top-115 absolute   rotate-[-60deg] z-[1]">
      <Image
        src="/art/art_rice.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-16 h-16 top-55 right-100 md:w-24 md:h-24 md:top-50 md:right-90 absolute rotate-[-15deg] z-[1]">
      <Image
        src="/art/art_boom.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-36 h-36 top-50 left-50 md:w-48 md:h-48 md:top-50 md:left-32 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/art_paper.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-42 h-42 top-60 right-58 md:w-64 md:h-64 md:top-50 md:right-32 absolute rotate-[3deg] z-[1]">
      <Image
        src="/art/art_plane.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-110 left-64 md:w-16 md:h-16 md:top-130 md:left-37 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_c.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-50 left-100 md:w-16 md:h-16 md:top-50 md:left-100 absolute rotate-[8deg] z-[1]">
      <Image
        src="/art/letter_h.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-107 right-96 md:w-16 md:h-16 md:top-107 md:right-70 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_e.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-120 right-70 md:w-16 md:h-16 md:top-132 md:right-30 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_f.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-220 left-8 md:w-16 md:h-16 md:top-220 md:left-8 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_i.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-300 left-23 md:w-16 md:h-16 md:top-300 md:left-23 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_m.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>

    <div className="w-12 h-12 top-263 right-12 md:w-16 md:h-16 md:top-263 md:right-12 absolute rotate-[0deg] z-[1]">
      <Image
        src="/art/letter_k.svg"
        alt="graphic element"
        fill
        unselectable="on"
        draggable={false}
        priority
      />
    </div>
  </div>
}