Skip to content

Commit c035191

Browse files
eric-crumperic-crump
committed
initial
0 parents  commit c035191

File tree

19 files changed

+5765
-0
lines changed

19 files changed

+5765
-0
lines changed

‎.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
node_modules
38+
.env
39+
.env
40+
.env copy
41+
.env
42+
.env
43+
.env main
44+
.env copy 2

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
To run the app locally:
2+
3+
npm i
4+
5+
npm start
6+
7+
Instructions provided via email. Contact [email protected] with any questions.

‎app/components/Footer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function Footer() {
2+
3+
{/* ----- EXAMPLE OF HARDCODED COMPONENT ----- */}
4+
return (
5+
<footer className="bg-white mt-8 px-6 py-12">
6+
<p className="text-center text-xs leading-5 text-gray-500">
7+
&copy; 2024 Contentstack Inc. All rights reserved.
8+
</p>
9+
</footer>
10+
);
11+
}

‎app/components/Hero.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export default function Hero({ content }) {
2+
return (
3+
<div className="bg-black">
4+
<div className="relative isolate overflow-hidden">
5+
6+
{/* ----- BACKGROUND IMAGE FROM CONTENTSTACK ----- */}
7+
<img src={content?.background_image?.url} className="absolute inset-0 -z-10 h-full w-full object-cover object-center opacity-75"/>
8+
<div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56 ">
9+
<div className="text-center">
10+
11+
{/* ----- HEADER & TEXT FROM CONTENTSTACK ----- */}
12+
<h5 className="text-5xl font-bold text-center tracking-widest text-white leading-relaxed" {...content?.$?.title}>
13+
{content.title}
14+
</h5>
15+
16+
<p className="mx-5 mt-8 font-normal text-lg leading-8 text-left text-white tracking-wide" {...content?.$?.text}>
17+
{content.text}
18+
</p>
19+
20+
<div className="mt-10 flex items-center justify-center gap-x-6">
21+
<button
22+
type="button"
23+
className="rounded-md px-8 py-4 text-md tracking-widest uppercase font-bold shadow-sm ring-1 ring-inset ring-gray-300 text-gray-700 bg-gray-50 hover:text-white hover:bg-gray-700 hover:ring-0"
24+
{...content?.cta.$?.title}
25+
>
26+
{content.cta.title}
27+
</button>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
);
34+
}

‎app/components/ImageGallery.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default function ImageGallery({ content }) {
2+
return (
3+
<div className="max-w-7xl mx-auto mt-8 mb-8 px-8">
4+
<div className="flex flex-col md:grid md:grid-cols-2 lg:grid-cols-3 gap-8 auto-rows-fr">
5+
6+
{/* ----- ITTERATING OVER ARRAY OF IMAGES COMING FROM CONTENTSTACK ----- */}
7+
{content.gallery_item.map((item, index) => (
8+
<div key={index} className="relative">
9+
<a href={item.page.length > 0 ? item.page[0].url : "#"}>
10+
<div className="bg-cover bg-bottom aspect-h-1 aspect-w-1 flex items-center justify-center" {...item?.$?.image}>
11+
<img src={item.image.url} className="object-cover" />
12+
</div>
13+
</a>
14+
<p className="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900" {...item?.$?.header}>
15+
{item.header}
16+
</p>
17+
</div>
18+
))}
19+
</div>
20+
</div>
21+
);
22+
}

