Skip to content

Commit

Permalink
Update layout styles and content for the homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sebstep
Sebstep committed Oct 10, 2023
1 parent 5b8152a commit d3b6c05
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 31 deletions.
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function RootLayout({
</head>
<body className={inter.className}>
<Navigation />
<main className="mx-auto mt-16 mb-32">{children}</main>
<main className="mx-auto mt-14 sm:mt-16 mb-32">{children}</main>
<Footer />
</body>
</html>
Expand Down
142 changes: 115 additions & 27 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Grid from "@mui/material/Grid";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { GiWizardStaff, GiBorderedShield, GiBroadsword } from "react-icons/gi";
import InstitutionLogos from "@/components/Institutionlogos";
import Box from "@mui/material/Box";

export default function Home() {
return (
Expand All @@ -17,10 +19,11 @@ export default function Home() {
<div className="flex flex-col md:flex-row items-center">
<div className="md:w-1/2 mb-8">
<h1 className="text-5xl font-semibold mb-4">
Welcome to Our Website
Welcome to the Pathfinder Project
</h1>
<p className="text-lg mb-6">
We provide top-notch services to help your business succeed.
We provide insights and best practices for using AI in
education.
</p>
<Button variant="contained" color="primary" href="#">
Get Started
Expand All @@ -42,8 +45,9 @@ export default function Home() {
<section className="bg-gray-100 py-16">
<Container>
<h2 className="text-3xl font-semibold text-center mb-10">
Our Features
Meet the Pathfinders
</h2>

<Grid container spacing={3} justifyContent="center">
<Grid item xs={12} sm={6} md={4}>
<Card className="h-full flex flex-col">
Expand All @@ -52,8 +56,14 @@ export default function Home() {
SAGE <GiWizardStaff className="inline" />
</Typography>
<p>Strategies for AI-Guided Education</p>
<Button variant="outlined" color="primary" size="small" href="#" className="top-2">
Get Started
<Button
variant="outlined"
color="primary"
size="small"
href="#sage"
className="top-2"
>
Read more
</Button>
</CardContent>
</Card>
Expand All @@ -67,8 +77,14 @@ export default function Home() {
<p>
Generative Universal Assistant for Resourceful Development
</p>
<Button variant="outlined" color="primary" size="small" href="/guard" className="top-2">
Get Started
<Button
variant="outlined"
color="primary"
size="small"
href="#guard"
className="top-2"
>
Read more
</Button>
</CardContent>
</Card>
Expand All @@ -83,8 +99,14 @@ export default function Home() {
AI Readiness Training for Insightful Systematic Adaptation
and Navigation
</p>
<Button variant="outlined" color="primary" size="small" href="#" className="top-2">
Get Started
<Button
variant="outlined"
color="primary"
size="small"
href="#artisan"
className="top-2"
>
Read more
</Button>
</CardContent>
</Card>
Expand All @@ -93,8 +115,61 @@ export default function Home() {
</Container>
</section>

{/* Experimental */}
<div className="grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-3 lg:text-left px-12">
<Link
href="/sage"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className="mb-3 text-2xl font-semibold">
SAGE{" "}
<span className="inline-block transition-transform group-hover:translate-x-2 motion-reduce:transform-none">
<GiWizardStaff />
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Strategies for AI-Guided Education.
</p>
</Link>
<Link
href="/guard"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className="mb-3 text-2xl font-semibold">
GUARD{" "}
<span className="inline-block transition-transform group-hover:translate-x-2 motion-reduce:transform-none">
<GiBorderedShield />
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Generative Universal Assistant for Resourceful Development.
</p>
</Link>
<Link
href="/artisan"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className="mb-3 text-2xl font-semibold">
ARTISAN{" "}
<span className="inline-block transition-transform group-hover:translate-x-2 motion-reduce:transform-none">
<GiBroadsword />
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
AI Readiness Training for Insightful Systematic Adaptation and
Navigation.
</p>
</Link>
</div>

{/* <!-- About Section --> */}
<section id="about" className="py-12">
<section id="about" className="py-12 bg-gray-300">
<div className="container mx-auto text-center">
<h2 className="text-3xl font-semibold mb-4">About Us</h2>
<p className="text-lg mb-8">
Expand All @@ -110,6 +185,30 @@ export default function Home() {
</div>
</section>

{/* SAGE Section */}
<section id="sage" className="py-12">
<div className="container mx-auto">
<h2 className="text-3xl font-semibold mb-4 text-center">SAGE</h2>
<p>Test</p>
</div>
</section>

{/* GUARD Section */}
<section id="guard" className="py-12">
<div className="container mx-auto">
<h2 className="text-3xl font-semibold mb-4 text-center">GUARD</h2>
<p>Test</p>
</div>
</section>

{/* ARTISAN Section */}
<section id="artisan" className="py-12">
<div className="container mx-auto">
<h2 className="text-3xl font-semibold mb-4 text-center">ARTISAN</h2>
<p>Test</p>
</div>
</section>

{/* <!-- Contact Section --> */}
<section id="contact" className="bg-gray-200 py-12">
<div className="container mx-auto text-center">
Expand All @@ -120,8 +219,13 @@ export default function Home() {
{/* <!-- Add your contact form or contact information here --> */}
</div>
</section>
</div>

{/* <!-- Institution Logos --> */}
<section className="bg-gray-300 py-12">
<InstitutionLogos />
{/* TODO: Insert Erasmus Logo here */}
</section>
</div>

// <div>
// <div>
Expand Down Expand Up @@ -228,22 +332,6 @@ export default function Home() {
// </p>
// </a>

// <a
// href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
// className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
// target="_blank"
// rel="noopener noreferrer"
// >
// <h2 className={`mb-3 text-2xl font-semibold`}>
// Deploy{' '}
// <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
// -&gt;
// </span>
// </h2>
// <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
// Instantly deploy your Next.js site to a shareable URL with Vercel.
// </p>
// </a>
// </div>
// </main>
);
Expand Down
26 changes: 26 additions & 0 deletions components/Institutionlogos.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// components/InstitutionLogos.js
import React from "react";
import Image from "next/image";

export default function InstitutionLogos() {
return (
<section className="">
<h2 className="text-3xl font-semibold text-center mb-6">Participating Institutions</h2>
<div className="flex flex-wrap justify-center items-center">
{/* Replace the paths with the actual paths to your institution logos */}
<div className="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 p-4 bg-yellow-400">
{/* <Image src="/institution1.png" alt="Institution 1" className="mx-auto" /> */}
</div>
<div className="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 p-4 bg-red-400">
{/* <Image src="/institution2.png" alt="Institution 2" className="mx-auto" /> */}
</div>
<div className="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 p-4 bg-blue-400">
{/* <Image src="/institution3.png" alt="Institution 3" className="mx-auto" /> */}
</div>
<div className="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/6 p-4 bg-lime-400">
{/* <Image src="/institution4.png" alt="Institution 4" className="mx-auto" /> */}
</div>
</div>
</section>
);
}
6 changes: 3 additions & 3 deletions components/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function ResponsiveAppBar() {
variant="h6"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
href="/"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
Expand All @@ -58,7 +58,7 @@ function ResponsiveAppBar() {
textDecoration: 'none',
}}
>
LOGO
PATHFINDER
</Typography>

<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
Expand Down Expand Up @@ -102,7 +102,7 @@ function ResponsiveAppBar() {
variant="h5"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
href="/"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
Expand Down

0 comments on commit d3b6c05

Please sign in to comment.