diff --git a/public/showcase1.png b/public/showcase1.png new file mode 100644 index 00000000..e87c5dc0 Binary files /dev/null and b/public/showcase1.png differ diff --git a/public/showcase2.png b/public/showcase2.png new file mode 100644 index 00000000..d0c49e16 Binary files /dev/null and b/public/showcase2.png differ diff --git a/src/app/components/DiracLogo.tsx b/src/app/components/DiracLogo.tsx index aa33a28a..5444f7c0 100644 --- a/src/app/components/DiracLogo.tsx +++ b/src/app/components/DiracLogo.tsx @@ -9,7 +9,7 @@ export function DiracLogo() { return ( <> - DIRAC logo + DIRAC logo ); diff --git a/src/app/components/ShowcaseAppBar.tsx b/src/app/components/ShowcaseAppBar.tsx index 11eb9535..f7e075c7 100644 --- a/src/app/components/ShowcaseAppBar.tsx +++ b/src/app/components/ShowcaseAppBar.tsx @@ -11,6 +11,7 @@ import { DiracLogo } from "./DiracLogo"; import { LoginButton } from "./LoginButton"; import { Stack } from "@mui/material"; import { DashboardButton } from "./DashboardButton"; +import Image from "next/image"; /** * Controls the response due to a scrolling @@ -37,10 +38,8 @@ function ElevationScroll(props: Props) { */ export default function ShowcaseAppBar(props: Props) { const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", - ...theme.typography.body2, - padding: theme.spacing(1), - color: theme.palette.text.secondary, + padding: theme.spacing(6), + elevation: 0, })); return ( @@ -69,40 +68,35 @@ export default function ShowcaseAppBar(props: Props) { - + - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, - dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta - ac consectetur ac, vestibulum at eros. Praesent commodo cursus - magna, vel scelerisque nisl consectetur et. Cras mattis consectetur - purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, - egestas eget quam. Morbi leo risus, porta ac consectetur ac, - vestibulum at eros. Praesent commodo cursus magna, vel scelerisque - nisl consectetur et. Cras mattis consectetur purus sit amet - fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget - quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + The DIRAC interware is a software framework that enables communities + to interact with distributed computing resources. DIRAC forms a + layer between users and resources, hiding diversities across + computing and storage resources. - - Image + + DIRAC logo - - Image + + DIRAC logo - + - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, - dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta - ac consectetur ac, vestibulum at eros. Praesent commodo cursus - magna, vel scelerisque nisl consectetur et. Cras mattis consectetur - purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, - egestas eget quam. Morbi leo risus, porta ac consectetur ac, - vestibulum at eros. Praesent commodo cursus magna, vel scelerisque - nisl consectetur et. Cras mattis consectetur purus sit amet - fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget - quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. + DIRAC has been adopted by several HEP and non-HEP experiments + communities, with different goals, intents, resources and workflows: + it is experiment agnostic, extensible, and flexible. diff --git a/src/app/page.tsx b/src/app/page.tsx index ed1690de..4adeb2b4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,14 @@ import ShowcaseAppBar from "./components/ShowcaseAppBar"; +const containerStyles = { + marginLeft: "30%", + marginRight: "30%", +}; + export default function Page() { - return ; + return ( +
+ +
+ ); }