‎app/components/NavBar.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
"use client";
2+
import { useState, useEffect } from "react";
3+
import Stack, { onEntryChange } from "../../lib/index";
4+
import { Dialog } from "@headlessui/react";
5+
import {
6+
Bars3Icon,
7+
XMarkIcon,
8+
InformationCircleIcon,
9+
} from "@heroicons/react/24/outline";
10+
11+
export default function NavBar() {
12+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
13+
const [entry, setEntry] = useState({});
14+
const [loading, SetLoading] = useState(true);
15+
16+
const getContent = async () => {
17+
const entry = await Stack.getElementByTypeWtihRefs(
18+
"menu",
19+
[""]
20+
);
21+
console.log("header:", entry[0][0]);
22+
setEntry(entry[0][0]);
23+
SetLoading(false);
24+
};
25+
26+
useEffect(() => {
27+
onEntryChange(getContent);
28+
}, []);
29+
30+
if (loading) {
31+
return;
32+
}
33+
34+
return (
35+
<header className="bg-white shadow-md">
36+
<nav className="flex items-center justify-between p-6 lg:px-8">
37+
<div className="flex lg:flex-1">
38+
<a href="/" className="-m-1.5 p-1.5">
39+
40+
{/* ----- LOGO IMAGE SERVED FROM CONTENTSTACK ----- */}
41+
<img
42+
className="h-8 w-auto"
43+
src={entry?.logo?.url}
44+
alt=""
45+
{...entry?.$?.logo}
46+
/>
47+
48+
</a>
49+
</div>
50+
<div className="flex lg:hidden">
51+
<button
52+
type="button" className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
53+
onClick={() => setMobileMenuOpen(true)}
54+
>
55+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
56+
</button>
57+
</div>
58+
<div className="hidden lg:flex lg:gap-x-12">
59+
60+
{/* ----- ITTERATE OVER ARRAY FROM CONTENTSTACK ----- */}
61+
{entry.menu_items?.map((item) => (
62+
<a
63+
key={item.menu_item.title}
64+
href={item.menu_item.href}
65+
className="text-sm font-semibold leading-6 text-gray-900"
66+
{...item?.menu_item?.$?.title}
67+
>
68+
{item.menu_item.title}
69+
</a>
70+
))}
71+
72+
</div>
73+
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
74+
<a
75+
href="https://www.contentstack.com/docs/developers"
76+
target="__blank"
77+
>
78+
<InformationCircleIcon
79+
className="h-6 w-6 flex-none text-neutral-800"
80+
/>
81+
</a>
82+
</div>
83+
</nav>
84+
<Dialog
85+
as="div"
86+
className="lg:hidden"
87+
open={mobileMenuOpen}
88+
onClose={setMobileMenuOpen}
89+
>
90+
<div className="fixed inset-0 z-10" />
91+
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
92+
<div className="flex items-center justify-between">
93+
94+
{/* ----- LOGO FROM CONTENTSTACK FOR MOBILE MENU ----- */}
95+
<a href="#" className="-m-1.5 p-1.5">
96+
<img className="h-8 w-auto" src={entry?.logo?.url} alt="" />
97+
</a>
98+
<button
99+
type="button"
100+
className="-m-2.5 rounded-md p-2.5 text-gray-700"
101+
onClick={() => setMobileMenuOpen(false)}
102+
>
103+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
104+
</button>
105+
</div>
106+
<div className="mt-6 flow-root">
107+
<div className="-my-6 ">
108+
<div className="space-y-2 py-6">
109+
110+
{/* ----- ITTERATE OVER ARRAY FROM CONTENTSTACK FOR MOBILE MENU ----- */}
111+
{entry?.menu_item?.map((item) => (
112+
<a
113+
key={item.title}
114+
href={item.href}
115+
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
116+
{...item?.$?.title}
117+
>
118+
{item.title}
119+
</a>
120+
))}
121+
<a
122+
key={"docs"}
123+
href="https://www.contentstack.com/docs/developers"
124+
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
125+
>
126+
Documentation
127+
</a>
128+
</div>
129+
</div>
130+
</div>
131+
</Dialog.Panel>
132+
</Dialog>
133+
</header>
134+
);
135+
}

‎app/components/TextBlock.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
GlobeEuropeAfricaIcon,
3+
SunIcon,
4+
CurrencyEuroIcon,
5+
} from "@heroicons/react/20/solid";
6+
7+
export default function TextBlock({ content }) {
8+
function icon() {
9+
if (content.icon == "Globe") {
10+
return (
11+
<GlobeEuropeAfricaIcon
12+
className="h-10 w-10 flex-none text-cyan-600"
13+
aria-hidden="true"
14+
{...content?.$?.icon}
15+
/>
16+
);
17+
} else if (content.icon == "Sun") {
18+
return (
19+
<SunIcon
20+
className="h-10 w-10 flex-none text-cyan-600"
21+
aria-hidden="true"
22+
{...content?.$?.icon}
23+
/>
24+
);
25+
} else if (content.icon == "Euro") {
26+
return (
27+
<CurrencyEuroIcon
28+
className="h-10 w-10 flex-none text-cyan-600"
29+
aria-hidden="true"
30+
{...content?.$?.icon}
31+
/>
32+
);
33+
} else if (content.icon == "None") {
34+
return <></>;
35+
}
36+
}
37+
38+
return (
39+
<div className="bg-white">
40+
<div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
41+
<div className="mx-auto max-w-2xl text-center">
42+
<dt className="flex items-center gap-x-3 text-base font-semibold text-gray-900 justify-center">
43+
{/* ----- ICON COMING FROM SELECT MENU IN CONTENTSTACK ----- */}
44+
{icon()}
45+
</dt>
46+
47+
<h5
48+
className="mt-8 text-2xl font-bold text-center tracking-widest text-neutral-700"
49+
{...content?.$?.header}
50+
>
51+
{content.header}
52+
</h5>
53+
54+
<p
55+
className="mx-5 mt-8 font-normal text-left leading-8 text-gray-700 text-block whitespace-pre-line"
56+
{...content?.$?.text}
57+
>
58+
{content.multi}
59+
</p>
60+
61+
<div className="mt-10 flex items-center justify-center gap-x-6">
62+
<button
63+
type="button"
64+
className="rounded-md px-8 py-4 text-md tracking-widest uppercase font-bold text-cyan-600 shadow-sm ring-2 ring-inset ring-cyan-600 hover:text-white hover:bg-cyan-600"
65+
{...content?.cta[0].$?.title}
66+
>
67+
<a href={content.cta[0].href}>{content.cta[0].title}</a>
68+
</button>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
);
74+
}

‎app/globals.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎app/layout.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Inter } from "next/font/google";
2+
import "./globals.css";
3+
4+
5+
const inter = Inter({ subsets: ["latin"] });
6+
7+
export const metadata = {
8+
title: "Contentstack Dev Starter",
9+
// description: "Generated by create next app",
10+
icons: [{rel: 'icon', url: '/favicon.ico'}]
11+
};
12+
13+
export default function RootLayout({ children }) {
14+
return (
15+
<html lang="en">
16+
<body className={inter.className}>{children}</body>
17+
</html>
18+
);
19+
}

0 commit comments

Comments
 (0)