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 (
<>
-
+
>
);
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
+
+
-
- - Image
+
+
-
+
-
- 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 (
+
+
+
+ );
}