diff --git a/docs/data.json b/docs/data.json index e80c665..089df63 100644 --- a/docs/data.json +++ b/docs/data.json @@ -6,7 +6,10 @@ "companyName": "Scale", "screenshotPath": "screenshots/Scale.jpeg", "tags": [ - "startup" + "startup", + "bootstrap", + "technology", + "software" ], "stack": "React", "timeToPageLoad": 439 diff --git a/next-site/next.config.mjs b/next-site/next.config.mjs index 4678774..f65300b 100644 --- a/next-site/next.config.mjs +++ b/next-site/next.config.mjs @@ -1,4 +1,17 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + + + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'raw.githubusercontent.com', + port: '', + + }, + ], + }, + } export default nextConfig; diff --git a/next-site/package-lock.json b/next-site/package-lock.json index 0938d8a..4647e1e 100644 --- a/next-site/package-lock.json +++ b/next-site/package-lock.json @@ -8,6 +8,11 @@ "name": "next-site", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@fortawesome/free-regular-svg-icons": "^6.5.1", + "@fortawesome/free-solid-svg-icons": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", "next": "14.1.3", "react": "^18", "react-dom": "^18" @@ -30,6 +35,75 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz", + "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz", + "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", + "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1079,7 +1153,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -1308,6 +1381,16 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -1351,6 +1434,11 @@ "react": "^18.2.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/next-site/package.json b/next-site/package.json index 54189de..04559e0 100644 --- a/next-site/package.json +++ b/next-site/package.json @@ -9,9 +9,14 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@fortawesome/free-regular-svg-icons": "^6.5.1", + "@fortawesome/free-solid-svg-icons": "^6.5.1", + "@fortawesome/react-fontawesome": "^0.2.0", + "next": "14.1.3", "react": "^18", - "react-dom": "^18", - "next": "14.1.3" + "react-dom": "^18" }, "devDependencies": { "autoprefixer": "^10.0.1", diff --git a/next-site/public/panoramic.png b/next-site/public/panoramic.png new file mode 100644 index 0000000..25939d9 Binary files /dev/null and b/next-site/public/panoramic.png differ diff --git a/next-site/src/app/layout.js b/next-site/src/app/layout.js index 9aef1df..fdd608d 100644 --- a/next-site/src/app/layout.js +++ b/next-site/src/app/layout.js @@ -1,7 +1,12 @@ -import { Inter } from "next/font/google"; +import { Roboto } from "next/font/google"; import "./globals.css"; +import { config } from '@fortawesome/fontawesome-svg-core'; +import '@fortawesome/fontawesome-svg-core/styles.css'; -const inter = Inter({ subsets: ["latin"] }); +const roboto = Roboto({ + subsets: ["latin"], + weight: ["100", "300", "400", "500", "700", "900"], +}); export const metadata = { title: "Create Next App", @@ -11,7 +16,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - {children} + {children} ); } diff --git a/next-site/src/app/page.js b/next-site/src/app/page.js index c9b26e0..a79b506 100644 --- a/next-site/src/app/page.js +++ b/next-site/src/app/page.js @@ -1,113 +1,67 @@ -import Image from "next/image"; +'use client' +import Image from 'next/image'; +import { useEffect, useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faReact } from '@fortawesome/free-brands-svg-icons' +import { faClock } from '@fortawesome/free-regular-svg-icons' +import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'; -export default function Home() { - return ( -
-
-

- Get started by editing  - src/app/page.js -

-
- - By{" "} - Vercel Logo - +function Card({ item }) { + return ( +
+
+
+ {item.title} +
+ +

{item.companyName}

+
+

{item.stack}

+

{item.timeToPageLoad}ms

+
+
+ + {item.tags.map((tag, index) => ( +

{"#" + tag.charAt(0).toUpperCase() + tag.slice(1)}

+ ))} +
+ +
-
+ ); +} -
- Next.js Logo -
+export default function Home() { + const [data, setData] = useState([]); -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

-
+ useEffect(() => { + const fetchData = async () => { + const res = await fetch('https://raw.githubusercontent.com/maxontech/landing-page-design-examples/master/docs/data.json'); + const data = await res.json(); + setData(data); + }; - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

-
+ fetchData(); + }, []); - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

-
+ return ( +
+
- -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

-
-
-
- ); -} + + + {data.map((item, index) => ( + + + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/next-site/src/app/xpage.js b/next-site/src/app/xpage.js new file mode 100644 index 0000000..5b26631 --- /dev/null +++ b/next-site/src/app/xpage.js @@ -0,0 +1,33 @@ +'use client' +import Image from 'next/image'; +import path from 'path'; +import { useEffect, useState } from 'react'; + +export default function Home() { + const [data, setData] = useState([]); + + useEffect(() => { + const fetchData = async () => { + const res = await fetch('https://raw.githubusercontent.com/maxontech/landing-page-design-examples/master/docs/data.json'); + const data = await res.json(); + setData(data); + console.log(data); + }; + + fetchData(); + }, []); + + return ( +
+
+ SCale +
+

Hello as das das das das

+
+ ); +} \ No newline at end of file diff --git a/next-site/tailwind.config.js b/next-site/tailwind.config.js index 7980350..27cfb7d 100644 --- a/next-site/tailwind.config.js +++ b/next-site/tailwind.config.js @@ -3,10 +3,13 @@ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}" ], theme: { extend: { + fontFamily: { + sans: ["var(--font-inter)"] + }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic":