Shuto MindArc Frontend Assessment

mindarc-frontend-assessment/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

mindarc-frontend-assessment/comps/Card.js

@@ -0,0 +1,26 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const Card = ({ bodyText }) => {
+    return (
+        <div className="card h-100">
+            <div className="card-image">
+                <Image src="http://via.placeholder.com/400x300.png" layout="fill" objectFit="cover" alt="Card image" />
+            </div>
+            <div className="card-body my-3 text-center">
+                <p className="card-text text-sans">
+                    {bodyText}
+                </p>
+            </div>
+            <div className="card-body text-center mt-auto d-flex flex-column align-items-center">
+                <Link href="#" ariaLabel="Card link">
+                    <a className="mt-auto btn btn-lg">
+                        Read More
+                    </a>
+                </Link>
+            </div>
+        </div>
+    );
+}
+
+export default Card;

mindarc-frontend-assessment/comps/Footer.js

@@ -0,0 +1,20 @@
+import Link from "next/link"
+
+const Footer = () => {
+    return (
+        <footer className="mt-auto text-center">
+            <div className="inner">
+                <p className="m-0">
+                    Frontend assessment for MindArc by &nbsp;
+                    <Link href="https://github.com/Shuto46490802" ariaLabel="My Github page">
+                        <a className="footer-link">
+                            <span className="footer-link-text">@Shuto Suganuma</span>
+                        </a>
+                    </Link>
+                </p>
+            </div>
+        </footer>
+    );
+}
+
+export default Footer;

mindarc-frontend-assessment/comps/Intro.js

@@ -0,0 +1,27 @@
+import Image from "next/image"
+
+const Intro = () => {
+
+    return (
+        <section className="hero">
+            <div className="hero-image is-desktop">
+                <figure className="fig__wrapper">
+                    <Image src="https://via.placeholder.com/1920x650.png" layout="fill" objectFit="cover" alt="Desktop hero image" />
+                </figure>
+            </div>
+            <div className="hero-image is-mobile">
+                <figure className="fig__wrapper">
+                    <Image src="https://via.placeholder.com/600x600.png" layout="fill" objectFit="cover" alt="Mobile hero image" />
+                </figure>
+            </div>
+            <div className="hero-overlay w-100 h-100 d-flex align-items-center text-center">
+                <div className="hero-content mx-auto">
+                    <h1>Hello Developer!</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default Intro;

mindarc-frontend-assessment/data.json

@@ -0,0 +1,24 @@
+{
+  "data": [
+    {
+      "id": "1",
+      "title": "Section 1",
+      "content": "<p>Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.</p>"
+    },
+    {
+      "id": "2",
+      "title": "Section 2",
+      "content": "<p>Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.</p>"
+    },
+    {
+      "id": "3",
+      "title": "Section 3",
+      "content": "<p>Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul>"
+    },
+    {
+      "id": "4",
+      "title": "Section 4",
+      "content": "<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"
+    }
+  ]
+}

mindarc-frontend-assessment/next.config.js

@@ -0,0 +1,14 @@
+const withTM = require('next-transpile-modules')([
+  'gsap'
+])
+
+const withImages = require('next-images')
+
+module.exports = withTM(withImages({
+  images: {
+    domains: ["via.placeholder.com"],
+  },
+  webpack(config, options) {
+    return config
+  }
+}))