├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── Footer.js
    ├── Header.js
    └── Layout.js
├── img
    └── nine4-4.png
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── images
    │   ├── placeholder.png
    │   ├── placeholder1.png
    │   └── segment.png
    └── vercel.svg
├── styles
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NINE4 TEMPLATE #4
 2 | <img src="./img/nine4-4.png"></img>
 3 | 
 4 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 5 | 
 6 | ## Getting Started
 7 | 
 8 | First, run the development server:
 9 | 
10 | ```bash
11 | npm run dev
12 | # or
13 | yarn dev
14 | ```
15 | 
16 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
17 | 
18 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
19 | 
20 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
21 | 
22 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
23 | 
24 | ## Learn More
25 | 
26 | To learn more about Next.js, take a look at the following resources:
27 | 
28 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
29 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
30 | 
31 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
32 | 
33 | ## Deploy on Vercel
34 | 
35 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
36 | 
37 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
38 | 


--------------------------------------------------------------------------------
/components/Footer.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-html-link-for-pages */
  2 | 
  3 | export default function Footer() {
  4 |   return (
  5 |     <>
  6 |       <footer className="grotesk bg-[#f9fbfb]">
  7 |         <div className="max-w-8xl mx-auto px-5 py-24 text-black">
  8 |           <div className="order-first flex flex-wrap text-left">
  9 |             <div className="w-full px-4 md:w-2/4 lg:w-1/5">
 10 |               <h2 className="mb-3 text-lg tracking-widest">Est.</h2>
 11 |               <nav className="list-none space-y-2 py-3">
 12 |                 <li>
 13 |                   <a href="/">Vitae nec.</a>
 14 |                 </li>
 15 |                 <li>
 16 |                   <a href="/">Purus</a>
 17 |                 </li>
 18 |                 <li>
 19 |                   <a href="/">Nibh.</a>
 20 |                 </li>
 21 |                 <li>
 22 |                   <a href="/">Proin semper justo.</a>
 23 |                 </li>
 24 |                 <li>
 25 |                   <a href="/">Blandit.</a>
 26 |                 </li>
 27 |                 <li>
 28 |                   <a href="/">Malesuada.</a>
 29 |                 </li>
 30 |               </nav>
 31 |             </div>
 32 |             <div className="w-full px-4 md:w-2/4 lg:w-1/5">
 33 |               <h2 className="mb-3 text-lg tracking-widest">Et.</h2>
 34 |               <nav className="mb-10 list-none space-y-2 py-3">
 35 |                 <li>
 36 |                   <a href="/">Ninc elementum.</a>
 37 |                 </li>
 38 |                 <li>
 39 |                   <a href="/">Sit ac interdum</a>
 40 |                 </li>
 41 |                 <li>
 42 |                   <a href="/">Ac ut cras.</a>
 43 |                 </li>
 44 |                 <li>
 45 |                   <a href="/">Sed ipsum lobortis.</a>
 46 |                 </li>
 47 |                 <li>
 48 |                   <a href="/">Nulla maecenas nunc.</a>
 49 |                 </li>
 50 |                 <li>
 51 |                   <a href="/">Purus</a>
 52 |                 </li>
 53 |               </nav>
 54 |             </div>
 55 |             <div className="w-full px-4 md:w-2/4 lg:w-1/5">
 56 |               <h2 className="mb-3 text-lg tracking-widest">Placerat.</h2>
 57 |               <nav className="mb-10 list-none space-y-2 py-3">
 58 |                 <li>
 59 |                   <a href="/">Et cursus fringilla.</a>
 60 |                 </li>
 61 |                 <li>
 62 |                   <a href="/">In velit sagittis.</a>
 63 |                 </li>
 64 |                 <li>
 65 |                   <a href="/">Mattis.</a>
 66 |                 </li>
 67 |                 <li>
 68 |                   <a href="/">Est.</a>
 69 |                 </li>
 70 |               </nav>
 71 |             </div>
 72 |             <div className="w-full px-4 md:w-2/4 lg:w-1/5">
 73 |               <h2 className="mb-3 text-lg tracking-widest">Messa.</h2>
 74 |               <nav className="mb-10 list-none space-y-2 py-3">
 75 |                 <li>
 76 |                   <a href="/">Id.</a>
 77 |                 </li>
 78 |                 <li>
 79 |                   <a href="/">Aliquam.</a>
 80 |                 </li>
 81 |                 <li>
 82 |                   <a href="/">Interdum.</a>
 83 |                 </li>
 84 |                 <li>
 85 |                   <a href="/">Risus.</a>
 86 |                 </li>
 87 |               </nav>
 88 |             </div>
 89 |             <div className="w-full md:w-2/4 lg:w-1/5">
 90 |               <a href="/">
 91 |                 <div className="relative border border-black transition hover:border-gray-500">
 92 |                   <div className="absolute top-0 right-0 pt-2 pr-2">
 93 |                     <svg
 94 |                       width="8"
 95 |                       height="8"
 96 |                       viewBox="0 0 8 8"
 97 |                       fill="none"
 98 |                       xmlns="http://www.w3.org/2000/svg"
 99 |                     >
100 |                       <path
101 |                         d="M6.66992 0.747559L0.669922 6.74756"
102 |                         stroke="black"
103 |                       />
104 |                       <path
105 |                         d="M0.669922 0.747559H6.66992V6.74756"
106 |                         stroke="black"
107 |                       />
108 |                     </svg>
109 |                   </div>
110 |                   <div className="p-6">
111 |                     Lorem ipsum accumsan arcu, consectetur adipiscing elit.
112 |                     Consequat arcu.
113 |                   </div>
114 |                 </div>
115 |               </a>
116 |             </div>
117 |           </div>
118 |         </div>
119 |         <div className="px-2">
120 |           <div className="max-w-8xl mx-auto px-5 py-6">
121 |             <h2 className="text-black">Diam egestas ultrices odio vitae.</h2>
122 |             <div>
123 |               <h2 className="my-4 text-sm">
124 |                 Lorem ipsum accumsan arcu, consectetur adipiscing elit. Dolor
125 |                 proin tempor sed fermentum sit{" "}
126 |                 <br className="hidden lg:inline-block" /> pretium pellentesque.
127 |                 Dictumst risus elementum dignissim risus, lobortis molestie.
128 |               </h2>
129 |             </div>
130 |             <div className="absolute right-0 -mt-24 hidden text-black lg:inline-block">
131 |               <a href="/" className="mr-16">
132 |                 Terms & Conditions
133 |               </a>
134 |               <a href="/" className="mr-16">
135 |                 Privacy Policy
136 |               </a>
137 |               <a href="/" className="mr-16">
138 |                 Cookie Policy
139 |               </a>
140 |             </div>
141 |             <div className="right-0 inline-block pt-12 pb-6 pr-20 text-sm text-black md:hidden">
142 |               <a href="/" className="mr-16">
143 |                 Terms & Conditions
144 |               </a>
145 |               <a href="/" className="mr-16">
146 |                 Privacy Policy
147 |               </a>
148 |               <a href="/" className="mr-16">
149 |                 Cookie Policy
150 |               </a>
151 |             </div>
152 |           </div>
153 |         </div>
154 |       </footer>
155 |     </>
156 |   );
157 | }
158 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @next/next/no-html-link-for-pages */
 2 | 
 3 | export default function Header() {
 4 |   return (
 5 |     <>
 6 |       <div
 7 |         className="
 8 |         bg-blue
 9 |         grotesk
10 |         absolute
11 |         top-0
12 |         h-7
13 |         w-full 
14 |         text-center
15 |         text-sm
16 |         leading-6
17 |         text-white
18 |       "
19 |       >
20 |         Scelerisque egestas et euismod.
21 |         <a href="/" className="pl-3 underline">
22 |           Take me there
23 |         </a>
24 |       </div>
25 |       <div className="grotesk mt-6 mb-16 flex items-center justify-between py-4 px-4 sm:mx-0 sm:mb-20 sm:px-0 md:px-6">
26 |         <div className="mt-4 inline-block pb-4 pl-8">
27 |           <a href="/" className="align-middle text-3xl font-bold text-black">
28 |             NINE4
29 |           </a>
30 |           <div className="hidden pl-14 align-middle xl:inline-block">
31 |             <a href="/" className="pr-12 text-xl text-black">
32 |               Cras.
33 |             </a>
34 |             <a href="/" className="pr-12 text-xl text-black">
35 |               Cras.
36 |             </a>
37 |             <a href="/" className="pr-12 text-xl text-black">
38 |               Fringilla.
39 |             </a>
40 |             <a href="/" className="text-xl text-black">
41 |               Enim.
42 |             </a>
43 |           </div>
44 |         </div>
45 |         <div className="flex items-center">
46 |           <div className="hidden py-1 text-right xl:inline-block">
47 |             <a
48 |               className="mt-2 inline-flex items-center px-12 py-3 text-lg font-semibold tracking-tighter text-black"
49 |               href="/"
50 |             >
51 |               Log in
52 |             </a>
53 |             <a
54 |               className="bg-blue mt-2 inline-flex items-center px-8 py-3 text-lg font-semibold tracking-tighter text-white"
55 |               href="/"
56 |             >
57 |               Request a demo
58 |             </a>
59 |           </div>
60 |           <button className="pr-12 pl-4">
61 |             <svg
62 |               className="mr-auto inline-block text-black xl:hidden"
63 |               width="33"
64 |               height="50"
65 |               viewBox="0 0 23 30"
66 |               fill="none"
67 |               xmlns="http://www.w3.org/2000/svg"
68 |             >
69 |               <path
70 |                 d="M0.892578 10.8691H22.1058"
71 |                 stroke="black"
72 |                 strokeLinecap="square"
73 |                 strokeLinejoin="round"
74 |               />
75 |               <path
76 |                 d="M0.892578 18.8691H22.1058"
77 |                 stroke="black"
78 |                 strokeLinecap="square"
79 |                 strokeLinejoin="round"
80 |               />
81 |               <path
82 |                 d="M22.1066 14.8688H0.893399"
83 |                 stroke="black"
84 |                 strokeLinecap="square"
85 |                 strokeLinejoin="round"
86 |               />
87 |             </svg>
88 |           </button>
89 |         </div>
90 |       </div>
91 |     </>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-img-element */
  2 | /* eslint-disable @next/next/no-html-link-for-pages */
  3 | 
  4 | export default function Main() {
  5 |   return (
  6 |     <div className="grotesk max-w-8xl mx-auto">
  7 |       <section className="w-full text-black">
  8 |         <div className="max-w-8xl mx-auto inline-block items-center p-3 pt-0 lg:flex lg:flex-wrap lg:pt-4">
  9 |           <div className="lg:w-3/6">
 10 |             <h2 className="max-w-xl lg:text-[4.2em] text-3xl font-bold leading-none text-black inline-block">
 11 |               Vel quis feugiat pharetra diam.
 12 |             </h2>
 13 | 
 14 |             <p className="mt-6 max-w-2xl text-xl font-semibold text-[#404040]">
 15 |               Lorem ipsum urna, consectetur adipiscing elit. Urna risus
 16 |               hendrerit dignissim duis fringilla sit. Lacus porttitor neque
 17 |               ipsum.
 18 |             </p>
 19 |           </div>
 20 |           <div className="mb-20 mt-44 hidden w-full flex-col lg:mt-12 lg:inline-block lg:w-3/6">
 21 |             <img src="/images/placeholder.png" alt="Hero" />
 22 |           </div>
 23 |           <div className="my-20 inline-block w-full flex-col lg:mt-0 lg:hidden lg:w-2/5">
 24 |             <img src="/images/placeholder.png" alt="image" />
 25 |           </div>
 26 |         </div>
 27 |         <div className="mt-0 bg-white lg:mt-40">
 28 |           <div className="mx-auto">
 29 |             <div className="mx-auto px-5 py-24 lg:px-24">
 30 |               <div className="my-10 flex w-full flex-col text-center">
 31 |                 <h2 className="mb-5 text-2xl font-bold text-black lg:text-3xl">
 32 |                   In ullamcorper magna nunc, non molestie augue feugiat eget.
 33 |                 </h2>
 34 |               </div>
 35 |               <div
 36 |                 className="
 37 |                 grid grid-cols-2
 38 |                 gap-16
 39 |                 text-center
 40 |                 lg:grid-cols-6"
 41 |               >
 42 |                 <div className="hidden items-center justify-center lg:inline-block">
 43 |                   <img
 44 |                     src="/images/segment.png"
 45 |                     alt="Segment"
 46 |                     className="block h-24 object-contain"
 47 |                   />
 48 |                 </div>
 49 |                 <div className="hidden items-center justify-center lg:inline-block">
 50 |                   <img
 51 |                     src="/images/segment.png"
 52 |                     alt="Segment"
 53 |                     className="block h-24 object-contain"
 54 |                   />
 55 |                 </div>
 56 |                 <div className="flex items-center justify-center">
 57 |                   <img
 58 |                     src="/images/segment.png"
 59 |                     alt="Segment"
 60 |                     className="block h-24 object-contain"
 61 |                   />
 62 |                 </div>
 63 |                 <div className="flex items-center justify-center">
 64 |                   <img
 65 |                     src="/images/segment.png"
 66 |                     alt="Segment"
 67 |                     className="block h-24 object-contain"
 68 |                   />
 69 |                 </div>
 70 |                 <div className="hidden items-center justify-center lg:inline-block">
 71 |                   <img
 72 |                     src="/images/segment.png"
 73 |                     alt="Segment"
 74 |                     className="block h-24 object-contain"
 75 |                   />
 76 |                 </div>
 77 |                 <div className="hidden items-center justify-center lg:inline-block">
 78 |                   <img
 79 |                     src="/images/segment.png"
 80 |                     alt="Segment"
 81 |                     className="block h-24 object-contain"
 82 |                   />
 83 |                 </div>
 84 |               </div>
 85 |               <div className="my-12 flex w-full flex-col pl-8 text-center">
 86 |                 <a
 87 |                   href="/"
 88 |                   className="
 89 |                   underline-blue
 90 |                   mb-8
 91 |                   mt-6
 92 |                   text-xl
 93 |                   font-bold
 94 |                   text-black
 95 |                 "
 96 |                 >
 97 |                   Ut eleifend.
 98 |                 </a>
 99 |               </div>
100 |             </div>
101 |           </div>
102 |           <div className="text-black">
103 |             <div
104 |               className="
105 |               max-w-9xl
106 |               mx-auto
107 |               flex
108 |               flex-col
109 |               items-center
110 |               justify-center
111 |               px-5
112 |             "
113 |             >
114 |               <div className="mr-0 mb-6 w-full py-4 text-center lg:w-2/3">
115 |                 <h2 className="mb-4 text-4xl font-bold sm:text-5xl">
116 |                   Sem enim cursus orci at.
117 |                 </h2>
118 |                 <p className="mb-4 text-lg leading-relaxed">
119 |                   In ullamcorper magna nunc, non molestie augue feugiat eget.
120 |                   Mauris, vitae et, vitae et cursus amet tincidunt feugiat
121 |                   nulla. Senectus maecenas diam risus sodales dictum eu. Eget
122 |                   cursus sit bibendum pulvinar faucibus vitae nam sed. Faucibus
123 |                   vel laoreet.
124 |                 </p>
125 |                 <a href="/" className="underline-blue font-semibold">
126 |                   Learn more
127 |                 </a>
128 |               </div>
129 |               <img
130 |                 className="
131 |                 lg:w-5/7
132 |                 mb-40
133 |                 hidden
134 |                 w-5/6
135 |                 rounded object-cover
136 |                 object-center
137 |                 lg:inline-block 
138 |                 lg:w-4/6
139 |               "
140 |                 src="/images/placeholder.png"
141 |                 alt="img"
142 |               />
143 | 
144 |               <img
145 |                 className="
146 |               mb-24
147 |               inline-block
148 |               w-5/6
149 |               rounded
150 |               object-cover object-center
151 |               lg:hidden
152 |               lg:w-4/6 
153 |             "
154 |                 src="/images/placeholder.png"
155 |                 alt="img"
156 |               />
157 |             </div>
158 |           </div>
159 |         </div>
160 |         <div className="mx-auto px-5 pt-32 pb-24 lg:px-24">
161 |           <div className="my-3 flex w-full flex-col text-left lg:text-center">
162 |             <h2 className="bold mb-8 text-4xl font-bold leading-tight text-black lg:text-6xl">
163 |               Lorem ipsum elit sit unar,{" "}
164 |               <br className="hidden lg:inline-block" />
165 |               consectetur adipiscing elit.
166 |             </h2>
167 |           </div>
168 |           <div className="flex w-full flex-col text-left lg:text-center">
169 |             <h3 className="text-2xl text-black">
170 |               Lorem ipsum arcu, consectetur adipiscing elit. Viverra elementum
171 |               pellentesque <br className="hidden lg:inline-block" />
172 |               tortor, luctus blandit sed dolor et, semper. Posuere vitae vitae,
173 |               ac mus. Arcu quis feugiat.
174 |             </h3>
175 |           </div>
176 |           <div className="flex w-full flex-row justify-center pt-24 text-center">
177 |             <a
178 |               href="/"
179 |               className="underline-blue px-8 text-xl font-semibold text-black"
180 |             >
181 |               Ut eleifend.
182 |             </a>
183 |             <a
184 |               href="/"
185 |               className="underline-gray px-6 text-xl font-semibold text-gray-700"
186 |             >
187 |               Tempus in.
188 |             </a>
189 |           </div>
190 |         </div>
191 |         <div className="invisible mx-auto flex max-w-6xl p-3 pb-32 lg:visible lg:px-2">
192 |           <img src="/images/placeholder.png" alt="img" />
193 |         </div>
194 |         <div className="bg-white text-black">
195 |           <div className="mx-auto flex flex-col items-center px-5 pt-56 lg:flex-row">
196 |             <div className="mb-16 flex flex-col text-left lg:mb-0 lg:w-1/2 lg:flex-grow lg:items-start lg:pr-16 lg:pr-6">
197 |               <h2 className="mb-4 text-4xl font-bold leading-none sm:text-5xl">
198 |                 Bibendum tortor et sit convallis nec morbi.
199 |               </h2>
200 |               <p className="font-3xl mb-8 font-semibold leading-relaxed">
201 |                 Lorem ipsum auctor sit amet, consectetur adipiscing elit. Sit a
202 |                 egestas tortor viverra nisl, in non. Neque viverra sollicitudin
203 |                 amet volutpat auctor amet. Aliquam pellentesque condimentum
204 |                 mauris sit tincidunt egestas ullamcorper sit.{" "}
205 |               </p>
206 |             </div>
207 |             <div className="lg:w-full lg:max-w-2xl">
208 |               <img src="/images/placeholder.png" alt="img" />
209 |             </div>
210 |           </div>
211 |           <div className="mt-32">
212 |             <div className="mx-auto flex flex-col px-5 py-24 text-left lg:flex-row">
213 |               <div className="hidden lg:inline-block lg:w-full lg:max-w-xl">
214 |                 <img src="/images/placeholder.png" alt="img" />
215 |               </div>
216 |               <div className="flex flex-col pt-0 text-left lg:w-1/2 lg:flex-grow lg:items-start lg:pl-16 lg:pl-24 lg:pt-24">
217 |                 <h2 className="mb-4 text-4xl font-bold leading-none sm:text-5xl">
218 |                   Eu diam in magna blandit sit magna dolor proin velit.
219 |                 </h2>
220 |                 <p className="mb-8 font-semibold leading-relaxed text-black">
221 |                   Lorem ipsum ac neque, consectetur adipiscing elit. Nibh neque,
222 |                   ut purus donec sed donec semper ac vestibulum. Mi urna,
223 |                   facilisis arcu, auctor elit. Ut nunc non aenean netus ut.
224 |                 </p>
225 |               </div>
226 |               <div className="inline-block lg:hidden lg:w-full lg:max-w-xl">
227 |                 <img src="/images/placeholder.png" alt="img" />
228 |               </div>
229 |             </div>
230 |           </div>
231 |           <div className="my-24 p-4 text-black">
232 |             <div className="max-w-9xl mx-auto flex flex-col items-center bg-gradient-to-r from-blue-200 to-blue-100 px-5 py-24 lg:flex-row">
233 |               <div className="flex flex-col items-center pb-16 pl-0 text-center lg:mb-0 lg:w-1/2 lg:flex-grow lg:items-start lg:pl-12 lg:pr-24 lg:text-left">
234 |                 <h2 className="pb-4 text-2xl font-bold leading-tight lg:text-4xl">
235 |                   Lorem ipsum mi at amet, consecteturadipiscing elit. Mattis.
236 |                 </h2>
237 |                 <p className="text-md mb-8 lg:text-xl">
238 |                   Lorem ipsum praesent amet, consectetur adipiscing elit. Cursus
239 |                   ullamcorper id tristique tincidunt. Tincidunt feugiat at mi
240 |                   feugiat hendrerit. Ac faucibus accumsan, quis lacus, lectus
241 |                   eget bibendum. At praesent quisque sollicitudin fusce.
242 |                 </p>
243 |               </div>
244 |               <div className="w-4/7 pr-12 lg:w-2/5">
245 |                 <img
246 |                   src="/images/placeholder.png"
247 |                   className="hidden object-cover object-center lg:inline-block"
248 |                   alt="image"
249 |                 />
250 |                 <img
251 |                   src="/images/placeholder.png"
252 |                   className="inline-block object-cover object-center lg:hidden"
253 |                   alt="image"
254 |                 />
255 |               </div>
256 |             </div>
257 |           </div>
258 |           <div className="mx-auto">
259 |             <div className="max-w-8xl mx-auto px-5 py-24 lg:px-24">
260 |               <div className="my-6 flex w-full flex-col text-left lg:text-center">
261 |                 <h3 className="mb-8 text-5xl font-bold text-black">
262 |                   Dui tellus quis magna id ultricies eu sed.
263 |                 </h3>
264 |                 <h3 className="mb-12 px-0 text-lg font-semibold text-gray-900 lg:px-52">
265 |                   Lorem ipsum accumsan arcu, consectetur adipiscing elit.
266 |                   Aliquet vestibulum molestie amet, maecenas id amet. Ipsum
267 |                   accumsan arcu, aenean viverra penatibus quis. Laoreet.
268 |                 </h3>
269 |               </div>
270 |               <img src="/images/placeholder.png" alt="img" />
271 |             </div>
272 |           </div>
273 |           <div className="text-black">
274 |             <div className="max-w-8xl mx-auto flex flex-col px-5 py-48 text-black lg:flex-row">
275 |               <div className="lg:mb-0 lg:w-full lg:max-w-xl">
276 |                 <img
277 |                   className="rounded object-cover object-center"
278 |                   alt="image"
279 |                   src="/images/placeholder1.png"
280 |                 />
281 |               </div>
282 |               <div className="items-left flex flex-col pt-16 text-left lg:w-1/2 lg:flex-grow lg:items-start lg:pl-32 lg:pl-48 lg:text-left">
283 |                 <h2 className="mb-2 text-lg leading-tight text-gray-700 sm:text-lg">
284 |                   Viverra enim diam gravida risus nisl.
285 |                 </h2>
286 |                 <h2 className="mb-6 text-lg font-bold sm:text-lg">
287 |                   Lectus eu.
288 |                 </h2>
289 |                 <h2 className="mb-4 text-3xl font-bold sm:text-3xl">
290 |                   Lorem ipsum accumsan arcu, consectetur adipiscing elit. Sed
291 |                   eget enim vel.
292 |                 </h2>
293 |                 <a
294 |                   href="/"
295 |                   className="underline-blue mt-12 text-lg font-bold leading-relaxed"
296 |                 >
297 |                   Ut convallis massa.
298 |                 </a>
299 |               </div>
300 |             </div>
301 |           </div>
302 |         </div>
303 |       </section>
304 |     </div>
305 |   );
306 | }
307 | 


--------------------------------------------------------------------------------
/img/nine4-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/r1/nine4-4/82657986cae4e0c320ad6399e0e21e656ccab1f6/img/nine4-4.png


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nine4-4",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "12.0.2",
13 |     "react": "17.0.2",
14 |     "react-dom": "17.0.2"
15 |   },
16 |   "devDependencies": {
17 |     "autoprefixer": "^10.4.4",
18 |     "eslint": "7.32.0",
19 |     "eslint-config-next": "12.0.2",
20 |     "postcss": "^8.4.12",
21 |     "prettier": "^2.6.0",
22 |     "prettier-plugin-tailwindcss": "^0.1.8",
23 |     "tailwindcss": "^3.0.23"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import 'tailwindcss/tailwind.css'
3 | 
4 | function MyApp({ Component, pageProps }) {
5 |   return <Component {...pageProps} />
6 | }
7 | 
8 | export default MyApp
9 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import Header from "../components/Header";
 3 | import Layout from "../components/Layout";
 4 | import Footer from "../components/Footer";
 5 | 
 6 | export default function Home() {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>NINE4</title>
11 |         <meta name="description" content="Generated by create next app" />
12 |         <link rel="icon" href="/favicon.ico" />
13 |       </Head>
14 |       <Header />
15 |       <Layout />
16 |       <Footer />
17 |     </>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/r1/nine4-4/82657986cae4e0c320ad6399e0e21e656ccab1f6/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/placeholder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/r1/nine4-4/82657986cae4e0c320ad6399e0e21e656ccab1f6/public/images/placeholder.png


--------------------------------------------------------------------------------
/public/images/placeholder1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/r1/nine4-4/82657986cae4e0c320ad6399e0e21e656ccab1f6/public/images/placeholder1.png


--------------------------------------------------------------------------------
/public/images/segment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/r1/nine4-4/82657986cae4e0c320ad6399e0e21e656ccab1f6/public/images/segment.png


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap");
 2 | 
 3 | body {
 4 |   background-color: #ffffff;
 5 |   overflow-x: hidden;
 6 |   font-family: "Space Grotesk", sans-serif;
 7 | }
 8 | 
 9 | .svg_main {
10 |   width: 100%;
11 |   height: 100%;
12 | }
13 | 
14 | .text-xxl {
15 |   font-size: 4.8em;
16 | }
17 | 
18 | .bg-purple {
19 |   background-color: #1b263a;
20 | }
21 | 
22 | .bg-blue {
23 |   background-color: #134ae9;
24 | }
25 | 
26 | .bg-gray {
27 |   background-color: #f9fbfb;
28 | }
29 | 
30 | .Grotesk {
31 |   font-family: "Space Grotesk", sans-serif;
32 | }
33 | 
34 | .underline-blue {
35 |   text-decoration: underline;
36 |   text-decoration-color: #134ae9;
37 |   text-decoration-thickness: 2px;
38 |   text-underline-position: under;
39 | }
40 | 
41 | .underline-white {
42 |   text-decoration: underline;
43 |   text-decoration-color: #fff;
44 |   text-decoration-thickness: 2px;
45 |   text-underline-position: under;
46 | }
47 | 
48 | .underline-gray {
49 |   text-decoration: underline;
50 |   text-decoration-color: #adadad;
51 |   text-decoration-thickness: 2px;
52 |   text-underline-position: under;
53 | }
54 | 
55 | .max-w-8xl {
56 |   max-width: 90rem;
57 | }
58 | 
59 | .max-w-9xl {
60 |   max-width: 110rem;
61 | }
62 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./pages/**/*.{js,ts,jsx,tsx}",
 4 |     "./components/**/*.{js,ts,jsx,tsx}",
 5 |   ],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   variants: {
10 |     extend: {},
11 |   },
12 |   plugins: [],
13 | };
14 | 


--------------------------------------------------------------------------------